- An Adyen account
- Payment settings configured in your commerce provider
This document explains how to set up your Adyen test account to use it with commercetools Frontend. In this document, we use the test account but you can execute the same steps on a live account. Furthermore, this document gives an overview of the Checkout Frontend component and of the payment webhook handler that comes built-in with the Adyen integration.
Create API credentials
Log in to your Adyen test dashboard.
From the left navigation, go to Developers > API credentials.
Click Create new credential: the Create API credential dialog opens.
Select Web service user as the Credential type and click Create credential: the Configure API credentials page opens.
In Server settings > Authentication > API key, click Generate API key. Then, copy and save the API key for later use.
In Client settings > Authentication > Client key, click Generate client key. Then, copy and save the client key for later use.
In Client settings > Authentication > Add allowed origins, add the site URLs related to the above credentials.
Click Save changes.
From the left navigation, go to Settings > Merchant accounts and copy the Account code.
Set up a webhook
You must register your payment notifications action handler as a webhook in the Adyen dashboard to receive payment status updates.
From the left navigation, go to Developers > Webhooks.
Click Webhook: the Create new webhook dialog opens.
In the Recommended webhooks list, click Add for the Standard notification webhook: the Standard notification page opens.
In General > Server configuration > URL, add the webhook URL like
<your-site>is your production/staging/sandbox URL). Then, from Method select JSON.
In Security > HMAC key, select Generate new key then generate and copy the HMAC Key.
Update your project's configuration
baseUrl used in the following example is for test accounts only. You must replace this
baseUrl with the live endpoint before releasing the application, as described in Adyen documentation.
project.yml with the Adyen configuration, as in the following example:
## project settingsconfiguration:payment:adyen:apiKey: <replace-with-adyen-api-key>merchantAccount: <replace-with-adyen-mechant-account-code>clientKey: <replace-with-adyen-client-key>baseUrl: https://checkout-test.adyen.com/v69hmacKey: <replace-with-adyen-webhook-hmac>## other configurations
Checkout payment component
When using 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
AdyenCheckout React component to handle the checkout flow.
AdyenCheckout component (
- Selecting shipping and billing addresses.
- Displaying an order overview.
- Listing available payment methods.
- Collecting the 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
packages/backend/payment-adyen/actionControllers/AdyenController.ts file. This webhook handles the payment success notifications coming from Adyen by creating the
https://<your-site>/frontastic/action/payment/notifications endpoint that you specified during the webhook setup.
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.