What I know about designing credit card forms

Credit card forms are pretty simple to make when you first think about it. For many online stores, you plug yourself into PayPal and your done. For other people, you plug your shopping cart into your processor, and you accept the defaults. Maybe someone comes along and adds a custom design, rearranging things a bit, but overall, they don't change much. After all, the checkout process is pretty simple. It's set in stone. A credit card form is simple. People are used to it, they know what to enter. Credit card forms are simple, common place, and boring.

Checkout my credit card form

The truth is, credit card forms are far from common place, they are far from simple, and while you might consider them boring, a checkout process, and by it's nature, the credit card entry form, can actually be very, very interesting.  I should know.  I've spent the last 8 years working with them, and every step of the way, I've attempted to learn more about how to make them as easy as possible.  With that much experience, let me make something clear: the credit card page is the do or die page.  It's the page where a user will either make a purchase, or fail.  Your job is to get make it as easy as possible to make that transaction.  Every error you present to the user is another chance that user will decide it's not worth his time and energy to make a purchase at your site.

Too many sites make the credit card form just another form.  They provide basic error checking, but let's be honest, the credit card form is where everything matters.  Capture that information, and you can make money.  Fail, and you can't process anything.  It doesn't matter what you do.  So much effort is put into the shopping cart, in shopping, in the front page, in the privacy settings, in the product pages, in everything else we do.  But at the end of the shopping cart experience, or when the user is about to make a membership purchase, the credit card page is all that stands before them and the final purchase.  You want that person to make that purchase.  It's the only way you can get paid.

Don't believe me? How many people get to your purchase page and bail out?  How many get there, get some sort of error, and fail to finish the transaction?  What is your most common error? Do you email the user after failing to submit a credit card?  How long does it take to complete your checkout or purchase process?  How many attempts does a user make before making a successful transaction? How many do they make before not attempting? How many failed transactions do users make if they don't make any errors?

These are all questions that are important to online retailers.  These all provide vital clues in how people are making purchases online.  However, I don't think people put too much weight into looking at numbers like this.  After all, what's so important about how long it takes to complete a purchase?

Time is vital.

Time allows the person to second guess their purchase.  It allows for other things to distract the user from making the purchase.  Take too long, make the process too cumbersome, and the might not make the transaction at all.  Numbers are important here.  Find out how long the average user takes to complete a purchase after they start the checkout process.  From start to completion.  Getting this information lets you know how fast or how slow your form is.  Speeding up the process will increase sales.  Cutting even a minute off the purchase means the user has less time to decide against the purchase.  He makes the purchase, and it's done, and he's happy.  No more questions, no more concerns.

What about errors?

Common errors are a problem.  Common errors are a failure on your part to correct mistakes for the user.  Should your users suffer because of a typo?  But what kind of common errors could you fix?

Phone numbers.  Phone numbers are a major problem.  When I was developing my credit card processing system, we were doing telephone authentication long before PayPal and others got on board.  The problem is, on a world wide scale, making sure phone numbers are correct can be difficult.  After all, we had a single call center making all the calls at the time, so the calls were made from the New York area.  Now, for Americans, it was pretty simple to make sure the phone number was correct.  However, most people over in Europe or other parts of the world weren't entering in phone numbers that could be used to call them from New York.  They were entering local numbers.  I remember spending some long hours reading up on phone numbers and creating a system that would automatically fix their phone numbers, entering in proper country codes, recoding them if necessary, and basically modifying the number they entered to ensure that we could make the call.

Sure, I could have thrown an error and told them they had to enter the phone number correctly.  In some ways I did them.  I had some helpful information providing country codes in a nice little pop-up window.  But since I had the information anyways, I could just automate the fix for them.

Emails were another issue.  user@examplecom is not a valid email address, but user@example.com is.  It wasn't uncommon that I would get com without the dot, and fixing that proved to be helpful.

Keep in mind that each of these errors were, at some point, errors that stopped a user from purchasing.  Often times they weren't the only error, but they were an error.

A really easy fix was removing the credit card type selection.  This was done early on.  After all, I could easily figure out the type of card by the credit card number entered.  Selecting the card was useless for me.  It was an extra step I forced upon the user.  Even worse was when the user would enter in one credit card number and not change the credit card type.

Asking for the credit card name was another problem.  It might seem simple that you ask for the name on the credit card, but you'd be surprised at the number of places that require a first and last name.  Even worse, some gateways would request the first name and last name rather than as a whole name, while others wanted the full name on the card. The quick and easy solution is to ask for the first name and last name, and combine them as needed.  The problem here is the user needs to enter in his middle name, or middle initial.  Even worse is that with two fields, the person will probably have to click his mouse into the next field, taking even more time to fill in the form.  Sure, tabbing works, but users usually don't tab through a form.  But why even force them to tab?

One field: Name.  If you need to split the first and last name, simply split it along the space.  If they enter in a middle initial or a middle name, you can detect that and store it as needed.  Essentially, you are given more information to work with, and can still provide all the needed information.

The CVV2 is another major problem, though thankfully people are used to it by now.  However, it's still something people need to enter.  I found that letting people know about this number and where to find it was best done based on the type of credit card they were entering as well as providing multiple locations to show where the number was.

First, I'd have a little image, about the size of the text box itself, next to the input box, that showed a small credit card with a little circle where the number was.  I also had a nice little "What is this?" link next to that.  The user could click, and a small pop-up would appear beside the input area.  The image was different depending on the type of card, and we tired our best to pin-point where the number could be found.  Some cards have 4 digits followed by 3 digits.  The 3 digits are in fact the CVV2 or security code, but the previous 4 are part of the credit card number.  Usually the last 4 numbers.  Sometimes a user would try to enter those 4 numbers along with the other 3.  We had set our CVV2 space to a maximum length, but eventually noticed the problem.  We allowed the user to enter in more numbers, and just made sure to remove the numbers we didn't need.  Again, why bother the user with providing us with 100% accurate information.  If they give use more than we need, we can always strip out the excess.

Email first

While not directly related to the credit card, the email address is something every online e-commerce system is going to collect.  Without a doubt, it's the way to communicate.  What I'm about to suggest might be something that some people might consider to be underhanded, but used correctly, it can provide value to your customers, increase sales, and help solve problems you might know ever existed.

I'm talking about moving the email address up to top of the form.  Make it the first piece of information that is requested.  As soon as the user finishes entering his email address and moves on, a quick ajax call to the back-end stores the email address next to the purchase information.  This is where it can get shady.  You don't want to spam the user, but you do want to assist the user in getting what they want.  If the user fails his purchase for whatever reason however, you know have a means by which to follow up with that user.  Even if the purchase isn't successful because the form is never submitted successfully.  Let's say even if the user starts to fill out a form, and then stops half-way through for whatever reason, you now have a means to follow up.

One thing you can do is provide the user with an incentive to complete the purchase.  Emailing the customer  with a different price let us capture even more purchases than previously.  Knocking off 20-30% of the price helped encourage the user to come back and complete the purchase.  We were also able to use the time the user was going to make the transaction as an indication of when the user was available.  I felt it was safe to assume that if the user was browsing at 3 PM and was going to make a purchase, emailing him the next day around the same time asking if everything was okay wasn't a bad idea.

What do you really need

Credit card forms are simply complex beasts.  They are where you either make money or you don't.  While it might not appear that any of these suggestion alone will seriously increase your profits, together, and over time, they will help.  Of course, this requires you to keep track.  Every transaction, every error, every piece of data.  Knowing what people do, how people use it, what information they get wrong, what information they are entering, all of this is vital.  You might be surprised at how many little improvements you can make that, in the long run, help increase how much money you make.

To figure out what you need to do, you really need to track everything.  Once you fix the problems, you need to track the places where the transaction would have failed if you hadn't made the changes you did.  This is good because it not only provides you with a direct view into what you are doing right, but it also makes you feel good.

With all that said, this is just the tip of the ice berg when it comes to designing and developing for e-commerce systems.  But I really think these are the fundamentals.  If you aren't tracking, if you aren't correcting, if you aren't taking the basic steps now, you can't move forward.