Ingenico integration

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.

• Front-Commerce Payment
  • Configure your environment
  • Register the Ogone payment module
  • Register your Ogone payment component
  • Update your CSPs
• Magento2 module

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

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: []
    }
  },

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.