This is the early access documentation preview for Custom Views. This documentation might not be in sync with our official documentation.

Adyen integration in The Good Store

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

The Good Store also comes with a checkout Frontend Component 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.0 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 documentation

commercetools also offers an open-source integration between commercetools Composable Commerce and Adyen, 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.

Prerequisites

An Adyen account
At least one payment method added to your Adyen account.
Adyen API credentials.

Get started

To start using the Adyen integration, follow these steps:

Add the following project configuration fields to the project schema from the Studio.

Add Adyen project configuration fieldsjson

{
  "name": "Adyen Extension",
  "fields": [
    {
      "label": "Base URL",
      "field": "EXTENSION_ADYEN_BASE_URL",
      "type": "string",
      "translatable": false,
      "required": true
    },
    {
      "label": "Merchant Account",
      "field": "EXTENSION_ADYEN_MERCHANT_ACCOUNT",
      "type": "string",
      "translatable": false,
      "required": true
    },
    {
      "label": "API Key",
      "field": "EXTENSION_ADYEN_API_KEY",
      "type": "encrypted",
      "translatable": false,
      "required": true
    },
    {
      "label": "Password",
      "field": "EXTENSION_ADYEN_PASSWORD",
      "type": "encrypted",
      "translatable": false,
      "required": true
    },
    {
      "label": "HMAC Key",
      "field": "EXTENSION_ADYEN_HMAC_KEY",
      "type": "encrypted",
      "translatable": false,
      "required": true
    }
  ]
}

Set the Adyen configuration values from the Studio.
Set up a webhook 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 configuration values or generate a new key and update the configuration values 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.

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.

Create cardSummary Custom Fieldjson

  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"
  } ]
  }'

Configure your environments to be PCI DSS compliant, as required by Adyen.
- On the client side, in the .env file of your commercetools Frontend project, set your Adyen client key 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 Netlify or any other provider.
For test environments, you can contact Adyen support 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 component. 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.