Headless Commerce with Salesforce Commerce API

Composable Storefront, an alternative to Storefront Reference Architecture (SFRA), takes a modular approach to building a custom online storefront using individual, standalone components. With the decoupled frontend and backend architecture, the storefront and user experience are separated from data and business logic. You can compose your own unique brand identity and experience using a customizable, scalable solution.

Composable Storefront consists of two primary components:

Progressive Web Application (PWA) Kit: an open source framework for creating storefronts using JavaScript with the React.js framework. This allows you to control how your storefront looks and feels to your shoppers.
Managed Runtime (MRT): a serverless, highly scalable, highly available hosting environment for your headless digital storefront. Managed Runtime provides the infrastructure to deploy, host, and manage your PWA frontend.

With Composable Storefront, you build your storefront on top of Salesforce Commerce API (SCAPI), and you can augment the built-in functionality by composing solutions that include other vendors, for example, adding a third-party search application or content management system (CMS) provider.

The following image provides an example B2C Commerce stack. Composable Storefront, which contains PWA Kit and MRT, is shown as one of two headless implementations using SCAPI to communicate with the B2C Commerce instance. An SFRA storefront, which communicates directly with the B2C Commerce instance, is also shown. B2C Commerce components include the Script API and cartridges with SCAPI hooks and SCAPI custom APIs.

B2C Commerce Stack

The PWA Kit framework includes tools to help create a complete storefront for the entire shopper journey. You can view an example PWA Kit storefront on our demo site.

The PWA Kit app that you create runs on top of MRT. The MRT uses SCAPI to interact with the features on your site, including products, catalogs, a shopper basket, promotions, inventory, shipping, and billing.

The CDN, which is included with MRT and does not require additional configuration, is in charge of directing requests to the nearest app server to ensure quick and efficient handling.

The CDN includes four primary components:

The CDN cache
Edge functions, which optimize cache hit ratio. If the same request is made again, the response can be retrieved from the cache instead of having to be generated again. This improves the overall shopper experience by providing faster response times.
Storefront-related assets, for example: static Javascript, CSS, and sprites.
Proxies for forwarding requests to SCAPI, OCAPI, and other external APIs.

With the CDN, you can:

Stack embedded CDN (eCDN), B2C Commerce’s default CDN, on top of MRT CDN for more control over web application firewall (WAF)/Logs/Security/Routing,
Use the Edge Functions to customize how requests are routed to the serverless infrastructure (the request processor).

The PWA Kit is hosted as a serverless implementation on the MRT. Serverless infrastructure is highly scalable, highly available, lower maintenance, and performant:

MRT scales up or down to accommodate all levels of storefront traffic, whether it's a significant increase for holiday shopping or a test environment with minimal traffic.
You can have many managed runtime environments (100 out of the box) at no additional cost, and it's easy to start and stop instances using the UI or API.
You can quickly roll out changes and view all changes in the change history, which also enables easy rollback.
All MRT environments are allocated equivalent resources, which means that your production and development environments look the same.

SCAPI functionality is divided into two main groups: Shopper APIs and Admin APIs. Each group is further divided into API families, with each family focusing on related functionality. The Shopper API group is designed for customer-facing functions such as product browsing, shopping cart management and checkout. The Admin API group is aimed at merchant-facing functionality such as product management, order management, inventory management, and customer management.

When building out a composable storefront or other headless storefront, you also have SCAPI hooks that allow you to customize the behavior and add more custom endpoints.

The following diagram illustrates the communication flow between a shopper's browser and MRT, and MRT communication with SCAPI, OCAPI, and external APIs.

How Composable Storefront Works with SCAPI

Explore other Composable Storefront and SCAPI guides:

Get Started with OCAPI