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 showStep() and refresh().
You can mount this element inline (
create) or open it as a modal overlay (createOverlay).Example data. Open the Playground.
Props
string
Prefill the amount and make it read-only — for flows that already know what is owed. An amount at or below zero, or above 9,999,999, is ignored. Defaults to
"".boolean
Offer the crypto rail when the account has a deposit address. Defaults to
true.boolean
Offer the bank-transfer rail when the account has wire instructions. Defaults to
true.DepositSavedCard[]
Cards you already hold for this payer, rendered as funding rows. Choosing one emits
cardDepositRequested with the amount — the element never collects a card payment. Defaults to [].boolean
Add an “Add card” row that emits
addCardRequested so you can open your own card-collection flow. Defaults to false.boolean
Offer a “Platform balance” row that emits
platformBalanceSelected immediately, with no amount step. Defaults to false.DepositCardFee | null
Processing fees to preview under the amount when a card row is selected.
percentageFee is in percentage POINTS (2.9 is 2.9%); fixedFee and radarFee are major units (0.3 is $0.30). Defaults to null.string
Preselect a rail by id (
bank, crypto, platform_balance, or a saved card id). Continue stays disabled while that rail is not yet offered, rather than funding through another one. Defaults to "".boolean
Emit
bankSelected and stay on the amount screen instead of showing the wire fields — for hosts that run their own step (a verification, an onboarding) first. Because that host owns the rail, the row is then offered even before the account has instructions to show. Defaults to false.boolean
Show an “I have deposited my funds” button on the crypto screen that emits
depositConfirmed, so you can start watching for the transfer. Defaults to false."amount" | "bank" | "crypto"
Open straight onto a rail instead of the picker.
crypto and bank need no amount; their back button emits dismissed because there is no picker behind them. Defaults to "amount".Events
Pass callbacks in the create options or React props.onDepositInitiated
The payer confirmed an amount and a rail. Fires for every rail, before any instructions render — the analytics/funnel hook.
Signature: ((payload: { method: "card" | "bank" | "crypto" | "platform_balance"; amount: number; currency: string; paymentMethodId?: string | undefined; }) => void)
onCardDepositRequested
A saved card was chosen. Collect the payment on your side, then call showStep({ step: "amount" }) to return the element to the picker.
Signature: ((payload: { amount: number; currency: string; paymentMethodId: string; }) => void)
onAddCardRequested
The “Add card” row was picked — open your card-collection flow.
Signature: ((payload: Record<string, never>) => void)
onBankSelected
The bank rail was chosen while deferBankToHost is set — run your step, then show the fields yourself or call showStep({ step: "bank" }).
Signature: ((payload: Record<string, never>) => void)
onPlatformBalanceSelected
The platform-balance row was picked. It carries no amount — your own screen collects that.
Signature: ((payload: Record<string, never>) => void)
onDepositConfirmed
The payer said they sent the crypto. since is a unix-seconds floor to start matching incoming transfers from (it looks slightly back in time, so a transfer sent moments before the click still matches).
Signature: ((payload: { network: string; token: string; networkLabel: string; since: number; }) => void)
onStepChanged
The visible screen changed.
Signature: ((payload: { step: "amount" | "bank" | "crypto"; }) => void)
onDismissed
The payer backed out of a rail the element was opened directly onto — 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.
showStep
Move the element to a screen. { step: "amount" } is how you hand control back after settling a card or platform-balance deposit on your side.
Signature: (input: { step: "amount" | "bank" | "crypto"; }) => Promise<void>
refresh
Re-resolve the account’s funding rails. Call it after anything on your side changes what the account can offer — finishing bank onboarding, for instance — so the new rail appears without waiting for the cache to expire.
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<DepositElementProps>) => 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 }).