Our express checkout module lets you implement express checkout for your headless Adobe Commerce integration.
The 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.
Requirements
| Requirement | Description |
|---|---|
| Integration type | Make sure that you have:
|
| Setup steps | Before you begin:
|
Headless integration types
Learn more
Find the GraphQL schema definition and the REST API implementation for express checkout on our GitHub.
Two web APIs can be used to utilize the Adyen functionality with Adobe Commerce in a headless implementation:
- REST - This is the most widely used web API. All of the functionalities provided by the Adyen plugin can be accessed using this method.
- GraphQL - This is an alternative way to interact with web APIs. The Adyen plugin utilizes the
/graphqlendpoint exposed by the Adobe Commerce back-end and adds the functionality that is related to the plugin. All functionalities provided by the Adyen plugin can be accessed using this method. For more information, checkout the Adobe Commerce GraphQL documentation.GraphQL is only available with plugin v8.2.0 or later.
The 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.
How it works
With 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.
The flow depends on where you show the option to use express checkout in your store:
Initialize a quote
Adobe Commerce requires a quote to be generated to complete a transaction and create an order.
If you show express payment methods on:
- Cart 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.
- Product detail page: initialize a quote manually.
Initialize a quote manually
To initialize a quote on the product detail page, make an API request.
If you are using REST, the endpoint differs per use case. If you are using GraphQL, the endpoint is /graphql.
Get the shopper's address and available shipping methods
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.
Update the order with the selected shipping method
Update the order in Adobe Commerce after your shopper selects one of the available shipping methods.
Handle payment amount changes
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.
Complete the payment
To complete the payment, the shopper's cart must be active. If you show express payment methods on:
- Cart or mini-cart pages: the shopper's cart is already active. Proceed to place the order.
- Product detail page: you must manually activate the cart for the quote you initialized manually.
Activate the cart manually
If 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.
If you are using REST, the endpoint differs per use case. If you are using GraphQL, the endpoint is /graphql.
Place the order
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 triggers the
onAuthorized
event. In this event, implement the steps to complete the payment.
If 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.
Get the payment outcome
After you place the order, use the same REST API and GraphQL endpoints you use to check the payment status with your standard headless implementation.
When the payment is completed, redirect shoppers to your payment success page.
Handle abandoned carts
If 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.
In the payment method component's event, make an API request to cancel the quote.
If you are using REST, the endpoint differs per use case. If you are using GraphQL, the endpoint is /graphql.
Updating PayPal orders
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 endpoint.
During the express flow, you have to update the order when:
- The shopper initially enters their shipping address in the PayPal lightbox.
- The shopper selects one of the delivery methods that are available.
- The shopper modifies either of these details.
The 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.
If you are using REST, the endpoint differs per use case. If you are using GraphQL, the endpoint is /graphql.
Testing
When you are done setting up your integration, test that the express checkout flow works as expected for the payment methods you support.
- For Apple Pay, use Apple's test card numbers.
- For Google Pay, use your Google Pay wallet.
- For PayPal, use your PayPal Sandbox account.