Skip to main content
Commerce Engine Hosted Checkout is a pre-built, embeddable checkout that runs inside an iframe on your site. It handles the entire purchase flow — cart review, authentication, address collection, payments, and order confirmation — so you don’t have to build it yourself.

​
Why use Hosted Checkout?

  • Ship faster — skip building cart UI, payment forms, and checkout logic from scratch.
  • Always up to date — new payment methods, UI improvements, and features are deployed automatically.
  • PCI compliant — payment data never touches your servers.
  • Framework agnostic — works with React, Vue, Svelte, Solid, or plain HTML.
  • Store isolation by default — each store loads from its own subdomain origin, so browser storage is isolated across brands.
  • Zero layout shift — the iframe loads in the background with no impact on Core Web Vitals.
  • Portable enterprise analytics — canonical cart, coupon, checkout, payment, identity, and order events can be forwarded to Segment, RudderStack, another compatible CDP, or your own analytics pipeline.

​
How it works

1

Install the SDK

Add @commercengine/checkout via npm, or load @commercengine/js from the CDN. The SDK creates a hidden iframe pointing to the hosted checkout app.
2

Initialize with your credentials

Call initCheckout() (or Commercengine.init() for CDN) with your storeId and apiKey. The SDK resolves to your store-specific subdomain automatically. The iframe loads in the background and emits a ready event when it’s prepared.
3

Configure in Checkout Studio

Open Checkout Studio and configure your checkout experience.

Checkout Studio

Visual configuration app for theme, features, login methods, layout, and payment settings.
4

Open the checkout

Call openCart() or openCheckout() from a button click. A slide-over drawer appears with the full checkout experience — cart, login, address, payment, and confirmation.
5

Listen for events

The SDK emits events for cart updates, login/logout, order completion, errors, and canonical analytics. Use them to keep your UI in sync and forward checkout interactions to your existing analytics destination.

​
Packages

@commercengine/checkout

Drop-in universal SDK with first-class bindings for React, Vue, Svelte, and Solid.

@commercengine/js

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

@commercengine/analytics

Vendor-neutral, typed mappers for Hosted Checkout, custom SDK checkout, and direct REST implementations.

​
Pick your integration

React

useCheckout() hook with reactive state. No providers needed.

Vue

useCheckout() composable returning reactive refs.

Svelte

Readable stores with $checkout syntax.

Solid

Fine-grained signals via useCheckout() primitive.

Vanilla JS / CDN

Script tag or ES module import. No build step required.

Configuration

Full reference for all config options, events, and methods.

Analytics

Forward Hosted Checkout events or map custom checkout events to any compatible CDP or analytics pipeline.