Affirm integration
This page contains information about the different ways you can accept payments with Affirm in your Front-Commerce application.
Magento2 module
This feature has been added in versions: Front-Commerce2.1.0
, Front-Commerce’s Magento2 module2.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 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 and configure the official Magento2 extension for Affirm payments. You only need to follow steps 1.
and 2.
since other storefront features are not relevant in a headless context.
You have to configure the Checkout Flow Type
to Modal
(instead of Redirect
).
Enable the FrontCommerce_HeadlessAffirm
Magento2 extension
Turn Affirm into a headless payment method by enabling Front-Commerce’s HeadlessAffirm
module. No configuration is needed.
php bin/magento module:enable FrontCommerce_HeadlessAffirm
php bin/magento setup:upgrade
php bin/magento setup:di:compile
Note If theFrontCommerce_HeadlessAffirm
is not detected by your Magento installation, please ensure that you are using a Front-Commerce module version> 2.1.0
. Otherwise, you must first update your dependencies.
Register the Affirm for Magento2 payment module in Front-Commerce
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: "Magento2Affirm", path: "server/modules/payment-magento2-affirm" },
]
Register your Affirm payment component
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
Register Affirm
+import Affirm from "./Affirm"; const ComponentMap = { + affirm_gateway: Affirm, };
Update your CSPs
To allow loading stripe 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
Please keep in mind that Affirm is only available for US addresses and orders placed in a store using the USD
as main currency.