--- title: "Apple Pay express checkout" description: "Configure Apple Pay for express checkout." url: "https://docs.adyen.com/payment-methods/apple-pay/web-component/express-checkout" source_url: "https://docs.adyen.com/payment-methods/apple-pay/web-component/express-checkout.md" canonical: "https://docs.adyen.com/payment-methods/apple-pay/web-component/express-checkout" last_modified: "2023-10-23T13:40:00+02:00" language: "en" --- # Apple Pay express checkout Configure Apple Pay for express checkout. You can configure the [Apple Pay Component](/payment-methods/express-checkout) for express checkout to offer your shoppers the option to pay with fewer steps. In the express checkout flow, you request the shopper's billing and shipping information that can be used to prefill the data, which speeds up the checkout process. ## Apple Pay express Set up Apple Pay express ### Requirements-Apple-Pay-Express ## Requirements | Requirement | Description | | ------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Integration type** | A [an Advanced flow Web Components v6 integration](/online-payments/build-your-integration/advanced-flow/?platform=Web\&integration=Components). | | **[API credential roles](/development-resources/api-credentials/roles/)** | To [process live Apple Pay payments](#going-live) make sure that you have the following role- **API Clientside Encryption Payments role**. | | **Limitations** | On v6.10.0 and later of the Component, you can offer Apple Pay on all supported third-party browsers. For earlier versions, you can only offer Apple Pay on certain browsers, see [compatibility](#device-compatibility) to learn about limitations per device. | | **Setup steps** | Before you begin, make sure that you have:- [Added Apple Pay in your Customer Area](/payment-methods/add-payment-methods), and [set up Apple Pay](/payment-methods/apple-pay/apple-pay-certificate) with your own or Adyen's certificate. - Set up your [Apple Pay Web Component integration](/payment-methods/apple-pay/web-component). | ### How-It-Works-Apple-Pay-Express ## How it works To display the option to check out with Apple Pay express on your website: 1. [Create a Document Object Model (DOM) element](#create-dom), placing it where you want to offer express checkout. 2. [Add additional Apple Pay configuration](#configure-apple-pay) to support express checkout, and get the shopper's billing and shipping information. 3. Implement callbacks to handle different parts of the payment flow: * [Handle cases where the shopper changes their shipping address](#shipping-address-changes). * [Handle cases where the shopper changes their preferred shipping method](#shipping-method-changes). * [Get shopper's information from Apple Pay](#get-shopper-information) 4. After checking that Apple Pay is available to the shopper, [mount](#mount) the Apple Pay component to the DOM element you created. ### Create-Dom-Element-Apple-Pay-Express ## Create a DOM element Create a [Document Object Model (DOM)](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) element where you want to implement express checkout. **Create a DOM element** ```js
``` ### Configure-Apple-Pay-Express ## Configure Apple Pay to return the shopper's details To use express checkout with Apple Pay, you need to include additional configuration parameters in the Apple Pay Component. | Parameter | Description | | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------- | | `isExpress` | Set to **true**. | | [requiredBillingContactFields](https://developer.apple.com/documentation/apple_pay_on_the_web/applepaypaymentrequest/2216120-requiredbillingcontactfields) | The required billing contact fields. The only allowed value is the `postalAddress`. | | [requiredShippingContactFields](https://developer.apple.com/documentation/apple_pay_on_the_web/applepaypaymentrequest/2216121-requiredshippingcontactfields) | The required shipping contact fields. | **Apple Pay express configuration** ```js const applepay = new ApplePay(checkout, { countryCode: 'US', isExpress: true, requiredBillingContactFields: ['postalAddress'], requiredShippingContactFields: ['postalAddress', 'name', 'phoneticName', 'phone', 'email'] // ...Other parameters. }); ``` ### Configure-Shipping-Callback-Apple-Pay-Express ## Configure the callback to handle shipping address changes If the shopper selects a different shipping address than the one you prefilled, handle the shipping address change: 1. Implement the [`onShippingContactSelected` ](https://developer.apple.com/documentation/applepayontheweb/applepaysession/onshippingcontactselected)event handler that receives the [ApplePayShippingContactSelectedEvent](https://developer.apple.com/documentation/apple_pay_on_the_web/applepayshippingcontactselectedevent/) so that you get updated information when the shopper selects a different shipping address. 2. Pass the fields from the [ApplePayShippingContactUpdate](https://developer.apple.com/documentation/apple_pay_on_the_web/applepayshippingcontactupdate) object, including: | Field | Description | | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | | [newLineItems](https://developer.apple.com/documentation/apple_pay_on_the_web/applepaylineitem/) | The updated line items list after the change in the shipping contact. | | [newShippingMethod](https://developer.apple.com/documentation/apple_pay_on_the_web/applepayshippingmethod/) | A list of shipping methods that are available to the updated shipping contact. | | [newTotal](https://developer.apple.com/documentation/apple_pay_on_the_web/applepayshippingcontactupdate/2928621-newtotal) | The new total that results from a change in the shipping contact. | **Handle shipping address changes** ```js const applepay = new ApplePay(checkout, { // ...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); }, }); ``` ### Configure-Shipping-Method-Changes-Callback-Apple-Pay-Express ## Configure the callback to handle shipping method changes If the shopper selects a different shipping method, handle the shipping method change: 1. Implement the [`onShippingMethodSelected` ](https://developer.apple.com/documentation/applepayontheweb/applepaysession/onshippingmethodselected)event handler that receives the [ApplePayShippingMethodSelectedEvent](https://developer.apple.com/documentation/apple_pay_on_the_web/applepayshippingmethodselectedevent). 2. Pass the fields from the [ApplePayShippingMethodUpdate](https://developer.apple.com/documentation/applepayontheweb/applepayshippingmethodupdate) object, including: | Field | Description | | -------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- | | [newLineItems](https://developer.apple.com/documentation/applepayontheweb/applepayshippingmethodupdate/newlineitems) | The updated line items list after the change in the shipping method. | | [newTotal](https://developer.apple.com/documentation/applepayontheweb/applepayshippingmethodupdate/newtotal) | The new total that results from a change in the shipping method. | **Handle shipping method changes** ```js const applepay = new ApplePay(checkout, { // ...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); }, }); ``` ### Configure-Shopper-Info-Callback ## Configure the callback to get the shopper's information Implement the `onAuthorized` event handler to get the shopper's [information from Apple Pay](https://developer.apple.com/documentation/apple_pay_on_the_web/applepaypayment) and implement checks before continuing the payment flow. This is triggered before [`onSubmit` ](/online-payments/build-your-integration/advanced-flow/?platform=Web\&integration=Components\&version=6.0.0#add), and must be resolved or rejected to continue the payment flow. **Implement onAuthorized** ```js const applepay = new ApplePay(checkout, { // ...Other parameters. onAuthorized: (data, actions) => { console.log('Authorized event containing raw data and pre-formatted data', data); actions.resolve(); }, }); ``` ### Mount-Apple-Pay-Express ## Mount the Component Check that Apple Pay is available and mount the Component on the DOM element you created: **Mount the Component** ```js applePay .isAvailable() .then(() => { applepay.mount("#applepay-container"); }) .catch(e => { // Apple Pay isn't available. }); ``` ### Test-And-Go-Live-Apple-Pay-Express ## Test and go live Use Apple's test card numbers to test your integration. For a full list of test cards and instructions how to add these to your test device, see [Sandbox testing](https://developer.apple.com/apple-pay/sandbox-testing/) on Apple's Developer website. Check the status of an Apple Pay test payment in your [Customer Area](https://ca-test.adyen.com/) > **Transactions** > ** Payments**. ### Going live To process live Apple Pay payments, your API credential needs to have the **API Clientside Encryption Payments role**. You can check this in your [live Customer Area](https://ca-live.adyen.com/) or ask your Admin user to verify. When you are ready to accept live payments, follow the [steps to go live](/payment-methods/apple-pay/web-component/#going-live) with your or Adyen's Apple Pay certificate. ### Code-Samples-Apple-Pay-Express ## Code samples Below are the code samples for the steps explained on this page in full. ** ### HTML **DOM element** ```html ``` ** ### JavaScript **Component implementation example** ```js const applepay = new ApplePay(checkout, { // ...Other parameters. // Required field. countryCode: 'US', 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: (data, actions) => { console.log('Authorized event containing raw data and pre-formatted data', data); actions.resolve(); }, }); // Step 6: Mount the Component. applePay .isAvailable() .then(() => { applePayComponent.mount("#applepay-container"); }) .catch(e => { // Apple Pay isn't available. }); ``` ### See-Also-Apple-Pay-Express ## See also * [Web Components integration guide](/online-payments/components-web) * [Apple Pay](/payment-methods/apple-pay) * [Apple Pay error codes](/development-resources/error-codes#apple-pay-error-codes)