Apple Pay Buttons - A Code Review

Apple Pay button CSS

First, let us see how the Apple Pay button looks on both Chrome and Safari, respectively. This is the same URL and code rendered in Chrome and Safari. You can see the button by default is rendered very crudely in Chrome.

Let’s analyze the CSS code:

The CSS code uses the @supports directive in CSS to add the respective CSS in supporting browsers i.e. Safari. While this is great for Safari, as a developer, you are left with a broken-looking button on all other browsers.

The reason being all the CSS styles are tied up with Safari only vendor properties like -apple-pay-button-type: buy; -webkit-appearance: -apple-pay-button; -apple-pay-button-style: black;

The fact that the broken button reads “Buy With” without any Apple Pay logo and looks like a CTA doesn't help.

The part that bugged me the most is that Apple provided all styles for Safari, which is understandable as that is the supported platform. But why did they do a half-baked job of styling for non-supporting browsers?

Something like below as part of the SDK CSS could have handled this. I would recommend you add the below snippet as part of your project

My observations

HTML

• Let us all agree; the HTML code for the Apple Pay buttons could have been better.
• Class names for text and logo divs inside the main button wrapper are very generic. Apple could have followed the same convention and named it apple-pay-button-text and apple-pay-button-logo.
• A separate HTML tag for adding the Apple Pay logo also seems a bit unnecessary. If we have created all vendor-specific tags, why couldn't we create one more attribute that adds the logo as a ::before/::after pseudo-elements.
• Apple could have easily managed all of this had they just created an HTML5 web component which that only works in Safari, encapsulating all CSS and HTML inside. Something like
• This would also have opened a way for Apple to push updates as part of Safari browser updates.
   

CSS

• The CSS also has plenty of room for improvement.
• As this button is of no use in any browser other than Safari, the CSS for hiding it should have been included as well.
• The mischievous part about showing a broken button in all non-supporting browsers makes very little sense. Either it should have been hidden if not supported or styled the same and left to the developer’s discretion.
• Maybe developers could have shown an alert or disclaimer to the customer if they click on the button in Chrome, for example. But having it broken leaves them with only one option: to hide it.
• Which brings us back to—this could have been very well implemented as a vendor-specific (Safari) web component, encapsulating all HTML and CSS.

Conclusion

• You need to add HTML and CSS provided by Apple to display Apple Pay buttons on your website.
• Designers and artists, you are not allowed as per usage guidelines to change any aspect of the Apple Pay buttons. Check Usage Guidelines. You can change width as long as the button is of the same width as other CTAs on the site.
• Apple Pay on the web only works in Safari and that too on Apple devices with Touch ID.
• You will need additional JS/CSS to hide the Apple Pay button and payment option from non-supporting browsers. Apple’s SDK does not handle it. It does provide you with checks in CSS as well as JS.
• Using such a check-in CSS, this snippet can help you hide the button for non-supporting browsers.
• While not explicitly stated by Apple anywhere in the docs, using