Skip to main content
This page documents @whop/elements@1.0.0-beta.3 and @whop/elements-react@1.0.0-beta.3.
Pre-release, not yet part of a stable release. Opens as a modal from Wallet: wallet.createOverlay('activityDetail'). Pass props and callbacks in the create options.
This element is modal-only. Open it with createOverlay; it has no inline mount.

Example data. Open the Playground.

Props

LedgerActivity | null
Optional prefetched ledger activity row. When provided, the element renders it without another request. Defaults to null.
string | null
Optional ledger activity ID to retrieve when no prefetched activity row is provided. Defaults to null.
string | null
Optional card transaction ID (citx_) to retrieve and show as a card receipt — what a card table hands back when a row is pressed. Takes precedence over activityId, and is ignored when a prefetched row is passed. Defaults to null.
boolean
Show the cardholder row on a card receipt. Company accounts only — a personal wallet has one cardholder, so the row never appears there. Reading the name needs company:authorized_user:read; without it the row reads Unavailable. Defaults to true.
boolean
Show the report-an-issue action for eligible card transactions. The action emits an event for the host. Defaults to false.

Events

Pass callbacks in the create options or React props.

onCardSelected

The card row was clicked. Signature: ((payload: { cardId: string; }) => void)

onCardholderSelected

The cardholder row was clicked. Open your own profile surface for that user. Signature: ((payload: { userId: string; }) => void)

onCardTransactionIssueRequested

Report an issue was clicked. Open the host-owned card dispute flow. 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 by create, or through a React ref.

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<ActivityDetailElementProps>) => void

Styling

This element doesn’t expose class names for styling. Use appearance (theme, accent color, variables) to restyle it.