Adyen integration

This page contains information about the different ways you can accept payments with Adyen in your Front-Commerce application.

As a Front-Commerce payment method

Since version 2.10.0

P.S. No Magento modules are needed if you use this method. If you however want to integrate with the Adyen Magento module please refer to Magento2 Integration section.

Add the required environment variables

FRONT_COMMERCE_ADYEN_MERCHANT_ACCOUNT The merchant account name. You can find it in your Adyen Customer Area in the top left corner next to your company name
FRONT_COMMERCE_ADYEN_CLIENT_KEY The environment variable which contains your Adyen client key for the domains of your Front-Commerce stores. You can find it in your Adyen Customer Area under Developers > API Credential > [your_prefered_credential] > Client Key > Client Key
FRONT_COMMERCE_ADYEN_API_KEY The API key. You can find it in your Adyen Customer Area under Developers > API Credential > [your_prefered_credential] > API Key > API Key
FRONT_COMMERCE_ADYEN_LIVE_URL_PREFIX only needed in production environment. Should be configured to contain the Adyen live URL prefix
FRONT_COMMERCE_ADYEN_NOTIFICATION_USERNAME (more on webhooks below) you create it. You then have to copy it to the webhook section in your Adyen Customer Area under Developers > Webhooks > [your_prefered_webhook] > Authentication > User Name
FRONT_COMMERCE_ADYEN_NOTIFICATION_PASSWORD (more on webhooks below) you create it. You then have to copy it to the webhook section in your Adyen Customer Area under Developers > Webhooks > [your_prefered_webhook] > Authentication > Password
FRONT_COMMERCE_ADYEN_HMAC_KEY (more on webhooks below) create it from the webhook section in your Adyen Customer Area under Developers > Webhooks > [your_prefered_webhook] > Additional Settings > HMAC key
FRONT_COMMERCE_ADYEN_PREVIOUS_HMAC_KEY (more on webhooks below) when you regenerate your HMAC key configure this to be the old one

# In .env
FRONT_COMMERCE_ADYEN_MERCHANT_ACCOUNT=ExampleMerchant
FRONT_COMMERCE_ADYEN_CLIENT_KEY=live_32charactersstring
FRONT_COMMERCE_ADYEN_API_KEY=a_very_very_very_long_key
FRONT_COMMERCE_ADYEN_LIVE_URL_PREFIX=1797a841fbb37ca7-AdyenDemo-
FRONT_COMMERCE_ADYEN_NOTIFICATION_USERNAME=a_username
FRONT_COMMERCE_ADYEN_NOTIFICATION_PASSWORD=a_password
FRONT_COMMERCE_ADYEN_HMAC_KEY=the_hmac_key
FRONT_COMMERCE_ADYEN_PREVIOUS_HMAC_KEY=the_previous_hmac_key
# the Adyen client key is prefixed with live_ or test_

Register the Adyen payment module in Front-Commerce

In your Front-Commerce application:

For Magento1:

// .front-commerce.js
-  modules: [],
+  modules: ["./node_modules/front-commerce/modules/payment-adyen"],
   serverModules: [
     { name: "FrontCommerceCore", path: "server/modules/front-commerce-core" },
-    { name: "Magento1", path: "server/modules/magento1" }
+    { name: "Magento1", path: "server/modules/magento1" },
+    {
+      name: "Magento1Adyen",
+      path: "payment-adyen/server/modules/payment-adyen",
+    }
   ],
   webModules: [
-    { name: "FrontCommerce", path: "front-commerce/src/web" }
+    { name: "FrontCommerce", path: "front-commerce/src/web" },
+    {
+      name: "Adyen",
+      path: "front-commerce/modules/payment-adyen/web",
+    }
   ]

For Magento2:

// .front-commerce.js
-  modules: [],
+  modules: ["./node_modules/front-commerce/modules/payment-adyen"],
   serverModules: [
     { name: "FrontCommerceCore", path: "server/modules/front-commerce-core" },
-    { name: "Magento2", path: "server/modules/magento2" }
+    { name: "Magento2", path: "server/modules/magento2" },
+    {
+      name: "Magento2Adyen",
+      path: "payment-adyen/server/modules/payment-adyen/index.magento2.js",
+    }
   ],
   webModules: [
-    { name: "FrontCommerce", path: "front-commerce/src/web" }
+    { name: "FrontCommerce", path: "front-commerce/src/web" },
+    {
+      name: "Adyen",
+      path: "front-commerce/modules/payment-adyen/web",
+    }
   ]

Register your Adyen payment components

NOTE this is a temporary way to setup payment components. We are aware that it is tedious. It will definitely change in the future, when Front-Commerce will support new extension points for Payments.

Override the file that lets you register additional payments forms in Front-Commerce

mkdir -p my-module/web/theme/modules/Checkout/Payment/AdditionalPaymentInformation/
cp -u node_modules/front-commerce/src/web/theme/modules/Checkout/Payment/AdditionalPaymentInformation/getAdditionalDataComponent.js my-module/web/theme/modules/Checkout/Payment/AdditionalPaymentInformation/getAdditionalDataComponent.js

+import AdyenCheckout from "./AdyenCheckout";

const ComponentMap = {};

const getAdditionalDataComponent = (method) => {
+  if (method.code.startsWith("adyen_")) {
+    return AdyenCheckout;
+  }
  return ComponentMap[method.code];
};

Override the file that lets you register additional payments actions in Front-Commerce

mkdir -p my-module/web/theme/modules/Checkout/PlaceOrder
cp -u node_modules/front-commerce/src/web/theme/modules/Checkout/PlaceOrder/getAdditionalActionComponent.js my-module/web/theme/modules/Checkout/PlaceOrder/getAdditionalActionComponent.js

import None from "./AdditionalAction/None";
+import Adyen from "./AdditionalAction/Adyen";

const ComponentMap = {};

const getAdditionalActionComponent = (paymentCode, paymentAdditionalData) => {
+  if (paymentCode.startsWith("adyen")) {
+    return Adyen;
+  }
  return ComponentMap?.[paymentCode] ?? None;
};

mkdir -p my-module/web/theme/modules/FlashMessages
cp -u node_modules/front-commerce/src/web/theme/modules/FlashMessages/getFlashMessageComponent.js my-module/web/theme/modules/FlashMessages/getFlashMessageComponent.js

and

import React from "react";
import {
  InfoAlert,
  ErrorAlert,
  SuccessAlert,
} from "theme/components/molecules/Alert";
import { BodyParagraph } from "theme/components/atoms/Typography/Body";
+ import {
+   AdyenPaymentSuccess,
+   AdyenPaymentError,
+ } from "theme/modules/Adyen/FlashMessage";

// […]
const ComponentMap = {
  default: makeAlertMessageComponent(InfoAlert),
  info: makeAlertMessageComponent(InfoAlert),
  error: makeAlertMessageComponent(ErrorAlert),
  success: makeAlertMessageComponent(SuccessAlert),
+  adyenSuccess: AdyenPaymentSuccess,
+  adyenError: AdyenPaymentError,
};

Update your CSPs

IMPORTANT CSPs can cause issues with some 3DS2 authentication mechanisms. Please check with the Adyen support if there are known workarounds. Otherwise you may have to disable CSP altogether.

To allow loading Adyen related remote resources:

// my-module/config/website.js
  contentSecurityPolicy: {
    directives: {
      scriptSrc: [],
-      frameSrc: [],
+      frameSrc: ["*.adyen.com"],
      styleSrc: [],
-      imgSrc: [],
+      imgSrc: ["*.adyen.com"],
-      connectSrc: [],
+      connectSrc: ["*.adyen.com"],
      baseUri: []
    }
  },

Register custom styles (optional)

Developers can customize Adyen drop-in UI styles using CSS.

You can add an optional stylesheet from Front-Commerce in your application to customize styles. The provided stylesheet reuses existing styles from the theme as much as possible for a good integration by default. You can override it if needed to adapt the UI as wanted.

Add the following line to your web/theme/modules/_modules.scss file to load these styles:

@import "~theme/modules/Adyen/dropinCustomizations";

Add webhook

In your Adyen Customer Area under Developers > Webhooks click on the + Webkook button on the right top corner then click on Add for the Standard Notification type. Fill the fields as follows:

Transport:
- URL: the full url of your site followed by /webhooks/payment/notification/adyen e.g. https://www.example.com/webhooks/payment/notification/adyen
- Method: JSON
Authentication:
- User Name: the FRONT_COMMERCE_ADYEN_NOTIFICATION_USERNAME environment variable defined above
- Password: the FRONT_COMMERCE_ADYEN_NOTIFICATION_PASSWORD environment variable defined above
Additional Settings
- HMAC Key (HEX Encoded): click generate and copy it to FRONT_COMMERCE_ADYEN_HMAC_KEY environment variable defined above

That’s it!

You can now configure your Adyen payment methods from the Customer Area under Settings > Payment Methods and test the integration

Please keep in mind that Adyen payment methods depend on the Customer’s country, the Cart amount, and the Store currency. Different contexts could display different payment methods in the checkout.

As a Magento2 Integration

Since version 2.3.0 (developer preview since 2.1.0)

Note This integration aims to be transparent for administrators and developers. That is why we haven’t duplicated documentation from existing Magento resources. Please contact us if you need further assistance.

Front-Commerce is compatible with Adyen’s official Magento headless integration in its native version.

This integration is slightly different from traditional Magento2 headless payments in the sense that it contains a “companion component” in Front-Commerce. The component allows to display and Authorize payments from the checkout page, using Adyen’s Web Drop-in integration on the front-end. No redirection to other payment platforms is involved unless it is absolutely necessary, the customer remains on the Front-Commerce store.

Here is how to set this payment method up.

Install and configure the `Adyen_Payment` Magento2 extension (7.2+ < 8.0)

Follow Adyen’s documentation to install and configure the official Magento2 extension for Adyen payments. The minimum supported version is 7.2.0. We don’t yet support the 8.x versions due to breaking changes.

You must configure the “Payment Origin URL” in the “Advanced: PWA” with your Front-Commerce URL for each of your stores.

IMPORTANT please note that enabling or disabling payments in Magento’s admin area has no effect on payment methods visible on the storefront. This is a feature of the module: every active payment method in Adyen will be available. You either have to filter them in the frontend or from your Adyen account.

Add the Adyen client key in the environment

You need to define the FRONT_COMMERCE_ADYEN_CLIENT_KEY environment variable so that it contains your Adyen client key for the domains of your Front-Commerce stores:

# In .env
FRONT_COMMERCE_ADYEN_CLIENT_KEY=live_32charactersstring
# the Adyen client key is prefixed with live_ or test_

Register the Adyen payment module in Front-Commerce

// .front-commerce.js
-  modules: [],
+  modules: ["./node_modules/front-commerce/modules/payment-adyen"],
   serverModules: [
     { name: "FrontCommerceCore", path: "server/modules/front-commerce-core" },
-    { name: "Magento2", path: "server/modules/magento2" }
+    { name: "Magento2", path: "server/modules/magento2" },
+    {
+      name: "Magento2Adyen",
+      path: "payment-adyen/server/modules/magento2-payment-adyen",
+    }
   ],
   webModules: [
-    { name: "FrontCommerce", path: "front-commerce/src/web" }
+    { name: "FrontCommerce", path: "front-commerce/src/web" },
+    {
+      name: "Magento2Adyen",
+      path: "front-commerce/modules/payment-adyen/web",
+    }
   ]

That’s it!

You can now configure the Magento extension to use a Test mode and test the integration

Please keep in mind that Adyen payment methods depends on the Customer country, the Cart amount and the Store currency. Different contexts could display different payment methods in the checkout.

Previous Front-Commerce Payments Next Affirm integration

Edit on GitHub or Send us a feedback

As a Front-Commerce payment method

Add the required environment variables

Register the Adyen payment module in Front-Commerce

Register your Adyen payment components

Update your CSPs

Register custom styles (optional)

Add webhook

That’s it!

As a Magento2 Integration

Install and configure the Adyen_Payment Magento2 extension (7.2+ < 8.0)

Add the Adyen client key in the environment

Register the Adyen payment module in Front-Commerce

Register your Adyen payment components

Update your CSPs

Register custom styles (optional)

That’s it!

Install and configure the `Adyen_Payment` Magento2 extension (7.2+ < 8.0)