This page documents
@whop/elements@1.0.0-beta.0 and @whop/elements-react@1.0.0-beta.0.Wallet. 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
string
A scoped token for the privileged read/write — needs
payout:withdraw_funds (plus company:authorized_user:read and member:basic:read for recipient search, airdrop_link:manage for claim links). Omitted, the read carries the viewer’s own session, which only answers same-origin.boolean
Off, only the team/other-account list shows — no search box. For a host that knows the viewer lacks
member:basic:read. Defaults to true.boolean
Off, the “Send via link” row is hidden. For a host that knows the viewer lacks
airdrop_link:manage. Defaults to true.SendRecipient | null
Skip the picker and open straight onto this recipient’s amount screen — for a “pay this person” action row. No back button is shown in that case, matching there being no picker behind it. Defaults to
null.string
Preselect a currency in the amount screen’s picker. Falls back to
currency, then USD. Defaults to "".Events
Pass callbacks in the create options or React props.onStepChanged
The visible screen changed.
Signature: ((payload: { step: "enter_amount" | "select_recipient" | "create_link" | "link_success" | "success"; }) => void)
onSendCompleted
A transfer succeeded. Refresh anything on your side reading the account’s balance or activity.
Signature: ((payload: { recipient: SendRecipient; amount: number; currency: string; }) => void)
onLinkCreated
A claim link was created. Refresh anything on your side reading the account’s balance.
Signature: ((payload: { claimUrl: string; amount: number; redeemableCount: number; }) => void)
onDone
The viewer clicked “Done” on a success screen — close the surface holding it.
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’s balances and recipient list. Call it after anything on your side changes what it can offer.
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<SendElementProps>) => void
Styling
Style these parts throughappearance.classes. Use camel case or kebab case for property names and include units. Page stylesheets can’t reach the element’s frame. The framework validates each declaration before injecting it.
appearance to <Wallet>. Set it globally with WhopElements({ appearance }).