PayZen integration

This page contains information about the different ways you can accept payments with PayZen 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

This section explains how to configure and customize the PayZen Front-Commerce Payment module into an existing Front-Commerce application. The implementation use PayZen embedded form / Javascript with REST API to create payments.

Configure your environment

Work In Progress See PayZen related environment variables for information.

Register the PayZen payment module

In your Front-Commerce application:


// .front-commerce.js
   modules: [],
   serverModules: [
     { name: "FrontCommerceCore", path: "server/modules/front-commerce-core" },
-    { name: "Magento2", path: "server/modules/magento2" }
+    { name: "Magento2", path: "server/modules/magento2" },
+    { name: "PayZen", path: "server/modules/payment-payzen" }


// .front-commerce.js
   modules: [],
   serverModules: [
     { name: "FrontCommerceCore", path: "server/modules/front-commerce-core" },
-    { name: "Magento1", path: "server/modules/magento1" }
+    { name: "Magento1", path: "server/modules/magento1" },
+    { name: "PayZen", path: "server/modules/payment-payzen/index.magento1.js" }

Register your PayZen 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 PayZen

    +import PayzenEmbeddedForm from "./PayzenEmbeddedForm";
    const ComponentMap = {
    +  payzen_embedded: PayzenEmbeddedForm

Update your CSPs

To allow loading PayZen related remote resources:

// my-module/config/website.js
  contentSecurityPolicy: {
    directives: {
-      scriptSrc: [],
-      frameSrc: [],
-      styleSrc: [],
-      imgSrc: [],
+      scriptSrc: ["", ""],
+      frameSrc: [""],
+      styleSrc: ["", ""],
+      imgSrc: [""],
      styleSrc: [],
      imgSrc: [],
      connectSrc: [],
      baseUri: []

Advanced: customize data sent to PayZen

Work In Progress This advanced pattern must be documented with further details. While we are working on it, please contact us if you need further assistance.

The PayZen payment module is extensible. It leverages Front-Commerce’s “data transform” pattern to allow developers to customize payloads sent to PayZen for a Payment Request creation.

The Payment request object can be customized at application level. It allows to add additional metadata depending on your own logic. For this, you can use the registerPaymentRequestDataTransform method of the Payzen loader to add your custom transformers.

See the test for an example (while a detailed documentation is being written):

Magento2 module

Work In Progress 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 PayZen Standard method (Lyra’s official Magento module).

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

Edit on GitHub