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 thoughts on “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.

    • 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

      • 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

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s