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

note

This is a temporary way to setup payment components. We are aware that it is tedious. It will definitely change in the future, when Front-Commerce will support new extension points for Payments.

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

  ...
};