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 nameFRONT_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 underDevelopers > 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 underDevelopers > 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 prefixFRONT_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 underDevelopers > 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 underDevelopers > 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 underDevelopers > 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
- Register Adyen
+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
- Register the Adyen action
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;
};
- register custom Flash message components to display payment messages in an optimized way (recommended)
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
- URL: the full url of your site followed by
- Authentication:
- User Name: the
FRONT_COMMERCE_ADYEN_NOTIFICATION_USERNAME
environment variable defined above - Password: the
FRONT_COMMERCE_ADYEN_NOTIFICATION_PASSWORD
environment variable defined above
- User Name: the
- Additional Settings
- HMAC Key (HEX Encoded): click generate and copy it to
FRONT_COMMERCE_ADYEN_HMAC_KEY
environment variable defined above
- HMAC Key (HEX Encoded): click generate and copy it to
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",
+ }
]
Register your Adyen payment components
Update your CSPs
Register custom styles (optional)
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.