Improve Your Credit Card Form UX

Nick Babich
Feb 24, 2016 · 5 min read

If you’re selling something online, you know it’s not the easiest thing to do. You need to find a customer, present your product in a good light, drive her through a process full of forms and finally collect her money. The last step in the process — the credit card payment form — is especially challenging.

The Baymard Institute lists the average shopping cart abandonment rate is over 68%. And the number one reason shoppers abandon their carts? The checkout process.

Minimizing the feeling of risk and avoiding confusion — that’s what you’re aiming at when designing a credit card form. And in this post I’ll review a few tips for credit card forms that will help you achieve the goal.

1. Ask for essentials only

Any question you ask people in a Web form requires them to parse it, formulate a response, and then input their answer in the affordance you have provided on the form. Being vigilant about every question you ask allows you to remove questions that are not absolutely necessary, or can be asked at a better time or place, or can be inferred automatically. And the fewer questions you ask, the better the odds are of people completing your forms quickly and easily.

You should ask the information you absolutely need to process the sale.

Credit Card Type

  • Visa: first digit is “4”
  • MasterCard: first digits is a “5” and second digit is “1”, “2”, “3”, “4” or “5”.
  • American Express: first digit is a “3” and second digit is “4” or “7”.
  • Diners Club: first digit is a “3” and second digit is “6” or “8”.
  • Japan Credit Bureau (JCB): first digit is a “3” and second digit is a “5”.
  • Discover: card number begins with “6011” or “65”.

What does all this mean for your online form?

You don’t need to ask the user what type of card they are using, have the form detect it automatically.

In the example below, you can see that Visa is highlighted after the user entered in the first digits, which are used for this type of card.

City and State

2. Tell User What Went Wrong

If your users encounter an error, the first thing you should do is tell them what triggered the error. Form should automatically notify user of an error if the input doesn’t match the requirements.

Symantec Billing Information form

To visually indicate an error, you should highlight the input field containing the error with red color (to track user attention).

Client-side Validation

Client-side error

These are following validation criterias for client-side errors:

  • All input data (except Card Holder’s Name and ZIP code) must contain numbers only (i.e. no letters or special characters)
  • Card Number: Length must be 16 numbers (15 for American Express), must begin with one of the four known card codes.
  • Expiry date: Length must be 2 numbers for month, and 2 for the year (i.e. MMYY).
  • Security code: Length must be 3 numbers if Visa/MasterCard/Diners Club, or 4 numbers for American Express.
  • ZIP code (for US): Length must be minimum 5 characters, maximum 10 characters.

Server-side Validation

Service-side error

These are two major groups for server-side errors:

  • System errors: when there is a problem with the your or remote server (e.g. 504 Gateway error)
  • Card errors: when a user’s credit card has been declined by the payment provider (When a card is declined this could be a fraud attempt).

In the case of a system error, you should leave the fields populated so that a user can retry the payment. When a card is declined you should clear the data entered by the user and set a time out for the next entering attempt.

3. Use Input Masks

Additionally, it allows you to consolidate several pieces of information into a single input field, which is especially helpful on mobile:

4. Offer Card Scanning Options

Uber Credit Card Scanner option

5. Save Credit Card Information

Amazon tries to help their customers to go through the process as quickly as possible.

Nick Babich

Written by

Editor-in-chief of UX Planet (https://uxplanet.org). http://babich.biz