Skip to main content

​
NPM Package

@commercengine/checkout

Svelte integration for Commerce Engine Checkout.

​
Installation

npm install @commercengine/checkout

​
Setup

Call initCheckout once in your root layout or entry file. The SDK resolves the hosted URL from storeId + environment using store-specific subdomains:
+layout.svelte
<script>
  import { initCheckout } from "@commercengine/checkout/svelte";

  initCheckout({
    storeId: "store_xxx",
    apiKey: "ak_xxx",
    environment: "production",
  });
</script>

<slot />
Feature flags, login methods, drawer direction, and payment provider are managed in Checkout Studio (Config API), not as SDK init options. Use theme only for per-session overrides.

​
Use the store

Import the checkout readable store and access it with $checkout:
CartButton.svelte
<script>
  import { checkout } from "@commercengine/checkout/svelte";
</script>

<button on:click={$checkout.openCart} disabled={!$checkout.isReady}>
  Cart ({$checkout.cartCount})
</button>

​
Fine-grained stores

For components that only need a single value, use the individual stores to minimize re-renders:
CartBadge.svelte
<script>
  import { cartCount } from "@commercengine/checkout/svelte";
</script>

<span class="badge">{$cartCount}</span>
Available individual stores: cartCount, cartTotal, isReady, isOpen.

​
Full example

App.svelte
<script>
  import { initCheckout, checkout } from "@commercengine/checkout/svelte";

  initCheckout({
    storeId: "store_xxx",
    apiKey: "ak_xxx",
    environment: "production",
    onComplete: (order) => {
      window.location.href = `/thank-you?order=${order.orderNumber}`;
    },
  });
</script>

<nav>
  {#if $checkout.isLoggedIn}
    <span>Hi, {$checkout.user?.firstName}</span>
  {/if}
  <button on:click={$checkout.openCart} disabled={!$checkout.isReady}>
    Cart ({$checkout.cartCount})
  </button>
</nav>

<main>
  <button on:click={() => $checkout.addToCart("product_abc", "variant_xyz")}>
    Add to Cart
  </button>
</main>

​
SvelteKit

For SvelteKit, initialize in the root layout. The SDK is client-only and safely no-ops during SSR.
src/routes/+layout.svelte
<script>
  import { browser } from "$app/environment";
  import { initCheckout } from "@commercengine/checkout/svelte";

  if (browser) {
    initCheckout({
      storeId: "store_xxx",
      apiKey: "ak_xxx",
      environment: "production",
    });
  }
</script>

<slot />

​
Store API reference

The checkout store value contains:
PropertyTypeDescription
isReadybooleantrue when the checkout iframe is loaded
isOpenbooleantrue when the overlay is visible
cartCountnumberNumber of items in the cart
cartTotalnumberCart subtotal
cartCurrencystringCurrency code
isLoggedInbooleanWhether a user is logged in
userUserInfo | nullCurrent user info
openCart()functionOpen the cart drawer
openCheckout()functionOpen checkout directly
close()functionClose the overlay
addToCart(productId, variantId, quantity?)functionAdd an item to the cart
updateTokens(accessToken, refreshToken?)functionSync auth tokens