Apple Pay Buttons in CSS

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.