Headless Commerce

What is Headless Commerce?

In a headless ecommerce system, the user experience front end runs separately from the business process back end. The two parts of the ecommerce system communicate using web APIs. This Salesforce blog post provides a great overview of the headless approach.

Some benefits of headless ecommerce:

  • The front and back ends of your implementation can evolve and scale independently.
  • You can make different technology choices for front and back end.
  • Having an API focus can help with additional integrations including with first- and third-party systems.

How Does B2C Commerce Support Headless Commerce?

B2C Commerce supports both headless development and traditional, fully integrated development. You can mix and match development styles and use a headless approach for some purposes and an integrated approach for others. If you decide that headless commerce makes sense for you, B2C Commerce works with several technologies to support headless development.

Salesforce Commerce API

The B2C Commerce platform exposes critical data and business processes via RESTful web APIs. The APIs are the key to supporting the headless design paradigm. By calling the Salesforce Commerce API, you can build headless apps that are separate, but still connected to back end data and process in the platform.

Authentication & Authorization

Ensuring data privacy and trusted access to data and processes is a mission critical part of the B2C Commerce platform. All interactions with the Salesforce Commerce API must be fully authenticated and authorized. Authentication (AuthN) is about validating identity to make sure that the caller (for example, a headless app) is who it says it is. Authorization (AuthZ) is about validating access to a particular resource and making sure that the caller has permission to do what it wants. Both AuthN and AuthZ are important for headless apps.

SDK

We provide an SDK that helps you easily interact with the CommerceAPIs. The SDK is built for the Node.js runtime, one of the most popular development platforms for web developers. You can use JavaScript or TypeScript to build your Node.js applications and use the SDK to interact with the Salesforce Commerce API.

Sample App

Our sample app demonstrates best practices for headless app development and ecommerce user experience. The sample app uses the back-end-for-front-end (sometimes referred to as BFF) design pattern. BFF further separates the system, similar to how headless commerce provides a distinction between front and back-end systems. The sample app demonstrates how a BFF layer can interact with the commerce platform’s RESTful APIs using the SDK, add in custom business logic and user experience, and then expose a GraphQL schema to client-side applications. The client-side code then interacts with the BFF layer’s GraphQL schema to retrieve precisely the data it needs to provide shoppers with great user experiences.

Heroku

Headless apps run separately from the back-end platform. You can develop and run your apps locally using the Node.js runtime, but you’ll need to deploy the app to a more suitable environment for running the app at scale. Salesforce Heroku is one of the best options for easily running, operating, and scaling apps. Heroku is designed specifically to make it easy for you to get apps up and running efficiently. In addition to the core tools for running apps, Heroku also offers an extensive partner ecosystem with managed services that you can use to extend the functionality of your apps. When we explore performance considerations later in this solution kit, you’ll see how this ecosystem is important

App Creator

Tying all the different pieces of this distributed architecture together may seem daunting at first. To help make it easier, we provide an App Creator tool that accelerates creating the scaffolding for new apps. The App Creator also provides guided steps for provisioning resources in Heroku and deploying your app to run in Heroku.