The Sad State of Payment Buttons

Some of these are worse than others and one or two aren’t horrible, just awkward. So, let’s break it down…

Credit Cards

The old standard. All credit cards have what are known as ‘acceptance marks’. These are what you see on the sticker on the door of your favorite business in the real physical world. These little gems have been transformed into little buttons for e-commerce and because the old credit card companies were slow to react to this new world, they never really mandated any rules on these marks for digital. You’ll see all kinds around the web and there are often stylized versions. I’m sure this kills the brand folks at VISA, Mastercard, American Express and Discover but they were too late to the game.

Here are some examples from Amazon, Zappos, Rakuten, Simplify Commerce and Apple. Each one has the basics, but the style, shape, and size are different. The design teams have customized these to their site’s needs.

PayPal

I was a huge fan of PayPal early on. They were renegades before they got bought by eBay. They were the first widely used digital payment option and then they got stale and slow.

The buttons for PayPal are a damn mess–there’s no way around it. There are three distinct sets of official PayPal buttons at this time.

The old standard (still official) → options here

The new standard (I think, also official) → options here

and the even newer responsive option → details here

The good news is that it looks like PayPal is finally updating their un-responsive buttons with this last option. The problem is that this recent version has many limitations, the biggest of which is that bottom tagline under the button. It’s not something you can turn off (easily). If, and this is a big IF, PayPal improves on this recent responsive button tool and gives designers more flexibility then maybe we can use this in the future.

VISA Checkout

VISA has spent a ton of money marketing their digital product and the experience isn’t awful but it’s not any better than PayPal really. It still takes you outside the store and then drops you back in. The bigger issue with VISA Checkout is that the (UI) buttons are clearly designed by someone who has never worked on a checkout flow. Branding and visibility are the most important elements–everything else be damned. This double button shape doesn’t align easily with other elements on a page and it’s huge as well. When you stack it vertically with other buttons you end up with strange vertical spacing. Forget trying to use this one in a row.

The acceptance marks are actually pretty decent and have many options to choose from. These are at least workable.

My guess is that VISA paid a big agency a ton of money to work on that goofy button. They’ve now invested who knows how much in it, so it’s here to stay. That is, until a new Chief Design Officer comes in and changes the executive’s minds with their new vision. The documentation is → here if you care to learn more.

Apple Pay

Apple, running the usual Apple playbook, wasn’t the first to the party of digital payments. But, once again, they slide in and do an amazing job hitting all of the notes the other players miss. The Apple Pay (two words) buttons are fully responsive and come in three simple styles. The acceptance mark is clean and small. Apple has two major advantages. First, iPhone penetration is huge and it’s an economically strong audience. Second, the UX of Apple Pay is amazing. You click Apple Pay, the payment sheet pops up and you confirm with a finger print. Done. No leaving the site, no distractions, just pay and move on with life.

Full Apple interface guidelines are → here

Masterpass

Masterpass is very similar to VISA Checkout. They are kind of a mess and your first clue is that the UI guidelines are a PDF and not a code tool. Again, I think a big agency sold them on this and now they are stuck. It’s not as ugly as VISA’s but it’s no beauty either. It’s a standard shape at least.

AMEX Express Checkout

Once again we have a half-assed attempt at UI. AMEX won’t even let you see their UI guide without an account. I’ve been unable to secure one despite multiple attempts. You can try and learn more → here. The button is a monstrosity with a faux shadow and no responsive features. Is it a button, inside of a button, inside of a street sign? Is this the UI version of inception?

Amazon Pay

Amazon is running the e-commerce world ragged with their constant evolution. With 43% of all online sales, they have the process of collecting money down to a science. The look and feel of Amazon Pay is evolving and the documentation already looks out of date. What’s odd is that these new ones are not responsive. It almost seems like they wanted what VISA and masterpass have–ugly buttons with big branding. Gradients are hot, right?

Android Pay

Google tends to do things right and Android Pay is no different. They’ve crafted a clean set of buttons that fall in line with their material design philosophy. Of course, these are responsive. You can check out the documentation → here.

How did we get here and what’s coming

This mess was created by designers who were given bad direction from brands who are ignoring the end user. There are a lot of conflicting priorities, investments and bad design that have hamstrung designers trying to build a decent experience for checkout.

Bitcoin and other new payment forms are coming online all the time. I can’t predict which ones will get traction and which won’t. The users will determine what they want and we’ll deal.

How to make it better

Before you run into a dark corner and cry about how these buttons will never work in your beautiful design, take a deep breath. You don’t have to use what the payment brands provide. All of them (even Apple) will grant you some flexibility with how these buttons appear. If you need capsules that all look the same, try it.

Keep in mind, you will need approval from all issuers before you go live: they’ll review your designs, but don’t be afraid of trying something non-standard. Trust your gut and design what’s right for your audience.

Do bear in mind that there is a large amount of cash being spent to make these recognizable. I’m not suggesting you ignore the branding entirely: balance is the key, as usual, in good design.

Two examples. First is Adidas, they’ve got custom PayPal and Apple Pay buttons. These are not what either issuer suggests, but they’ve respectfully modified the buttons to match their UI and it all looks great. The other image is something I’m working on, where we’ve modified PayPal and Visa Checkout to match the Apple Pay button shape. This was done to create consistency among these ‘acceptance marks’ and minimize the chaos. This design was also approved by the payment issuers (but isn’t live yet). It can be done.

Let me know what you think in the comments, or if there’s a payment button I’ve missed!