This page documents
@whop/elements@1.0.0-beta.0 and @whop/elements-react@1.0.0-beta.0.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 privileged read — needs
payout:account:read. Mint it on your server with POST /api/v1/access_tokens. Omitted, the read carries the viewer’s own session, which only answers same-origin.boolean
Off, the element fetches nothing and keeps the title and ”+” button visible with an empty body — for a host that only wants to fetch once some precondition (card issuing being active for this account, say) is true. Defaults to
true.number | null
Cap the rows shown, most recently issued first.
null shows every active card. Defaults to null.boolean
Render the title as plain, unclickable text instead of a click target. Off by default, in which case clicking the title emits
viewAllSelected for you to route to the full cards list — the element never navigates. Defaults to false.boolean
Hide the ”+” button. Off by default, in which case clicking it emits
addCardRequested. Defaults to false.Events
Pass callbacks in the create options or React props.onCardSelected
A card row was clicked. Open your own card details for it — the element never navigates.
Signature: ((payload: { cardId: string; }) => void)
onViewAllSelected
The title was clicked. Only fires when disableRedirect is false.
Signature: ((payload: Record<string, never>) => void)
onAddCardRequested
The ”+” button was clicked. Only fires when hideAddButton is false.
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-fetch the account’s cards. Call it after a mutation made elsewhere (rename, freeze, cancel, a new card) so the list reflects it 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<CardsElementProps>) => 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 }).