We first launched our own shopping cart for Detailed Image in 2007. In the time since the credit card form has gone largely untouched. Each time we did a design refresh we’d make sure it still worked and looked good, and we’ve upgraded the back-end portion of our credit card processing, but the front-end checkout form that customers use to submit payment information has always been the same.
In part, this was because it got the job done. But it’s also easy to ignore: we ourselves rarely use that portion of the site, if a customer has their card rejected or runs into an issue odds are they are just going to abandon their cart instead of contacting us, and it’s hard to justify putting programming and design resources towards something that isn’t going to be a big boost in revenue.
That said, frustrating customers at the very last step of the checkout process is not good business. We’ve already done all of the hard work to get them to that point. It’s a shame when you let them down with a sub-optimal experience just before finishing their purchase. There were plenty of customers who we lost over the years because of this. Statistically speaking, they were always a small percentage of attempted checkouts, however that number of effectively guaranteed customers that we lost over the past decade is certainly not insignificant.
Here’s what the form looked like last month before we started this project:
And here’s what it looked like when you submitted it blank or had any type of error:
That form was well below our quality standards. We set out to improve it the same way we improve everything else: by mixing the best practices of other e-commerce sites while keeping the look and feel familiar enough for our regular customers. After researching, developing, and launching this project, I think it’s quite possible to delight your customers during this very last critical step of checking out. The best forms look simple but under the hood they intelligently react to your actions to provide shortcuts and feedback that make the process fast, simple, and foolproof.
Remove Unnecessary Fields
Here’s what the new form looks like:
The first thing you’ll notice is that the First Name, Last Name, and Card Type fields are gone. In studying good credit card forms, I found that many didn’t have a name field. We already collect their billing information in an earlier step so asking for it again seemed redundant/unnecessary. The card type is gone because we now…
Detect Credit Card Type Automatically
Each issuing network has it’s own number range. A good resource for these is Wikipedia. For example, Visa cards always start with a 4 so when a customer enters a 4 it automatically highlights the Visa card:
Space Credit Card Number Automatically
When I’m shopping online I always double-check my credit card number before submitting. Sometimes checking a 15 or 16 digit string is visually challenging. To help prevent errors we space card numbers out to match what’s on their card. For example, here’s a Visa:
And here’s an American Express:
The form also works if you copy & paste your number with or without spaces.
Detect Security Code Type Automatically
We renamed the CVV to Security Code since that’s more accurate. We also clarify what the specific security code is for your card type, based upon the number that you type in. You’ll notice in the two images above that the text below the Security Code field for the Visa card is The 3 digits on the back of your card whereas for the AMEX it says The 4 digits on the front of your card. When you click the “See Example” link, the images are different as well:
Feel free to use these images for your own projects. I made them myself using this icon library for the card icons. The inspiration for both the text and images came from this excellent Medium article The anatomy of a credit card form.
Descriptive Error Messages
Unlike that vague Invalid information. Please try again error message from the old form, the new form is much more specific:
Three Ways To NOT Type Your Credit Card Number
Typing out a credit card number into a form is absolutely a barrier to making a purchase. Typing 16 digits, picking an expiration date, and entering a security code can take time. It’s really the last thing someone wants to do when they’re buying something they’re excited about. In addition, sometimes you don’t have your card readily available. Other times you’re shopping on your phone where it’s cumbersome to type. We wanted to do everything we could to remove any barriers like these so that checking out is as smooth and seamless as possible.
Our new form supports three different ways for customers to check out with their credit card without actually typing in their credit card information. These features become even more important as mobile shopping increases. Right now mobile conversions are lower than desktop for us and pretty much every other site out there.
Saved Credit Cards
If you look at any of the images above, you’ll notice a new field Save this card for future purchases. If that box is checked, the next time the customer returns to make a purchase we’ve already defaulted to that credit card so that they can checkout with a single click, particularly helpful on mobile:
We’re able to accomplish this feature without storing credit card numbers in our database by using a feature of PayPal’s API called Vault. PayPal stores the credit card information and provides us with an ID for that customer’s card that we can use to charge their card without ever seeing their credit card number.
Scan Credit Cards On Mobile
Both Chrome on Android and Safari on iOS support the ability to scan in your credit card number by taking a photo with your phone’s camera. When you move your cursor to the credit card number field you’ll see the option to “Scan new card” in Chrome or “Scan Credit Card” in Safari.
Chrome Autofill Support
For customers who use Chrome Autofill to save their credit card information to Google Chrome, we support that too:
I spent a lot of time researching this project. As is the case with most of our projects, there’s a gap between when we decide we want to do it and when we actually start working on it. We had this on our programming plan for at least 6 months. Over that time I saved any article I came across and then did another round of research before starting. These are some of the resources I found to be most helpful.
- Wikipedia article – Payment Card Number
- The anatomy of a credit card form
- ConversionXL – How to Design an eCommerce Checkout Flow That Converts
- ConversionXL – 7 Ways Form Accessibility Can Boost Conversions
- Smashing Magazine – Free PNG Credit Card, Debit Card and Payment Icons Set (18 Icons)
- MDN – HTML input autocomplete fields for credit cards
- Don’t forget the most obvious one: go to your favorite e-commerce site and play around with their credit card forms!