Stripe
Since version 3.5
This extension allows the usage of Stripe in your Front-Commerce application.
Installation
First ensure you have installed the package:
$ pnpm install @front-commerce/stripe
Front-Commerce configuration
To enable the extension, you need to add the Stripe extension definition to your
front-commerce.config.ts. When doing that, you need to pass the flavor in
which you want to run the extension, the flavor must be one of the following
values:
magento1magento2adobe-b2b
For instance, in a Adobe B2B based project, the front-commerce.config.ts file
would be something like:
import { defineConfig } from "@front-commerce/core/config";
import themeChocolatine from "@front-commerce/theme-chocolatine";
import magento2 from "@front-commerce/magento2";
import stripe from "@front-commerce/stripe";
import storesConfig from "./app/config/stores";
import cacheConfig from "./app/config/caching";
export default defineConfig({
extensions: [
themeChocolatine(),
magento2({ storesConfig }),
adobeb2b(),
stripe("adobe-b2b"), // ⚠️ needs to be after themeChocolatine()
],
stores: storesConfig,
cache: cacheConfig,
configuration: {
providers: [],
},
});
Register your Stripe payment components
- Since version 3.17
- Before version 3.17
Nothing more to do, Stripe payment component is now registered automatically. You should be able to see a new payment method called "credit card" in your checkout step.
-
Override the file that lets you register additional payments methods 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 -
Register Stripe
app/theme/modules/Checkout/Payment/AdditionalPaymentInformation/getAdditionalDataComponent.js+import StripeCheckout from "theme/modules/Checkout/Payment/AdditionalPaymentInformation/StripeCheckout";
const ComponentMap = {
+ stripe: StripeCheckout,
};
...
After restarting Front-Commerce, you should be able to see a new payment method called "credit card" in your checkout step.