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
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.
<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. |
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:
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.
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
:
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:
applePay .isAvailable() .then(() => { applePayComponent.mount("#applepay-container"); }) .catch(e => { // Apple Pay isn't available. });