Credit Card Field

Rishi Rawat Blog Posts 4 Comments

On a credit card digits are shown in this format– XXXX XXXX XXXX XXXX

However, when I make a purchase online the credit card field is a simple text box.  Because all 16 digits appear as one block it’s hard to double-check digits by looking at the credit card.  I’ve never seen a site that displays digits exactly as they appear on the card.  Then I discovered

On moment you complete entering credit card digits extra spacing is automatically inserted.  This makes it much easier to verify digits with the card.

Comments 4

  1. I agree, this is a great idea that will reduce frequent card entry errors, but some logic would need to be included that would decipher between if the card is a (Visa, M/C, Disc) or an Amex, which has a different format. For Amex only the numbers would need to be displayed in a 4-6-5 digit pattern instead of a 4-4-4 pattern as follows:


    Since all Amex numbers begin with a number 3, the logic could easily adjust based on that entry. Great find and thanks for posting.

    1. Post

      Hi Patrick,

      Good point. It would be best (I suppose) to add a field above “card number” that asks visitors to identify card type. Then, based on card type text field format could adjust.


      1. Hi Rishi. That would work as well since most checkout payment steps already have a pull-down option anyway for credit card type it probably is the best way to go. I would think that this is typically the user action that triggers the applicable card validation required and could create the field formatting suggestion you have made. I have wondered if adding that extra user step to choose a card type first is really needed although in this case it makes sense?

  2. Post

Leave a Reply

Your email address will not be published. Required fields are marked *

The maximum upload file size: 50 MB.
You can upload: image, audio, video, document, spreadsheet, interactive, text, archive, code, other.
Links to YouTube, Facebook, Twitter and other services inserted in the comment text will be automatically embedded.