In this tutorial, you'll set up your Adyen test account to use it with commercetools Frontend. While this tutorial uses the test account, you also can follow the same steps on a live account.

Create API credentials

  1. Log in to your Adyen test dashboard.
  2. Go to Developer > API credentials.
  3. Click Create new credential. The Create API credential window opens. Select Web service user as the Credential type and click Create credential.

566df6e 19 09 2022 at 15 42 22 22x

  1. In the Server settings section, click Generate API key. Copy and save the API key for later use.

6f0a0ab 19 09 2022 at 16 22 272x

  1. In the Client settings section, click Generate client key. Copy and save the client key for later use.

ca1a698 generate client key

  1. Add the site URLs using these credentials to the list of allowed origins.

9941007 19 09 2022 at 16 22 352x

  1. Click Save changes.
  2. Copy merchantAccount from the Settings > Merchant accounts.

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. Go to Developers > Webhooks.
  2. Click the Add Webhook button in the top right. In the Create new webhook window, add a Standard notification webhook.

6d4d409 19 09 2022 at 16 04 132x

  1. Under the General section, edit the server configuration to add the webhook URL. You must register the URL https://<your-site>/frontastic/action/payment/notifications (where <your-site> is your production/staging/sandbox URL) with the JSON method. Click Apply.

aca220b 19 09 2022 at 13 38 36 22x

  1. Under the Security section, generate and copy an HMAC Key.

ac62ded 19 09 2022 at 13 38 45 22x

Update the project configuration

The baseUrl used below 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 shown below.

## project settings
apiKey: <replace-with-adyen-api-key>
merchantAccount: <replace-with-adyen-mechant-account-name>
clientKey: <replace-with-adyen-client-key>
hmacKey: <replace-with-adyen-webhook-hmac>
## other configurations