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 Partner Directory, or consider using the Community Jobs Board to post design and customization job requests and connect with third-party developers.

By default, the Apple Pay button will appear in your storefront on the cart page and in the Quick Cart modal. You can also enable the button on product pages from your theme settings.

As a condition of enabling Apple Pay, merchants are required to adhere to Apple Pay Marketing Guidelines.

For Cornerstone 1.4 (or above) and most Marketplace themes, the Apple Pay button is automatically applied. No further action is required after connecting with Apple Pay.

For Cornerstone 1.3.4 or earlier, Fortune, Geneva, Prosper, and Solo, store owners will need to change the button's styling with CSS. See the CSS coding instructions in the following section for more information.

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.
  

On Cornerstone 1.4 and above, to style the button, you can select an option in Page Builder under Theme Styles > Header & Footer. 

For other themes, you will need to use CSS coding to style the button. 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.

.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 */
} 

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 – review the setup steps for Connecting Apple Pay
• The page is not hosted on HTTPS
• The store is using a SHA1 private SSL certificate
• 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.