Checkout Payment Form Patterns

What’s out there, why does it suck so bad?

Craig Sullivan
Aug 13, 2015 · 4 min read

Payment Pages and Forms really suck! Despite the maturity of many online businesses, approaches vary hugely and concrete test results are hard to find for study.

These are areas that we all feel we should run tests on, but never seem to get around to them. This is the friction inherent in any optimisation work — that the desire to test an area isn’t always met by rapid execution.

With Payment Pages, there is sensitivity about security, sometimes real or sometimes imaginary. More commonly, there is reluctance to tweak, modify or change what is seen as mission critical payment code — the pages which channel the ‘money’.

Sometimes these forms are seen as ‘scary’ or ‘inflexible’ or ‘don’t touch that stuff’ kinda projects — but reskinning can help much as an overhaul sometimes delivers. Don’t be scared to experiment with the copy, errors and other page elements, even if this rest is hard to change.

When optimising forms generally — it’s not always about the form elements you think are causing abandonment — it might turn out to be copy, error messages, small interactions or gnarly fields. That’s why incremental or small testable changes are better than large scale expensive redesigns in many cases — the payback arrives earlier and in a compounded way, each time you fix or improve something.

I’d love to see more tests on payment page forms and pages. As with most ‘Best Practice’ or ‘Winning AB tests’ — remember that they’re meaningless without the CONTEXT of your users, THEIR brains intersected with YOUR product. What works on another site has no guarantee of doing the same on yours.

There’s some really good research and reading here (see resources below) but I’d say the majority of the thinking on payment pages stems from UX research rather than lots of random thinking (there’s some of that).

That’s good because it’s drawn from at least some observations of real people and not just 100% pure opinion and ego.

There’s one problem though — anyone telling you the ‘fix’ for that ‘problem’ is stating an opinion, a hypothesis. Spotting things that happened is easy — predicting what happens with a new thing is much harder!

“I cannot give any scientist of any age better advice than this: the intensity of a conviction that a hypothesis is true has no bearing over whether it is true or not.”

The fact that “It’s on an article on the Internets” is no guarantee that (a) it worked (b) it actually exists or (c) ever was a real product. There may be no data either. Do you feel Lucky, Punk?

Image for post
Image for post

One classic of an observation taken to be an axiom is the “Trust Badges and Security Seals Increase Conversion” hypothesis.

It’s easy to say that these graphics increase conversion when you’ve run one AB test but which trust badges are we talking about? With which audiences? Do they know them? Will that work in my Country? Where were they on the page?

Some anecdotal research, a few questions at the usability lab or some discussion amongst your colleagues — does not an axiom make. Your hunch, guess, idea — is yet to be tempered against the cruel anvil of actual traffic.

But what about those articles that said the opposite — that “Trust Badges and Security Seals” decrease conversion?. Now someone argues that reminding people with lots of security stuff can put them off on the payment page!


None of this s*** will predict what happens with you. No opinions, articles, best practices or guesses from your colleagues can possibly predict exactly what will happen.

My personal feeling is that used carefully and without dominating the visual hierarchy, trust badges that are recognised by the audience can increase conversion. Much depends on location, prominence, size, contrast, copy and recognition — so pointless to try and make a rule of this. Test it.

So — with my warning that “Patterns are good slaves but bad masters”, let us cover the key attributes of the ‘Best in Breed’.

In this series, I take a piece of gnarly interaction and study everything I can lay my hands on. For this article, I got to look at over 50 checkout payment pages, countless crappy articles and a few good ones. I can smell regurgitated listicles at 50 paces.

So this isn’t a magic guide — it’s my gestalt or ‘summary’ of what I’ve spotted, read, absorbed, assimilated, augmented and tweaked. It’s not a guarantee nor is it a final design.

I’m going to start with a Checklist for Payment Forms Optimisation and then give you some Downloadable Wireframes you can hack away at.

This should give you the raw materials and key inspection areas to fix, optimise or replace your sub optimal payment shizzle.

We’ll now cover the critical elements in the payment form for success.

Read Part Two — “10 Critical Elements of Checkout Payment”

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store