Request: Standardise credit card number format across viewing and editing

Suggestion / Requested Feature

Change the BitWarden Vault new / editing Credit Card form to use an input mask (or similar concept) so that when adding / editing a credit card number, it will add imaginary spaces between each block of 4 digits, so that as the user literally types “1234567890”… this is displayed as they type as: “1234 5678 90”…

Current Situation

  • Currently when entering / editing a credit card number, the correct way to enter it the number is to type only the numbers, e.g. literally type 1234567812345678.
  • If this is done, then when viewing the credit card number, it will display as 4x blocks of 4-digits - e.g. 1234 5678 1234 5678.
  • However, when entering / editing a credit card number this formatting is not shown and the credit card number to edit will be shown visually as 1234567812345678 (a single 16-digit number).

Disadvantages of current situation

  • As there is no formatting of the number when it is entered / edited, this can make it more difficult to read and check.
  • Also, to make the number easier to read/check when typing, users may be implicitly tempted to type the credit card number with spaces – however (AFAIK) the spaces are stored as part of the number meaning this then causes the number typed in as “1234 5678 1234 5678” to be displayed after saving as “1234 567 8 12 34 5 678”.

Advantages of proposed change

  • This will mean when adding, viewing or editing a credit card number, it is always shown in blocks of 4-digits.
  • This will also improve data quality as spaces or other separation characters will be less likely to be entered and stored as part of the credit card number.
  • [Optional enhancement]: The form could strip out spaces/other characters when saving.

Notes

This feature was initially suggested in response to a [at-the-time] believed bug that was causing the credit card number not to display correctly: Credit Card number display format issue · Issue #6177 · bitwarden/clients · GitHub

1 Like

Bear in mind, there are some cards that don’t use this format, e.g. Amex: XXXX XXXXXX XXXXX

Hi @danmullen,

Yeah I did think about that but didn’t want to over-complicate the initial request by specifying out every card number format variation. You are totally right though!

Assuming the feature is enhanced to cover all card types, while this would of course require some additional effort this should be fairly manageable – i.e. AFAIK the first 2 digits of most C/Cs are used for the card type.

In the case of American Express, all AMEX cards start either 34 or 37, so there would just need to be an extra step in the logic – something along the lines of…

:grey_question:Have 2+ digits been entered?.. If so, check if they are 34 or 37?
:white_check_mark: If so, use input mask “XXXX XXXXXX XXXXX”
:x: Else, use input mask “XXXX XXXX XXXX XXXX”

I know most cards are XXXX XXXX XXXX XXXX, and as your rightly pointed out there is the ‘AMEX’ format too. Hopefully that covers most/all cases, but there may be 1-2 other masks to factor in, if there are any other C/C number formats.

1 Like