Overview

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.
Zero layout shift — the iframe loads in the background with no impact on Core Web Vitals.

How it works

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.

Initialize with your credentials

Call initCheckout() (or Commercengine.init() for CDN) with your storeId and apiKey. The iframe loads in the background and emits a ready event when it’s prepared.

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.

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).