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
string
A scoped token for listing payout methods and creating the payout — needs
payout:withdraw_funds, payout:destination:read, and payout:create_destination to add a bank. Omitted, the calls carry the viewer’s own session, which only answers same-origin.boolean
Whether the confirmed payout was created successfully. Defaults to
false.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 payout 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 this payout must use an exact provider-backed quote before confirmation. Defaults to
false.WithdrawalPayoutQuote | null
The exact short-lived payout quote returned for the current confirmation request. Defaults to
null.boolean
Whether an exact payout quote is being created. Defaults to
false.string
The error from the current exact payout quote request, if any. Defaults to
"".boolean
Whether the last quote request was inconclusive and must be retried with the same request ID. Defaults to
false.boolean
Whether the last payout result was inconclusive and must be retried exactly. Defaults to
false.WithdrawalRequest | null
The exact unresolved payout request to retry after the element remounts. Defaults to
null.boolean
Whether a new payout method is being saved. Defaults to
false.boolean
Whether the confirmed payout is being created. Defaults to
false.string
A host-side error to show inside the current screen. Defaults to
"".boolean
True when the last payout was refused because the bank could not confirm the account holder name. Shows a fix-or-confirm choice; confirming re-emits withdrawalRequested with acknowledgeBankWarning set. Set this back to false when handling each withdrawalRequested — the choice appears on the change to true, so a flag left true hides every later refusal. Defaults to
false.string
The most recently created method, selected when it appears in methods. Defaults to
"".Set when the payer backed out of Plaid Link or it failed to open. Unlocks manual entry on a rail that otherwise requires linking. Defaults to
false.boolean
Whether a bank link is in progress — the Plaid session is open, or the linked method is being saved. Defaults to
false.Events
Pass callbacks in the create options or React props.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)
onPlaidLinkRequested
The payer chose to link their bank through Plaid instead of typing details. Open Plaid Link on receipt.
Signature: ((payload: { country: string; supportedPayoutMethodId: string; destinationCurrency: string; }) => void)
onMethodVerificationCompleted
The newly added payout method finished its verification step.
Signature: ((payload: Record<string, never>) => void)
onRenameMethodRequested
The payer requested to rename a saved payout method.
Signature: ((payload: { methodId: string; }) => void)
onRemoveMethodRequested
The payer requested to remove a saved payout method.
Signature: ((payload: { methodId: string; }) => void)
onPayoutQuoteRequested
The payer requested an exact short-lived quote before confirming a payout.
Signature: ((payload: WithdrawalPayoutQuoteRequest) => void)
onWithdrawalRequested
The payer confirmed the payout. When the host is driving the flow, create the payout on receipt. When the element created it, this fires after success so the host can refresh balances — do not create a second payout.
Signature: ((payload: WithdrawalRequest) => void)
onDone
The payer finished reviewing a successful payout.
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 saved payout methods and limits. Call it after anything on your side changes what the account can pay out to.
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<WithdrawElementProps>) => void
Styling
This element doesn’t expose class names for styling. Useappearance (theme, accent color, variables) to restyle it.