🚧 Display credit card numbers in groups of 4

Credit card numbers are shown as one long string of numbers, which make them difficult to read.
It would be beneficial for UX if the numbers were grouped.

MasterCard and Visa (number starts with 5 or 4) are usually four groups of four numbers.

Noted!

And more than you ever cared to know about PAN/Bank Card numbering:

2 Likes

Yeah, this would be great feature. Everytime I write card number from phone (eg. when using friend’s computer), it’s hard to read. 4 digits in 4 groups would be awesome.

Thanks

1 Like

Format Credit Card Numbers

  • When entering XXXXYYYYZZZZAAAA should be formatted to: XXXX YYYY ZZZZ AAAA (note the spaces, or use dashes, doesn’t matter). Ideally it should format them as you type it.

Feature function

  • What benefits will this feature bring? - The ability to visually read them significantly easier
3 Likes

Feature name

Separate blocks of digits when displaying credit/debit card numbers for easier reading

Feature function

Display credit numbers so they are more easily readable. Physical cards make this easy by grouping digits into blocks. Bitwarden does not.

i.e. instead of 1234567812345678 show this as 1234 5678 1234 5678

Like many I use Bitwarden to store some card numbers. Dozens of times a day when passing security at a bank or making a cardholder not present transaction I need to read these numbers out.

Related topics + references

See any physical card for details.

Yep think this would be a great feature. Would go nicely with Credit card type logos as icons in trying to make the whole card management component a bit slicker :+1:

+1 I think it would be super useful as well

Belatedly I support this too - having made a similar request!

Just a note, I’m sure the team is aware, whilst most credit cards are 4x4 digits, Amex is different in that it’s 4, 6, 5. I think their numbers all start with 3xxx

2 Likes

Agreed. It gets frustrating when you are trying to read the numbers out over the phone and you have to mentally divide the numbers. Right now I have to copy the number to Notepad and then insert spaces between the numbers so I can read it without comingling the numbers…

1 Like

Hi All, I’ve opened the following PR linked here. This is my first attempt at it and I think covers all the brands Bitwarden has supported now.

4 Likes

Thanks @AmGarera!

cc @eliykat @djsmith85

2 Likes

Closing this now, as it has been implemented.

PR’s:
https://github.com/bitwarden/jslib/pull/590
https://github.com/bitwarden/clients/pull/2247
https://github.com/bitwarden/clients/pull/2527

@nathanhleung and @AmGarera thank you for your time and contributions.

4 Likes

Re-opening this per a valid point from @Ayitaka:

The display of grouped card numbers has not been implemented on mobile yet.

This will be brought up to product management, as we aim to have feature parity across all clients.

In the meantime, this is up for grabs for the community if someone feels they’d like to tackle this.

3 Likes