The Commerce Layer Cart application (React) provides you with a production-ready shopping cart powered by Commerce Layer APIs. You can fork this repository and deploy it to any hosting service or use it as a reference application to build your own. A hosted version is also available.
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.
-
Create your organization and get your credentials by following one of our onboarding tutorials.
-
Configure the
selfHostedSlug
property in/public/config.json
to match your organization slug (subdomain). -
Deploy the forked repository to your preferred hosting service or host it yourself. You can deploy with one click below:
-
Build your sales channel with your favorite technologies and frameworks by leveraging our developer resources and documentation.
-
Get an access token for your application. You should generate this in your sales channel or use our Javascript authentication library.
-
Create an order associated with some line items.
-
View the cart associated with the previously created order using the URL format:
<your-deployed-cart-url>/:order_id?accessToken=<your-access-token>
.
https://cart.yourbrand.com/PrnYhoVeza?accessToken=eyJhbGciOiJIUzUxMiJ9
Any Commerce Layer account comes with a hosted version of the Cart application that is automatically enabled. You can customize it by adding your organization logo, favicon, primary color, and Google Tag Manager ID.
You can use the hosted version of the Cart application with the following URL format: https://<your-organization-subdomain>.commercelayer.app/cart/:order_id?accessToken=<your-access-token>
https://yourbrand.commercelayer.app/cart/PrnYhoVeza?accessToken=eyJhbGciOiJIUzUxMiJ9
The cart can be embedded in your application or website by loading the hosted URL in an inline frame. This way a compact version of the Cart app that doesn't show the header and the footer will be automatically rendered.
// hosted
<iframe src="https://cart.yourbrand.com/PrnYhoVeza?accessToken=eyJhbGciOiJIUzUxMiJ9" width="100%" />
// forked
<iframe src="https://yourbrand.commercelayer.app/cart/PrnYhoVeza?accessToken=eyJhbGciOiJIUzUxMiJ9" width="100%" />
You can either set your iFrame to a fixed height or keep it responsive using the iFrame Resizer library โ the Cart app already includes the
iframeResizer.contentWindow
scripts, so you only need to add it to your parent app.
-
Fork this repository (you can learn how to do this here).
-
Clone the forked repository like so:
git clone https://github.com/<your username>/commercelayer-cart.git && cd commercelayer-cart
- First, install dependencies and run the development server:
pnpm install
pnpm dev
-
(Optional) Set your environment with
.env.local
starting from.env.local.sample
. -
Open http://localhost:3000 with your browser to see the result. You can use the following format to open the cart:
http://localhost:3000/:orderId?accessToken=<your-access-token>
-
Make your changes and create a pull request (learn how to do this).
-
Someone will attend to your pull request and provide some feedback.
-
Create an issue in this repository.
-
Ping us on Twitter.
This repository is published under the MIT license.