This page documents
@whop/elements@1.0.0-beta.3 and @whop/elements-react@1.0.0-beta.3.Wallet. accountId comes from there. Pass props and callbacks through the create options or React props. Keep the created handle, or React ref, to call refresh().
Example data. Open the Playground.
Props
string
A scoped token for the read and for starting verification — needs
payout:account:read and identity:write. Mint it on your server with POST /api/v1/access_tokens. Omitted, the calls carry the viewer’s own session, which only answers same-origin."individual" | "business"
Which verification the Verify button starts.
individual (KYC) is what unlocks payouts and a Whop card. business (KYB) covers that and additionally unlocks financing and business cards — use it for a company that will need those. Defaults to "individual".Events
Pass callbacks in the create options or React props.onActionRequested
The viewer pressed a banner button. Fires for every action, including ones the element also handles itself.
Signature: ((payload: { action: "deposit_funds" | "submit_information_request" | "update_automatic_withdrawal_method" | "reauthorize_payout_methods" | "update_payout_profile" | "card_usage_review" | "verify_identity" | "sign_formation_documents" | "connect_fulfillment_tracker" | "setup_apple_pay_domains" | "configure_tax_remitter" | "add_vat_registration"; accountId: string; }) => void)
onIdentityVerificationRequested
The viewer pressed Verify on a verify_identity action the element can start. The element opens identity verification itself — this fires alongside, so a host can record the trip.
Signature: ((payload: { accountId: string; }) => void)
onDepositRequested
The viewer pressed Add money. The Wallet controller opens its deposit overlay.
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.
refresh
Re-read the account. Call it when the viewer returns from verifying or depositing so the banners reflect the new state 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<RequiredActionsElementProps>) => 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 }).