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.

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, addresses, and subscriptions, along with the overview of the customer wallet.

Lots of other major and minor features (e.g. 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 by clicking on the related column label:

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

Order details

By clicking on one of the order numbers in 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.

Subscriptions

Subscriptions history

By clicking on the Subscriptions menu item you can see the history of your subscriptions (if any).

The list is paginated and can be sorted based on each column piece of information by clicking on the related column label:

• subscription number (default)
• subscription status
• subscription frequency
• subscription next run date

Subscription details

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

• An introductory recap about the subscription settings (e.g. start date, frequency, next run date, and address)
• The subscription summary information with the list of subscription line items.
• The payment method used for the subscription renewal.
• The history of the recurring orders associated with the subscription.

If the subscription cannot be renewed (e.g. due to an expired payment method), an alert will appear at the top of the detail page. This alert highlights the issue and provides a Checkout link for the customer to place the order with a valid payment method, thereby updating the payment information for future transactions.

Tip

You can track subscriptions' renewal failures by activating a webhook listening for the order_subscriptions.last_run_failed event. The order_subscriptions.last_run_succeeded event is available as well.

Wallet

Saved cards list

By clicking on the Wallet menu item you can see the list of your saved credit cards (if any).

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>/mfe-my-account.git && cd mfe-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?

• Join Commerce Layer's Discord community.
• 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.