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

  1. Log in to your Adyen test dashboard.

  2. From the left navigation, go to Developers > API credentials.

  3. Click Create new credential: the Create API credential dialog opens.

  4. Select Web service user as the Credential type and click Create credential: the Configure API credentials page opens.

The Create API credential dialog with the Credential type, Username, and Description fields and the Cancel and Create credential buttons.

  1. In Server settings > Authentication > API key, click Generate API key. Then, copy and save the API key for later use.

  2. In Client settings > Authentication > Client key, click Generate client key. Then, copy and save the client key for later use.

  3. In Client settings > Authentication > Add allowed origins, add the site URLs related to the above credentials.

  4. Click Save changes.

  5. 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.

  1. From the left navigation, go to Developers > Webhooks.

  2. Click Webhook: the Create new webhook dialog opens.

  3. In the Recommended webhooks list, click Add for the Standard notification webhook: the Standard notification page opens.

The Create new webhook dialog with the Reccomended webhooks and All webhooks lists and Add buttons

  1. In General > Server configuration > URL, add the webhook URL like https://<your-site>/frontastic/action/payment/notifications (where <your-site> is your production/staging/sandbox URL). Then, from Method select JSON.

  2. Click Apply.

  3. In Security > HMAC key, select Generate new key then generate and copy the HMAC Key.

Update your project's configuration

The 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.

Update project.yml with the Adyen configuration, as in the following example:

## project settings
apiKey: <replace-with-adyen-api-key>
merchantAccount: <replace-with-adyen-mechant-account-code>
clientKey: <replace-with-adyen-client-key>
hmacKey: <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.

The AdyenCheckout component (/packages/frontend/components/commercetools-ui/adyen-checkout/index.tsx) handles:

  • 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.

Composable Commerce
Getting StartedMerchant CenterTutorialsHTTP APIGraphQL APIImport & ExportSDKs & Client LibrariesCustom Applications
Getting StartedStudioDevelopingHTTP API
Sign upLog inSupportStatusOfferingTech BlogIntegrationsUser Research Program
Copyright © 2023 commercetools
Privacy PolicyImprint