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.

Apple Pay buttons also come in white and white with a border

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.

the masterpass button

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?

recent Amazon Pay buttons look like this (also in gold and dark grey)

I still see these older Amazon pay buttons around as well

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.

Android Pay button, also available in white and white with a border

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.