Skip to main content
Version: 3.x


The Adyen extension allows customer to pay using Adyen payment methods.


To use this extension, you need an Adyen account to its dashboard. You will also need to create API credentials to retrieve the corresponding API keys.

Depending on how the extension is configured (it's flavor), you might also need to install the Adyen Magento module.


First, you need to install the @front-commerce/adyen package:

Command to install @front-commerce/adyen
$ pnpm install @front-commerce/adyen

Then to enable the extension, you need to add the Adyen extension definition to your front-commerce.config.ts. When doing that, you need to pass the flavor in which you want to run the extension, the flavor must be one of the following values:

  • magento2: in this flavor, the extension is configured to work with indices created by the Magento2 Adyen module. See the corresponding How-to for more details.
  • front-commerce-magento1 or front-commerce-magento2: in this flavor, the extension is configured to work as Front-Commerce payments. See the corresponding How-to for more details.

The Adyen extension must be registered after the
Theme-Chocolatine extension in the extensions array.

For instance, in a Magento 2 based project where the Adyen Magento 2 module is installed on Magento side, the front-commerce.config.ts file would be something like:

front-commerce.config.ts for a Magento2 based project
import { defineConfig } from "@front-commerce/core/config";
import themeChocolatine from "@front-commerce/theme-chocolatine";
import magento2 from "@front-commerce/magento2";
import adyen from "@front-commerce/adyen";
import storesConfig from "./app/config/stores";
import cacheConfig from "./app/config/caching";

// depending on your setup, it can also be "front-commerce-magento1" or "front-commerce-magento2"
// see corresponding how-tos
const adyenFlavor = "magento2";

export default defineConfig({
extensions: [
magento2({ storesConfig }),
adyen(adyenFlavor), // ⚠️ must be after themeChocolatine()
stores: storesConfig,
cache: cacheConfig,
configuration: {
providers: [],

Next steps