Commerce Layer My Account

The Commerce Layer My Account application (React) provides a production-ready reserved user area with order history and address management features, 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
• Features
• Using the CLI to get a valid customer token
• Contributors guide
• 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).

3. Deploy the forked repository to your preferred hosting service or host it yourself. 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 a customer access token for your application. You should generate this in your sales channel (see how to do it using the Commerce Layer CLI) or use our Javascript authentication library.

6. View the customer's account page using the URL format: <your-deployed-my-account-url>/<my-account-base-path>?accessToken=<your-access-token>.

Example

https://myaccount.yourbrand.com/?accessToken=eyJhbGciOiJIUzUxMiJ9

Hosted version

Any Commerce Layer account comes with a hosted version of the My Account application that is automatically enabled. You can customize it by adding your organization logo, favicon, and primary color.

You can use the hosted version of the My Account application with the following URL format: https://<your-organization-subdomain>.commercelayer.app/my-account/?accessToken=<your-access-token>

Example

https://yourbrand.commercelayer.app/my-account?accessToken=eyJhbGciOiJIUzUxMiJ9

Features

The My Account application's main features are currently focused on the management of customer orders and addresses.

Lots of other major and minor features (e.g. customer wallet, returns, and more) are already included in the development roadmap – check the Commerce Layer changelog to be regularly updated about all the new releases.

Orders

Order history

As soon as you land on the application (or click on the Orders menu item) you will be shown the order history screen.

This works as the My Account app's welcome page, showing a list of the customer's orders. The list is paginated and can be sorted based on each column piece of information:

• order number (default)
• date of placement
• order status
• order amount

Order details

By clicking on one of the order numbers of the history list you can enter the selected order's details page where you can see:

• The order summary information with the single line items and total amounts.
• The billing and shipping address details.
• The shipments associated with the order (including the related parcels overview and tracking code).
• The payment method used for the order.

Parcel tracking details

By clicking a parcel's tracking link you can enter the selected parcel's detail page showing the full timeline of the parcel's movements and updates.

Addresses

Addresses Management

By clicking on the Addresses menu item you can see the list of your saved addresses (if any). Each address can be edited or deleted. New addresses can be directly created from the app and added to the list.

Using the CLI to get a valid customer token

If you are using the Commerce Layer CLI you can easily obtain a valid access token suitable for the generation of a My Account application working URL.

First, you need to log into your organization using the customer's credentials:

$ cl app:login -o <your-organization-slug> -e <customer-username> -p <customer-password> -i <client-id> -S <scope> -a <cli-login-alias>

Once the login is successful you can ask for the generation of a valid customer access token:

$ cl app:token

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-my-account.git && cd commercelayer-my-account

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 My Account app: http://localhost:3000/myaccount?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.