Salesforce Payments streamlines the checkout experience for shoppers in Storefront Next for B2C Commerce. Salesforce Payments is a native solution that supports multiple payment methods and payment gateways, such as Adyen, Stripe, and PayPal.
To create a storefront with a GitHub repository, see Create a Storefront in Business Manager with a GitHub Repository. To create a storefront with local code, see Create a Storefront in Business Manager with Local Code.
Configure your payment gateway in Business Manager. Salesforce Payments behavior on your storefront depends on the gateway configuration. To configure:
In src/types/config.ts, under AppConfig, add the type definition for the Salesforce Payments configuration.
1// Salesforce Payments (sf-payments extension) configuration.
2// `sdkUrl` is read client-side by using `useConfig()` and gates the SDK download.
3// `metadataUrl` is read server-side by using `getConfig(context)` by the metadata proxy route.
4
5sfPayments?: {
6 sdkUrl: string;
7 metadataUrl: string;
8};config.server.ts, set sdkUrl and metadataUrl to point to your B2C Commerce instance host by replacing [bm_or_vanity_host] with your Business Manager or vanity URL host.1// Salesforce Payments configuration
2// Set `sdkUrl` and `metadataUrl` to point to your B2C Commerce instance host by replacing `[bm_or_vanity_host]` with your Business Manager or vanity URL host name.
3//
4// sdkUrl: https://[bm_or_vanity_host]/on/demandware.static/Sites-Site/-/-/internal/jscript/sfp/v1/sfp.js
5// metadataUrl: https://[bm_or_vanity_host]/on/demandware.static/Sites-Site/-/-/internal/metadata/v1.json
6
7sfPayments: {
8 sdkUrl: '',
9 metadataUrl: ''
10}(Optional) In config.server.ts, switch to a private client.
Salesforce Payments doesn’t require a private client. By default, privateKeyEnabled is set to false. Only change this setting if another feature in your storefront requires it. If another feature depends on a private client to function, make that feature optional or turn it off.
a. Set commerce.api.privateKeyEnabled to true.
b. Set COMMERCE_API_SLAS_SECRET in your environment.
In config.server.ts, configure Content Security Policy (CSP) directives.
a. To support the CSP directives that Salesforce Payments requires, import the default CSP directives object.
1import { defaultCspDirectives } from '@salesforce/storefront-next-runtime/security';b. Expand the CSP directives object to include the directives that Salesforce Payments requires.
1csp: {
2 directives: {
3 ...defaultCspDirectives,
4 'script-src': [
5 ...defaultCspDirectives['script-src']!,
6 'https://*.demandware.net',
7 'https://*.sfdc.cl',
8 'https://js.stripe.com',
9 'https://maps.googleapis.com',
10 'https://*.adyen.com',
11 'https://pay.google.com',
12 'https://www.paypal.com',
13 'https://www.paypalobjects.com',
14 ],
15 'style-src': [
16 ...(defaultCspDirectives['style-src'] ?? []),
17 'https://*.adyen.com',
18 ],
19 'img-src': [
20 ...defaultCspDirectives['img-src']!,
21 'https://*.adyen.com',
22 'https://www.gstatic.com',
23 'https://pay.google.com',
24 'https://www.paypal.com',
25 'https://www.paypalobjects.com',
26 ],
27 'frame-src': [
28 ...defaultCspDirectives['frame-src']!,
29 'https://js.stripe.com',
30 'https://hooks.stripe.com',
31 'https://*.adyen.com',
32 'https://pay.google.com',
33 'https://www.paypal.com',
34 'https://www.sandbox.paypal.com',
35 ],
36 'connect-src': [
37 ...defaultCspDirectives['connect-src']!,
38 'https://*.sfdc.cl',
39 'https://api.stripe.com',
40 'https://*.adyen.com',
41 'https://pay.google.com',
42 'https://google.com',
43 'https://www.google.com',
44 'https://www.paypal.com',
45 'https://www.sandbox.paypal.com',
46 'https://*.paypal.com',
47 'ws://localhost:*',
48 ],
49 },
50 reportOnly: false,
51},(Optional) To use Salesforce Payments outside of the US and Canada, configure Salesforce Payments for other countries.
a. In src/components/customer-address-form/constants.ts, add the country code to the COUNTRY_CODES constant.
1export const COUNTRY_CODES: readonly CountryCode[] = ['US', 'CA', 'GB'] as const;b. In the locale translations file for that country, for example src/locales/en-GB/translations.json, add the provinces or states for the locale.
1"GB": {
2 "name": "United Kingdom",
3 "states": {
4 "ENG": "England",
5 "SCT": "Scotland",
6 "WLS": "Wales",
7 "NIR": "Northern Ireland"
8 }
9}Storefront Next doesn’t require eCDN setup for Salesforce Payments. The eCDN routing rules for Storefront Next include /resource/* by default, alongside other Storefront Next infrastructure paths, such as /action/*, /mobify/*, and *.data. This setup applies even if you configure a vanity domain for Business Manager within the eCDN zone.
Note
j