How to Preserve Credit Card Details on Form Errors

One of the most fragile parts of an e-commerce checkout is how you handle credit card details. Due to security requirements from VISA and MasterCard (PCI compliance), most e-commerce sites aren’t allowed to even temporarily store the customer’s credit card details on their server.

This means the credit card data can’t be reused later (or even immediately after the request) in the checkout process. So most e-commerce sites are forced to clear out the credit card fields on form errors, even if the error isn’t actually in the credit card details.

This is obviously very annoying to the customer. After all, credit card numbers are long, they have to be transcribed from a physical card, and it’s the point during checkout where the customer usually feels the most uneasy. The whole process is bothersome and prone to human mistakes.

So what can you do? There’s 2 solutions, other than of course seeking approval to store your customers credit cards (a complex and expensive process).

1) Dedicated Credit Card Step

When credit card details are the only thing being validated on form submit, the data only needs to be cleared if the card is declined. This is definitely better than nothing since the credit card data was likely wrong in the first place, so clearing it can be excused.

However, during our checkout usability study we found that people much preferred to correct their data, rather than having it cleared out completely. Another downside is that it adds another step to your checkout flow (no one-page checkouts).

This is a decent work-around, but it doesn’t truly solve the problem.

2) Submit the Form with AJAX

One of the perks of submitting forms with AJAX is that form data retention is given to you for free. So in the case of credit card details, they never disappear from the customer’s screen because the page isn’t reloaded. (In fact, you’d have to specifically program the form to clear out in order for that to happen.)

So the credit card fields stay intact on the customer’s end, and just as important: your servers still don’t store any credit card details. You’ve effectively managed to preserve the customer’s credit card data without adding any security overhead to your back-end.

This is particularly important for one-page checkouts where an empty required field or other form error would otherwise cause all credit card data to be cleared out – even if the credit card data itself is valid.

A simple upgrade for an existing system would be to simply submit the form with AJAX and then then redirect the customer to the next step as usual if the data is accepted. This means you won’t have to change too much in your existing system yet you get around clearing out the credit card fields.

A more substantial change would be to make your entire checkout run via AJAX (unobtrusively of course). Companies like Apple and AllPosters are doing this. It can speed up the checkout process significantly since you only load the page once, and nice visual transitions from one checkout step to the other can be implemented.

So there you have it. A couple of solutions to preserving the customer’s credit card details on form errors.