📘
The Getting Started guide for Checkout Extension Development in this article is based on the use of the Shoplazza CLI (specifically the shoplazza checkout command).
Additionally, you can also create and develop extensions using the Shoplazza CLI (via the shoplazza app command). For more details, please refer to this documentation.

Step 1: Install the latest Shoplazza CLI

npm install -g shoplazza-cli

Step 2: Create a project template

During creation, you’ll be prompted to enter your store URL and token, which can be obtained in admin backend under Apps -> Manage Private Apps -> Create App. You will also be prompted to enter an extension name. Multiple extensions can exist within a single project for easier management, and they won't affect each other.

shoplazza checkout create
# Install dependencies
npm i

Step 3: Local Development

Extensions support local development and allow the insertion of local extension code on the live store's checkout page. This only works in your browser.

First, start the local development server:

shoplazza checkout dev

Then, enable developer mode by running the following command in the browser console:

CheckoutAPI.extension.DEV_switchDevMode();

You'll now see the changes reflected in the checkout page.

Step 4: Preview the Extension

After local development is complete, you can push the extension to the store for preview.

shoplazza checkout push

Visit the preview URL to view the changes.

Step 5: Deploy the Extension

After the preview test is completed, you can publish the extension for all users to see.

shoplazza checkout deploy

Or to remove the published extension:

shoplazza checkout undeploy