Payment-method icon

Apple Pay express checkout

Configure Apple Pay for express checkout.

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

DOM element
Expand view
Copy link to code block
Copy code
Copy code
<!-- Step 1: Create a DOM element -->
<span id="applepay-container"></span>
Component implementation example
Expand view
Copy link to code block
Copy code
Copy code
const applepay = checkout.create('applepay', {
// ...Other parameters.
// Required field.
countryCode: 'US',
// Required for v6.0.0 or later.
isExpress: true,
// Step 2: Configure Apple Pay to return the shopper's details.
requiredBillingContactFields: ['postalAddress'],
requiredShippingContactFields: ['postalAddress', 'name', 'phoneticName', 'phone', 'email'],
// Step 3: Configure the callback to handle shipping address changes.
onShippingContactSelected: async (resolve, reject, event) => {
const { countryCode } = event.shippingContact;
let update = {};
if (countryCode === 'BR') {
update = {
newTotal: ApplePayAmountHelper.getApplePayTotal(), // Retrive current total from application state
errors: [new ApplePayError('shippingContactInvalid', 'countryCode', 'Cannot ship to the selected address')]
};
resolve(update);
return;
}
const newShippingMethods = await fetchNewShippingMethods(countryCode);
const newLineItems = createLineItems(newShippingMethods[0]);
const newTotal = createApplePayTotal(newLineItems);
// Set the new total in the application state.
ApplePayAmountHelper.setApplePayTotal(newTotal);
update = {
newTotal,
newLineItems,
newShippingMethods
};
resolve(update);
},
// Step 4: Configure the callback to handle shipping method changes.
onShippingMethodSelected: (resolve, reject, event) => {
const { shippingMethod } = event;
const newLineItems = createLineItems(shippingMethod);
const newTotal = createApplePayTotal(newLineItems);
const update = {
newTotal,
newLineItems
};
// Update your application state with newTotal.
ApplePayAmountHelper.setApplePayTotal(newTotal);
resolve(update);
},
// Step 5: Configure the callback to get the shopper's information.
onAuthorized: paymentData => {
console.log('Shopper details', paymentData);
},
});
// Step 6: Mount the Component.
applePay
.isAvailable()
.then(() => {
applePayComponent.mount("#applepay-container");
})
.catch(e => {
// Apple Pay isn't available.
});

Step 1: Create a DOM element

Create a Document Object Model (DOM) element where you want to implement express checkout.

Create a DOM element
Expand view
Copy link to code block
Copy code
Copy code
<div id="applepay-container"></div>

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.
Set required fields
Expand view
Copy link to code block
Copy code
Copy code
const applepay = checkout.create('applepay', {
countryCode: 'US',
//Required for v6.0.0 or later.
isExpress: true,
requiredBillingContactFields: ['postalAddress'],
requiredShippingContactFields: ['postalAddress', 'name', 'phoneticName', 'phone', 'email']
// ...Other parameters.
});

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:

Handle shipping address changes
Expand view
Copy link to code block
Copy code
Copy code
const applepay = checkout.create('applepay', {
// ...Other parameters.
onShippingContactSelected: async (resolve, reject, event) => {
const { countryCode } = event.shippingContact;
let update = {};
if (countryCode === 'BR') {
update = {
// Get the total from the application state.
newTotal: ApplePayAmountHelper.getApplePayTotal(),
errors: [new ApplePayError('shippingContactInvalid', 'countryCode', 'Cannot ship to the selected address')]
};
resolve(update);
return;
}
const newShippingMethods = await fetchNewShippingMethods(countryCode);
const newLineItems = createLineItems(newShippingMethods[0]);
const newTotal = createApplePayTotal(newLineItems);
ApplePayAmountHelper.setApplePayTotal(newTotal);
update = {
newTotal,
newLineItems,
newShippingMethods
};
resolve(update);
},
});

Step 4: Configure the callback to handle shipping method changes

Configure the ApplePayShippingMethodSelectedEvent to handle when the shopper selects a different shipping method.

Handle shipping method changes
Expand view
Copy link to code block
Copy code
Copy code
const applepay = checkout.create('applepay', {
// ...Other parameters.
onShippingMethodSelected: (resolve, reject, event) => {
const { shippingMethod } = event;
const newLineItems = createLineItems(shippingMethod);
const newTotal = createApplePayTotal(newLineItems);
const update = {
newTotal,
newLineItems
};
// Set the new total in the application state.
ApplePayAmountHelper.setApplePayTotal(newTotal);
resolve(update);
},
});

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:

Get the shopper information from Apple Pay payment data
Expand view
Copy link to code block
Copy code
Copy code
const applepay = checkout.create('applepay', {
// ...Other parameters.
onAuthorized: paymentData => {
console.log('Shopper details', paymentData);
},
});

Step 6: Mount the Component

Check that Apple Pay is available and mount the Component:

Check if available and mount the Component
Expand view
Copy link to code block
Copy code
Copy code
applePay
.isAvailable()
.then(() => {
applePayComponent.mount("#applepay-container");
})
.catch(e => {
// Apple Pay isn't available.
});