Configure Salesforce Payments for Storefront Next

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.

Set Up Salesforce Payments for Storefront Next

Prerequisites

Purchase a Salesforce Payments license by contacting your Salesforce account executive.
Set up Storefront Next. 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.
In Business Manager, install the Salesforce Payments Commerce App. See Install a Commerce App for B2C Commerce.

Steps

Configure your payment gateway in Business Manager. Salesforce Payments behavior on your storefront depends on the gateway configuration. To configure:
- Adyen, see Configure Salesforce Payments with Adyen for B2C Commerce
- Stripe, see Configure Salesforce Payments with Stripe for B2C Commerce
- PayPal, see Configure Salesforce Payments with PayPal for B2C Commerce
In src/types/config.ts, under AppConfig, add the type definition for the Salesforce Payments configuration.

// Salesforce Payments (sf-payments extension) configuration.
//   `sdkUrl` is read client-side by using `useConfig()` and gates the SDK download.
//   `metadataUrl` is read server-side by using `getConfig(context)` by the metadata proxy route.

sfPayments?: {
    sdkUrl: string;
    metadataUrl: string;
};

In 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.

// Salesforce Payments configuration
// 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.
//
//   sdkUrl:      https://[bm_or_vanity_host]/on/demandware.static/Sites-Site/-/-/internal/jscript/sfp/v1/sfp.js
//   metadataUrl: https://[bm_or_vanity_host]/on/demandware.static/Sites-Site/-/-/internal/metadata/v1.json

sfPayments: {
 sdkUrl: '',
 metadataUrl: ''
}

(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.

import { defaultCspDirectives } from '@salesforce/storefront-next-runtime/security';

b. Expand the CSP directives object to include the directives that Salesforce Payments requires.

csp: {
    directives: {
        ...defaultCspDirectives,
        'script-src': [
            ...defaultCspDirectives['script-src']!,
            'https://*.demandware.net',
            'https://*.sfdc.cl',
            'https://js.stripe.com',
            'https://maps.googleapis.com',
            'https://*.adyen.com',
            'https://pay.google.com',
            'https://www.paypal.com',
            'https://www.paypalobjects.com',
        ],
        'style-src': [
            ...(defaultCspDirectives['style-src'] ?? []),
            'https://*.adyen.com',
        ],
        'img-src': [
            ...defaultCspDirectives['img-src']!,
            'https://*.adyen.com',
            'https://www.gstatic.com',
            'https://pay.google.com',
            'https://www.paypal.com',
            'https://www.paypalobjects.com',
        ],
        'frame-src': [
            ...defaultCspDirectives['frame-src']!,
            'https://js.stripe.com',
            'https://hooks.stripe.com',
            'https://*.adyen.com',
            'https://pay.google.com',
            'https://www.paypal.com',
            'https://www.sandbox.paypal.com',
        ],
        'connect-src': [
            ...defaultCspDirectives['connect-src']!,
            'https://*.sfdc.cl',
            'https://api.stripe.com',
            'https://*.adyen.com',
            'https://pay.google.com',
            'https://google.com',
            'https://www.google.com',
            'https://www.paypal.com',
            'https://www.sandbox.paypal.com',
            'https://*.paypal.com',
            'ws://localhost:*',
        ],
    },
    reportOnly: false,
},

(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.
```
export 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.
```
"GB": {
    "name": "United Kingdom",
    "states": {
        "ENG": "England",
        "SCT": "Scotland",
        "WLS": "Wales",
        "NIR": "Northern Ireland"
    }
}
```

note: 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.