# 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](/docs/commerce/b2c-commerce/guide/sfnext-quick-start-create-bm-github.md). To create a storefront with local code, see [Create a Storefront in Business Manager with Local Code](/docs/commerce/b2c-commerce/guide/sfnext-quick-start-create-bm.md).
- In Business Manager, install the Salesforce Payments Commerce App. See [Install a Commerce App for B2C Commerce](https://help.salesforce.com/s/articleView?id=cc.b2c_install_commerce_app.htm).

### Steps

1. 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](https://help.salesforce.com/s/articleView?id=cc.b2c_configure_salesforce_payments_with_adyen.htm)
   - Stripe, see [Configure Salesforce Payments with Stripe for B2C Commerce](https://help.salesforce.com/s/articleView?id=cc.b2c_configure_salesforce_payments_with_stripe.htm)
   - PayPal, see [Configure Salesforce Payments with PayPal for B2C Commerce](https://help.salesforce.com/s/articleView?id=cc.b2c_configure_salesforce_payments_with_paypal.htm)

2. 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;
};
```

3. 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: ''
}
```

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

5. 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,
   },
   ```

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