Configure Salesforce Payments for Your B2C Commerce Composable Storefronts

Salesforce Payments streamlines the checkout experience for shoppers in your B2C Commerce Composable Storefronts. 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 B2C Commerce Composable Storefronts.

  1. If your PWA Kit isn’t version 3.17 or later, Upgrade to v3.

  2. If you configured a vanity domain within an eCDN zone, redirect the PWA Kit endpoint (/api/metadata) to a B2C Commerce instance static asset that’s respected by an eCDN.

    See Configure MRT Routing Rules in Business Manager.

    a. In Business Manager, click App Launcher, and then select Administration | Sites | Embedded CDN Settings.

    b. Locate the zone that you want to view.

    c. Click on the caret dropdown to the right of the zone.

    d. Select Configure Routing Rules.

    e. Locate the rule that you want to edit.

    f. Click Edit.

    g. To allow the CDN to route the vanity domain to specific instances, in the Rule Expression section, add /api* to the routes.

  3. In your default.js file, update the Salesforce Payments configuration.

    a. Set Salesforce Payments to true.

    b. Set the sdkUrl and metadataUrl values to point to your B2C Commerce instance host by replacing the [bm_or_vanity_host] placeholder with your Business Manager or vanity URL host.

  4. To ship to countries outside of the U.S. and Canada, update the constants.js file.

  5. To test Salesforce Payments for Composable Storefronts in a development instance before setting it up in your Managed Runtime (MRT) project, set up the development instance.

    When you run a Composable storefront in a development instance, only HTTP is supported. Salesforce Payments requires HTTPs.

    a. Create a self-signed certificate (for example, localhost.pem) and place it in the project root.

    b. In the package.json file, add a development script.

    c. To start the Composable Storefront in a developer instance using HTTPS, use npm run start:https to run the application.

    This setup is required for some payment methods.

  6. Set up Apple Pay methods.

    a. For Apple Pay to work with Stripe, register MRT domains on the Stripe Dashboard.

    b. For Apple Pay to work with Adyen, register MRT domains.

  7. To set up Salesforce Payments for new Composable Storefronts, complete these steps.

    New storefronts have the latest Content Security Policy (CSP) configuration.

    a. To configure Salesforce Payments with a SLAS private client, in your SSR.js file, set these values.

    You can configure Salesforce Payments with a public or a private client. By default, Salesforce Payments is configured with a public client. For more information, see Use a SLAS Private Client.

    • In packages/template-retail-react-app/app/components/_app-config/index.jsx, set enablePWAKitPrivateClient={true}.

    • In packages/template-retail-react-app/ssr.js:

      • Set useSLASPrivateClient:true.
      • Uncomment applySLASPrivateClientToEndpoints.

  8. To set up Salesforce Payments for existing Composable Storefronts, complete these steps.

    a. In your ssr.js file, update the content security policy with these directories.

    Google Pay may require additional endpoints depending on the integration. You can adjust the values as needed for your instance.

    b. To read metadata from the B2C Commerce instance, add this code to the top of the import before app.get('*', runtime.render).