commercelayer / mfe-cart

Commerce Layer Hosted Cart

Commerce Layer Cart

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.

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.

Table of contents

• Getting started
• Hosted version
• Embedding the cart
• Express checkout
• Contributors guide
• Running on Windows
• Help and support
• License

---

Getting started

1. Create your organization and get your credentials by following one of our onboarding tutorials.

2. Configure the selfHostedSlug property in /public/config.local.js to match your organization slug (subdomain). If this file does not exist, create it using the following content:

window.clAppConfig = {
  domain: "commercelayer.io",
  selfHostedSlug: "<your-org-slug>",
}

3. Deploy the forked repository to your preferred hosting service. You can deploy with one click below:

4. Build your sales channel with your favorite technologies and frameworks by leveraging our developer resources and documentation.

5. Get an access token for your application. You should generate this in your sales channel or use our Javascript authentication library.

6. Create an order associated with some line items.

7. View the cart associated with the previously created order using the URL format: <your-deployed-cart-url>/:order_id?accessToken=<your-access-token>.

Example

https://cart.yourbrand.com/PrnYhoVeza?accessToken=eyJhbGciOiJIUzUxMiJ9

Hosted version

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>

Example

https://yourbrand.commercelayer.app/cart/PrnYhoVeza?accessToken=eyJhbGciOiJIUzUxMiJ9

Embedding the cart

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.

Example

// hosted
<iframe src="https://yourbrand.commercelayer.app/cart/PrnYhoVeza?accessToken=eyJhbGciOiJIUzUxMiJ9" width="100%" />

// forked
<iframe src="https://cart.yourbrand.com/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.

Express checkout

The cart supports express checkout buttons for both Apple Pay and Google Pay via Stripe. To enable this feature, you need to activate the auto_payments option on your Commerce Layer Stripe gateway and configure the necessary settings in your Stripe dashboard.

Contributors guide

1. Fork this repository (you can learn how to do this here).

2. Clone the forked repository like so:

git clone https://github.com/<your username>/mfe-cart.git && cd mfe-cart

3. First, install dependencies and run the development server:

pnpm install
pnpm dev

4. (Optional) Set your environment with .env.local starting from .env.local.sample.

5. 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>

6. Make your changes and create a pull request (learn how to do this).

7. Someone will attend to your pull request and provide some feedback.

Running on Windows

When working on Microsoft Windows, we suggest to use the PowerShell terminal or any alternative shell with the ability to run scripts as admin user.

This is required to install pnpm following the instruction here.

Once done, install globally the touch-cli package by running pnpm add -g touch-cli in order to successfully execute the prepare script.

Need help?

1. Join Commerce Layer's Slack community.

2. Create an issue in this repository.

3. Ping us on Twitter.

License

This repository is published under the MIT license.