> ## Documentation Index
> Fetch the complete documentation index at: https://www.commercengine.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Vanilla JS / CDN

> Add Commerce Engine Checkout to any website with a single script tag. No build step required.

### NPM Package

<Card title="@commercengine/js" icon="npm" href="https://www.npmjs.com/package/@commercengine/js">
  Vanilla JavaScript SDK. Use directly via npm or load from the CDN at `cdn.commercengine.com/v1.js`. No framework dependency.
</Card>

### CDN (recommended for static sites)

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

```html theme={"theme":{"light":"github-light","dark":"github-dark"}}
<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>
```

<Info>
  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.
</Info>

<Info>
  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.
</Info>

### ES Module import

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

```bash theme={"theme":{"light":"github-light","dark":"github-dark"}}
npm install @commercengine/js
```

```js theme={"theme":{"light":"github-light","dark":"github-dark"}}
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:

```js theme={"theme":{"light":"github-light","dark":"github-dark"}}
checkout.addToCart("product_abc", "variant_xyz", 1);
```

Pass `null` as the variant ID for products without variants:

```js theme={"theme":{"light":"github-light","dark":"github-dark"}}
checkout.addToCart("product_abc", null, 2);
```

### Quick Buy

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

```js theme={"theme":{"light":"github-light","dark":"github-dark"}}
const checkout = await Commercengine.init({
  storeId: "store_xxx",
  apiKey: "ak_xxx",
  quickBuy: {
    productId: "product_abc",
    variantId: "variant_xyz",
    quantity: 1,
  },
});
```

### Listening to events

```js theme={"theme":{"light":"github-light","dark":"github-dark"}}
// 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](/hosted-checkout/configuration) page for the full list of events, methods, and options.