Skip to main content
Version: 2.x

Affirm integration

This guide explains how Front-Commerce allows using Affirm in a headless commerce project.

There is only one way to accept payments with Affirm in your Front-Commerce application for now.

Magento2 module​

This feature has been added in versions: Front-Commerce 2.1.0, Front-Commerce's Magento2 module 2.1.0

note

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 extension for Magento2 contains a FrontCommerce_HeadlessAffirm module that turns the Affirm's official Magento extension into a headless payment method for Front-Commerce. It is aimed at being transparent for Magento administrators and developers while allowing for a better Customer experience in a Front-Commerce application.

This integration is slightly different from traditional Magento2 headless payments in that sense that it contains a "companion component" in Front-Commerce. The component allows to Authorize payments from the checkout page. No redirection to Affirm is involved, the Customer remains on the Front-Commerce store.

Here is how to set this payment method up.

Install and configure the Astound_Affirm Magento2 extension​

Follow Affirm's documentation to install the official Magento2 extension and to configure it.

You have to configure the Checkout Flow Type to Modal (instead of Redirect).

Install the FrontCommerce_HeadlessAffirm Magento2 extension​

Turn Affirm into a headless payment method by installing the Front-Commerce's Headless Affirm module. No configuration is needed.

composer require front-commerce-magento/module-headless-affirm
php bin/magento setup:upgrade
tip

We recommend to use a specific version of this module and not to blindly rely on the latest version.

Register the Affirm for Magento2 payment module in Front-Commerce​

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: "Magento2Affirm", path: "server/modules/payment-magento2-affirm" },
   ]

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

    +import Affirm from "./Affirm";

    const ComponentMap = {
    +  affirm_gateway: Affirm,
    };

Update your CSPs​

To allow loading Affirm related remote resources:

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

That's it!​

You can now configure the Magento extension to use a Sandbox mode and test the integration

note

Please keep in mind that Affirm is only available for US addresses and orders placed in a store using the USD as main currency.