Apple Pay is an express payment method that lets shoppers pay with fewer steps.
Requirements
Try it out!
This page assumes you have already built a Components integration.
Apple Pay express checkout is supported only with the Advanced flow integration.
Set up Apple Pay
Use your Adyen's or your own Apple Pay certificate to set up Apple Pay.
Code samples
HTML
JavaScript
Step 1: Create a DOM element
Create a Document Object Model (DOM) element where you want to implement express checkout.
When you create the Apple Pay Component to mount on this DOM element, add the required configuration.
Step 2: Configure Apple Pay to return the shopper's details
Set the following required configuration parameters.
| Parameter | Description |
|---|---|
countryCode |
The country code. Format: the two-letter ISO-3166-1 alpha-2 country code. Exception: QZ (Kosovo). |
isExpress Required for v6.0.0 or later. |
Set to true. |
| requiredBillingContactFields | The required billing contact fields. |
| requiredShippingContactFields | The required shipping contact fields. |
Step 3: Configure the callback to handle shipping address changes
Implement the onShippingContactSelected event so that you get updated information when the shopper selects a different shipping address.
You must pass the fields from the ApplePayShippingContactUpdate object, including:
Step 4: Configure the callback to handle shipping method changes
Configure the ApplePayShippingMethodSelectedEvent to handle when the shopper selects a different shipping method.
Step 5: Configure the callback to get the shopper's information
Implement the event handler to get the shopper's information from Apple Pay. This is triggered after onSubmit:
Step 6: Mount the Component
Check that Apple Pay is available and mount the Component: