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.
Wallet group. Render <WithdrawElement /> inside it (React), or call wallet.create('withdraw', { … }) on the handle (vanilla) — consumer props and on<Event> callbacks both go in the create options / JSX props.
This element can be mounted inline (
create) or opened as a modal overlay (createOverlay).Preview
A live, interactive demo of this element with sample data:Usage
Props
WithdrawalMethod[]
Saved payout methods with quotes for the current amount. Defaults to
[].number
Settled balance available to standard payout methods. Defaults to
0.number
Pending balance that may be available to instant payout methods. Defaults to
0.string
The payout account’s ISO 3166-1 alpha-2 country. Defaults to
"US".WithdrawalSupportedMethod[]
Payout methods available to add in the selected country, including required fields. Defaults to
[].boolean
Whether supported payout methods are loading for the selected country. Defaults to
false.WithdrawalLimits
Live standard and instant withdrawal limits. Defaults to
{"standard":{"maxAmount":0},"instant":{"maxAmount":0}}.boolean
Whether payout methods and limits are loading. Defaults to
false.boolean
Whether the current amount is being repriced. Defaults to
false.boolean
Whether a new payout method is being saved. Defaults to
false.boolean
Whether the confirmed withdrawal is being created. Defaults to
false.string
A host-side error to show inside the current screen. Defaults to
"".string
The most recently created method, selected when it appears in methods. Defaults to
"".Events
Pass a callback in the create options (or React prop) to receive these.onAmountChanged
The amount changed and should be repriced.
Signature: ((payload: { amount: number; }) => void)
onCountryChanged
The add-method country changed and supported methods should be refreshed.
Signature: ((payload: { country: string; }) => void)
onSupportedMethodChanged
A supported payout method was selected and its exact required fields should be loaded.
Signature: ((payload: { country: string; supportedPayoutMethodId: string; destinationCurrency: string; }) => void)
onAddMethodRequested
The payer submitted the dynamic add-payout-method form.
Signature: ((payload: WithdrawalCreateMethodInput) => void)
onMethodVerificationCompleted
The newly added payout method finished its verification step.
Signature: ((payload: Record<string, never>) => void)
onWithdrawalRequested
The payer confirmed the final withdrawal details. Create the withdrawal on receipt.
Signature: ((payload: WithdrawalRequest) => void)
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 ofcreate (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<WithdrawElementProps>) => void
Styling
This element exposes no targetable class names. Useappearance (theme, accent color, variables) to restyle it.