Use as a Front-Commerce payment

This guides explains how to configure the Payzen extension to use it with Front-Commerce payment methods.

Front-Commerce configuration

After installing the Payzen 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 payzen from "@front-commerce/payzen";
import storesConfig from "./app/config/stores";
import cacheConfig from "./app/config/caching";

export default defineConfig({
  extensions: [
    magento2({ storesConfig }),
    themeChocolatine(),
    // For Magento 1 usage
    payzen("front-commerce-magento1"), // ⚠️ need to be after themeChocolatine()
    // For Magento 2 usage
    payzen("front-commerce-magento2"), // ⚠️ need to be after themeChocolatine()
  ],
  stores: storesConfig,
  cache: cacheConfig,
  configuration: {
    providers: [],
  },
});

Register your Payzen payment components

Since version 3.17

Nothing more to do, Payzen payment component is now registered automatically. You should be able to see a new payment method called "credit card" in your checkout step.

Before version 3.17

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 Payzen

   app/theme/modules/Checkout/Payment/AdditionalPaymentInformation/getAdditionalDataComponent.js

   +import PayzenEmbeddedForm from "theme/modules/Checkout/Payment/AdditionalPaymentInformation/PayzenEmbeddedForm";
   
   const ComponentMap = {
   +  payzen_embedded: PayzenEmbeddedForm
   };
   

After restarting Front-Commerce, you should be able to see a new payment method called "credit card" in your checkout step.

Specific configuration for Magento1

When using PayZen with Magento1 it requires the directOrder payment flow.

You'll need to override the theme/pages/Checkout/checkoutFlowOf.js from @front-commerce/theme-chocolatine package to update code like this:

theme/pages/Checkout/checkoutFlowOf.js

const checkoutFlowOf = (method) => {
  ...

-  if (method === "payzen_embedded") return "asyncOrder";
+  if (method === "payzen_embedded") return "directOrder";

  ...
};