This page documents
@whop/elements@1.0.0-beta.3 and @whop/elements-react@1.0.0-beta.3.Wallet. accountId and accessToken come from there. Pass props and callbacks through the create options or React props. Keep the created handle, or React ref, to call refresh().
You can mount this element inline (
create) or open it as a modal overlay (createOverlay).Example data. Open the Playground.
Props
This element takes no consumer props.Events
Pass callbacks in the create options or React props.onViewChanged
The visible conversion step changed.
Signature: ((payload: { view: "pending" | "input" | "review" | "success"; }) => void)
onBalanceChanged
A conversion completed or remains pending after the polling window. Refresh account balance and activity.
Signature: ((payload: Record<string, never>) => void)
onDone
The viewer finished or dismissed the conversion flow.
Signature: ((payload: Record<string, never>) => void)
onLoaderStart
Runs after the loading skeleton first paints and before onReady.
Signature: (() => void)
onReady
Runs after the element’s first complete paint.
Signature: (() => void)
onError
Runs when the element fails to load or crashes. The fallback remains visible. Use code for programmatic handling. sourceKey identifies a failed host-state source.
Signature: ((e: { message: string; code?: string | undefined; sourceKey?: string | undefined; }) => void)
Methods
Call these on the handle returned bycreate, or through a React ref.
refresh
Re-fetch the account balance after another surface changes it.
Signature: () => Promise<void>
mount
Mounts the element in target and starts loading. React components mount themselves.
Signature: (target: string | HTMLElement) => void
destroy
Removes the element and releases its frame and subscriptions. You can call it more than once. React removes the element automatically.
Signature: () => void
update
Merges new props into the mounted element. In React, change the component props instead.
Signature: (options: Partial<ConvertElementProps>) => void
Styling
This element doesn’t expose class names for styling. Useappearance (theme, accent color, variables) to restyle it.
