Browse by Topic

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 ask your question in the BigCommerce Community Design Group 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

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.
Cornerstone version

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 our Stencil Developer Documentation for instructions.

Blueprint

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

In rare cases where a legacy Blueprint theme does not implement the master BigCommerce stylesheet, then copy the CSS code linked in the Stencil Developer Documentation and paste it 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.
    Button Color Options

On Cornerstone 1.4 and above, to style the button, you can select an option in the Theme Editor under the Button section. 

Apple Pay Button in Theme Editor
 

For other themes, 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 legacy 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.

Was this article helpful?