- A headless Adobe Commerce plugin integration<\/a>.<\/li>
- Web Components<\/a> integrations for the express payment methods<\/a> that you want to support.<\/li><\/ul><\/td>\n<\/tr>\n
\n Setup steps<\/strong><\/td>\n Before you begin: - Install the Adobe Commerce express checkout module<\/a>.<\/li>
- Implement express checkout<\/a> for the express payment methods that you offer.<\/li><\/ul><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Headless integration types<\/h2>\n
\nLearn more<\/h5>
![\"\"](\"\/images\/a\/1\/e\/2\/c\/a1e2c8f087730e8565e5073245582a9636238705-github-icon.png\")
Find the GraphQL schema definition<\/a> and the REST API implementation<\/a> for express checkout on our GitHub.<\/p><\/div><\/div>\n\nYou can use one of the following web APIs to get Adyen functionalities in your Adobe Commerce headless implementation:<\/p>\n
- \n
- REST<\/strong>: The most widely used web API. This method allows you to access all the functionalities provided by the Adyen plugin.<\/li>\n
- GraphQL<\/strong>:
\n\n Requires plugin v8.2.0 or later\n <\/tag>\n<\/div>\nThe Adyen plugin utilizes the \/graphql<\/code> endpoint exposed by the Adobe Commerce back-end, and adds functionality that is related to the plugin. You can access all functionalities provided by the Adyen plugin with this method. For more information, checkout the Adobe Commerce GraphQL documentation<\/a>.<\/li>\n<\/ul>\nThe steps to follow to set up express payment methods are different for REST and GraphQL integrations. If you are using REST, the endpoint differs per use case. If you are using GraphQL, the endpoint is
\/graphql<\/code>, and there are different mutations<\/a> that you need to use.<\/p>\nHow it works<\/h2>\n
With a headless Adobe Commerce integration, you can use the Adyen Web Components<\/a> to support express checkout. You use our Components to show the express payment methods to your shoppers, and make requests to the Adobe Commerce API to handle the payment flow.<\/p>\n
The flow depends on where you show the option to use express checkout in your store:<\/p>\n\n
\n\nInitialize a quote<\/h2>\n
Adobe Commerce requires a quote to be generated to complete a transaction and create an order.<\/p>\n
If you show express payment methods on:<\/p>\n
- \n
- Cart or mini-cart pages<\/strong>: when a shopper adds an item to their shopping cart for the first time, Adobe commerce creates a quote<\/a>. Proceed to get the shopper's address and available shipping methods<\/a>.<\/li>\n
- Product detail page<\/strong>: initialize a quote manually<\/a>.<\/li>\n<\/ul>\n
Initialize a quote manually<\/h3>\n
To initialize a quote on the product detail page, make an API request.<\/p>\n
If you are using REST, the endpoint differs per use case. If you are using GraphQL, the endpoint is
\/graphql<\/code>.<\/p>\n\n\n\nGet the shopper's address and available shipping methods<\/h2>\n
After an Adobe Commerce quote is created for the shopper's order, start the express checkout flow by presenting the express payment method and collecting the shopper's details.<\/p>\n\n
\n\nUpdate the order with the selected shipping method<\/h2>\n
Update the order in Adobe Commerce after your shopper selects one of the available shipping methods.<\/p>\n\n
\n\nHandle payment amount changes<\/h2>\n
The total payment amount may change depending on the shopper's selected shipping method. You must then update the payment method component and the Adobe Commerce quote with the final amount.<\/p>\n\n
\n\nComplete the payment<\/h2>\n
To complete the payment, the shopper's cart must be active. If you show express payment methods on:<\/p>\n
- \n
- Cart or mini-cart pages<\/strong>: the shopper's cart is already active. Proceed to place the order<\/a>.<\/li>\n
- Product detail page<\/strong>: you must manually activate<\/a> the cart for the quote you initialized manually.<\/li>\n<\/ul>\n
Activate the cart manually<\/h3>\n
If you show express payment methods on the product detail page, and initialized a quote manually<\/a>, make an API request to activate the cart for the quote you initialized.<\/p>\n
If you are using REST, the endpoint differs per use case. If you are using GraphQL, the endpoint is
\/graphql<\/code>.<\/p>\n\n\n\nPlace the order<\/h3>\n
When the shopper selects the express payment button, the payment method components trigger an event to complete the payment. For example, the Apple Pay Component<\/a> triggers the \n
onAuthorized<\/code>\n<\/a> event. In this event, implement the steps to complete the payment.<\/p>\n\n\n\n\nIf you initialized a quote manually<\/a> to mount the payment method component on the product detail page, and disabled the shopper's real cart, the plugin activates the disabled cart after the payment is completed.<\/p>\n<\/div>\n
Get the payment outcome<\/h2>\n
After you place the order, use the same REST API and GraphQL endpoints you use to check the payment status<\/a> with your standard headless implementation.<\/p>\n
When the payment is completed, redirect shoppers to your payment success page.<\/p>\n
Handle abandoned carts<\/h3>\n
If you initialized a quote manually<\/a> to initiate the express checkout flow on the product detail page, and the shopper abandons the payment page, cancel the quote manually. The payment method components throw an event to handle this case. For example, the Apple Pay component throws the
onError<\/code> event.<\/p>\nIn the payment method component's event, make an API request to cancel the quote.<\/p>\n
If you are using REST, the endpoint differs per use case. If you are using GraphQL, the endpoint is
\/graphql<\/code>.<\/p>\n\n\n\nUpdating PayPal orders<\/h2>\n
For PayPal express payments, you must update the order each time your shopper changes the shipping address or method to update the PayPal lightbox. In the Adyen Checkout API, this is done with the \/paypal\/updateOrder<\/a> endpoint.<\/p>\n
During the express flow, you have to update the order when:<\/p>\n
- \n
- The shopper initially enters their shipping address in the PayPal lightbox<\/a>.<\/li>\n
- The shopper selects one of the delivery methods that are available<\/a>.<\/li>\n
- The shopper modifies either of these details.<\/li>\n<\/ul>\n
The PayPal component uses events, such as
onShippingAddressChange<\/code> oronShippingOptionsChange<\/code>, to handle shipping address and method changes. In these events, make an API request to update the order.<\/p>\nIf you are using REST, the endpoint differs per use case. If you are using GraphQL, the endpoint is
\/graphql<\/code>.<\/p>\n\n\n\nTesting<\/h2>\n
When you are done setting up your integration, test that the express checkout flow works as expected for the payment methods you support.<\/p>\n
- \n
- For Apple Pay, use Apple's test card numbers<\/a>.<\/li>\n
- For Google Pay, use your Google Pay wallet<\/a>.<\/li>\n
- For PayPal, use your PayPal Sandbox account<\/a>.<\/li>\n<\/ul>\n
See also<\/h2>\n
- \n
- Adobe Commerce plugin<\/a><\/li>\n
- Adobe Commerce headless integration<\/a><\/li>\n
- Express checkout<\/a><\/li>\n<\/ul>","url":"https:\/\/docs.adyen.com\/pt\/plugins\/adobe-commerce\/headless-integration\/express-checkout","articleFields":{"description":"Integrate express payment methods for your headless Adobe Commerce integration.","feedback_component":true,"last_edit_on":"05-01-2024 11:36","filters_component":false,"search_tags":["magento","magento 2","adobe","adobe commerce"],"parameters":{"logo_2":""},"page_id":"fa966870-a103-4464-81e6-dc039ef06fc9","decision_tree":"[]","process":{"twig":true}},"algolia":{"url":"https:\/\/docs.adyen.com\/pt\/plugins\/adobe-commerce\/headless-integration\/express-checkout","title":"Express checkout","content":"Our express checkout module lets you implement express checkout for your headless Adobe Commerce integration.\nThe module supports express payments with Apple Pay, Google Pay, and PayPal. You can offer the option to use express checkout by placing express payment method buttons in the product detail, cart, and mini-cart pages on your website. This lets your shopper complete their payment without having to go to a separate checkout page.\nRequirements\n\n\n\nRequirement\nDescription\n\n\n\n\nIntegration type\nMake sure that you have: A headless Adobe Commerce plugin integration.Web Components integrations for the express payment methods that you want to support.\n\n\nSetup steps\nBefore you begin: Install the Adobe Commerce express checkout module.Implement express checkout for the express payment methods that you offer.\n\n\n\nHeadless integration types\n\nLearn more Find the GraphQL schema definition and the REST API implementation for express checkout on our GitHub.\n\nYou can use one of the following web APIs to get Adyen functionalities in your Adobe Commerce headless implementation:\n\nREST: The most widely used web API. This method allows you to access all the functionalities provided by the Adyen plugin.\nGraphQL: \n \n Requires plugin v8.2.0 or later\n \n\nThe Adyen plugin utilizes the \/graphql endpoint exposed by the Adobe Commerce back-end, and adds functionality that is related to the plugin. You can access all functionalities provided by the Adyen plugin with this method. For more information, checkout the Adobe Commerce GraphQL documentation.\n\nThe steps to follow to set up express payment methods are different for REST and GraphQL integrations. If you are using REST, the endpoint differs per use case. If you are using GraphQL, the endpoint is \/graphql, and there are different mutations that you need to use.\nHow it works\nWith a headless Adobe Commerce integration, you can use the Adyen Web Components to support express checkout. You use our Components to show the express payment methods to your shoppers, and make requests to the Adobe Commerce API to handle the payment flow.\nThe flow depends on where you show the option to use express checkout in your store:\n\n\n \n \n \n \n\n\n\nInitialize a quote\nAdobe Commerce requires a quote to be generated to complete a transaction and create an order.\nIf you show express payment methods on:\n\nCart or mini-cart pages: when a shopper adds an item to their shopping cart for the first time, Adobe commerce creates a quote. Proceed to get the shopper's address and available shipping methods.\nProduct detail page: initialize a quote manually.\n\nInitialize a quote manually\nTo initialize a quote on the product detail page, make an API request.\nIf you are using REST, the endpoint differs per use case. If you are using GraphQL, the endpoint is \/graphql.\n\n\n \n \n \n \n\n\nGet the shopper's address and available shipping methods\nAfter an Adobe Commerce quote is created for the shopper's order, start the express checkout flow by presenting the express payment method and collecting the shopper's details.\n\n\n \n \n \n \n\n\n\n\nUpdate the order with the selected shipping method\nUpdate the order in Adobe Commerce after your shopper selects one of the available shipping methods.\n\n\n \n \n \n \n\n\n\n\nHandle payment amount changes\nThe total payment amount may change depending on the shopper's selected shipping method. You must then update the payment method component and the Adobe Commerce quote with the final amount.\n\n\n \n \n \n \n\n\n\nComplete the payment\nTo complete the payment, the shopper's cart must be active. If you show express payment methods on:\n\nCart or mini-cart pages: the shopper's cart is already active. Proceed to place the order.\nProduct detail page: you must manually activate the cart for the quote you initialized manually.\n\nActivate the cart manually\nIf you show express payment methods on the product detail page, and initialized a quote manually, make an API request to activate the cart for the quote you initialized.\nIf you are using REST, the endpoint differs per use case. If you are using GraphQL, the endpoint is \/graphql.\n\n\n \n \n \n \n\n\nPlace the order\nWhen the shopper selects the express payment button, the payment method components trigger an event to complete the payment. For example, the Apple Pay Component triggers the \n onAuthorized\n event. In this event, implement the steps to complete the payment.\n\n\n \n \n \n \n\n\n\n\n\nIf you initialized a quote manually to mount the payment method component on the product detail page, and disabled the shopper's real cart, the plugin activates the disabled cart after the payment is completed.\n\nGet the payment outcome\nAfter you place the order, use the same REST API and GraphQL endpoints you use to check the payment status with your standard headless implementation.\nWhen the payment is completed, redirect shoppers to your payment success page.\nHandle abandoned carts\nIf you initialized a quote manually to initiate the express checkout flow on the product detail page, and the shopper abandons the payment page, cancel the quote manually. The payment method components throw an event to handle this case. For example, the Apple Pay component throws the onError event.\nIn the payment method component's event, make an API request to cancel the quote.\nIf you are using REST, the endpoint differs per use case. If you are using GraphQL, the endpoint is \/graphql.\n\n\n \n \n \n \n\n\n\nUpdating PayPal orders\nFor PayPal express payments, you must update the order each time your shopper changes the shipping address or method to update the PayPal lightbox. In the Adyen Checkout API, this is done with the \/paypal\/updateOrder endpoint.\nDuring the express flow, you have to update the order when:\n\nThe shopper initially enters their shipping address in the PayPal lightbox.\nThe shopper selects one of the delivery methods that are available.\nThe shopper modifies either of these details.\n\nThe PayPal component uses events, such as onShippingAddressChange or onShippingOptionsChange, to handle shipping address and method changes. In these events, make an API request to update the order.\nIf you are using REST, the endpoint differs per use case. If you are using GraphQL, the endpoint is \/graphql.\n\n\n \n \n \n \n\n\nTesting\nWhen you are done setting up your integration, test that the express checkout flow works as expected for the payment methods you support.\n\nFor Apple Pay, use Apple's test card numbers.\nFor Google Pay, use your Google Pay wallet.\nFor PayPal, use your PayPal Sandbox account.\n\nSee also\n\nAdobe Commerce plugin\nAdobe Commerce headless integration\nExpress checkout\n","type":"page","locale":"pt","boost":16,"hierarchy":{"lvl0":"Home","lvl1":"Plugins","lvl2":"Adobe Commerce","lvl3":"Headless integration","lvl4":"Express checkout"},"hierarchy_url":{"lvl0":"https:\/\/docs.adyen.com\/pt","lvl1":"https:\/\/docs.adyen.com\/pt\/plugins","lvl2":"https:\/\/docs.adyen.com\/pt\/plugins\/adobe-commerce","lvl3":"https:\/\/docs.adyen.com\/pt\/plugins\/adobe-commerce\/headless-integration","lvl4":"\/pt\/plugins\/adobe-commerce\/headless-integration\/express-checkout"},"levels":5,"category":"Plugins","category_color":"green","tags":["magento","magento 2","adobe","adobe commerce"]}}
- Adobe Commerce headless integration<\/a><\/li>\n
- For Google Pay, use your Google Pay wallet<\/a>.<\/li>\n
- The shopper selects one of the delivery methods that are available<\/a>.<\/li>\n
- Product detail page<\/strong>: you must manually activate<\/a> the cart for the quote you initialized manually.<\/li>\n<\/ul>\n
- Product detail page<\/strong>: initialize a quote manually<\/a>.<\/li>\n<\/ul>\n
- GraphQL<\/strong>:
- Implement express checkout<\/a> for the express payment methods that you offer.<\/li><\/ul><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
- Web Components<\/a> integrations for the express payment methods<\/a> that you want to support.<\/li><\/ul><\/td>\n<\/tr>\n