Styling the Apple Pay Button

The Apple Pay button is included on most themes, but the default appearance may not match your store's theme. Apple has provided a few alternative stylings to the Apple Pay button which you can implement on your store. Adding or editing the Apple Pay button requires editing a theme’s code. If you are not comfortable editing your site’s code, check out our BigCommerce Community or BigCommerce Partners for assistance.

By default the Apple Pay button will appear in your storefront on the cart page. Additionally, if you’ve enabled site-wide HTTPS, then for added shopper convenience, the Apple Pay button will appear in the Quick Cart modal. Follow these steps to enable site-wide HTTPS.

Apple Pay Button
 

Why is Apple Pay not on my checkout page? Apple Pay is designed to reduce checkout friction by bypassing your checkout, so at this time the Apple Pay button will not appear on your checkout page.

Apple Pay Identity Guidelines

As a condition of enabling Apple Pay, merchants are required to adhere to Apple Pay Identity Guidelines.
Do'sDon'ts
  • Use only the button styling CSS provided by Apple.
  • Ensure that Apple Pay payment buttons always invoke the Apple Pay payment sheet.
  • Specify a button size that is equal to or larger than other checkout buttons.
  • Use the same style of the button for both portrait and landscape formats.
  • Select a button color option that provides sufficient contrast to the surrounding background.
  • Do not create your own version of Apple Pay buttons.
  • Do not use the Apple Pay payment button to invoke other views.
  • Do not use the buttons in marketing communications to promote your website. They are for use only within a user interface.
  • Do not specify a button size that is smaller than other checkout buttons in your interface.

Implementing the Apple Pay Button

Stencil Theme Instructions

Based on whether or not the theme developer has implemented support for it, you may be able to style the Apple Pay button within Theme Editor. To verify support go to Storefront Design > My Themes and click the Customize button. Then check the styling options in Theme Editor.

Failing support for Theme Editor, the Apple Pay buttons on the cart page are rendered using the “.apple-pay-checkout-button” CSS class. Any modifications should target this class using CSS. You should hide the Apple Pay button by default on your store, and only render it when a payment can be taken using Apple Pay. To assist with this, BigCommerce will automatically inject “apple-pay-supported” as a class on the tag of your template. When this class is present, you should display the button:

.apple-pay-checkout-button {
  display: none;
}

.apple-pay-supported apple-pay-checkout-button {
  display: inline-block;
}

For visual styling, please refer to Apple’s “Displaying the Apple Pay button” example CSS on their website here: https://developer.apple.com/reference/applepayjs/applepaysession

A reference example which incorporates the BigCommerce “apple-pay-supported” check can be found below:

/* don’t display the button by default */
.apple-pay-checkout-button {
  display: none;
}

/* display the button if apple pay is supported */
.apple-pay-supported .apple-pay-checkout-button {
  display: inline-block;
}

/* renders a black background with white logo */
.apple-pay-checkout-button {
  background-size: 100% 60%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  border-radius: 5px;
  padding: 0px;
  box-sizing: border-box;
  min-width: 175px;
  min-height: 32px;
  max-height: 64px;
  background-image: -webkit-named-image(apple-pay-logo-white);
  background-color: black;
  text-indent: -9000em;
  cursor: pointer;
}

/* for small screens, you should adjust the width of the button to
   span the width of the containing block */
@media screen and (max-width: 480px) {
  .apple-pay-checkout-button {
    width: 100%;
    height: 60px;
  }
}

Blueprint

For most Blueprint storefronts, the Apple Pay button is automatically injected into the cart page and quick cart modal.

In rare cases where a Blueprint theme does not implement the master BigCommerce stylesheet, then follow the instructions above for Stencil storefronts and paste the css into custom.css.

Styling the Apple Pay Button

By default, a black version of the Apple Pay button will display in your storefront. Optionally, you can change certain styling elements of the button. Apple permits you to change the following three elements to match the style of your storefront:

  • Button height

  • Button width

  • Button background color, which must only be either white or black. A white button can have a black border.

To render an Apple Pay button with a white background and black text:

.apple-pay-checkout-button {
  background-image: -webkit-named-image(apple-pay-logo-black);
  background-color: white;
}

To render the white Apple Pay button with black text and a black border:

.apple-pay-checkout-button {
  background-image: -webkit-named-image(apple-pay-logo-black);
  background-color: white;
  border: .5px solid black
}

By targeting the “.apple-pay-checkout-button” CSS selector, you can also manipulate the width and height of the Apple Pay button. The width and height can only be manipulated with the constraints Apple and BigCommerce have in place (see CSS above)

.apple-pay-checkout-button {
  width: 200px; /* apple specified minimum is 175px, there is no maximum */
  height: 60px; /* apple specified minimum is 32px, maximum is 64px */
}	

Why is the button not appearing on my store?

There may be a few reasons why the Apple Pay button is not appearing on your store.
  • Apple Pay is not enabled or set up correctly- see Connecting Apple Pay
  • The page is not hosted on HTTPS
  • The store is using a SHA1 private SSL certificate. Learn More
  • The page is not viewed with Safari on iOS 10 or newer, or Safari on MacOS Sierra or newer. Apple Pay is not compatible with other browsers and operating systems.
  • Missing or invalid CSS
For missing CSS, we automatically detect if the Apple Pay button is styled or not. If the button isn’t styled or has missing style elements required by Apple (the Apple Pay logo), it won’t be shown. If you are on Blueprint and do not include the BigCommerce master stylesheet (__master/Styles/styles.css) your store will not include the Apple Pay button. You can add it using the example CSS above.

Additional Resources

Was this article helpful?