@whop/elements 1.0.0-beta.4 → 1.0.0-beta.5

package/checkout.d.cts

@@ -11,17 +11,21 @@
  */
 export interface CheckoutOptions {
 	/**
-	 * Existing plan ID, prefixed `plan_`. The element creates a checkout session for it, and the plan defines the price; nothing about amounts can be asserted client-side. Every checkout is created from this or a `checkoutConfiguration` — omitting both refuses loudly at mount. Set at create only: the session is minted from it, and changing it later refuses.
+	 * Existing plan ID, prefixed `plan_`. Shorthand for an `items` array containing this plan and `quantity`. The plan defines the price; nothing about amounts can be asserted client-side. Pass either `plan`, `items`, or a `checkoutConfiguration`. Set at create only: the session is minted from it, and changing it later refuses.
 	 */
 	plan?: string;
-	/**
-	 * Existing checkout configuration ID, prefixed `ch_`. The element creates the checkout session from it: the configuration names the plan being sold (or, in `setup` mode, no plan — the checkout saves a payment method and charges nothing) and seeds its own affiliate code, metadata, redirect and payment-method presets — an option passed here beside it wins over the configuration’s copy, field by field. Pass `plan` alongside only to set `quantity`; it must be the configuration’s own plan, which can never be swapped out from under its presets. Set at create only.
-	 */
-	checkoutConfiguration?: string;
 	/**
 	 * How many units to purchase. Plans that disallow multiples refuse values above 1. Set at create only: the session is minted with it, and changing it later refuses. @default 1
 	 */
 	quantity?: number;
+	/**
+	 * The plans in this checkout and how many units of each to purchase. Every item must belong to the same seller and use compatible billing terms; the API validates the complete cart and prices it as one charge. Pass this instead of `plan`, `quantity`, or `checkoutConfiguration`. Set at create only: the session is minted from this exact cart, and changing it later refuses.
+	 */
+	items?: CheckoutItemInput[];
+	/**
+	 * Existing checkout configuration ID, prefixed `ch_`. The element creates the checkout session from it: the configuration names the plan being sold (or, in `setup` mode, no plan — the checkout saves a payment method and charges nothing) and seeds its own affiliate code, metadata, redirect and payment-method presets — an option passed here beside it wins over the configuration’s copy, field by field. Pass `plan` alongside only to set `quantity`; it must be the configuration’s own plan, which can never be swapped out from under its presets. Set at create only.
+	 */
+	checkoutConfiguration?: string;
 	/**
 	 * A promo code to apply before the buyer ever sees the price — the discount is on the first quote, and the buyer can still change or remove it. Pass the code a marketing link carried: a code that has expired or was never valid opens the checkout at full price with the reason on the promo row, never a checkout that will not open. Set at create only.
 	 */
@@ -64,7 +68,18 @@ export interface CheckoutOptions {
  * Consumer props for the "checkout" element. Set at create (or as `<CheckoutElement />` JSX props), and updatable live via `update()`.
  * @see https://docs.whop.com/elements/latest/checkout/checkout
  */
-export interface CheckoutElementProps {}
+export interface CheckoutElementProps {
+	/**
+	 * Prefills the buyer email the host page already knows: the authenticated first-party viewer’s, the one a checkout link carried, or the one a merchant page collected before mounting. A session that already holds its buyer’s email wins over it. Empty (default) leaves the field for the buyer.
+	 * @default ""
+	 */
+	buyerEmail?: string;
+	/**
+	 * Keeps the buyer from editing the prefilled `buyerEmail` — an invoice link names who it was issued to. Only holds while the field still shows that email; a session email that already differs is never locked to it, and without a `buyerEmail` there is nothing to lock.
+	 * @default false
+	 */
+	lockBuyerEmail?: boolean;
+}
 
 /**
  * The live handle for a mounted "checkout" element. Returned by `create("checkout")`; in React, the component's `ref`.
@@ -95,6 +110,16 @@ export interface CheckoutElementHandle {
  * @see https://docs.whop.com/elements/latest/checkout/checkout
  */
 export interface CheckoutElementCreateOptions {
+	/**
+	 * Prefills the buyer email the host page already knows: the authenticated first-party viewer’s, the one a checkout link carried, or the one a merchant page collected before mounting. A session that already holds its buyer’s email wins over it. Empty (default) leaves the field for the buyer.
+	 * @default ""
+	 */
+	buyerEmail?: string;
+	/**
+	 * Keeps the buyer from editing the prefilled `buyerEmail` — an invoice link names who it was issued to. Only holds while the field still shows that email; a session email that already differs is never locked to it, and without a `buyerEmail` there is nothing to lock.
+	 * @default false
+	 */
+	lockBuyerEmail?: boolean;
 	/**
 	 * Runs after the loading skeleton first paints and before `onReady`.
 	 */
@@ -115,7 +140,7 @@ export interface CheckoutElementCreateOptions {
  */
 export interface ExpressCheckoutElementProps {
 	/**
-	 * Which wallets may render — a filter over what the buyer’s device actually offers. The element never shows a wallet the device, the served matrix, or the checkout’s payment method configuration cannot back, and the render order stays best-native-first whatever order this lists. An empty list renders nothing (warned in dev builds). Apple Pay also needs the page’s domain verified as a [payment method domain](/api-reference/beta/payment-method-domains/payment-method-domain) — first-party whop.com pages are pre-approved; on any other site, register and verify the domain or the Apple Pay button stays hidden.
+	 * Which wallets may render — a filter over what the buyer’s device actually offers. The element never shows a wallet the device, the served matrix, or the checkout’s payment method configuration cannot back, and the render order stays best-native-first whatever order this lists. An empty list renders nothing (warned in dev builds). Both wallets need the page’s domain verified as a [payment method domain](/api-reference/beta/payment-method-domains/payment-method-domain) — first-party whop.com pages are pre-approved; on any other site, register and verify the domain or the buttons stay hidden. Offering Google Pay on your own site is subject to the [Google Pay API Terms of Service](https://payments.developers.google.com/terms/sellertos).
 	 * @default ["apple_pay","google_pay"]
 	 */
 	wallets?: ("apple_pay" | "google_pay")[];
@@ -156,7 +181,7 @@ export interface ExpressCheckoutElementHandle {
  */
 export interface ExpressCheckoutElementCreateOptions {
 	/**
-	 * Which wallets may render — a filter over what the buyer’s device actually offers. The element never shows a wallet the device, the served matrix, or the checkout’s payment method configuration cannot back, and the render order stays best-native-first whatever order this lists. An empty list renders nothing (warned in dev builds). Apple Pay also needs the page’s domain verified as a [payment method domain](/api-reference/beta/payment-method-domains/payment-method-domain) — first-party whop.com pages are pre-approved; on any other site, register and verify the domain or the Apple Pay button stays hidden.
+	 * Which wallets may render — a filter over what the buyer’s device actually offers. The element never shows a wallet the device, the served matrix, or the checkout’s payment method configuration cannot back, and the render order stays best-native-first whatever order this lists. An empty list renders nothing (warned in dev builds). Both wallets need the page’s domain verified as a [payment method domain](/api-reference/beta/payment-method-domains/payment-method-domain) — first-party whop.com pages are pre-approved; on any other site, register and verify the domain or the buttons stay hidden. Offering Google Pay on your own site is subject to the [Google Pay API Terms of Service](https://payments.developers.google.com/terms/sellertos).
 	 * @default ["apple_pay","google_pay"]
 	 */
 	wallets?: ("apple_pay" | "google_pay")[];
@@ -190,7 +215,7 @@ export interface CheckoutHandle {
 	 */
 	create(name: "checkout", options?: CheckoutElementCreateOptions): CheckoutElementHandle;
 	/**
-	 * One-press Apple Pay and Google Pay buttons for a checkout — the OS payment sheet collects whatever the session still needs (the buyer's email, a phone number where the seller collects one, a shipping address for physical goods, and in Apple Pay a promo code where the seller offers entry) and one press finishes the purchase. It shares the checkout's entry slot with the full checkout element, so a handle mounts exactly one of the two: this button alone where the purchase is simple enough for a sheet to finish, or the full checkout surface for everything else. Renders only the wallets the buyer's device can actually pay with — and the checkout's own payment method configuration allows — using the served button art, and renders nothing where no wallet is available. Apple Pay additionally requires the page's domain to be a verified payment method domain: first-party whop.com pages are pre-approved, and any other site must register its domain through the Payment Method Domains API before the button renders there. A checkout the sheet cannot honestly finish — a waitlist join, a transfer, a form question only a page can ask — refuses loudly instead of rendering a doomed button.
+	 * One-press Apple Pay and Google Pay buttons for a checkout — the OS payment sheet collects whatever the session still needs (the buyer's email, a phone number where the seller collects one, a shipping address for physical goods, and in Apple Pay a promo code where the seller offers entry) and one press finishes the purchase. It shares the checkout's entry slot with the full checkout element, so a handle mounts exactly one of the two: this button alone where the purchase is simple enough for a sheet to finish, or the full checkout surface for everything else. Renders only the wallets the buyer's device can actually pay with — and the checkout's own payment method configuration allows — using the served button art, and renders nothing where no wallet is available. Both wallets require the page's domain to be a verified payment method domain: first-party whop.com pages are pre-approved, and any other site must register its domain through the Payment Method Domains API before either button renders there. Offering Google Pay on your own site is subject to the Google Pay API Terms of Service. A checkout the sheet cannot honestly finish — a waitlist join, a transfer, a form question only a page can ask — refuses loudly instead of rendering a doomed button.
 	 * Exclusive slot `entry`. Mount exactly one of: checkout | expressCheckout.
 	 */
 	create(name: "expressCheckout", options?: ExpressCheckoutElementCreateOptions): ExpressCheckoutElementHandle;
@@ -210,6 +235,20 @@ export interface CheckoutHandle {
  */
 export interface CheckoutStatics {}
 
+/**
+ * Declared from the app's `CheckoutItemInput`, referenced by a host-capability surface.
+ */
+export interface CheckoutItemInput {
+	/**
+	 * Existing plan ID, prefixed `plan_`.
+	 */
+	plan: string;
+	/**
+	 * Number of units to purchase. Defaults to 1; plans can disallow quantities above 1.
+	 */
+	quantity?: number | undefined;
+}
+
 /**
  * Checkout attribution recorded with the session. The element maps these fields to `POST /api/v1/checkout_sessions`; empty values are omitted, and `country` is resolved by the API.
  * Declared from the app's `CheckoutAttributionInput`, referenced by a host-capability surface.

package/checkout.d.ts

@@ -11,17 +11,21 @@
  */
 export interface CheckoutOptions {
 	/**
-	 * Existing plan ID, prefixed `plan_`. The element creates a checkout session for it, and the plan defines the price; nothing about amounts can be asserted client-side. Every checkout is created from this or a `checkoutConfiguration` — omitting both refuses loudly at mount. Set at create only: the session is minted from it, and changing it later refuses.
+	 * Existing plan ID, prefixed `plan_`. Shorthand for an `items` array containing this plan and `quantity`. The plan defines the price; nothing about amounts can be asserted client-side. Pass either `plan`, `items`, or a `checkoutConfiguration`. Set at create only: the session is minted from it, and changing it later refuses.
 	 */
 	plan?: string;
-	/**
-	 * Existing checkout configuration ID, prefixed `ch_`. The element creates the checkout session from it: the configuration names the plan being sold (or, in `setup` mode, no plan — the checkout saves a payment method and charges nothing) and seeds its own affiliate code, metadata, redirect and payment-method presets — an option passed here beside it wins over the configuration’s copy, field by field. Pass `plan` alongside only to set `quantity`; it must be the configuration’s own plan, which can never be swapped out from under its presets. Set at create only.
-	 */
-	checkoutConfiguration?: string;
 	/**
 	 * How many units to purchase. Plans that disallow multiples refuse values above 1. Set at create only: the session is minted with it, and changing it later refuses. @default 1
 	 */
 	quantity?: number;
+	/**
+	 * The plans in this checkout and how many units of each to purchase. Every item must belong to the same seller and use compatible billing terms; the API validates the complete cart and prices it as one charge. Pass this instead of `plan`, `quantity`, or `checkoutConfiguration`. Set at create only: the session is minted from this exact cart, and changing it later refuses.
+	 */
+	items?: CheckoutItemInput[];
+	/**
+	 * Existing checkout configuration ID, prefixed `ch_`. The element creates the checkout session from it: the configuration names the plan being sold (or, in `setup` mode, no plan — the checkout saves a payment method and charges nothing) and seeds its own affiliate code, metadata, redirect and payment-method presets — an option passed here beside it wins over the configuration’s copy, field by field. Pass `plan` alongside only to set `quantity`; it must be the configuration’s own plan, which can never be swapped out from under its presets. Set at create only.
+	 */
+	checkoutConfiguration?: string;
 	/**
 	 * A promo code to apply before the buyer ever sees the price — the discount is on the first quote, and the buyer can still change or remove it. Pass the code a marketing link carried: a code that has expired or was never valid opens the checkout at full price with the reason on the promo row, never a checkout that will not open. Set at create only.
 	 */
@@ -64,7 +68,18 @@ export interface CheckoutOptions {
  * Consumer props for the "checkout" element. Set at create (or as `<CheckoutElement />` JSX props), and updatable live via `update()`.
  * @see https://docs.whop.com/elements/latest/checkout/checkout
  */
-export interface CheckoutElementProps {}
+export interface CheckoutElementProps {
+	/**
+	 * Prefills the buyer email the host page already knows: the authenticated first-party viewer’s, the one a checkout link carried, or the one a merchant page collected before mounting. A session that already holds its buyer’s email wins over it. Empty (default) leaves the field for the buyer.
+	 * @default ""
+	 */
+	buyerEmail?: string;
+	/**
+	 * Keeps the buyer from editing the prefilled `buyerEmail` — an invoice link names who it was issued to. Only holds while the field still shows that email; a session email that already differs is never locked to it, and without a `buyerEmail` there is nothing to lock.
+	 * @default false
+	 */
+	lockBuyerEmail?: boolean;
+}
 
 /**
  * The live handle for a mounted "checkout" element. Returned by `create("checkout")`; in React, the component's `ref`.
@@ -95,6 +110,16 @@ export interface CheckoutElementHandle {
  * @see https://docs.whop.com/elements/latest/checkout/checkout
  */
 export interface CheckoutElementCreateOptions {
+	/**
+	 * Prefills the buyer email the host page already knows: the authenticated first-party viewer’s, the one a checkout link carried, or the one a merchant page collected before mounting. A session that already holds its buyer’s email wins over it. Empty (default) leaves the field for the buyer.
+	 * @default ""
+	 */
+	buyerEmail?: string;
+	/**
+	 * Keeps the buyer from editing the prefilled `buyerEmail` — an invoice link names who it was issued to. Only holds while the field still shows that email; a session email that already differs is never locked to it, and without a `buyerEmail` there is nothing to lock.
+	 * @default false
+	 */
+	lockBuyerEmail?: boolean;
 	/**
 	 * Runs after the loading skeleton first paints and before `onReady`.
 	 */
@@ -115,7 +140,7 @@ export interface CheckoutElementCreateOptions {
  */
 export interface ExpressCheckoutElementProps {
 	/**
-	 * Which wallets may render — a filter over what the buyer’s device actually offers. The element never shows a wallet the device, the served matrix, or the checkout’s payment method configuration cannot back, and the render order stays best-native-first whatever order this lists. An empty list renders nothing (warned in dev builds). Apple Pay also needs the page’s domain verified as a [payment method domain](/api-reference/beta/payment-method-domains/payment-method-domain) — first-party whop.com pages are pre-approved; on any other site, register and verify the domain or the Apple Pay button stays hidden.
+	 * Which wallets may render — a filter over what the buyer’s device actually offers. The element never shows a wallet the device, the served matrix, or the checkout’s payment method configuration cannot back, and the render order stays best-native-first whatever order this lists. An empty list renders nothing (warned in dev builds). Both wallets need the page’s domain verified as a [payment method domain](/api-reference/beta/payment-method-domains/payment-method-domain) — first-party whop.com pages are pre-approved; on any other site, register and verify the domain or the buttons stay hidden. Offering Google Pay on your own site is subject to the [Google Pay API Terms of Service](https://payments.developers.google.com/terms/sellertos).
 	 * @default ["apple_pay","google_pay"]
 	 */
 	wallets?: ("apple_pay" | "google_pay")[];
@@ -156,7 +181,7 @@ export interface ExpressCheckoutElementHandle {
  */
 export interface ExpressCheckoutElementCreateOptions {
 	/**
-	 * Which wallets may render — a filter over what the buyer’s device actually offers. The element never shows a wallet the device, the served matrix, or the checkout’s payment method configuration cannot back, and the render order stays best-native-first whatever order this lists. An empty list renders nothing (warned in dev builds). Apple Pay also needs the page’s domain verified as a [payment method domain](/api-reference/beta/payment-method-domains/payment-method-domain) — first-party whop.com pages are pre-approved; on any other site, register and verify the domain or the Apple Pay button stays hidden.
+	 * Which wallets may render — a filter over what the buyer’s device actually offers. The element never shows a wallet the device, the served matrix, or the checkout’s payment method configuration cannot back, and the render order stays best-native-first whatever order this lists. An empty list renders nothing (warned in dev builds). Both wallets need the page’s domain verified as a [payment method domain](/api-reference/beta/payment-method-domains/payment-method-domain) — first-party whop.com pages are pre-approved; on any other site, register and verify the domain or the buttons stay hidden. Offering Google Pay on your own site is subject to the [Google Pay API Terms of Service](https://payments.developers.google.com/terms/sellertos).
 	 * @default ["apple_pay","google_pay"]
 	 */
 	wallets?: ("apple_pay" | "google_pay")[];
@@ -190,7 +215,7 @@ export interface CheckoutHandle {
 	 */
 	create(name: "checkout", options?: CheckoutElementCreateOptions): CheckoutElementHandle;
 	/**
-	 * One-press Apple Pay and Google Pay buttons for a checkout — the OS payment sheet collects whatever the session still needs (the buyer's email, a phone number where the seller collects one, a shipping address for physical goods, and in Apple Pay a promo code where the seller offers entry) and one press finishes the purchase. It shares the checkout's entry slot with the full checkout element, so a handle mounts exactly one of the two: this button alone where the purchase is simple enough for a sheet to finish, or the full checkout surface for everything else. Renders only the wallets the buyer's device can actually pay with — and the checkout's own payment method configuration allows — using the served button art, and renders nothing where no wallet is available. Apple Pay additionally requires the page's domain to be a verified payment method domain: first-party whop.com pages are pre-approved, and any other site must register its domain through the Payment Method Domains API before the button renders there. A checkout the sheet cannot honestly finish — a waitlist join, a transfer, a form question only a page can ask — refuses loudly instead of rendering a doomed button.
+	 * One-press Apple Pay and Google Pay buttons for a checkout — the OS payment sheet collects whatever the session still needs (the buyer's email, a phone number where the seller collects one, a shipping address for physical goods, and in Apple Pay a promo code where the seller offers entry) and one press finishes the purchase. It shares the checkout's entry slot with the full checkout element, so a handle mounts exactly one of the two: this button alone where the purchase is simple enough for a sheet to finish, or the full checkout surface for everything else. Renders only the wallets the buyer's device can actually pay with — and the checkout's own payment method configuration allows — using the served button art, and renders nothing where no wallet is available. Both wallets require the page's domain to be a verified payment method domain: first-party whop.com pages are pre-approved, and any other site must register its domain through the Payment Method Domains API before either button renders there. Offering Google Pay on your own site is subject to the Google Pay API Terms of Service. A checkout the sheet cannot honestly finish — a waitlist join, a transfer, a form question only a page can ask — refuses loudly instead of rendering a doomed button.
 	 * Exclusive slot `entry`. Mount exactly one of: checkout | expressCheckout.
 	 */
 	create(name: "expressCheckout", options?: ExpressCheckoutElementCreateOptions): ExpressCheckoutElementHandle;
@@ -210,6 +235,20 @@ export interface CheckoutHandle {
  */
 export interface CheckoutStatics {}
 
+/**
+ * Declared from the app's `CheckoutItemInput`, referenced by a host-capability surface.
+ */
+export interface CheckoutItemInput {
+	/**
+	 * Existing plan ID, prefixed `plan_`.
+	 */
+	plan: string;
+	/**
+	 * Number of units to purchase. Defaults to 1; plans can disallow quantities above 1.
+	 */
+	quantity?: number | undefined;
+}
+
 /**
  * Checkout attribution recorded with the session. The element maps these fields to `POST /api/v1/checkout_sessions`; empty values are omitted, and `country` is resolved by the API.
  * Declared from the app's `CheckoutAttributionInput`, referenced by a host-capability surface.

package/dashboard.d.cts

@@ -0,0 +1,328 @@
+/**
+ * Options for `whop.dashboard.create()`: the controller's props plus its `on<Event>` callbacks. In React, these are the `<Dashboard>` component's props.
+ * @example
+ * ```ts
+ * import { loadWhop } from "@whop/elements";
+ * 
+ * const whop = (await loadWhop())({ locale: "en" });
+ * const dashboard = whop.dashboard.create({}); // options: props + on<Event> callbacks
+ * ```
+ * @see https://docs.whop.com/elements/latest/dashboard/overview
+ */
+export interface DashboardOptions {
+	/**
+	 * 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.
+	 */
+	accessToken?: string;
+	/**
+	 * Account ID, prefixed `biz_`, whose payments these surfaces read.
+	 */
+	accountId: string;
+	/**
+	 * Runs when the grouped loading state changes. The value is `true` while any mounted element is still loading.
+	 */
+	onLoadingChange?: ((loading: boolean) => void);
+	/**
+	 * Set `false` to turn off Whop's built-in usage analytics for this handle and its elements. The analytics identity is never threaded to its frames. A reserved option, not element data.
+	 */
+	analytics?: false;
+	/**
+	 * Visual customization for this group's elements. Overrides the global `WhopElements({ appearance })`. Change it live with `update({ appearance })`.
+	 */
+	appearance?: import("./_framework.js").Appearance;
+	/**
+	 * 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.
+	 */
+	locale?: import("./_framework.js").WhopElementsLocale;
+}
+
+/**
+ * Consumer props for the "paymentsTable" element. Set at create (or as `<PaymentsTableElement />` JSX props), and updatable live via `update()`.
+ * @see https://docs.whop.com/elements/latest/dashboard/paymentsTable
+ */
+export interface PaymentsTableElementProps {
+	/**
+	 * Show the header action menu, Export button, and table settings button.
+	 * @default true
+	 */
+	showActions?: boolean;
+	/**
+	 * Show the three-dot action menu on each payment row.
+	 * @default true
+	 */
+	showRowActions?: boolean;
+	/**
+	 * Show the six payment status boxes above the filters.
+	 * @default true
+	 */
+	showStatusTabs?: boolean;
+	/**
+	 * Show the tracking column and filter for physical-product accounts. Tracking data requires `shipment:basic:read`.
+	 * @default true
+	 */
+	showTracking?: boolean;
+}
+
+/**
+ * The live handle for a mounted "paymentsTable" element. Returned by `create("paymentsTable")`; in React, the component's `ref`.
+ * @see https://docs.whop.com/elements/latest/dashboard/paymentsTable
+ */
+export interface PaymentsTableElementHandle {
+	/**
+	 * Reload payments after a refund or another change.
+	 */
+	refresh: () => Promise<void>;
+	/**
+	 * Mounts the element in `target` and starts loading. React components mount themselves.
+	 */
+	mount: (target: string | HTMLElement) => void;
+	/**
+	 * Removes the element and releases its frame and subscriptions. You can call it more than once. React removes the element automatically.
+	 */
+	destroy: () => void;
+	/**
+	 * Merges new props into the mounted element. In React, change the component props instead.
+	 */
+	update: (options: Partial<PaymentsTableElementProps>) => void;
+}
+
+/**
+ * Options for `create("paymentsTable")`: the consumer props plus event callbacks and lifecycle hooks.
+ * @example
+ * ```ts
+ * const paymentsTable = dashboard.create("paymentsTable", {}); // this interface: props + on<Event> callbacks
+ * paymentsTable.mount("#dashboard-paymentsTable");
+ * ```
+ * @see https://docs.whop.com/elements/latest/dashboard/paymentsTable
+ */
+export interface PaymentsTableElementCreateOptions {
+	/**
+	 * Show the header action menu, Export button, and table settings button.
+	 * @default true
+	 */
+	showActions?: boolean;
+	/**
+	 * Show the three-dot action menu on each payment row.
+	 * @default true
+	 */
+	showRowActions?: boolean;
+	/**
+	 * Show the six payment status boxes above the filters.
+	 * @default true
+	 */
+	showStatusTabs?: boolean;
+	/**
+	 * Show the tracking column and filter for physical-product accounts. Tracking data requires `shipment:basic:read`.
+	 * @default true
+	 */
+	showTracking?: boolean;
+	/**
+	 * Open payment details in your application.
+	 */
+	onPaymentSelected?: ((payload: { paymentId: string; }) => void);
+	/**
+	 * Open the invoice in your application.
+	 */
+	onInvoiceRequested?: ((payload: { paymentId: string; }) => void);
+	/**
+	 * Open the buyer in your application.
+	 */
+	onUserSelected?: ((payload: { userId: string; }) => void);
+	/**
+	 * The viewer requested a refund. Your application must confirm and authorize it server-side. Refund controls are enabled only when this callback is provided.
+	 */
+	onRefundRequested?: ((payload: { paymentIds: string[]; }) => void);
+	/**
+	 * Open the account’s payment settings in your application.
+	 */
+	onSettingsRequested?: ((payload: Record<string, never>) => void);
+	/**
+	 * Runs after the loading skeleton first paints and before `onReady`.
+	 */
+	onLoaderStart?: (() => void);
+	/**
+	 * Runs after the element's first complete paint.
+	 */
+	onReady?: (() => void);
+	/**
+	 * 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.
+	 */
+	onError?: ((e: { message: string; code?: string | undefined; sourceKey?: string | undefined; }) => void);
+}
+
+/**
+ * Consumer props for the "paymentDetail" element. Set at create (or as `<PaymentDetailElement />` JSX props), and updatable live via `update()`.
+ * @see https://docs.whop.com/elements/latest/dashboard/paymentDetail
+ */
+export interface PaymentDetailElementProps {
+	/**
+	 * Show the top-right Refund button and action menu. Mutating actions require event handlers.
+	 * @default true
+	 */
+	showActions?: boolean;
+	/**
+	 * The payment to display, prefixed pay_. Required to load a payment.
+	 * @default ""
+	 */
+	paymentId?: string;
+	/**
+	 * Show the payment amount, fees, and net amount.
+	 * @default true
+	 */
+	showBreakdown?: boolean;
+	/**
+	 * Show the payment activity timeline.
+	 * @default true
+	 */
+	showActivity?: boolean;
+	/**
+	 * Show customer name, username, email, phone, and billing address when permitted.
+	 * @default true
+	 */
+	showCustomer?: boolean;
+	/**
+	 * Show product, plan, payment method, and payment identifiers.
+	 * @default true
+	 */
+	showDetails?: boolean;
+	/**
+	 * Show the customer journey. Reads the account-scoped Events API only while visible.
+	 * @default true
+	 */
+	showJourney?: boolean;
+}
+
+/**
+ * The live handle for a mounted "paymentDetail" element. Returned by `create("paymentDetail")`; in React, the component's `ref`.
+ * @see https://docs.whop.com/elements/latest/dashboard/paymentDetail
+ */
+export interface PaymentDetailElementHandle {
+	/**
+	 * Reload the payment and its fees after a host action completes.
+	 */
+	refresh: () => Promise<void>;
+	/**
+	 * Mounts the element in `target` and starts loading. React components mount themselves.
+	 */
+	mount: (target: string | HTMLElement) => void;
+	/**
+	 * Removes the element and releases its frame and subscriptions. You can call it more than once. React removes the element automatically.
+	 */
+	destroy: () => void;
+	/**
+	 * Merges new props into the mounted element. In React, change the component props instead.
+	 */
+	update: (options: Partial<PaymentDetailElementProps>) => void;
+}
+
+/**
+ * Options for `create("paymentDetail")`: the consumer props plus event callbacks and lifecycle hooks.
+ * @example
+ * ```ts
+ * const paymentDetail = dashboard.create("paymentDetail", {}); // this interface: props + on<Event> callbacks
+ * paymentDetail.mount("#dashboard-paymentDetail");
+ * ```
+ * @see https://docs.whop.com/elements/latest/dashboard/paymentDetail
+ */
+export interface PaymentDetailElementCreateOptions {
+	/**
+	 * Show the top-right Refund button and action menu. Mutating actions require event handlers.
+	 * @default true
+	 */
+	showActions?: boolean;
+	/**
+	 * The payment to display, prefixed pay_. Required to load a payment.
+	 * @default ""
+	 */
+	paymentId?: string;
+	/**
+	 * Show the payment amount, fees, and net amount.
+	 * @default true
+	 */
+	showBreakdown?: boolean;
+	/**
+	 * Show the payment activity timeline.
+	 * @default true
+	 */
+	showActivity?: boolean;
+	/**
+	 * Show customer name, username, email, phone, and billing address when permitted.
+	 * @default true
+	 */
+	showCustomer?: boolean;
+	/**
+	 * Show product, plan, payment method, and payment identifiers.
+	 * @default true
+	 */
+	showDetails?: boolean;
+	/**
+	 * Show the customer journey. Reads the account-scoped Events API only while visible.
+	 * @default true
+	 */
+	showJourney?: boolean;
+	/**
+	 * Confirm and authorize a refund in your application. Enabled only when refundable and a handler is provided.
+	 */
+	onRefundRequested?: ((payload: { paymentId: string; }) => void);
+	/**
+	 * Confirm and authorize another charge attempt in your application.
+	 */
+	onRetryRequested?: ((payload: { paymentId: string; }) => void);
+	/**
+	 * Confirm and authorize voiding this payment in your application.
+	 */
+	onVoidRequested?: ((payload: { paymentId: string; }) => void);
+	/**
+	 * View or download the invoice in your application.
+	 */
+	onInvoiceRequested?: ((payload: { paymentId: string; }) => void);
+	/**
+	 * Open the customer in your application.
+	 */
+	onCustomerSelected?: ((payload: { userId: string; memberId: string | null; }) => void);
+	/**
+	 * Open your customer messaging UI.
+	 */
+	onMessageRequested?: ((payload: { userId: string; }) => void);
+	/**
+	 * Runs after the loading skeleton first paints and before `onReady`.
+	 */
+	onLoaderStart?: (() => void);
+	/**
+	 * Runs after the element's first complete paint.
+	 */
+	onReady?: (() => void);
+	/**
+	 * 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.
+	 */
+	onError?: ((e: { message: string; code?: string | undefined; sourceKey?: string | undefined; }) => void);
+}
+
+/**
+ * The Dashboard handle, returned by `whop.dashboard.create()` (React: `useDashboard()`). Mounts the elements and carries the controller's actions.
+ * @see https://docs.whop.com/elements/latest/dashboard/overview
+ */
+export interface DashboardHandle {
+	/**
+	 * 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.
+	 */
+	create(name: "paymentsTable", options?: PaymentsTableElementCreateOptions): PaymentsTableElementHandle;
+	/**
+	 * 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.
+	 */
+	create(name: "paymentDetail", options?: PaymentDetailElementCreateOptions): PaymentDetailElementHandle;
+	/**
+	 * Merges new handle options into every mounted element. In React, change the namespace props instead.
+	 */
+	update(options: Partial<DashboardOptions>): void;
+	/**
+	 * 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.
+	 */
+	destroy(): void;
+}
+
+/**
+ * Dashboard's static actions, callable with nothing mounted: `whop.dashboard.<method>()` (React: `useWhop().dashboard.<method>()`).
+ * @see https://docs.whop.com/elements/latest/dashboard/overview
+ */
+export interface DashboardStatics {}