Skip to main content
Version: 2.x

Ingenico integration

danger

On 2025-12-31 Worldline (new owner of Ogone/Ingenico) will end support for legacy Ogone and Ingenico Payment API.

If you're about to integrate Worldline in your project, you should follow the Front-Commerce Payment Section.

If you're using the legacy Ogone/Ingenico integration, we strongly recommend you to follow the Migrate to Worldline API.

If you want to check the legacy integration guide, go to Front-Commerce Payment - Legacy Ogone/Ingenico

This guide explains how Front-Commerce allows using Ingenico in a headless commerce project.

There are different ways for you to accept payments with Ingenico (Ogone) in your Front-Commerce application.

note

each integration method is independent from the others, meaning that you don't have to install additional modules on your eCommerce platform if using Front-Commerce payments.

Front-Commerce Payment - Worldline API​

info

Front-Commerce Worldline API integration requires Node.js ^18.12.0.

This section explains how to configure and customize the Ingenico Front-Commerce Payment module into an existing Front-Commerce application. The implementation uses Worldline Hosted Tokenization to create payments.

Generate your Worldline API Credentials​

Which backend to use to generate your API credentials?​

Both backends (Merchant Portal or BackOffice) can generate your API credentials, if you've made the transition to the new Merchant Portal, you can use it to generate your credentials. If you're a user of the legacy BackOffice and you didn't make the transition to the new Merchant Portal, you can also use the legacy Backoffice to generate your credentials.

Using the Merchant Portal​

  1. Go to your Worldline Merchant Portal : Test environment Link / Production environment Link.
  2. Go to the Developer > Payment API menu.
  3. Click on Add API Key button.
  4. Copy and keep a copy of the API key ID and the Secret API key.

Using the BackOffice Legacy Console​

  1. Go to your Worldline BackOffice : Test environment Link / Production environment Link.
  2. Go to the Configuration > Technical information menu.
  3. Click on the API settings tab.
  4. Click on the Generate button.
  5. Copy and keep a copy of the Key and the Secret.

Configure your environment​

VariableDescriptionDefault value
FRONT_COMMERCE_OGONE_ENVEnvironment to use (production or test)none
FRONT_COMMERCE_OGONE_PSPIDYour PSPID, visible in your Worldline Merchant Portal or BackOfficenone
FRONT_COMMERCE_OGONE_API_KEYYour Worldline API key IDnone
FRONT_COMMERCE_OGONE_API_SECRETYour Worldline Secret API keynone
FRONT_COMMERCE_OGONE_DISABLE_AUTOMATIC_CAPTUREDisable automatic capture of paymentfalse

Install the Ogone Payment SDK​

Simply run the following command:

npm install onlinepayments-sdk-nodejs@6.3.1

Register the Ogone payment module​

In your Front-Commerce application:

.front-commerce.js
   modules: [],
   serverModules: [
     { name: "FrontCommerce", path: "server/modules/front-commerce" },
-    { name: "Magento2", path: "server/modules/magento2" }
+    { name: "Magento2", path: "server/modules/magento2" },
+    { name: "Ogone", path: "server/modules/payment-ogone" }
   ]

Register your Ogone payment component​

  1. 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

  2. Register Ogone

    +import OgoneFlexCheckoutForm from "./OgoneFlexCheckoutForm";

    const ComponentMap = {
    +  ogone_flexcheckout: OgoneFlexCheckoutForm
    };

Update your CSPs​

To allow loading Ogone related remote resources:

my-module/config/website.js
  contentSecurityPolicy: {
    directives: {
-      scriptSrc: [],
+      scriptSrc: ["payment.direct.worldline-solutions.com", "payment.preprod.direct.worldline-solutions.com"],
-      frameSrc: [],
+      frameSrc: ["payment.direct.worldline-solutions.com", "payment.preprod.direct.worldline-solutions.com"],
      styleSrc: [],
      imgSrc: [],
-      connectSrc: [],
+      connectSrc: ["payment.direct.worldline-solutions.com", "payment.preprod.direct.worldline-solutions.com"],
      baseUri: []
    }
  },

Front-Commerce Payment - Legacy Ogone/Ingenico​

This section explains how to configure and customize the Ingenico Front-Commerce Payment module into an existing Front-Commerce application. The implementation use Ingenico's FlexCheckout solution to create payments.

Configure your environment​

WIP

See Ogone related environment variables for information.

Register the Ogone payment module​

In your Front-Commerce application:

.front-commerce.js
   modules: [],
   serverModules: [
     { name: "FrontCommerce", path: "server/modules/front-commerce" },
-    { name: "Magento2", path: "server/modules/magento2" }
+    { name: "Magento2", path: "server/modules/magento2" },
+    { name: "Ogone", path: "server/modules/payment-ogone" }
   ]

Register your Ogone payment component​

  1. 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

  2. Register Ogone

    +import OgoneFlexCheckoutForm from "./OgoneFlexCheckoutForm";

    const ComponentMap = {
    +  ogone_flexcheckout: OgoneFlexCheckoutForm
    };

Update your CSPs​

To allow loading Ogone related remote resources:

my-module/config/website.js
  contentSecurityPolicy: {
    directives: {
      scriptSrc: [],
-      frameSrc: [],
+      frameSrc: ["secure.ogone.com", "ogone.test.v-psp.com"],
      styleSrc: [],
      imgSrc: [],
      connectSrc: [],
      baseUri: []
    }
  },

Migrate to Worldline API​

Since version 2.38.0

info

Front-Commerce Worldline API integration requires Node.js ^18.12.0.

Migrating from legacy Ogone/Ingenico to Worldline API is fairly easy :

  1. Generate your new Worldline API Credentials.
  2. Define new ENV variables in your .env file and remove legacy ones :
  • FRONT_COMMERCE_OGONE_SECRET
  • FRONT_COMMERCE_OGONE_ALGO
  • FRONT_COMMERCE_OGONE_USERNAME
  • FRONT_COMMERCE_OGONE_PASSWORD
  • FRONT_COMMERCE_OGONE_ACCEPT_URL
  • FRONT_COMMERCE_OGONE_EXCEPTION_URL
  1. Update your CSP by removing legacy ones and add new ones.
  2. Install the Ogone Payment SDK:
npm install onlinepayments-sdk-nodejs@6.3.1
  1. Test it! You're now ready to use new Worldline API.

Magento2 module​

WIP

This integration is aimed at being 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 Magento2 module contains headless payment adapters for the Ingenico ePayments OpsCCRedirect method (Ingenicos's official Magento module).

The Ingenico module must be configured in a normal way, as for a non-headless Magento store.