This page documents
@whop/elements@1.9.0 and @whop/elements-react@1.9.0.v1.0.0.
Playground
Assemble the elements with example data. Drive the controls, add and arrange elements, and watch events fire live:Options
Pass these towhop.wallet.create({ … }), or as props on <Wallet> in React.
string
Three-letter ISO 4217 currency code for amount fields. An unknown code falls back to
usd. Defaults to "usd".string
Optional scoped token projected to data-backed wallet children. Without it, reads use the viewer session.
boolean
Show a holding’s balance page in place of the balances chart and list when a row is clicked. Off by default so a host that routes on
balanceSelected is not covered by a second screen. Defaults to false.string
required
Account or user ID whose money these surfaces read. Account IDs are prefixed
biz_; user IDs are prefixed user_ and can read only the viewer’s own balance.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. Set it to one of the app’s built locales to override the global configuration. Any other value falls back to the default locale.
Events
Pass callbacks in the create options or React props.onIdentityVerificationRequested
A deposit requires identity verification. Handle this callback to open your settings or verification flow; Wallet does not navigate.
object
onLoadingChange
Runs when the grouped loading state changes. The value is true while any mounted element is still loading.
boolean
Methods
Call these on the Wallet handle fromwhop.wallet.create({ … }) or useWallet().
update
Merges new handle options into every mounted element. In React, change the namespace props instead.
Parameters
Partial<WalletOptions>
required
destroy
Destroys every element and sub-controller this handle created, removes the controller frame, and releases its subscriptions. You can call it more than once, but a destroyed handle refuses any other call — create a new handle to start over. React removes the group automatically when the provider unmounts.
Elements
The elements this group mounts. Each has its own page:ActionsElement
The account action row from Whop’s balance dashboard. Deposit, Send, Withdraw, and Convert open the Wallet controller’s built-in overlays. Accept opens Whop’s checkout-link creator for a business account or company creation for a personal account. Each button also emits its requested event so the embedding page can observe the action.
Balances
Three views of an account’s money. The balance view shows the total, a chart of how it changed, and a picker for the time range. The list view shows the holdings that make up that total, valued in dollars. The breakdown view splits one currency into available, pending, reserve, and negative amounts without money-movement controls. When
openHoldingOnSelect is on, a list row replaces this unit’s canvas — the chart and the list — with that holding’s balance page instead of only reporting the click. (sub-controller, 4 elements)Reports
Balance history and the financial activity behind it, including CSV exports. Account statements are available in the Whop dashboard. (sub-controller, 2 elements)
ActivityElement
An account’s ledger activity: every movement of money in or out, newest first. The list pages as the viewer scrolls, and rows report which one was tapped instead of navigating, so you can open your own detail screen.
ActivityDetailElement
A standalone detail drawer for one movement. Point it at a prefetched financial-activity row, a ledger activity ID, or a card transaction ID — a prefetched row takes precedence, otherwise the element retrieves the record itself. A card transaction opens the card receipt: merchant, amount, status, the card it was charged to, its cardholder on a company account, the settlement date, category, currency conversion and cashback.
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.ConvertElement
Converts an account’s USD balance to Gold or Coinbase Wrapped Bitcoin, and back, through Whop’s public swaps API. A cross-origin mount needs an
accessToken scoped to company:balance:read plus crypto_wallet:swap or crypto_wallet:manage.WithdrawElement
Collects a payout amount and saved payout method, groups standard and instant delivery choices with live fees and arrival estimates, and collects a new payout method when needed. When the host does not drive the flow, the element lists methods and creates the payout itself — pass
accessToken (or rely on the viewer’s same-origin session). A host that already talks to the payouts API can still supply methods, limits, and loading flags; confirming then emits withdrawalRequested for that host to create.SendElement
Sends money from an account to a recipient — a user, another account, or a public claim link anyone can redeem. Direct transfers use the source account’s configured fiat or crypto rail. Renders its own recipient search resolved from the account ID with no credentials beyond the account’s own token. Needs an
accessToken scoped to payout:transfer_funds for direct transfers and payout:withdraw_funds for recipient lists; account recipient search additionally needs company:authorized_user:read and member:basic:read, and account claim links need airdrop_link:manage — a host without one of those scopes should turn off the matching prop rather than leave a row that will 403.CardDetailsElement
One card and what has been spent on it: the card itself, what it has spent against its limit, and its latest transactions. Opens as a drawer. The card face, its reveal and its lock come from the
whopCard element composed inside, so a host gets one surface rather than assembling three. Pressing a transaction, or asking for the full list, reports the request — the drawer never navigates.Cards
An account’s card surfaces, mounted from one place: the compact issued-card list, the full sortable roster, the spend chart, and a single revealable card. Mount the faces the page needs — they share the account and the credential this unit is minted with, so a page showing a chart above a roster wires them once. (sub-controller, 5 elements)