Adyen

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.

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

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

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

8. Click Save changes.

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

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

5. Click Apply.

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

Update your project's configuration

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

## project settings
configuration:
  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/v69
      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.