The Sad State of Payment Buttons
It’s a damn mess and I have some theories on why
I’ve been doing design work in the finance space for a long time. This wasn’t something I set out to do, it just kind of happened. My first finance gig was for firstUSA–I made banner ads. Not a glamorous job, but occasionally we got a fun one. I did get to make banner ads for the Austin Powers VISA card.
“Grandma needs another credit card” – evil Art Director
I can’t find the banner ads to prove it, but here’s an image of one of the card designs. Insanity: it was the 90s. After this trial by fire, I worked for other financial institutions: CapitalOne, MBNA, Bank of America and maybe a few more. I lost track and thank goodness this wasn’t the only type of work I did.
Over the last few years, I’ve been on the brand side and e-commerce is a big part of a brand’s survival in this new age of Amazon. To try and keep pace there are many ways to collect funds. Credit cards are the standard, but there’s PayPal, VISA Checkout, AMEX Express Checkout, Amazon Pay, Apple Pay, Bitcoin, Etherium, Litecoin, Venmo, Alipay, Android Pay and and six new methods have probably been launched since I started writing this. They all have a similar goal: to get the user’s funds in exchange for goods or services. Each has benefits and a downside and most have horrible (UI) buttons that are mandated by the payment issuers.
If you design a checkout screen the way the payment issuers request you end up with something like this on the left. It’s not the most cohesive look and each payment option is competing for attention, including the (green) ‘Buy Now’ button. How does the user decide which is best for them?
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!
In my efforts to make my job easier, I’ve developed a lot of assets for this work and if you need these check out my E-Commerce Payment Button Vector Set for $10. It’s got AI, EPS and Sketch formats for all of these payments and more. I’ll add new ones as I find them or as they evolve.
