Playground
Assemble the elements with sample data — drive the controls, add and arrange elements, and watch events fire live:Usage
Options
Pass these towhop.wallet.create({ … }) — or as props on <Wallet> in React.
string
required
The account funds land in — a company (
biz_…) or its ledger account id.string
ISO currency the amount field displays in. Malformed codes fall back to USD.
string
Advanced: override the API origin, version segment included (sandbox / staging testing).
Appearance
Visual customization for this group’s elements — overrides the global
WhopElements({ appearance }); change it live with update({ appearance }).WhopElementsLocale
Locale for this group’s element UI text — one of the app’s built locales, overriding the global config; any other value falls back to the default locale.
Events
Pass a callback in the create options / React props.onLoadingChange
Fired when the grouped loading state changes — true while any mounted element is still loading.
Signature: ((loading: boolean) => void)
Methods
Call these on the Wallet handle — the return ofwhop.wallet.create({ … }) (vanilla) or useWallet() (React).
update
Update the handle live: any of its options (appearance and locale included), propagated to every mounted element. React consumers never call it — updating the namespace component’s props does the same.
Signature: (options: Partial<WalletOptions>) => void
Returned objects
Live objects returned by the methods above — hold the reference and call it on your page; these are capabilities, not serializable data.DepositSavedCard
A card the consumer already holds for this account — the element renders it as a funding row and hands the choice back through cardDepositRequested; it never charges a card itself.
id
Payment-method id echoed back in cardDepositRequested.
Signature: string
label
Row label, e.g. Visa •••• 4242.
Signature: string
cardBrand
Brand key used to pick the row icon — visa, mastercard, amex, discover, jcb.
Signature: string | null | undefined
DepositCardFee
The public surface of DepositCardFee.
percentageFee
Percentage POINTS, not a fraction: 2.9 means 2.9%.
Signature: number
fixedFee
Flat fee in major units: 0.3 means $0.30.
Signature: number
radarFee
Fraud-screening fee in major units.
Signature: number
Elements
The elements this group mounts — each has its own page: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) — resolved from the account id with no credentials, so it works on any page. Pass
savedCards, allowNewCard, or showPlatformBalance to offer rails you settle yourself: 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.