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.
You can mount this element inline (
create) or open it as a modal overlay (createOverlay).Example data. Open the Playground.
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 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 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)
onWithdrawalRequested
The payer confirmed the final payout details. Create the payout on receipt.
Signature: ((payload: WithdrawalRequest) => 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.
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.