You don’t have to design your own buttons for Apple Pay. In fact, Apple literally tells you that you can’t. So, what are you to do on the web? Thankfully, Apple has provided a way. It’s kinda weird and involves a bunch of proprietary CSS properties and values, but whattyagonnado.
They have documentation for all of this but I’ll port it here so you can see actual demos.
Here’s the exact code they offer:
See the Pen
Apple Pay Button by Chris Coyier (@chriscoyier)
on CodePen.
Works fine in Safari, but Chrome and Firefox are properly confused.

Not terribly surprising, as it uses backgrounds like -webkit-named-image(apple-pay-logo-white);
in the @supports not (-webkit-appearance: -apple-pay-button)
scenario, which I can’t imagine anyone but Apple implementing.
Plus… they are suggesting an empty <div>
, which ain’t great.
We can flop them over to a <button>
without too much trouble. Just had to add border: 0;
for Firefox.
I’d like to make them more like…
<button class="apple-pay-button apple-pay-button-white">
Apple Pay
</button>
But then we get:

But we can text-indent: -9999px;
that away then make sure we set the color properly so we have acceptable semantic buttons.
See the Pen
Apple Pay Button by Chris Coyier (@chriscoyier)
on CodePen.
But more likely… I’d suspect to see:
@supports not (-webkit-appearance: -apple-pay-button) {
.container-that-offers-apple-pay {
display: none;
}
}
As in, why show that area at all if you’re in a browser that doesn’t support that payment method.
Their other demos have similar problems. For example, the “Buy With” button gives you:
<div class="apple-pay-button-with-text apple-pay-button-white-with-text">
<span class="text">Buy with</span>
<span class="logo"></span>
</div>
Which 1) is not a button and 2) doesn’t have complete text in it to say what’s going on.
Just a heads up. I wouldn’t say don’t use it, but I would say take a minute to clean up the HTML and get the styling right so it’s cross-browser compatible.
It is completely irresponsible from Apple to provide such crappy code.
If you want a button, use a
<button />
! At least, add therole="button"
!And BEM seems like a good option here as well.
You’re right Ben.
As for the
@supports not (-webkit-appearance: -apple-pay-button)
conditional block: the first version of Apple Pay for the Web required the website to draw their own Apple Pay buttons. And then you would use the SDK to determine if Apple Pay was available and hide the fields if not.