Commerce Layer React Components

A collection of reusable React components that makes it super fast and simple to build your own custom commerce UI, leveraging Commerce Layer API.

What is Commerce Layer?

Commerce Layer is a multi-market commerce API and order management system that lets you add global shopping capabilities to any website, mobile app, chatbot, wearable, voice, or IoT device, with ease. Compose your stack with the best-of-breed tools you already mastered and love. Make any experience shoppable, anywhere, through a blazing-fast, enterprise-grade, and secure API.

Getting started

For a constantly updated list of the available components, please refer to this interactive documentation that will provide you with all the necessary information about the involved web components and help you get started in a snap.

Installation

Commerce Layer React Components are available as an npm package:

// npm
npm install @commercelayer/react-components

// yarn
yarn add @commercelayer/react-components

// pnpm
pnpm add @commercelayer/react-components

Authentication

All requests to Commerce Layer API must be authenticated with an OAuth2 bearer token. Hence, to use these components, you need to get a valid access token. Once you got it, you can pass it as prop to the CommerceLayer component, as follow:

<CommerceLayer accessToken="your-access-token">

  {/* ... child components */}

</CommerceLayer>

Coming from v4? endpoint and domain are gone — v5 derives your organization from the token itself. See Upgrading from v4 for the full list of breaking changes.

This token will be used to authorize the API calls of all its child components. That's why the presence of (at least) one CommerceLayer component is mandatory — it must wrap every other component you need to use.

Please note that — in case you need to fetch data with different tokens (i.e. from different organizations or using apps with different roles and permissions) — nothing prevents you from putting as many CommerceLayer components you want in the same page.

You can check our documentation for more information about the available authorization flows and leverage Commerce Layer JS Auth to easily interact with our authentication API.

Need help?

• Join Commerce Layer's Discord community.
• Open a new Q&A discussion
• Ping us on Bluesky, X (formerly Twitter), or LinkedIn.
• Is there a bug? Create an issue on this repository.

License

This repository is published under the MIT license.