Setting Up API Access

Repeat these instructions for each B2C Commerce instance that is used with PWA Kit.

This guide covers how to set up a B2C Commerce instance to access the APIs required by a PWA Kit storefront.

Before You Begin

This guide assumes that someone on your team has already created a B2C Commerce instance, such as an on-demand sandbox, for use with PWA Kit.

Need an on-demand sandbox for development or testing? Get help on the B2C Commerce Infocenter: Get Started with On-Demand Sandboxes. A more detailed Trailhead module is also available: Salesforce B2C Commerce On-Demand Sandboxes.

Generate an Identifier for Your Client

To enable your PWA Kit storefront to access both the Salesforce Commerce API and Open Commerce API (OCAPI), you must generate a universally unique identifier (UUID) that they both can use to identify your storefront app as a client.

There are lots of ways to generate a UUID, but an easy way to do it is to go to uuidgenerator.net and click Copy at the top of the page. The identifier must follow the UUID version 4 format: 36 characters long, including 3 hyphens. For example: f58d60fd-9230-4ed7-90a4-ee11b5e7f27b.

Keep the UUID handy because you need it to complete the rest of the instructions in this guide.

Set Up the Open Commerce API

For certain features, your PWA Kit storefront must make requests to the Open Commerce API (OCAPI) on your B2C Commerce instance.

Here’s how to set up OCAPI for PWA Kit using Business Manager:

  1. Log in to Business Manager on your B2C Commerce instance. If you can’t log in, contact the B2C Commerce administrator on your team for help.
  2. From the top navigation bar, click Administration.
  3. Click Site Development.
  4. Click Open Commerce API Settings.
  5. Copy the JSON from Appendix A of this guide.
  6. Go back to Business Manager and paste the JSON into the field.
  7. Replace the placeholder value for client_id with the value of the API client ID that you copied earlier.
  8. Scroll down to the bottom of the page.
  9. Click Save.

Set Up the Shopper Login and API Access Service

To authorize certain API requests on behalf of shoppers, PWA Kit relies on a Commerce API called the Shopper Login and API Access Service (SLAS). By default, requests to the Salesforce Commerce API via SLAS are made through a proxy that is configured in package.json under the request path api. For this proxy configuration to work, you must use the SLAS Admin API to create a public client for your storefront.

Instructions for creating a public client for SLAS, and several prerequisite tasks, are listed in the SLAS Admin API reference. The SLAS Admin API Developer Guide also includes instructions for setting up an API client. But you can skip them if you’ve already created an API client using the instructions provided earlier in this guide.

When creating a public client using the SLAS Admin API, you must modify the sample request given in the SLAS Admin API Developer Guide. In the redirectURI array, include the callback URIs for all of your Managed Runtime environments. For example, if you have an environment called test and its hostname is test.shop.example.com, then you must include https://test.shop.example.com/callback in the redirectUri array. The array must include the callback URIs for all your other environments too.

Next Steps

After you’ve completed all the setup tasks for OCAPI and SLAS for a B2C Commerce instance, you (or anyone developing with PWA Kit on that instance) are ready to begin Getting Started with PWA Kit.

If your PWA project files were previously generated, you will need to update the configuration value for clientId in app/commerce-api.config.js with the UUID that you generated earlier.

Appendix A

Copy this JSON and paste it into the Open Commerce API Settings field in Business Manager. Go back to the instructions.