Skip to main content
This page documents @whop/elements@1.0.0-beta.5 and @whop/elements-react@1.0.0-beta.5.
Pre-release, not yet part of a stable release.

​
Playground

Assemble the elements with example data. Drive the controls, add and arrange elements, and watch events fire live:

​
Options

Pass these to whop.dashboard.create({ … }), or as props on <Dashboard> in React.
​
string
A scoped token every surface under this handle reads with. Mint one token for the whole handle on your server with POST /api/v1/access_tokens, and set a fresh one with update({ accessToken }) before it expires. Reading payments needs payment:basic:read; buyer emails additionally need member:email:read, the customer journey member:basic:read, the tracking column shipment:basic:read, and the product and plan names on a payment access_pass:basic:read and plan:basic:read. Omitted, the reads carry the viewer’s own session, which only answers same-origin.
​
string
required
Account ID, prefixed biz_, whose payments these surfaces read.
​
Appearance
Visual customization for this group’s elements. Overrides the global WhopElements({ appearance }). Change it live with update({ appearance }).
​
WhopElementsLocale
Locale for this group’s element UI text. Set it to one of the app’s built locales to override the global configuration. Any other value falls back to the default locale.

​
Events

Pass callbacks in the create options or React props.

​
onLoadingChange

Runs when the grouped loading state changes. The value is true while any mounted element is still loading. Signature: ((loading: boolean) => void)

​
Methods

Call these on the Dashboard handle from whop.dashboard.create({ … }) or useDashboard().

​
update

Merges new handle options into every mounted element. In React, change the namespace props instead. Signature: (options: Partial<DashboardOptions>) => void

​
destroy

Destroys every element and sub-controller this handle created, removes the controller frame, and releases its subscriptions. You can call it more than once, but a destroyed handle refuses any other call — create a new handle to start over. React removes the group automatically when the provider unmounts. Signature: () => void

​
Elements

The elements this group mounts. Each has its own page:

PaymentsTableElement

The dashboard payments table with status cards, search, filters, sorting, row selection, CSV export, column settings, and pagination. Reads all payment pages to compute complete counts and filter locally; intended for accounts with modest payment histories. Customer details and refunds are handed to your application through events.

PaymentDetailElement

A payment detail page with the dashboard breakdown, activity, customer, details, and customer journey. Each section can be hidden. Reads payment:basic:read; customer email needs member:email:read and journey needs member:basic:read. Action events let your application confirm and authorize changes; this element never refunds, retries, or voids a payment itself.