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, you should see the additional information component in the checkout step when using the administrative mandate payment method.

Before version 3.17

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";

  ...
};