Use CSS templates to display Apple Pay buttons in Safari.
Apple Pay JS
Payment Request API
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 Human Interface Guidelines > Apple Pay on the Web.
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.
check-out. For the Check out with Apple Pay button.
book. For the Book with Apple Pay button.
subscribe. For the Subscribe 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. For older versions of macOS and iOS with a version of Safari where the property is not available, 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, Check out with Apple Pay, Book with Apple Pay, or Subscribe with Apple Pay button. The Donate button is available on the web starting in iOS 10.2. The Check out, Book, and Subscribe buttons are available on the web starting in iOS 12.1 or in macOS 14.1 with Safari 12.0 or later.
For devices with earlier iOS or macOS versions where Safari does not support these button types, use the plain Apple Pay button instead (see Listing 1).