Commerce Layer React Checkout

The Commerce Layer checkout application (React) provides you with a PCI-compliant, PSD2-compliant, and production-ready checkout flow 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.

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
• Contributors guide
• Help and support
• License

---

Getting started

1. Deploy the forked repository to your preferred hosting service or host it yourself. You can deploy with one click below:

2. Create your organization and get your credentials by following this credentials guide.

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

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

5. Create an order associated with some line items.

6. Checkout the previously created order using the URL format: <your-deployed-checkout-url>/:order_id?accessToken=<your-access-token>. For example: https://checkout.yourbrand.com/PrnYhoVeza?accessToken=eyJhbGciOiJIUzUxMiJ9.

Hosted version

There is a hosted version of the checkout application that is automatically enabled in your Commerce Layer account. You can customize it by adding your organization logo, favicon, primary color, Google Tag Manager ID, support telephone, and email address.

You can use the hosted checkout with the following URL format: https://<your-organization-subdomain>.checkout.commercelayer.app/:order_id?accessToken=<your-access-token>.

For example: https://yourbrand.checkout.commercelayer.app/PrnYhoVeza?accessToken=eyJhbGciOiJIUzUxMiJ9

If you are using Commerce Layer CLI, you can leverage the checkout plugin to generate the URL from an SKU code (using the -S flag), a bundle code (using the -B flag), or from an order ID (using the -O flag):

commercelayer checkout -S <skuCode>:<quantity> --open
commercelayer checkout -B <bundleCode>:<quantity> --open
commercelayer checkout -O <orderID> --open

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>/commercelayer-react-checkout.git && cd commercelayer-react-checkout

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

yarn install
yarn dev

4. 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 checkout: 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.

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.