Button customisation
This is a legacy document for those integrated using version 1 of our JavaScript Library
Click here to read the Apple Pay documentation for the latest version of our JavaScript Library
The following information can be used to customise the appearance of the Apple Pay button to better suit the terminology of your checkout experience.
buttonText
Apple allows you to change the text displayed on the Apple Pay button. To do so, add the buttonText field to your Javascript, and pass through one of the values below* :
| buttonText | Preview | Description |
| plain |  |
The default appearance. |
| buy |  |
Alternative design. |
| donate |  |
This button is for non-profit organizations to accept donations from within your app and website. Similar to using Apple Pay to buy goods and services, customers can donate without entering their billing, delivery, or contact details.
Important: Those looking to accept donations using Apple Pay are subject to additional requirements. |
| book |  |
For example, a restaurant might use this button to let people book a reservation. |
| check-out |  |
For example, a website offering a shopping cart might use this button to allow their customers to purchase the items in the cart.
Use this button if other payment buttons start with the text Check out for a more consistent user experience. |
| subscribe |  |
For example, a newspaper or magazine might use this button to allow their customers to initiate a monthly subscription. |
* These values are defined by Apple and are subject to change. Click here for further information.
The following is an example of how to reference the Apple Pay library (as described here), with additional markup that changes the text displayed on the Apple Pay button:
new SecureTrading.ApplePay({
sitereference: "test_site12345",
buttonText: "buy",
paymentRequest:{
"total":{
"label":"Pay now",
"amount":"2.00"
},
"countryCode":"GB",
"currencyCode":"GBP",
"merchantCapabilities":["supports3DS", "supportsCredit", "supportsDebit"],
requiredBillingContactFields: ["postalAddress"],
requiredShippingContactFields: ["postalAddress", "name", "phone", "email"],
supportedNetworks:["visa", "masterCard"]
},
"merchantId":"your.merchant.id",
"sitesecurity":"gABC123DEFABC"
});
buttonStyle
You can also choose from different colour options. To do so, add the buttonStyle field to your Javascript, and pass through one of the values below* :
| buttonStyle | Preview | Description |
| black |  |
Black Apple Pay button |
| white |  |
White Apple Pay button |
| white-outline |  |
White button with a black outline |
* These values are defined by Apple and are subject to change. Click here for further information.
The following is an example of how to reference the Apple Pay library (as described here), with additional markup that changes the colour of the Apple Pay button:
new SecureTrading.ApplePay({
sitereference: "test_site12345",
buttonStyle: "white",
paymentRequest:{
"total":{
"label":"Pay now",
"amount":"2.00"
},
"countryCode":"GB",
"currencyCode":"GBP",
"merchantCapabilities":["supports3DS", "supportsCredit", "supportsDebit"],
requiredBillingContactFields: ["postalAddress"],
requiredShippingContactFields: ["postalAddress", "name", "phone", "email"],
supportedNetworks:["visa", "masterCard"]
},
"merchantId":"your.merchant.id",
"sitesecurity":"gABC123DEFABC"
});
Additional resources
