{"_id":"57d8954b156ef72b008003b2","category":{"_id":"560b5cbec341310d00de2a01","pages":["560b5d0b3616ac17004f1c99","560b5d405148ba0d009bd0c9","560b5d62af40a70d003df332","560b5d953bcbd80d0077d0fd","560b5fa83616ac17004f1c9d","569c8c15d326c80d0068f7b7","56d37d35d3f4650b007495ea","56d4ed5f8001e30b0089700c"],"__v":8,"project":"55a6e72e8cc73e0d00096635","version":"55a6e72f8cc73e0d00096638","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-09-30T03:53:34.449Z","from_sync":false,"order":14,"slug":"templates-required-directory","title":"Templates Reference"},"project":"55a6e72e8cc73e0d00096635","__v":1,"user":"55a6caa022cfa321008e01d6","parentDoc":null,"version":{"_id":"55a6e72f8cc73e0d00096638","project":"55a6e72e8cc73e0d00096635","hasReference":false,"__v":29,"hasDoc":true,"createdAt":"2015-07-15T23:05:19.125Z","releaseDate":"2015-07-15T23:05:19.125Z","categories":["55a6e7308cc73e0d00096639","55b7ed07aea7c8190058badb","5604567c0c78b00d0039b191","5605e6f23a93940d002b3e4a","5605f2bba4574a0d00811365","5605f309a4574a0d00811366","5608e3b98aedf50d0004cf8f","5608e4318aedf50d0004cf90","5608e6b5a7cc2f0d00d9754d","5608e6d331beb60d001b6560","5608f879a7cc2f0d00d97580","560b097887b71d0d000d3bd9","560b13cbafa0990d00979545","560b5cbec341310d00de2a01","560b5cd0c341310d00de2a02","566a35b81e08750d00a0c49b","566a3e8503b4b20d00d02a4a","567889d307bf6a0d0083edc8","569c8b7c15bb390d00db6f9d","56b254dc65ddf50d0076ba8f","57a8ebc4cdeea20e001d2a63","57e48a4000c8680e00fae6e7","5808216773557d0f00a1e428","58105ad54a8aa50f00aa4cba","58105bf298aea40f00afa3ba","58105f548a4aed0f00d67536","581061b898aea40f00afa3be","584b3de7e5f3a42300df6ef7","596839a75965d400155bb750"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-09-14T00:09:47.928Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"settings":"","results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":19,"body":"This page covers:\n\n* [Using Apple Pay](#about)\n* [Apple Pay and Stencil Themes](#integrating)\n* [Implementing the Apple Pay Button](#button)\n* [Apple Pay Identity Guidelines](#guidelines)\n* [Styling the Apple Pay Button](#style)\n* [Troubleshooting](#misc)\n\n## <span id=\"about\"> Using Apple Pay </span>\n\nApple Pay is a digital wallet that links to a shopper's chosen credit or debit cards. It reduces checkout friction in the same way other digital wallets like PayPal do: Once a shopper has set up Apple Pay, they need not enter or transfer their actual credit- or debit-card number, and need not re-enter their billing, shipping or contact details.\n\nDisplaying the Apple Pay button to shoppers on your storefront is subject to Apple's [geographic constraints](https://support.apple.com/en-us/HT204916), [supported devices and software](https://support.apple.com/en-us/KM207105), [industry and conduct restrictions,](https://developer.apple.com/apple-pay/acceptable-use-guidelines-for-websites/), and policies regarding store checkout flow. \n\nFor details, please see the [Apple Pay for Developers](https://developer.apple.com/apple-pay/) site and [this BigCommerce support article](https://support.bigcommerce.com/articles/Public/Connecting-with-Apple-Pay).\n\n## <span id=\"integrating\"> Apple Pay and Stencil Themes </span>\n\nThe Apple Pay button is included in most Stencil themes, but its default appearance might not match your store's theme. This page shows you how to script the button in themes that don't already include it, and how to restyle the button within Apple's guidelines.\n\n### <span id=\"compliant\"> Themes Incorporating Apple Pay </span>\n\nMost current Stencil themes incorporate Apple Pay by default. These include Cornerstone 1.4.0 (or later) and most Theme Marketplace themes. \n\n### <span id=\"noncompliant\"> Themes Omitting Apple Pay </span>\n\nThe following Stencil themes do _not_ include Apple Pay:\n\n* Cornerstone 1.3.4 or earlier\n* Fortune\n* Geneva\n* Prosper\n* Solo\n* Earlier versions of Marketplace themes that have since added Apple Pay\n* Custom themes derived from any of the above\n\n### <span id=\"where\"> Apple Pay Button's Location </span>\n\nBy default, the Apple Pay button will appear on a theme's Cart page. If the store has [enabled site-wide HTTPS](https://support.bigcommerce.com/articles/Public/Site-Wide-HTTPS/), the Apple Pay button will also appear in the Quick Cart modal. The Apple Pay button does _not_ appear on the checkout page, because Apple Pay is designed as a low-friction alternative that bypasses the store's native checkout.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/10750c1-Apple-Payscreenshot-1.png\",\n        \"Apple-Pay~screenshot-1.png\",\n        1392,\n        842,\n        \"#e0dcda\"\n      ],\n      \"caption\": \"Apple Pay button in Quick Cart modal\"\n    }\n  ]\n}\n[/block]\n## <span id=\"button\"> Implementing the Apple Pay Button </span>\n\n### Themes Incorporating Apple Pay\n\nTo display the Apple Pay button in [themes incorporating Apple Pay](compliant), a store administrator only needs to enable Apple Pay in the BigCommerce control panel by selecting `Store Setup` > `Payments` > `Digital Wallets` > `Apple Pay` > `Set up`, as outlined in [this support article](https://support.bigcommerce.com/articles/Public/Connecting-with-Apple-Pay#setup). \n\n### Themes Omitting Apple Pay\n\nTo display the Apple Pay button on the Cart page of [themes omitting Apple Pay](noncompliant), you or a store administrator must paste enabling CSS into the footer script, as follows: \n\n1. Copy the CSS below.\n2. In the BigCommerce control panel, select `Storefront Design` > `Design Options` and then the `Scripts` tab.\n3. Paste the copied code into the Footer script box and select `Save`.\n\n```\n<style>\n/* don’t display the button by default */\n.apple-pay-checkout-button {\n  display: none;\n}\n\n/* display the button if apple pay is supported */\n.apple-pay-supported .apple-pay-checkout-button {\n  display: inline-block;\n}\n\n/* renders a black background with white logo */\n.apple-pay-checkout-button {\n  background-size: 100% 60%;\n  background-repeat: no-repeat;\n  background-position: 50% 50%;\n  border-radius: 5px;\n  padding: 0px;\n  box-sizing: border-box;\n  min-width: 175px;\n  min-height: 32px;\n  max-height: 64px;\n  background-image: -webkit-named-image(apple-pay-logo-white);\n  background-color: black;\n  text-indent: -9000em;\n  cursor: pointer;\n}\n\n/* for small screens, you should adjust the width of the button to\n   span the width of the containing block */\n:::at:::media screen and (max-width: 480px) {\n  .apple-pay-checkout-button {\n    width: 100%;\n    height: 60px;\n  }\n}\n</style>\n```\n\n## <span id=\"guidelines\"> Apple Pay Identity Guidelines </span>\n\nAs a condition for enabling Apple Pay, Apple requires merchants to style and display the button according to [Apple Pay Identity Guidelines](https://developer.apple.com/apple-pay/Apple-Pay-Identity-Guidelines.pdf). For BigCommerce's summary of the relevant guidelines, please see [this support article](https://support.bigcommerce.com/articles/Public/Integrating-the-Apple-Pay-button/#guidelines).\n\n## <span id=\"style\"> Styling the Apple Pay Button </span>\n\nBy default, a black version of the Apple Pay button will display in the storefront. However, Apple permits you to change the following three styling elements of the button, to match the style of your storefront:\n\n* Button background color, which must only be either white or black. A white button can have a black border.\n* Button height\n* Button width\n\n### Button Color – No Custom CSS Required\n\nIn [themes incorporating Apple Pay](compliant), you or a store administrator can change the Apple Pay button's color in Theme Editor. Select: `Buttons` > `Apple Pay` > Button `Color`. \n\nThe drop-down list offers you the three options shown below: \n\n* Black (white text) – the default\n* White (black text)\n* White (black text with border)\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/0f52efd-Apple-PayTheme-Editor.png\",\n        \"Apple-Pay@Theme-Editor.png\",\n        330,\n        164,\n        \"#4b8adc\"\n      ],\n      \"caption\": \"Apple Pay – Theme Editor styling options\",\n      \"sizing\": \"smart\"\n    }\n  ]\n}\n[/block]\n### Button Color – Custom CSS Required\n\nIn [themes omitting Apple Pay](noncompliant), you must use custom CSS to change the Apple Pay button's color. Here are CSS snippets to recolor the default black button.\n\nTo render the button with a white background and black text, use this CSS:\n\n```\n.apple-pay-checkout-button {\n  background-image: -webkit-named-image(apple-pay-logo-black);\n  background-color: white;\n}\n```\n\nTo render the white Apple Pay button with black text and a black border, use this CSS:\n\n```\n.apple-pay-checkout-button {\n  background-image: -webkit-named-image(apple-pay-logo-black);\n  background-color: white;\n  border: .5px solid black\n}\n```\n### Button Size – Custom CSS Required \n\nResizing the button normally requires custom CSS. The following example shows how, by targeting the \n`.apple-pay-checkout-button` CSS selector, you can also manipulate the Apple Pay button's width and height. (This&#160;is subject to certain constraints imposed by Apple and BigCommerce, which are listed in the example's comments.)\n\n```\n.apple-pay-checkout-button {\n  width: 200px; /* apple specified minimum is 175px, there is no maximum */\n  height: 60px; /* apple specified minimum is 32px, maximum is 64px */\n}\t\n```\n\n## <span id=\"misc\"> Troubleshooting </span>\n\nIs your Apple Pay button configured but not appearing on the storefront? To troubleshoot issues like this, please see [this&#160;merchant-oriented support article](https://support.bigcommerce.com/articles/Public/Integrating-the-Apple-Pay-button/#troubleshoot).","excerpt":"","slug":"apple-pay-styling","type":"basic","title":"Styling the Apple Pay Button"}

Styling the Apple Pay Button


This page covers: * [Using Apple Pay](#about) * [Apple Pay and Stencil Themes](#integrating) * [Implementing the Apple Pay Button](#button) * [Apple Pay Identity Guidelines](#guidelines) * [Styling the Apple Pay Button](#style) * [Troubleshooting](#misc) ## <span id="about"> Using Apple Pay </span> Apple Pay is a digital wallet that links to a shopper's chosen credit or debit cards. It reduces checkout friction in the same way other digital wallets like PayPal do: Once a shopper has set up Apple Pay, they need not enter or transfer their actual credit- or debit-card number, and need not re-enter their billing, shipping or contact details. Displaying the Apple Pay button to shoppers on your storefront is subject to Apple's [geographic constraints](https://support.apple.com/en-us/HT204916), [supported devices and software](https://support.apple.com/en-us/KM207105), [industry and conduct restrictions,](https://developer.apple.com/apple-pay/acceptable-use-guidelines-for-websites/), and policies regarding store checkout flow. For details, please see the [Apple Pay for Developers](https://developer.apple.com/apple-pay/) site and [this BigCommerce support article](https://support.bigcommerce.com/articles/Public/Connecting-with-Apple-Pay). ## <span id="integrating"> Apple Pay and Stencil Themes </span> The Apple Pay button is included in most Stencil themes, but its default appearance might not match your store's theme. This page shows you how to script the button in themes that don't already include it, and how to restyle the button within Apple's guidelines. ### <span id="compliant"> Themes Incorporating Apple Pay </span> Most current Stencil themes incorporate Apple Pay by default. These include Cornerstone 1.4.0 (or later) and most Theme Marketplace themes. ### <span id="noncompliant"> Themes Omitting Apple Pay </span> The following Stencil themes do _not_ include Apple Pay: * Cornerstone 1.3.4 or earlier * Fortune * Geneva * Prosper * Solo * Earlier versions of Marketplace themes that have since added Apple Pay * Custom themes derived from any of the above ### <span id="where"> Apple Pay Button's Location </span> By default, the Apple Pay button will appear on a theme's Cart page. If the store has [enabled site-wide HTTPS](https://support.bigcommerce.com/articles/Public/Site-Wide-HTTPS/), the Apple Pay button will also appear in the Quick Cart modal. The Apple Pay button does _not_ appear on the checkout page, because Apple Pay is designed as a low-friction alternative that bypasses the store's native checkout. [block:image] { "images": [ { "image": [ "https://files.readme.io/10750c1-Apple-Payscreenshot-1.png", "Apple-Pay~screenshot-1.png", 1392, 842, "#e0dcda" ], "caption": "Apple Pay button in Quick Cart modal" } ] } [/block] ## <span id="button"> Implementing the Apple Pay Button </span> ### Themes Incorporating Apple Pay To display the Apple Pay button in [themes incorporating Apple Pay](compliant), a store administrator only needs to enable Apple Pay in the BigCommerce control panel by selecting `Store Setup` > `Payments` > `Digital Wallets` > `Apple Pay` > `Set up`, as outlined in [this support article](https://support.bigcommerce.com/articles/Public/Connecting-with-Apple-Pay#setup). ### Themes Omitting Apple Pay To display the Apple Pay button on the Cart page of [themes omitting Apple Pay](noncompliant), you or a store administrator must paste enabling CSS into the footer script, as follows: 1. Copy the CSS below. 2. In the BigCommerce control panel, select `Storefront Design` > `Design Options` and then the `Scripts` tab. 3. Paste the copied code into the Footer script box and select `Save`. ``` <style> /* 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; } } </style> ``` ## <span id="guidelines"> Apple Pay Identity Guidelines </span> As a condition for enabling Apple Pay, Apple requires merchants to style and display the button according to [Apple Pay Identity Guidelines](https://developer.apple.com/apple-pay/Apple-Pay-Identity-Guidelines.pdf). For BigCommerce's summary of the relevant guidelines, please see [this support article](https://support.bigcommerce.com/articles/Public/Integrating-the-Apple-Pay-button/#guidelines). ## <span id="style"> Styling the Apple Pay Button </span> By default, a black version of the Apple Pay button will display in the storefront. However, Apple permits you to change the following three styling elements of the button, to match the style of your storefront: * Button background color, which must only be either white or black. A white button can have a black border. * Button height * Button width ### Button Color – No Custom CSS Required In [themes incorporating Apple Pay](compliant), you or a store administrator can change the Apple Pay button's color in Theme Editor. Select: `Buttons` > `Apple Pay` > Button `Color`. The drop-down list offers you the three options shown below: * Black (white text) – the default * White (black text) * White (black text with border) [block:image] { "images": [ { "image": [ "https://files.readme.io/0f52efd-Apple-PayTheme-Editor.png", "Apple-Pay@Theme-Editor.png", 330, 164, "#4b8adc" ], "caption": "Apple Pay – Theme Editor styling options", "sizing": "smart" } ] } [/block] ### Button Color – Custom CSS Required In [themes omitting Apple Pay](noncompliant), you must use custom CSS to change the Apple Pay button's color. Here are CSS snippets to recolor the default black button. To render the button with a white background and black text, use this CSS: ``` .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, use this CSS: ``` .apple-pay-checkout-button { background-image: -webkit-named-image(apple-pay-logo-black); background-color: white; border: .5px solid black } ``` ### Button Size – Custom CSS Required Resizing the button normally requires custom CSS. The following example shows how, by targeting the `.apple-pay-checkout-button` CSS selector, you can also manipulate the Apple Pay button's width and height. (This&#160;is subject to certain constraints imposed by Apple and BigCommerce, which are listed in the example's comments.) ``` .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 */ } ``` ## <span id="misc"> Troubleshooting </span> Is your Apple Pay button configured but not appearing on the storefront? To troubleshoot issues like this, please see [this&#160;merchant-oriented support article](https://support.bigcommerce.com/articles/Public/Integrating-the-Apple-Pay-button/#troubleshoot).