🚧 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.

3 Likes

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

2 Likes

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
4 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.

2 Likes

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 Like

+1 I think it would be super useful as well

1 Like

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

3 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…

2 Likes

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.

5 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.

4 Likes

I wouldn’t mind tackling this on mobile if it’s not on the roadmap. The original logic has already been implemented and I’d like to see it on mobile as well.

I’d be following this as a guide to select the list of existing card types listed in BW.

Are there any concerns about adding it to mobile?

@jamespfluger - welcome to the forum!

Please refer to instructions in the pinned post in the Pull Request forum:

The group of 4 isn’t displayed when entering the number in the edit view, is this intentional? That’s one of the places where it would be the most useful.

3 Likes

In desktop app, credit cards are formatted as 4x4, as in, 4 sets of four numbers, which is easy to read.

On mobile however (Android) the credit card numbers are formatted as 1x16 characters, making it hard to track as I attempt to copy the numbers on something like a TV screen with a console plugged in it.

It feels like it could be a setting I’m missing but I can’t find anything.

2 Likes

What is the plan to implement this on mobile?

1 Like