Credit Card Field

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 mcmaster.com

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

4 comment

4 Replies to “Credit Card Field”

  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:

    XXXX XXXXXX XXXXX

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

      Rishi

      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?

Leave a Reply

Required fields are marked *