Skip to main content
Upcoming — generated from the latest merged element source; documents unreleased development. Use the channel picker at the top of the sidebar for the docs of a published release.
In development — not yet part of a stable release. Belongs to the Checkout group. Render <CheckoutElement /> inside it (React), or call checkout.create('checkout', { … }) on the handle (vanilla) — consumer props and on<Event> callbacks both go in the create options / JSX props.

​
Preview

A live, interactive demo of this element with sample data:

​
Usage

​
Props

This element takes no consumer props.

​
Events

Pass a callback in the create options (or React prop) to receive these.

​
onLoaderStart

Fired the moment the element’s own loading skeleton has painted inside its frame — the earliest point a consumer-managed loading state can hand off without ever exposing a blank. Always precedes onReady; most consumers only need onReady. Signature: (() => void)

​
onReady

Fired once the element has booted and painted its first complete frame. Signature: (() => void)

​
onError

Fired when the element fails to load or crashes; the element shows its own error fallback. message is human-readable; framework refusals also carry code (e.g. HOST_SOURCE_FAILED, with sourceKey naming the failed hostState key) so hosts can switch on codes, never message text. Signature: ((e: { message: string; code?: string | undefined; sourceKey?: string | undefined; }) => void)

​
Methods

Call these on the element handle — the return of create (vanilla) or the component ref (React).

​
mount

Place the element on the page: appends its container to target (a CSS selector or an element) and starts loading. Nothing renders until this is called. React consumers never call it — the component mounts itself. Signature: (target: string | HTMLElement) => void

​
destroy

Remove the element from the page and release its frame and subscriptions. Safe to call more than once. React consumers never call it — unmounting the component does it. Signature: () => void

​
update

Change this element’s consumer props after mount — it re-renders with the merged props. React consumers never call it — updating the JSX props does the same. Signature: (options: Partial<CheckoutElementProps>) => void

​
Styling

Each part below is a stable class name — safe to depend on. Restyle a part by mapping its class to a style declaration object under appearance.classes (properties camelCase or kebab-case, values as strings with units — the same shape as React’s style prop). The element renders in its own frame, so page stylesheets can’t reach it: these declarations are sanitized against a safe-property allowlist and injected inside the frame for you.
In React, pass the same object as the appearance prop on <Checkout>; appearance also applies globally at WhopElements({ appearance }).