Use CSS templates to display Apple Pay buttons on your webpage.
Apple Pay JS
When a user clicks or taps an Apple Pay button, it must always invoke the Apple Pay payment sheet. You can specify which button type to display and edit its appearance and size to fit your webpage. For a description of the button types and usage information, see Apple Pay on the Web Human Interface Guidelines.
You specify the type of Apple Pay button to draw by setting the -apple-pay-button-type property to one of these values:
plain. For the Apple Pay button.
buy. For the Buy with Apple Pay button.
set-up. For the Set up Apple Pay button.
donate. For the Donate with Apple Pay button.
The Set up Apple Pay button is available on the web starting in iOS 10.1 and macOS 10.12.1. See openPaymentSetup for an example of code to display the Set up Apple Pay button.
The sample code listings below use the CSS properties to draw Apple Pay buttons. The code supports devices running macOS 10.12 and later, and iOS 10 and later, by using the CSS @supports feature to determine if the -webkit-appearance: -apple-pay-button property is available. If not, the code provides the details for drawing the buttons.
Use Listing 1 to display the plain Apple Pay button.
Use Listing 2 to display a Buy with Apple Pay button.
Use Listing 3 to display a Donate with Apple Pay button. This button is available on the web starting in iOS 10.2. For devices with an earlier iOS version that doesn't support the Donate with Apple Pay button, use the plain Apple Pay button instead (see Listing 1).