> ## Documentation Index > Fetch the complete documentation index at: https://www.commercengine.io/docs/llms.txt > Use this file to discover all available pages before exploring further. # Overview > Drop-in checkout for any website or app. A fully hosted, embeddable checkout experience that handles cart, payments, and order completion. 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. ### How it works Add `@commercengine/checkout` via npm, or load `@commercengine/js` from the CDN. The SDK creates a hidden iframe pointing to the hosted checkout app. 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. Open Checkout Studio and configure your checkout experience. Visual configuration app for theme, features, login methods, layout, and payment settings. Call `openCart()` or `openCheckout()` from a button click. A slide-over drawer appears with the full checkout experience — cart, login, address, payment, and confirmation. 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 Drop-in universal SDK with first-class bindings for React, Vue, Svelte, and Solid. Vanilla JavaScript SDK. Use directly via npm or load from the CDN at `cdn.commercengine.com/v1.js`. No framework dependency. ### Pick your integration `useCheckout()` hook with reactive state. No providers needed. `useCheckout()` composable returning reactive refs. Readable stores with `$checkout` syntax. Fine-grained signals via `useCheckout()` primitive. Script tag or ES module import. No build step required. Full reference for all config options, events, and methods.