Skip to main content
Version: next

Use with the Magento 2 payment plugin

This guides explains how to configure the Adyen extension to work with Magento2 Adyen integration.

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.

Adyen Magento 2 integration installation​

Follow Adyen's documentation to install and configure the official Magento2 extension for Adyen payments. We currently support any version from 7.2.0 to 8.x.

tip

If you were using Adyen with Magento2 without Front-Commerce, don't forget to check Adyen settings. For instance, make sure allowed origins set the step 1 match you setup with Front-Commerce.

You must configure the extension's Headless/PWA settings with your Front-Commerce URL for each of your stores. Settings changed in version 8.0.0, so it will be slightly different depending on your version.

  • < 8: configure "Payment Origin URL" in the Advanced: PWA section
  • >= 8: configure Advanced settings > Headless Integration with
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.

Front-Commerce configuration​

After installing the Adyen package, you need to enable the corresponding extension. For that, you need to tweak your front-commerce.config.ts file like:

front-commerce.config.ts
import { defineConfig } from "@front-commerce/core/config";
import themeChocolatine from "@front-commerce/theme-chocolatine";
import magento2 from "@front-commerce/magento2"; // or magento1
import adyen from "@front-commerce/adyen";
import storesConfig from "./app/config/stores";
import cacheConfig from "./app/config/caching";

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

Add the required environment variables​

In the .env, you need to define the following environment variables:

.env
FRONT_COMMERCE_ADYEN_CLIENT_KEY=live_32charactersstring
# the Adyen client key is prefixed with live_ or test_
FRONT_COMMERCE_ADYEN_MAGENTO_MODULE_VERSION=8.3.3
FRONT_COMMERCE_ADYEN_STORE_PAYMENT_DETAILS=true

See our extension reference for more information about these variables.

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.

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

    mkdir -p app/theme/modules/Checkout/Payment/AdditionalPaymentInformation/
    cp -u node_modules/@front-commerce/theme-chocolatine/theme/modules/Checkout/Payment/AdditionalPaymentInformation/getAdditionalDataComponent.js app/theme/modules/Checkout/Payment/AdditionalPaymentInformation/getAdditionalDataComponent.js

  2. Register Adyen

    app/theme/modules/Checkout/Payment/AdditionalPaymentInformation/getAdditionalDataComponent.js
    +import AdyenCheckout from "theme/modules/Checkout/Payment/AdditionalPaymentInformation/AdyenCheckout";

    const ComponentMap = {};

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

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

    mkdir -p app/theme/modules/Checkout/PlaceOrder
    cp -u node_modules/@front-commerce/theme-chocolatine/theme/modules/Checkout/PlaceOrder/getAdditionalActionComponent.js app/theme/modules/Checkout/PlaceOrder/getAdditionalActionComponent.js

  4. Register the Adyen action

    app/theme/modules/Checkout/PlaceOrder/getAdditionalActionComponent.js
    import None from "theme/modules/Checkout/PlaceOrder/AdditionalAction/None";
    +import Adyen from "theme/modules/Checkout/PlaceOrder/AdditionalAction/Adyen";

    const ComponentMap = {};

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

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 your main .scss file to load these styles:

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

Enable Adyen's Stored Payment Methods (optional)​

You can opt for Adyen to store your customers' credit card information to allow a faster checkout experience.

In order to do so:

  • Add FRONT_COMMERCE_ADYEN_STORE_PAYMENT_DETAILS=true in your .env file
  • Follow Adyen's guide on how to setup tokenization using Adyen's Magento module.

If you are using the default Front-Commerce Adyen component, your customer should now be able to save their credit card information during checkout by checking the "Save for my next payment" checkbox.

Enable Paypal payments​

To enable PayPal payments, you need to:

  • add PayPal payment method in your Adyen account
  • enable Adyen's Alternative Payment Methods in your Magento2 backend, located in Stores > Configuration > Sales > Payment Methods > Adyen Payments > Configure payment methods

Enable Google Pay payments​

To enable Google Pay payments, you need to add Google Pay payment method in your Adyen account.

Test it​

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

note

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.