Adyen is a payment provider that lets merchants accept payments from customers worldwide. commercetools Frontend comes with an out-of-the-box integration with Adyen.
This document explains how to set up your e-commerce provider (for example, commercetools Composable Commerce) and to configure the Adyen backend extension.
Furthermore, since the Adyen integration uses Adyen UI components, this document gives an overview of the Checkout Frontend component and of the payment webhook handler that comes built-in with the integration.
Configure your e-commerce provider
To configure your e-commerce provider, follow these steps. While the following example uses commercetools Composable Commerce, you can adapt these instructions to your e-commerce provider.
- Log in to the Merchant Center and go to Settings > Project settings.
- From the International tab, set the currencies, languages, and countries for your Composable Commerce Project.
In your e-commerce provider, you must set the same languages as those set for the configuration of your commercetools Frontend project.
- In the Zones pane, group the countries that share shipping costs.
- From the Taxes tab, configure the Tax Categories and Tax Rates for your Composable Commerce Project.
- From the Shipping methods tab, configure the Shipping Methods and shipping rates for your Composable Commerce Project.
Configure the Adyen extension
To configure the Adyen extension, follow these steps:
Add the following project configuration fields to the project schema from the Studio.
Set the Adyen configuration values from the Studio.
Checkout payment component
With the Adyen integration, you don't need to implement any Frontend component because the Checkout Frontend component (
/packages/frontend/frontastic/tastics/checkout/index.tsx) uses the Adyen Web Drop-in component to handle the checkout flow.
AdyenCheckout component (
- The selection of shipping and billing addresses.
- The display of an order overview.
- The listing of available payment methods.
- The collection of payment credentials from users.
You can also edit this component to suit your business needs.
Payment webhook handler
The Adyen integration has a built-in webhook handler in the
This webhook handles payment success notifications coming from Adyen by creating the
https://<your-site>/frontastic/action/payment/notifications endpoint that you specified during the setup of the webhook in the Adyen Customer Area.
The webhook covers basic payment flow and order status update with the commerce provider. You can also edit the webhook function to handle your business-specific requirements, such as accepting partial payments.