Cards - Whop Docs

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. Mounts inside Wallet. Create it to get a handle, then mount its elements on that handle. Call destroy() to remove the sub-controller. Create it again to get a fresh handle.

Preview

A live, interactive demo of this sub-controller’s default arrangement with example data:

import { WhopElements, Wallet, Cards, CardsElement, CardsTableElement, CardsChartElement, WhopCardElement, CardTransactionsElement } from "@whop/elements-react";
import { loadWhop } from "@whop/elements";

function Example() {
  return (
    <WhopElements elements={loadWhop()}>
      <Wallet /* options */>
        <Cards>
          <CardsElement />
          <CardsTableElement />
          <CardsChartElement />
          <WhopCardElement />
          <CardTransactionsElement />
        </Cards>
      </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 */ });
  const cards = wallet.create('cards', { /* options */ });
  cards.create('cards').mount('#wallet-cards-cards');
  cards.create('cardsTable').mount('#wallet-cards-cardsTable');
  cards.create('cardsChart').mount('#wallet-cards-cardsChart');
  cards.create('whopCard').mount('#wallet-cards-whopCard');
  cards.create('cardTransactions').mount('#wallet-cards-cardTransactions');
</script>

Options

Pass these to wallet.create('cards', { … }), or as props on <Cards> in React. Parent-injected props never appear here.

string

A scoped token for the card reads. Card rows need payout:account:read; cardholder names also need company:authorized_user:read. Omitted, the viewer’s same-origin session is used, which only answers same-origin.

Methods

Call these on the sub handle from wallet.create('cards', { … }).

`update`

Merges new props and callbacks into the sub-controller. Signature: (options: Partial<CardsSubOptions>) => void

`destroy`

Destroys the sub-controller and its elements, then frees its exclusive slot. A later create("cards") starts fresh. Signature: () => void

Elements

The elements this sub-controller mounts. Each has its own page:

CardsElement

Lists the account’s active issued cards, most recently issued first. Needs an accessToken. The title and rows are click targets that emit events instead of navigating — a host wires up its own routing and card-detail UI.

CardsTableElement

A sortable table of every issued card on an account, including cardholder, last month’s spend, limit, and creation date. Rows and the create button emit events so the host owns card details and issuance flows.

CardsChartElement

A business account’s card spend over time, using the same interactive bar chart as Whop’s cards dashboard. The period picker changes the mounted chart and emits an event so the host can persist the selection.

WhopCardElement

Renders one issued Whop Card. The element prefetches authorized secrets immediately after it mounts with a card ID, but keeps them masked until the viewer clicks it or selects View details. The API remains the permission authority. Includes lock and unlock controls by default.

CardTransactionsElement

Every card transaction on an account, as the sortable table the dashboard shows: date, merchant, amount, cashback, status, card and cardholder, with filters for status, card and cardholder. A host can seed any of those three so the table opens on a narrowed view the reader can still widen. Card and cardholder narrow the read itself; search and status narrow the rows already loaded, so the count and total describe the current view rather than the account’s lifetime. Selecting a row reports it — the element never opens a drawer of its own.

​Preview

​Options

​Methods

​update

​destroy

​Elements

CardsElement

CardsTableElement

CardsChartElement

WhopCardElement

CardTransactionsElement

Preview

Options

Methods

`update`

`destroy`

Elements