{"id":6246,"date":"2017-08-02T12:00:00","date_gmt":"2017-08-02T19:00:00","guid":{"rendered":"https:\/\/johnfreeborn.com\/words\/?p=6246"},"modified":"2025-01-19T22:39:43","modified_gmt":"2025-01-20T06:39:43","slug":"the-sad-state-of-payment-buttons","status":"publish","type":"post","link":"https:\/\/johnfreeborn.com\/words\/the-sad-state-of-payment-buttons\/","title":{"rendered":"The Sad State of Payment Buttons"},"content":{"rendered":"\n

It\u2019s a damn mess and I have some theories on why<\/em><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

I\u2019ve been doing design work in the finance space for a long time. This wasn\u2019t something I set out to do, it just kind of happened. My first finance gig was for firstUSA\u2013I 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.<\/p>\n\n\n\n

\n

\u201cGrandma needs another credit card\u201d \u2013 evil Art Director<\/p>\n<\/blockquote>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

I can\u2019t find the banner ads to prove it, but here\u2019s 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\u2019t the only type of work I did.<\/p>\n\n\n\n

Over the last few years, I\u2019ve been on the brand side and e-commerce is a big part of a brand\u2019s 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\u2019s 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\u2019s 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.<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

If you design a checkout screen the way the payment issuers request you end up with something like this on the left. It\u2019s not the most cohesive look and each payment option is competing for attention, including the (green) \u2018Buy Now\u2019 button. How does the user decide which is best for them?<\/p>\n\n\n\n

<\/div><\/div>\n\n\n\n

Some of these are worse than others and one or two aren\u2019t horrible, just awkward. So, let\u2019s break it down\u2026<\/p>\n\n\n\n

Credit Cards<\/strong><\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

The old standard. All credit cards have what are known as \u2018acceptance marks\u2019. 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\u2019ll see all kinds around the web and there are often stylized versions. I\u2019m sure this kills the brand folks at VISA, Mastercard, American Express and Discover but they were too late to the game.<\/p>\n\n\n\n

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\u2019s needs.<\/p>\n\n\n\n

\"\"<\/figure><\/div>
\"\"<\/figure><\/div><\/div><\/div><\/div><\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
\"\"<\/figure><\/div>
\"\"<\/figure><\/div><\/div><\/div><\/div><\/div>\n\n\n\n

PayPal<\/h2>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n

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.<\/p>\n\n\n\n

The buttons for PayPal are a damn mess\u2013there\u2019s no way around it. There are three distinct sets of official PayPal buttons at this time.<\/p>\n\n\n\n

The old standard (still official) \u2192 options here<\/a><\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

The new standard (I think, also official) \u2192 options here<\/a><\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

and the even newer responsive option \u2192 details here<\/a><\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

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\u2019s 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.<\/p>\n\n\n\n

VISA Checkout<\/h2>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n

VISA has spent a ton of money marketing their digital product and the experience isn\u2019t awful but it\u2019s 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\u2013everything else be damned. This double button shape doesn\u2019t align easily with other elements on a page and it\u2019s 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.<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

The acceptance marks are actually pretty decent and have many options to choose from. These are at least workable.<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

My guess is that VISA paid a big agency a ton of money to work on that goofy button. They\u2019ve now invested who knows how much in it, so it\u2019s here to stay. That is, until a new Chief Design Officer comes in and changes the executive\u2019s minds with their new vision<\/em>. The documentation is \u2192 here<\/a> if you care to learn more.<\/p>\n\n\n\n

Apple Pay<\/h2>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n

Apple, running the usual Apple playbook, wasn\u2019t 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\u2019s 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.<\/p>\n\n\n

\n
\"\"
Apple Pay buttons also come in white and white with a border<\/figcaption><\/figure>\n<\/div>\n\n\n

Full Apple interface guidelines are \u2192 here<\/a><\/p>\n\n\n\n

Masterpass<\/h2>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n

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\u2019s not as ugly as VISA\u2019s but it\u2019s no beauty either. It\u2019s a standard shape at least.<\/p>\n\n\n

\n
\"\"
the masterpass button<\/figcaption><\/figure>\n<\/div>\n\n\n

AMEX Express Checkout<\/h2>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n

Once again we have a half-assed attempt at UI. AMEX won\u2019t even let you see their UI guide without an account. I\u2019ve been unable to secure one despite multiple attempts. You can try and learn more \u2192 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?<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

Amazon Pay<\/h2>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n

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\u2019s odd is that these new ones are not responsive. It almost seems like they wanted what VISA and masterpass have\u2013ugly buttons with big branding. Gradients are hot, right?<\/p>\n\n\n

\n
\"\"
recent Amazon Pay buttons look like this (also in gold and dark grey)<\/figcaption><\/figure>\n<\/div>\n\n
\n
\"\"
I still see these older Amazon pay buttons around as well<\/figcaption><\/figure>\n<\/div>\n\n\n

Android Pay<\/h2>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n

Google tends to do things right and Android Pay is no different. They\u2019ve 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 \u2192 here<\/a>.<\/p>\n\n\n

\n
\"\"
Android Pay button, also available in white and white with a border<\/figcaption><\/figure>\n<\/div>\n\n\n

How did we get here and what\u2019s coming<\/h2>\n\n\n\n

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.<\/p>\n\n\n\n

Bitcoin and other new payment forms are coming online all the time. I can\u2019t predict which ones will get traction and which won\u2019t. The users will determine what they want and we\u2019ll deal.<\/p>\n\n\n\n

How to make it better<\/h2>\n\n\n\n

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\u2019t 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.<\/p>\n\n\n\n

Keep in mind, you will need approval from all issuers before you go live: they\u2019ll review your designs, but don\u2019t be afraid of trying something non-standard. Trust your gut and design what\u2019s right for your audience.<\/p>\n\n\n\n

Do bear in mind that there is a large amount of cash being spent to make these recognizable. I\u2019m not suggesting you ignore the branding entirely: balance is the key, as usual, in good design.<\/p>\n\n\n\n

\"\"<\/figure><\/div>
\"\"<\/figure><\/div><\/div><\/div><\/div><\/div>\n\n\n\n

adidas (mobile) \u2022 \u2022 \u2022 work in progress (mobile)<\/sub><\/p>\n\n\n\n

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

Let me know what you think in the comments, or if there\u2019s a payment button I\u2019ve missed!<\/p>\n\n\n\n

<\/div><\/div>\n\n\n\n

In my efforts to make my job easier, I\u2019ve 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\u2019s got AI, EPS and Sketch formats for all of these payments and more. I\u2019ll add new ones as I find them or as they evolve.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
<\/div><\/div>\n\n\n\n
\"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"

It\u2019s a damn mess and I have some theories on why I\u2019ve been doing design work in the finance space for a long time. This wasn\u2019t something I set out to do, it just kind of happened. My first finance gig was for firstUSA\u2013I made banner ads. Not a glamorous job, but occasionally we got a fun […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[117],"tags":[99,103,21,20,19],"class_list":["post-6246","post","type-post","status-publish","format-standard","hentry","category-design-work","tag-e-commerce","tag-payments","tag-ui","tag-ux","tag-web-design"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/johnfreeborn.com\/words\/wp-json\/wp\/v2\/posts\/6246","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/johnfreeborn.com\/words\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/johnfreeborn.com\/words\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/johnfreeborn.com\/words\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/johnfreeborn.com\/words\/wp-json\/wp\/v2\/comments?post=6246"}],"version-history":[{"count":4,"href":"https:\/\/johnfreeborn.com\/words\/wp-json\/wp\/v2\/posts\/6246\/revisions"}],"predecessor-version":[{"id":6281,"href":"https:\/\/johnfreeborn.com\/words\/wp-json\/wp\/v2\/posts\/6246\/revisions\/6281"}],"wp:attachment":[{"href":"https:\/\/johnfreeborn.com\/words\/wp-json\/wp\/v2\/media?parent=6246"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/johnfreeborn.com\/words\/wp-json\/wp\/v2\/categories?post=6246"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/johnfreeborn.com\/words\/wp-json\/wp\/v2\/tags?post=6246"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}