{"title":"Apple Pay express checkout","category":"default","creationDate":1693830960,"content":"

<\/p>\n

You can configure the Apple Pay Component<\/a> 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.<\/p>\n

\n \n <\/in-page-filtering>\n<\/div>\n
\n <\/div>\n","url":"https:\/\/docs.adyen.com\/pt\/payment-methods\/apple-pay\/web-component\/express-checkout","articleFields":{"description":"Configure Apple Pay for express checkout.","parameters":{"express":"true","integration":"Components","platform":"Web","integration_guide_url":"build-your-integration\/sessions-flow?platform=Web&integration=Components","component_name":"the Component","component_name_capitalized":"The Component","payment_method":"Apple Pay","payment_method_type":"applepay","component_js_const":"applepay"},"feedback_component":true,"filters_component":true,"filters_config_folder":"payment-methods\/apple-pay-express","last_edit_on":"23-10-2023 13:40","page_id":"8f6b6d4d-ecf3-4409-bf4f-b8a855b67f90"},"algolia":[{"url":"https:\/\/docs.adyen.com\/pt\/payment-methods\/apple-pay\/web-component\/express-checkout","title":"Apple Pay express checkout","content":"Requirements\n\n\n\nRequirement\nDescription\n\n\n\n\nIntegration type\nA an Advanced flow Web Components v6 integration.\n\n\nAPI credential roles\nTo process live Apple Pay payments make sure that you have the following role API Clientside Encryption Payments role.\n\n\nLimitations\nOn 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 to learn about limitations per device.\n\n\nSetup steps\nBefore you begin, make sure that you have: Added Apple Pay in your Customer Area, and set up Apple Pay with your own or Adyen's certificate. Set up your Apple Pay Web Component integration. \n\n\nHow it works\nTo display the option to check out with Apple Pay express on your website:\n\nCreate a Document Object Model (DOM) element, placing it where you want to offer express checkout.\nAdd additional Apple Pay configuration to support express checkout, and get the shopper's billing and shipping information.\nImplement callbacks to handle different parts of the payment flow:\n\nHandle cases where the shopper changes their shipping address.\nHandle cases where the shopper changes their preferred shipping method.\nGet shopper's information from Apple Pay\n\nAfter checking that Apple Pay is available to the shopper, mount the Apple Pay component to the DOM element you created.\nCreate a DOM element\nCreate a Document Object Model (DOM) element where you want to implement express checkout.\n\n \nConfigure Apple Pay to return the shopper's details\nTo use express checkout with Apple Pay, you need to include additional configuration parameters in the Apple Pay Component.\n\n\n\nParameter\nDescription\n\n\n\n\nisExpress\nSet to true.\n\n\nrequiredBillingContactFields\nThe required billing contact fields. The only allowed value is the postalAddress.\n\n\nrequiredShippingContactFields\nThe required shipping contact fields.\n\n\n\n\n \nConfigure the callback to handle shipping address changes\nIf the shopper selects a different shipping address than the one you prefilled, handle the shipping address change:\n\nImplement the \n onShippingContactSelected\n event handler that receives the ApplePayShippingContactSelectedEvent so that you get updated information when the shopper selects a different shipping address.\n\nPass the fields from the ApplePayShippingContactUpdate object, including:\n\n\n\nField\nDescription\n\n\n\n\nnewLineItems\nThe updated line items list after the change in the shipping contact.\n\n\nnewShippingMethod\nA list of shipping methods that are available to the updated shipping contact.\n\n\nnewTotal\nThe new total that results from a change in the shipping contact.\n\n\n\n\n\n\n \nConfigure the callback to handle shipping method changes\nIf the shopper selects a different shipping method, handle the shipping method change:\n\nImplement the \n onShippingMethodSelected\n event handler that receives the ApplePayShippingMethodSelectedEvent.\n\nPass the fields from the ApplePayShippingMethodUpdate object, including:\n\n\n\nField\nDescription\n\n\n\n\nnewLineItems\nThe updated line items list after the change in the shipping method.\n\n\nnewTotal\nThe new total that results from a change in the shipping method.\n\n\n\n\n\n\n \nConfigure the callback to get the shopper's information\nImplement the onAuthorized event handler to get the shopper's information from Apple Pay and implement checks before continuing the payment flow.\nThis is triggered before \n onSubmit\n, and must be resolved or rejected to continue the payment flow.\n\n \nMount the Component\nCheck that Apple Pay is available and mount the Component on the DOM element you created:\n\n \nTest and go live\nUse Apple's test\u00a0card numbers\u00a0to\u00a0test your integration.\nFor a full list of test cards and instructions how to add these to your test device, see Sandbox testing\u00a0on\u00a0Apple's Developer website.\n \nCheck the status of an Apple Pay test payment in your\u00a0Customer Area\u00a0>\u00a0Transactions\u00a0> \u00a0Payments.\nGoing live\nTo 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 or ask your Admin user to verify.\n \nWhen you are ready to accept live payments, follow the steps to go live with your or Adyen's Apple Pay certificate.Code samples\nBelow are the code samples for the steps explained on this page in full.\n\n \n \n \n \n \n HTML\n \n \n \n \n\n See also\n\n\n Web Components integration guide\n \n Apple Pay\n \n Apple Pay error codes\n \n","type":"page","locale":"pt","boost":16,"hierarchy":{"lvl0":"Home","lvl1":"Payment methods","lvl2":"Apple Pay","lvl3":"Apple Pay Component","lvl4":"Apple Pay express checkout"},"hierarchy_url":{"lvl0":"https:\/\/docs.adyen.com\/pt","lvl1":"https:\/\/docs.adyen.com\/pt\/payment-methods","lvl2":"https:\/\/docs.adyen.com\/pt\/payment-methods\/apple-pay","lvl3":"https:\/\/docs.adyen.com\/pt\/payment-methods\/apple-pay\/web-component","lvl4":"\/pt\/payment-methods\/apple-pay\/web-component\/express-checkout"},"levels":5,"category":"Payment method","category_color":"green","tags":["Apple","express","checkout"]},{"url":"https:\/\/docs.adyen.com\/pt\/payment-methods\/apple-pay\/web-component\/express-checkout?payment-method=Apple Pay&integration=express","title":"Apple Pay express","content":"Requirements\n\n\n\nRequirement\nDescription\n\n\n\n\nIntegration type\nA an Advanced flow Web Components v6 integration.\n\n\nAPI credential roles\nTo process live Apple Pay payments make sure that you have the following role API Clientside Encryption Payments role.\n\n\nLimitations\nOn 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 to learn about limitations per device.\n\n\nSetup steps\nBefore you begin, make sure that you have: Added Apple Pay in your Customer Area, and set up Apple Pay with your own or Adyen's certificate. Set up your Apple Pay Web Component integration. \n\n\nHow it works\nTo display the option to check out with Apple Pay express on your website:\n\nCreate a Document Object Model (DOM) element, placing it where you want to offer express checkout.\nAdd additional Apple Pay configuration to support express checkout, and get the shopper's billing and shipping information.\nImplement callbacks to handle different parts of the payment flow:\n\nHandle cases where the shopper changes their shipping address.\nHandle cases where the shopper changes their preferred shipping method.\nGet shopper's information from Apple Pay\n\nAfter checking that Apple Pay is available to the shopper, mount the Apple Pay component to the DOM element you created.\nCreate a DOM element\nCreate a Document Object Model (DOM) element where you want to implement express checkout.\n\n \nConfigure Apple Pay to return the shopper's details\nTo use express checkout with Apple Pay, you need to include additional configuration parameters in the Apple Pay Component.\n\n\n\nParameter\nDescription\n\n\n\n\nisExpress\nSet to true.\n\n\nrequiredBillingContactFields\nThe required billing contact fields. The only allowed value is the postalAddress.\n\n\nrequiredShippingContactFields\nThe required shipping contact fields.\n\n\n\n\n \nConfigure the callback to handle shipping address changes\nIf the shopper selects a different shipping address than the one you prefilled, handle the shipping address change:\n\nImplement the \n onShippingContactSelected\n event handler that receives the ApplePayShippingContactSelectedEvent so that you get updated information when the shopper selects a different shipping address.\n\nPass the fields from the ApplePayShippingContactUpdate object, including:\n\n\n\nField\nDescription\n\n\n\n\nnewLineItems\nThe updated line items list after the change in the shipping contact.\n\n\nnewShippingMethod\nA list of shipping methods that are available to the updated shipping contact.\n\n\nnewTotal\nThe new total that results from a change in the shipping contact.\n\n\n\n\n\n\n \nConfigure the callback to handle shipping method changes\nIf the shopper selects a different shipping method, handle the shipping method change:\n\nImplement the \n onShippingMethodSelected\n event handler that receives the ApplePayShippingMethodSelectedEvent.\n\nPass the fields from the ApplePayShippingMethodUpdate object, including:\n\n\n\nField\nDescription\n\n\n\n\nnewLineItems\nThe updated line items list after the change in the shipping method.\n\n\nnewTotal\nThe new total that results from a change in the shipping method.\n\n\n\n\n\n\n \nConfigure the callback to get the shopper's information\nImplement the onAuthorized event handler to get the shopper's information from Apple Pay and implement checks before continuing the payment flow.\nThis is triggered before \n onSubmit\n, and must be resolved or rejected to continue the payment flow.\n\n \nMount the Component\nCheck that Apple Pay is available and mount the Component on the DOM element you created:\n\n \nTest and go live\nUse Apple's test\u00a0card numbers\u00a0to\u00a0test your integration.\nFor a full list of test cards and instructions how to add these to your test device, see Sandbox testing\u00a0on\u00a0Apple's Developer website.\n \nCheck the status of an Apple Pay test payment in your\u00a0Customer Area\u00a0>\u00a0Transactions\u00a0> \u00a0Payments.\nGoing live\nTo 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 or ask your Admin user to verify.\n \nWhen you are ready to accept live payments, follow the steps to go live with your or Adyen's Apple Pay certificate.Code samples\nBelow are the code samples for the steps explained on this page in full.\n\n \n \n \n \n \n HTML\n \n \n \n \n\n See also\n\n\n Web Components integration guide\n \n Apple Pay\n \n Apple Pay error codes\n \n","type":"page","locale":"pt","boost":16,"hierarchy":{"lvl0":"Home","lvl1":"Payment methods","lvl2":"Apple Pay","lvl3":"Apple Pay Component","lvl4":"Apple Pay express checkout"},"hierarchy_url":{"lvl0":"https:\/\/docs.adyen.com\/pt","lvl1":"https:\/\/docs.adyen.com\/pt\/payment-methods","lvl2":"https:\/\/docs.adyen.com\/pt\/payment-methods\/apple-pay","lvl3":"https:\/\/docs.adyen.com\/pt\/payment-methods\/apple-pay\/web-component","lvl4":"\/pt\/payment-methods\/apple-pay\/web-component\/express-checkout"},"levels":5,"category":"Payment method","category_color":"green","tags":["Apple Pay","express"]}]}