The importance of payment gateway UX

During a recent Amazon Pay webinar I attended entitled Optimizing Your Mobile Checkout, I couldn’t help but notice their prioritization of credit card fields. This stuck out to me because I’ve observed all manner of credit card gateway user interfaces. Research data is telling us to pay particular attention to these fields.

Of the presenter’s top 10 recommendations, numbers 2, 3, and 4 all pertained to credit card fields.

Recommendation #1 was to have guest checkout available so users don’t have to log in or sign up first. This one isn’t related to credit card fields, but I had to mention it since the others immediately follow in priority order.

Recommendation #2 was to use mobile keyboard layouts. For example numbers pad for numerical fields, email, phone or URL compatible pad for those field types. Sample code: <input type="text" autocorrect="off">, <input type="text" pattern="d*">, <input type="email">, <input type="tel">, <input type="number">, <input type="month">

Recommendation #3 was to format credit card fields cleanly and automatically process extraneous fields (spaces, dashes).

Recommendation #4 was to format expiration date fields to match how they are written on the cards (MM and YY separated), for example not using drop-downs or requiring dashes or slashes.

If you’re interested in their other 6 recommendations, contact me! I’d be happy to pass the info along.

So this really says something to me about the importance of credit card fields. Phone and tablet devices for sure, but also for desktops. Consumers are rewarding easy to use eCommerce websites with better conversion rates.