Improve Your Credit Card Form UX
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
Luke Wroblewski in his great book “Web Forms: Filling The Blanks” stated:
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
Credit card type can be deduced from the card number. The first digits of a card number identifies the organisation that issued the card. For the purposes of online payment, you currently mostly only need to use the first two digits to work out what type of credit card the user has, as follows:
- 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
As an extra security measure, you could ask customers for the ZIP code associated with their card. But don’t ask the city and state —they can easily be populated with ZIP Code information.
2. Tell User What Went Wrong
When something goes wrong, it’s helpful to know exactly what happened. But if you aren’t explicit about the error (e.g. “Some fields are incorrect”), your users are going to have a hard time figuring out how to fix it.
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.
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 errors are caught before a request is sent to to the server (before user pressed Submit button). These errors are typically caused by formatting errors in the data, or missing data.
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
Server-side errors are caught after a request is sent to the server (after user pressed Submit button).
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
Input masks help limit what can be input into a field, based on the information you’re trying to acquire. One of my favorites is the single-field credit card input form first presented by Luke Wroblewski
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
Apple released a scanner feature with iOS8 — the feature enables you to use the iPhone’s camera to scan your credit-card number when prompted by a website during ecommerce transactions. Companies like Uber are using PayPal’s scanning feature to make adding payments easier for customers.
5. Save Credit Card Information
Amazon knows that typing in a credit card number each time you want to purchase something is an obstacle, so they ask you to “add your card” to the account, so you can make a purchase with just one click.
