Overview

​

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.

​

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, and errors. Use these to keep your UI in sync (e.g., updating a cart badge count).

​

Packages

​

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.