Skip to main content

​
NPM Package

@commercengine/checkout

Vue integration for Commerce Engine Checkout.

​
Installation

npm install @commercengine/checkout

​
Setup

Call initCheckout once at your app’s entry point:
main.ts
import { createApp } from "vue";
import { initCheckout } from "@commercengine/checkout/vue";
import App from "./App.vue";

initCheckout({
  storeId: "store_xxx",
  apiKey: "ak_xxx",
  environment: "production",
});

createApp(App).mount("#app");

​
Use the composable

useCheckout() returns reactive refs and action methods. Call it inside setup() or <script setup>.
CartButton.vue
<script setup lang="ts">
import { useCheckout } from "@commercengine/checkout/vue";

const { openCart, cartCount, isReady } = useCheckout();
</script>

<template>
  <button @click="openCart" :disabled="!isReady">
    Cart ({{ cartCount }})
  </button>
</template>

​
Full example

App.vue
<script setup lang="ts">
import { useCheckout } from "@commercengine/checkout/vue";

const {
  openCart,
  openCheckout,
  cartCount,
  isReady,
  isLoggedIn,
  user,
  addToCart,
} = useCheckout();
</script>

<template>
  <nav>
    <span v-if="isLoggedIn">Hi, {{ user?.firstName }}</span>
    <button @click="openCart" :disabled="!isReady">
      Cart ({{ cartCount }})
    </button>
  </nav>

  <main>
    <button @click="addToCart('product_abc', 'variant_xyz')">
      Add to Cart
    </button>
  </main>
</template>

​
Nuxt

For Nuxt 3, create a plugin to initialize checkout:
plugins/checkout.client.ts
import { initCheckout } from "@commercengine/checkout/vue";

export default defineNuxtPlugin(() => {
  initCheckout({
    storeId: "store_xxx",
    apiKey: "ak_xxx",
    environment: "production",
  });
});
The .client.ts suffix ensures this only runs in the browser. Then use useCheckout() in any component.

​
Syncing external auth

AuthSync.vue
<script setup lang="ts">
import { watch } from "vue";
import { useCheckout } from "@commercengine/checkout/vue";

const props = defineProps<{
  accessToken: string;
  refreshToken?: string;
}>();

const { updateTokens } = useCheckout();

watch(
  () => props.accessToken,
  (token) => {
    if (token) updateTokens(token, props.refreshToken);
  },
  { immediate: true }
);
</script>

​
Composable API reference

useCheckout() returns:
PropertyTypeDescription
isReadyReadonly<Ref<boolean>>true when the checkout iframe is loaded
isOpenReadonly<Ref<boolean>>true when the overlay is visible
cartCountReadonly<Ref<number>>Number of items in the cart
cartTotalReadonly<Ref<number>>Cart subtotal
cartCurrencyReadonly<Ref<string>>Currency code
isLoggedInReadonly<Ref<boolean>>Whether a user is logged in
userReadonly<Ref<UserInfo | null>>Current 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
All state properties are readonly Vue refs. They update automatically when the checkout state changes and clean up on component unmount.