Vanilla JS / CDN - Commerce Engine Docs

NPM Package

@commercengine/js

Vanilla JavaScript SDK. Use directly via npm or load from the CDN at cdn.commercengine.com/v1.js. No framework dependency.

CDN (recommended for static sites)

Add the script tag to your HTML and initialize when it loads:

<script src="https://cdn.commercengine.com/v1.js" async></script>
<script>
  Commercengine.onLoad = async () => {
    const checkout = await Commercengine.init({
      storeId: "store_xxx",
      apiKey: "ak_xxx",
      environment: "production",
    });

    // Wire up a cart button
    document.getElementById("cart-btn").addEventListener("click", () => {
      checkout.openCart();
    });

    // Update cart badge on changes
    checkout.on("cart:updated", (cart) => {
      document.getElementById("cart-count").textContent = cart.count;
    });
  };
</script>

The async attribute on the script tag is important. It ensures the SDK loads without blocking page rendering. The Commercengine.onLoad callback fires once the script is ready.

The SDK resolves hosted checkout to store-specific subdomains from storeId + environment. Feature flags, login methods, drawer direction, and payment provider are managed in Checkout Studio (Config API), not in SDK init options.

ES Module import

If you’re using a bundler (Vite, Webpack, etc.) but don’t want framework bindings:

npm install @commercengine/js

import { Checkout } from "@commercengine/js";

const checkout = new Checkout({
  storeId: "store_xxx",
  apiKey: "ak_xxx",
  environment: "production",
  onReady: () => console.log("Checkout ready"),
  onComplete: (order) => {
    console.log("Order placed:", order.orderNumber);
  },
});

// Open cart
checkout.openCart();

// Cleanup when done
checkout.destroy();

Add to cart

Programmatically add items from product pages:

checkout.addToCart("product_abc", "variant_xyz", 1);

Pass null as the variant ID for products without variants:

checkout.addToCart("product_abc", null, 2);

Quick Buy

Open checkout directly for a single product (bypasses the cart drawer):

const checkout = await Commercengine.init({
  storeId: "store_xxx",
  apiKey: "ak_xxx",
  quickBuy: {
    productId: "product_abc",
    variantId: "variant_xyz",
    quantity: 1,
  },
});

Listening to events

// Order completed
checkout.on("complete", (order) => {
  window.location.href = `/thank-you?order=${order.orderNumber}`;
});

// User logged in
checkout.on("auth:login", (data) => {
  console.log("Logged in as:", data.user.firstName);
});

// User logged out
checkout.on("auth:logout", () => {
  console.log("User logged out");
});

// Cart updated
checkout.on("cart:updated", (cart) => {
  console.log(`${cart.count} items, ${cart.currency} ${cart.total}`);
});

See the Configuration page for the full list of events, methods, and options.

​NPM Package

@commercengine/js

​CDN (recommended for static sites)

​ES Module import

​Add to cart

​Quick Buy

​Listening to events

NPM Package

CDN (recommended for static sites)

ES Module import

Add to cart

Quick Buy

Listening to events