Wallet

DepositElement

Funds a Whop account. Renders an amount field and the account’s live funding rails — crypto (a per-network deposit address with its QR) and bank transfer (the wire fields for each settlement currency). A business account’s rails resolve with no credentials, so they work on any page; a personal (user_) account only reveals its rails to itself, so pass accessToken for it — omitted, the viewer’s own same-origin session covers it. Cards and platform balance are opt-in: pass savedCards, allowNewCard, or showPlatformBalance and the element collects the amount and the choice, then emits cardDepositRequested / addCardRequested / platformBalanceSelected and waits for you to call showStep({ step: 'amount' }) when your own screen is done.

This page documents @whop/elements@1.0.0-beta.3 and @whop/elements-react@1.0.0-beta.3.

Pre-release, not yet part of a stable release. Mounts inside 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 showStep() and refresh().

You can mount this element inline (create) or open it as a modal overlay (createOverlay).

import { WhopElements, Wallet, DepositElement } from "@whop/elements-react";
import { loadWhop } from "@whop/elements";

function Example() {
  return (
    <WhopElements elements={loadWhop()}>
      <Wallet /* options */>
        <DepositElement onDepositInitiated={(e) => console.log(e)} onCardDepositRequested={(e) => console.log(e)} onAddCardRequested={(e) => console.log(e)} onBankSelected={(e) => console.log(e)} onIdentityVerificationRequested={(e) => console.log(e)} onPlatformBalanceSelected={(e) => console.log(e)} onDepositConfirmed={(e) => console.log(e)} onStepChanged={(e) => console.log(e)} onDismissed={(e) => console.log(e)} />
      </Wallet>
    </WhopElements>
  );
}

<script src="https://js.whop.cloud/elements/amber/elements.js" data-whop-elements></script>
<script type="module">
  const wallet = window.WhopElements().wallet.create({ /* options */ });
  wallet.create('deposit', {
    onDepositInitiated: (e) => console.log(e),
    onCardDepositRequested: (e) => console.log(e),
    onAddCardRequested: (e) => console.log(e),
    onBankSelected: (e) => console.log(e),
    onIdentityVerificationRequested: (e) => console.log(e),
    onPlatformBalanceSelected: (e) => console.log(e),
    onDepositConfirmed: (e) => console.log(e),
    onStepChanged: (e) => console.log(e),
    onDismissed: (e) => console.log(e)
  }).mount('#wallet-deposit');
</script>

Example data. Open the Playground.

Props

string

A scoped token that lets the rails resolution read a personal (user_) account — needs payout:account:read, plus payout:account:update for the bank rail to provision. Mint it on your server with POST /api/v1/access_tokens. Omitted, the call carries the viewer’s own session, which only answers same-origin; business accounts resolve without any credential.

string

Prefill the amount and make it read-only — for flows that already know what is owed. An amount at or below zero is ignored, as is one longer than 12 whole digits; the rest is rounded to the currency’s decimal places. Defaults to "".

boolean

Offer the crypto rail when the account has a deposit address. Defaults to true.

boolean

Offer the bank-transfer rail. Shown even before the account has bank details — choosing it then asks the viewer to verify their identity when that is what the account still owes, and reports the rail as not available yet when it is not. 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 after the account already has a virtual bank account. 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: "bank" | "crypto" | "card" | "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)

`onIdentityVerificationRequested`

The viewer chose bank transfer before this account has a virtual bank account. The element stays on the amount screen and never navigates — mount your own verification, such as the verifications controller, in answer to this. Signature: ((payload: { accountId: string; }) => 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 by create, 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 through appearance.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.

Class	Targets
`.whop-DepositSurface`	The deposit element root — one screen at a time

const wallet = whop.wallet.create({
  appearance: {
    classes: {
      'whop-DepositSurface': { borderRadius: '8px', fontWeight: '600' }
    }
  }
});

wallet.update({
  appearance: {
    classes: { 'whop-DepositSurface': { fontWeight: '700' } }
  }
});

In React, pass appearance to <Wallet>. Set it globally with WhopElements({ appearance }).

​Props

​Events

​onDepositInitiated

​onCardDepositRequested

​onAddCardRequested

​onBankSelected

​onIdentityVerificationRequested

​onPlatformBalanceSelected

​onDepositConfirmed

​onStepChanged

​onDismissed

​onLoaderStart

​onReady

​onError

​Methods

​showStep

​refresh

​mount

​destroy

​update

​Styling

Props

Events

`onDepositInitiated`

`onCardDepositRequested`

`onAddCardRequested`

`onBankSelected`

`onIdentityVerificationRequested`

`onPlatformBalanceSelected`

`onDepositConfirmed`

`onStepChanged`

`onDismissed`

`onLoaderStart`

`onReady`

`onError`

Methods

`showStep`

`refresh`

`mount`

`destroy`

`update`

Styling