Adyen integration in The Good Store

AdyenExternal link icon is a payment provider that allows merchants to accept payments from customers worldwide. The Good Store comes with an out-of-the-box API-onlyExternal link icon Adyen integration.

The Good Store also comes with a checkout Frontend ComponentExternal link icon that is integrated with the Adyen API. Unlike the implementation of the Adyen integration described here, which uses Adyen's pre-built UI components, The Good Store uses its own UI component to maintain complete control over the checkout UX/UI design.

The Good Store's Adyen integration includes 3-D Secure 2.0External link icon authentication. The Good Store does not include any solution for storing and processing raw credit card data in the frontend. For more information on storing and processing credit card data according to PCI DSS, see the Adyen documentationExternal link icon

commercetools also offers an open-source integration between commercetools Composable Commerce and AdyenExternal link icon, which can be used with or without The Good Store's Adyen integration. The integration between commercetools Composable Commerce and Adyen can be used to implement notifications, manage refunds, and handle payment updates.

Get started

To start using the Adyen integration, follow these steps:

  1. Open the project.yml file at the following path <root>/thegoodstore_home/config/project.yml.

  2. Add your Adyen credentials in the configuration section as follows.

    Add your Adyen credentialsyml
    baseUrl: # Remove -test on production environments
    merchantAccount: <your-merchant-account-name>
    apiKey: <your-api-key>
    password: <your-api-key-password> # Not required
    clientKey: <your-client-key> # Not required
    hmacKey: <your-hmac-key>
    Clipboard icon
  3. Set up a webhookExternal link icon that will be called to update the OrderState in commercetools Composable Commerce after successful payment. Set up the webhook by entering the following configuration values.

    • In the Server configuration field, enter the URL of the endpoint that will receive the webhook notifications. This should be <your-host>/frontastic/action/adyen/notify.
    • In the HMAC Key field, either enter the key that you added in the project.yml file or generate a new key and update your project.yml file accordingly.

    Once you have created the webhook, Adyen will send a test notification to your webhook endpoint to ensure that it is properly configured. You can then use the Adyen API to test your webhook by triggering payment events and verifying that your server or application receives the corresponding webhook notifications.

  4. Create a cardSummary Custom Field for the commercetools Composable Commerce Payment type as follows. When the webhook is triggered upon successful payment, the last four digits of the credit card are stored in the cardSummary field.

    curl --location --request POST '<commercetools-host>/<project-key>/types' \
    --header 'Content-Type: application/json' \
    --header 'Authorization: Bearer <access-token>' \
    --data-raw '{
    "key" : "paymenttype",
    "name" : {
    "en" : "Payment"
    "description" : {
    "en" : "Payment custom type."
    "resourceTypeIds" : [ "payment" ],
    "fieldDefinitions" : [ {
    "name" : "cardSummary",
    "label" : {
    "en" : "Card Summary"
    "required" : false,
    "type" : {
    "name" : "String"
    "inputHint" : "SingleLine"
    } ]
    Clipboard icon
  5. Configure your environments to be PCI DSS compliant, as required by AdyenExternal link icon.

    • On the client side, in the .env file of your commercetools Frontend project, set your Adyen client keyExternal link icon as the value of the NEXT_PUBLIC_ADYEN_CLIENT_KEY variable. If you are working locally, set the value of the NEXT_PUBLIC_ADYEN_CLIENT_KEY variable only in the .env.local file.
    • On production, set your Adyen client key as the value of the environment variable on NetlifyExternal link icon or any other provider.
    Information icon

    For test environments, you can contact Adyen supportExternal link icon to allow payments without being PCI DSS compliant.

Payment logic

In the index.ts file at the following path components/commercetools-ui/organisms/checkout/provider/payment/types/index.ts, you can find the PaymentProvider interface. The Adyen payment provider at the following path components/commercetools-ui/organisms/checkout/provider/payment/adyen implements the interface.

All payment logic lives in the payment provider. Hence, all of Adyen's payment logic is under components/commercetools-ui/organisms/checkout/provider/payment/adyen, which is a Context Provider that provides values and callbacks used by the checkout componentExternal link icon. The checkout component is responsible for the interaction between the user and Adyen integration.

If you need to add a payment provider other than Adyen, add it at the following path components/commercetools-ui/organisms/checkout/provider/payment. The provider should be a Context Provider that provides a value of type PaymentProvider.