This page documents
@whop/elements@1.0.0-beta.3 and @whop/elements-react@1.0.0-beta.3.Cards, in Wallet. accountId and accessToken come from Wallet. 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 reads. Rows and card labels need
payout:account:read; cardholder names also need company:authorized_user:read. Omitted, calls carry the viewer’s own session, which only answers same-origin.boolean
Off, the table performs no reads and renders empty. Defaults to
true.string[]
Restrict the table to these cards. Empty shows every card on the account. Defaults to
[].string[]
Restrict the table to these cardholders. Empty shows every cardholder on the account. Defaults to
[].string[]
Restrict the table to these statuses —
completed, pending, declined or reversed. Anything else is ignored. Empty shows every status. Defaults to [].boolean
Show the cardholder column and its filter. Off for an account whose cards all belong to one person. Defaults to
true.number
How many transactions to read per page. Defaults to
50.Events
Pass callbacks in the create options or React props.onTransactionSelected
A row was pressed. Open your own detail surface in answer to this — the element never navigates.
Signature: ((payload: { transactionId: string; }) => 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 transactions, for a host that just changed something on the account.
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<CardTransactionsElementProps>) => 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 }).