CardDetailsElement

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('cardDetails'). Pass props and callbacks in the create options.

This element is modal-only. Open it with createOverlay; it has no inline mount.

import { WhopElements, Wallet, CardDetailsElement } from "@whop/elements-react";
import { loadWhop } from "@whop/elements";

function Example() {
  return (
    <WhopElements elements={loadWhop()}>
      <Wallet /* options */>
        <CardDetailsElement onTransactionSelected={(e) => console.log(e)} onAllTransactionsRequested={(e) => console.log(e)} onTopUpRequested={(e) => console.log(e)} onCloseRequested={(e) => console.log(e)} onMenuRequested={(e) => console.log(e)} />
      </Wallet>
    </WhopElements>
  );
}

<script src="https://js.whop.cloud/elements/amber/elements.js" data-whop-elements></script>
<script type="module">
  const wallet = window.WhopElements().wallet.create({ /* options */ });
  wallet.createOverlay('cardDetails', {
    onTransactionSelected: (e) => console.log(e),
    onAllTransactionsRequested: (e) => console.log(e),
    onTopUpRequested: (e) => console.log(e),
    onCloseRequested: (e) => console.log(e),
    onMenuRequested: (e) => console.log(e)
  }).open();
</script>

Example data. Open the Playground.

Props

string

A scoped token for the card and its transactions — needs payout:account:read. Omitted, calls carry the viewer’s own session, which only answers same-origin.

{ status: "active" | "frozen" | "canceled" | "invited" | "denied" | null; name: string | null; id: string; last4: string | null; billing: Billing | null; expiration_month: string | null; expiration_year: string | null; }

Non-sensitive card metadata a host has already loaded. Supplying it saves the card face a list request; its authorized secrets are still fetched so the reveal stays instant.

string

The card this drawer describes, prefixed icrd_. Defaults to "".

number

How many recent transactions to list under the card. Defaults to 5.

boolean

Hide the latest-transactions list, for a host that shows its own beneath the drawer. Defaults to false.

Hide the overflow button, for a host with no card actions of its own to offer. Defaults to false.

Events

Pass callbacks in the create options or React props.

`onTransactionSelected`

A transaction in the drawer was pressed. Signature: ((payload: { transactionId: string; }) => void)

`onAllTransactionsRequested`

View all was pressed. Open your own full transaction surface — the drawer never navigates. Signature: ((payload: { cardId: string; }) => void)

`onTopUpRequested`

Top up was pressed. Present your own funding surface, such as the wallet’s deposit element. Signature: ((payload: { cardId: string; }) => void)

`onCloseRequested`

Close was pressed. Dismiss the surface you opened the drawer in — the drawer never closes itself. Signature: ((payload: { cardId: string; }) => void)

`onMenuRequested`

The overflow button was pressed. Present your own card actions menu. Signature: ((payload: { cardId: 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<CardDetailsElementProps>) => void

Styling

Style these parts through appearance.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.

Class	Targets
`.whop-CardDetailsSurface`	The card drawer
`.whop-CardSurface`	The card, controls, and revealed details

const wallet = whop.wallet.create({
  appearance: {
    classes: {
      'whop-CardDetailsSurface': { borderRadius: '8px', fontWeight: '600' },
      'whop-CardSurface': { borderRadius: '8px', fontWeight: '600' }
    }
  }
});

wallet.update({
  appearance: {
    classes: { 'whop-CardDetailsSurface': { fontWeight: '700' } }
  }
});

In React, pass appearance to <Wallet>. Set it globally with WhopElements({ appearance }).

​Props

​Events

​onTransactionSelected

​onAllTransactionsRequested

​onTopUpRequested

​onCloseRequested

​onMenuRequested

​onLoaderStart

​onReady

​onError

​Methods

​mount

​destroy

​update

​Styling

Props

Events

`onTransactionSelected`

`onAllTransactionsRequested`

`onTopUpRequested`

`onCloseRequested`

`onMenuRequested`

`onLoaderStart`

`onReady`

`onError`

Methods

`mount`

`destroy`

`update`

Styling