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

package/_framework.d.cts

@@ -1,7 +1,7 @@
 /** The locales this app's elements are built with (the default locale first) — element UI
  *  text ships in each of these. Any other value falls back to the default locale. Validate
  *  dynamic strings with `WHOP_ELEMENTS_LOCALES.includes(...)` from the package root. */
-export type WhopElementsLocale = "en" | "es" | "zh" | "nl" | "pt" | "de" | "it" | "fr" | "ja" | "pl" | "tr";
+export type WhopElementsLocale = "en" | "es" | "zh" | "nl" | "pt" | "de" | "hu" | "it" | "fr" | "ja" | "pl" | "tr";
 
 /**
  * A CSS property value, as a string (include units: `"12px"`, not `12`).
@@ -172,6 +172,11 @@ export interface FrameworkGlobals {
 	 *  ("Payment method added", "Payment failed") rendered in the bottom-right corner. Set
 	 *  `false` to turn them off entirely. @default true */
 	toasts?: boolean;
+	/** Skip linking element analytics to the Whop pixel's visitor id on pages that run the
+	 *  pixel — a one-time identity link that makes element activity joinable to your
+	 *  ad-attribution data in Whop's identity graph. Usage analytics themselves are unaffected
+	 *  (turn those off per handle with `analytics: false`). @default false */
+	skipPixel?: boolean;
 	/** Origin serving the hosted element pages — for testing against a different environment.
 	 *  Cannot change after load.
 	 *  @internal */

package/_framework.d.ts

@@ -1,7 +1,7 @@
 /** The locales this app's elements are built with (the default locale first) — element UI
  *  text ships in each of these. Any other value falls back to the default locale. Validate
  *  dynamic strings with `WHOP_ELEMENTS_LOCALES.includes(...)` from the package root. */
-export type WhopElementsLocale = "en" | "es" | "zh" | "nl" | "pt" | "de" | "it" | "fr" | "ja" | "pl" | "tr";
+export type WhopElementsLocale = "en" | "es" | "zh" | "nl" | "pt" | "de" | "hu" | "it" | "fr" | "ja" | "pl" | "tr";
 
 /**
  * A CSS property value, as a string (include units: `"12px"`, not `12`).
@@ -172,6 +172,11 @@ export interface FrameworkGlobals {
 	 *  ("Payment method added", "Payment failed") rendered in the bottom-right corner. Set
 	 *  `false` to turn them off entirely. @default true */
 	toasts?: boolean;
+	/** Skip linking element analytics to the Whop pixel's visitor id on pages that run the
+	 *  pixel — a one-time identity link that makes element activity joinable to your
+	 *  ad-attribution data in Whop's identity graph. Usage analytics themselves are unaffected
+	 *  (turn those off per handle with `analytics: false`). @default false */
+	skipPixel?: boolean;
 	/** Origin serving the hosted element pages — for testing against a different environment.
 	 *  Cannot change after load.
 	 *  @internal */

package/checkout.d.cts

@@ -15,7 +15,7 @@ export interface CheckoutOptions {
 	 */
 	plan?: string;
 	/**
-	 * Existing checkout configuration ID, prefixed `ch_`. The element creates the checkout session from it: the configuration names the plan being sold 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.
+	 * 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;
 	/**
@@ -190,7 +190,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 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. 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.
 	 * Exclusive slot `entry`. Mount exactly one of: checkout | expressCheckout.
 	 */
 	create(name: "expressCheckout", options?: ExpressCheckoutElementCreateOptions): ExpressCheckoutElementHandle;

package/checkout.d.ts

@@ -15,7 +15,7 @@ export interface CheckoutOptions {
 	 */
 	plan?: string;
 	/**
-	 * Existing checkout configuration ID, prefixed `ch_`. The element creates the checkout session from it: the configuration names the plan being sold 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.
+	 * 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;
 	/**
@@ -190,7 +190,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 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. 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.
 	 * Exclusive slot `entry`. Mount exactly one of: checkout | expressCheckout.
 	 */
 	create(name: "expressCheckout", options?: ExpressCheckoutElementCreateOptions): ExpressCheckoutElementHandle;

package/index.cjs

@@ -28,7 +28,7 @@ __export(npm_loader_exports, {
 module.exports = __toCommonJS(npm_loader_exports);
 
 // <define:__WHOP_ELEMENTS_LOCALES__>
-var define_WHOP_ELEMENTS_LOCALES_default = ["en", "es", "zh", "nl", "pt", "de", "it", "fr", "ja", "pl", "tr"];
+var define_WHOP_ELEMENTS_LOCALES_default = ["en", "es", "zh", "nl", "pt", "de", "hu", "it", "fr", "ja", "pl", "tr"];
 
 // ../../packages/elements-codegen/src/cli/build/npm-loader.ts
 var ORIGIN = "https://js.whop.cloud";

package/index.d.cts

@@ -13,7 +13,7 @@ export interface WhopGlobalConfig extends FrameworkGlobals {}
 /** The configured instance: one accessor per namespace, each carrying `create()` plus that namespace's static actions. */
 export interface Whop {
 	/**
-	 * Collect a payment from a `plan_` ID or inline currency and amount. Mount PaymentElement, CardElement, or CardFields, then call `payments.createConfirmationToken` with billing details. Wallet selections open their sheet automatically. Confirm the token server-side, then pass the payment's `client_secret` to `handleNextAction` for any pending step.
+	 * Browse account payments with PaymentsElement, collect a payment from a `plan_` ID or inline currency and amount, or save a payment method without charging with `mode: "setup"`. Mount PaymentElement, CardElement, or CardFields, then call `payments.createConfirmationToken` with billing details. Wallet selections open their sheet automatically. Confirm the token server-side, then pass the payment's or setup intent's `client_secret` to `handleNextAction` for any pending step.
 	 */
 	payments: { create(options: PaymentsOptions): PaymentsHandle } & PaymentsStatics;
 	/**
@@ -21,7 +21,7 @@ export interface Whop {
 	 */
 	verifications: { create(options: VerificationsOptions): VerificationsHandle } & VerificationsStatics;
 	/**
-	 * Drives a full hosted checkout for one plan — price summary, promo codes, the currency the buyer pays in, and the whole payment collection surface (the payments elements, composed inside) — against the Whop checkout sessions API. Mount it with a `plan` (or a `checkoutConfiguration` you authored) and the element opens the checkout session itself; the session credential never leaves the element. The buyer pays inside the element, and a finished checkout redirects the current tab to `returnUrl`, including the page that contains the element. Fulfill from webhooks rather than a browser callback. Without a `returnUrl`, the buyer rests on the element’s own success face. The element automatically drives an off-site payment step, such as 3DS or a bank page. On whop.com, it brings the buyer back into the restored checkout; in an embed, the buyer returns to the same `returnUrl`. A failed payment reopens the same checkout with the reason shown, so the buyer can pay again. Every option is set at creation: the element mints a checkout session from these values when it mounts. Changing one later with `update()` or new React props fails instead of changing the existing order. Mount a new checkout to change the purchase.
+	 * Drives a full hosted checkout for one plan — price summary, promo codes, the currency the buyer pays in, and the whole payment collection surface (the payments elements, composed inside) — against the Whop checkout sessions API. Mount it with a `plan` (or a `checkoutConfiguration` you authored) and the element opens the checkout session itself; the session credential never leaves the element. A setup-mode checkout configuration mounts the same element as a payment-method save: nothing is charged, the buyer’s method is stored for you to charge later, and the finished checkout redirects with `setup_intent_id`. The buyer pays inside the element, and a finished checkout redirects the current tab to `returnUrl`, including the page that contains the element. Fulfill from webhooks rather than a browser callback. Without a `returnUrl`, the buyer rests on the element’s own success face. The element automatically drives an off-site payment step, such as 3DS or a bank page. On whop.com, it brings the buyer back into the restored checkout; in an embed, the buyer returns to the same `returnUrl`. A failed payment reopens the same checkout with the reason shown, so the buyer can pay again. Every option is set at creation: the element mints a checkout session from these values when it mounts. Changing one later with `update()` or new React props fails instead of changing the existing order. Mount a new checkout to change the purchase.
 	 */
 	checkout: { create(options: CheckoutOptions): CheckoutHandle } & CheckoutStatics;
 	/**
@@ -33,7 +33,7 @@ export interface Whop {
 	 */
 	tracking: { create(options: TrackingOptions): TrackingHandle } & TrackingStatics;
 	/**
-	 * Drives an account's money surfaces. `required-actions` is the outstanding-action bar from Whop's balance dashboard. `actions` renders the Deposit, Accept, Send, and Convert controls: Deposit, Send, and Convert open their Wallet overlays, while Accept opens Whop's checkout-link creator for a business account or company creation for a personal account. `deposit` returns live funding rails; `convert` swaps USD with Gold or Bitcoin and exposes FX currencies only to gated first-party users; `send` moves money to a recipient or creates a public claim link; `withdraw` lists payout methods and creates the payout when the host does not already drive that API; `balances` holds two faces — the holdings list, and the balance block drawing value over a window; `cards` is the compact issued-card list; `cardsTable` renders the full sortable card roster; `cardsChart` plots card spend; `whopCard` renders one revealable card; `activity` lists ledger movements; `activityDetail` renders a prefetched movement, or retrieves one by activity ID or card transaction ID, in a standalone drawer; and `verification` is the identity-only nudge. Every data-backed surface can use the viewer's session when no token is provided.
+	 * Drives an account's money surfaces. `required-actions` is the outstanding-action bar from Whop's balance dashboard. `actions` renders the Deposit, Accept, Send, and Convert controls: Deposit, Send, and Convert open their Wallet overlays, while Accept opens Whop's checkout-link creator for a business account or company creation for a personal account. `deposit` returns live funding rails; `convert` swaps USD with Gold or Bitcoin and exposes FX currencies when the host enables `fxEnabled`; `send` moves money to a recipient or creates a public claim link; `withdraw` lists payout methods and creates the payout when the host does not already drive that API; `balances` holds two faces — the holdings list, and the balance block drawing value over a window; `cards` is the compact issued-card list; `cardsTable` renders the full sortable card roster; `cardsChart` plots card spend; `whopCard` renders one revealable card; `activity` lists ledger movements; `activityDetail` renders a prefetched movement, or retrieves one by activity ID or card transaction ID, in a standalone drawer; and `verification` is the identity-only nudge. Every data-backed surface can use the viewer's session when no token is provided.
 	 */
 	wallet: { create(options: WalletOptions): WalletHandle } & WalletStatics;
 	/**

package/index.d.ts

@@ -13,7 +13,7 @@ export interface WhopGlobalConfig extends FrameworkGlobals {}
 /** The configured instance: one accessor per namespace, each carrying `create()` plus that namespace's static actions. */
 export interface Whop {
 	/**
-	 * Collect a payment from a `plan_` ID or inline currency and amount. Mount PaymentElement, CardElement, or CardFields, then call `payments.createConfirmationToken` with billing details. Wallet selections open their sheet automatically. Confirm the token server-side, then pass the payment's `client_secret` to `handleNextAction` for any pending step.
+	 * Browse account payments with PaymentsElement, collect a payment from a `plan_` ID or inline currency and amount, or save a payment method without charging with `mode: "setup"`. Mount PaymentElement, CardElement, or CardFields, then call `payments.createConfirmationToken` with billing details. Wallet selections open their sheet automatically. Confirm the token server-side, then pass the payment's or setup intent's `client_secret` to `handleNextAction` for any pending step.
 	 */
 	payments: { create(options: PaymentsOptions): PaymentsHandle } & PaymentsStatics;
 	/**
@@ -21,7 +21,7 @@ export interface Whop {
 	 */
 	verifications: { create(options: VerificationsOptions): VerificationsHandle } & VerificationsStatics;
 	/**
-	 * Drives a full hosted checkout for one plan — price summary, promo codes, the currency the buyer pays in, and the whole payment collection surface (the payments elements, composed inside) — against the Whop checkout sessions API. Mount it with a `plan` (or a `checkoutConfiguration` you authored) and the element opens the checkout session itself; the session credential never leaves the element. The buyer pays inside the element, and a finished checkout redirects the current tab to `returnUrl`, including the page that contains the element. Fulfill from webhooks rather than a browser callback. Without a `returnUrl`, the buyer rests on the element’s own success face. The element automatically drives an off-site payment step, such as 3DS or a bank page. On whop.com, it brings the buyer back into the restored checkout; in an embed, the buyer returns to the same `returnUrl`. A failed payment reopens the same checkout with the reason shown, so the buyer can pay again. Every option is set at creation: the element mints a checkout session from these values when it mounts. Changing one later with `update()` or new React props fails instead of changing the existing order. Mount a new checkout to change the purchase.
+	 * Drives a full hosted checkout for one plan — price summary, promo codes, the currency the buyer pays in, and the whole payment collection surface (the payments elements, composed inside) — against the Whop checkout sessions API. Mount it with a `plan` (or a `checkoutConfiguration` you authored) and the element opens the checkout session itself; the session credential never leaves the element. A setup-mode checkout configuration mounts the same element as a payment-method save: nothing is charged, the buyer’s method is stored for you to charge later, and the finished checkout redirects with `setup_intent_id`. The buyer pays inside the element, and a finished checkout redirects the current tab to `returnUrl`, including the page that contains the element. Fulfill from webhooks rather than a browser callback. Without a `returnUrl`, the buyer rests on the element’s own success face. The element automatically drives an off-site payment step, such as 3DS or a bank page. On whop.com, it brings the buyer back into the restored checkout; in an embed, the buyer returns to the same `returnUrl`. A failed payment reopens the same checkout with the reason shown, so the buyer can pay again. Every option is set at creation: the element mints a checkout session from these values when it mounts. Changing one later with `update()` or new React props fails instead of changing the existing order. Mount a new checkout to change the purchase.
 	 */
 	checkout: { create(options: CheckoutOptions): CheckoutHandle } & CheckoutStatics;
 	/**
@@ -33,7 +33,7 @@ export interface Whop {
 	 */
 	tracking: { create(options: TrackingOptions): TrackingHandle } & TrackingStatics;
 	/**
-	 * Drives an account's money surfaces. `required-actions` is the outstanding-action bar from Whop's balance dashboard. `actions` renders the Deposit, Accept, Send, and Convert controls: Deposit, Send, and Convert open their Wallet overlays, while Accept opens Whop's checkout-link creator for a business account or company creation for a personal account. `deposit` returns live funding rails; `convert` swaps USD with Gold or Bitcoin and exposes FX currencies only to gated first-party users; `send` moves money to a recipient or creates a public claim link; `withdraw` lists payout methods and creates the payout when the host does not already drive that API; `balances` holds two faces — the holdings list, and the balance block drawing value over a window; `cards` is the compact issued-card list; `cardsTable` renders the full sortable card roster; `cardsChart` plots card spend; `whopCard` renders one revealable card; `activity` lists ledger movements; `activityDetail` renders a prefetched movement, or retrieves one by activity ID or card transaction ID, in a standalone drawer; and `verification` is the identity-only nudge. Every data-backed surface can use the viewer's session when no token is provided.
+	 * Drives an account's money surfaces. `required-actions` is the outstanding-action bar from Whop's balance dashboard. `actions` renders the Deposit, Accept, Send, and Convert controls: Deposit, Send, and Convert open their Wallet overlays, while Accept opens Whop's checkout-link creator for a business account or company creation for a personal account. `deposit` returns live funding rails; `convert` swaps USD with Gold or Bitcoin and exposes FX currencies when the host enables `fxEnabled`; `send` moves money to a recipient or creates a public claim link; `withdraw` lists payout methods and creates the payout when the host does not already drive that API; `balances` holds two faces — the holdings list, and the balance block drawing value over a window; `cards` is the compact issued-card list; `cardsTable` renders the full sortable card roster; `cardsChart` plots card spend; `whopCard` renders one revealable card; `activity` lists ledger movements; `activityDetail` renders a prefetched movement, or retrieves one by activity ID or card transaction ID, in a standalone drawer; and `verification` is the identity-only nudge. Every data-backed surface can use the viewer's session when no token is provided.
 	 */
 	wallet: { create(options: WalletOptions): WalletHandle } & WalletStatics;
 	/**

package/index.js

@@ -1,5 +1,5 @@
 // <define:__WHOP_ELEMENTS_LOCALES__>
-var define_WHOP_ELEMENTS_LOCALES_default = ["en", "es", "zh", "nl", "pt", "de", "it", "fr", "ja", "pl", "tr"];
+var define_WHOP_ELEMENTS_LOCALES_default = ["en", "es", "zh", "nl", "pt", "de", "hu", "it", "fr", "ja", "pl", "tr"];
 
 // ../../packages/elements-codegen/src/cli/build/npm-loader.ts
 var ORIGIN = "https://js.whop.cloud";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@whop/elements",
-	"version": "1.0.0-beta.3",
+	"version": "1.0.0-beta.4",
 	"description": "Whop Elements — vanilla-js loader + types. Loads the hosted SDK and exposes the typed WhopElements factory.",
 	"keywords": [
 		"checkout",
@@ -89,5 +89,5 @@
 			}
 		}
 	},
-	"whopElementsApiHash": "aa5a847faaed38909df8586be24e560636b7a252df483fea1a4f981631d2d400"
+	"whopElementsApiHash": "643973a360d415d99bd6cf95211709b03ca2dc4b79002d7cd3539f367cd4ca71"
 }

package/payments.d.cts

@@ -12,9 +12,17 @@
 export type PaymentsOptions = (
 	| {
 		/**
-		 * Account ID, prefixed `biz_`. Omit only when calling static methods without a collection surface.
+		 * Account ID, prefixed `biz_`. Required for PaymentsElement; omit only when calling static methods without an account surface.
 		 */
 		accountId: string;
+		/**
+		 * Mount mode, `payment` by default. `setup` saves a payment method and charges nothing, now or later: only methods that can be saved are offered and amount bounds do not apply. Confirm with `createConfirmationToken()`, then create the setup intent server-side.
+		 */
+		mode?: "payment";
+		/**
+		 * Scoped bearer token for PaymentsElement. Requires `payment:basic:read`; buyer emails additionally require `member:email:read`. Omit only with a same-origin Whop session.
+		 */
+		accessToken?: string;
 		/**
 		 * Plan ID, prefixed `plan_`. It resolves client-side to currency, amount, and method configuration. Pass a plan or inline currency and amount, never both.
 		 */
@@ -28,7 +36,7 @@ export type PaymentsOptions = (
 		 */
 		returnUrl?: string;
 		/**
-		 * Displays consent to save the payment method and marks the token for `off_session` or `on_session` use.
+		 * A setup saves the payment method for `off_session` use, the only usage a setup accepts, and displays the save consent.
 		 */
 		setupFutureUsage?: "off_session" | "on_session";
 		/**
@@ -50,11 +58,19 @@ export type PaymentsOptions = (
 	}
 	| {
 		/**
-		 * Account ID, prefixed `biz_`. Omit only when calling static methods without a collection surface.
+		 * Account ID, prefixed `biz_`. Required for PaymentsElement; omit only when calling static methods without an account surface.
 		 */
 		accountId: string;
 		/**
-		 * Lowercase three-letter ISO 4217 payment currency code. It filters the payment-method matrix.
+		 * Mount mode, `payment` by default. `setup` saves a payment method and charges nothing, now or later: only methods that can be saved are offered and amount bounds do not apply. Confirm with `createConfirmationToken()`, then create the setup intent server-side.
+		 */
+		mode?: "payment";
+		/**
+		 * Scoped bearer token for PaymentsElement. Requires `payment:basic:read`; buyer emails additionally require `member:email:read`. Omit only with a same-origin Whop session.
+		 */
+		accessToken?: string;
+		/**
+		 * Lowercase three-letter ISO 4217 currency code. It filters the payment-method matrix.
 		 */
 		currency: string;
 		/**
@@ -74,7 +90,7 @@ export type PaymentsOptions = (
 		 */
 		returnUrl?: string;
 		/**
-		 * Displays consent to save the payment method and marks the token for `off_session` or `on_session` use.
+		 * A setup saves the payment method for `off_session` use, the only usage a setup accepts, and displays the save consent.
 		 */
 		setupFutureUsage?: "off_session" | "on_session";
 		/**
@@ -96,15 +112,81 @@ export type PaymentsOptions = (
 	}
 	| {
 		/**
-		 * Account ID, prefixed `biz_`. Omit only when calling static methods without a collection surface.
+		 * Account ID, prefixed `biz_`. Required for PaymentsElement; omit only when calling static methods without an account surface.
+		 */
+		accountId: string;
+		/**
+		 * Mount mode, `payment` by default. `setup` saves a payment method and charges nothing, now or later: only methods that can be saved are offered and amount bounds do not apply. Confirm with `createConfirmationToken()`, then create the setup intent server-side.
 		 */
-		accountId?: undefined;
+		mode: "setup";
+		/**
+		 * Scoped bearer token for PaymentsElement. Requires `payment:basic:read`; buyer emails additionally require `member:email:read`. Omit only with a same-origin Whop session.
+		 */
+		accessToken?: string;
+		/**
+		 * Lowercase three-letter ISO 4217 currency code. It filters the payment-method matrix.
+		 */
+		currency: string;
 		/**
 		 * Plan ID, prefixed `plan_`. It resolves client-side to currency, amount, and method configuration. Pass a plan or inline currency and amount, never both.
 		 */
 		plan?: undefined;
 		/**
-		 * Lowercase three-letter ISO 4217 payment currency code. It filters the payment-method matrix.
+		 * Payment amount in minor units. Methods whose bounds exclude it aren't offered.
+		 */
+		amount?: undefined;
+		/**
+		 * Minor-unit `feeInclusive` and `feeFree` totals used to gate methods when checkout re-prices `amount` for a fee-free method such as BNPL. Each method is checked against its matching total, preventing the selected fee-free method from disappearing. When omitted, `amount` gates every method.
+		 */
+		offerAmounts?: undefined;
+		/**
+		 * Account payment-method filters in the API's `enabled`, `disabled`, and `include_platform_defaults` format. `disabled` removes types, `enabled` restores offered types, and `include_platform_defaults: false` leaves only enabled types. Plans provide their own configuration.
+		 */
+		paymentMethodConfiguration?: { enabled?: string[] | undefined; disabled?: string[] | undefined; include_platform_defaults?: boolean | undefined; };
+		/**
+		 * Return URL for off-site bank or 3DS steps. Defaults to the mounting page.
+		 */
+		returnUrl?: string;
+		/**
+		 * A setup saves the payment method for `off_session` use, the only usage a setup accepts, and displays the save consent.
+		 */
+		setupFutureUsage?: "off_session";
+		/**
+		 * Wallet availability override for deterministic previews. Live checkouts probe the host.
+		 */
+		previewWalletAvailability?: WalletAvailability;
+		/**
+		 * Checkout session updated when a buyer signs in. Pass its `chs_`-prefixed `id` and `client_secret`. Without them, sign-in succeeds but the session does not record the buyer.
+		 */
+		checkoutSession?: { id: string; clientSecret: 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;
+	}
+	| {
+		/**
+		 * Account ID, prefixed `biz_`. Required for PaymentsElement; omit only when calling static methods without an account surface.
+		 */
+		accountId?: string;
+		/**
+		 * Scoped bearer token for PaymentsElement. Requires `payment:basic:read`; buyer emails additionally require `member:email:read`. Omit only with a same-origin Whop session.
+		 */
+		accessToken?: string;
+		/**
+		 * Mount mode, `payment` by default. `setup` saves a payment method and charges nothing, now or later: only methods that can be saved are offered and amount bounds do not apply. Confirm with `createConfirmationToken()`, then create the setup intent server-side.
+		 */
+		mode?: undefined;
+		/**
+		 * Plan ID, prefixed `plan_`. It resolves client-side to currency, amount, and method configuration. Pass a plan or inline currency and amount, never both.
+		 */
+		plan?: undefined;
+		/**
+		 * Lowercase three-letter ISO 4217 currency code. It filters the payment-method matrix.
 		 */
 		currency?: undefined;
 		/**
@@ -124,7 +206,7 @@ export type PaymentsOptions = (
 		 */
 		returnUrl?: string;
 		/**
-		 * Displays consent to save the payment method and marks the token for `off_session` or `on_session` use.
+		 * A setup saves the payment method for `off_session` use, the only usage a setup accepts, and displays the save consent.
 		 */
 		setupFutureUsage?: "off_session" | "on_session";
 		/**
@@ -155,6 +237,120 @@ export type PaymentsOptions = (
 	locale?: import("./_framework.js").WhopElementsLocale;
 };
 
+/**
+ * Consumer props for the "payments" element. Set at create (or as `<PaymentsElement />` JSX props), and updatable live via `update()`.
+ * @see https://docs.whop.com/elements/latest/payments/payments
+ */
+export interface PaymentsElementProps {
+	/**
+	 * 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 "payments" element. Returned by `create("payments")`; in React, the component's `ref`.
+ * @see https://docs.whop.com/elements/latest/payments/payments
+ */
+export interface PaymentsElementHandle {
+	/**
+	 * 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<PaymentsElementProps>) => void;
+}
+
+/**
+ * Options for `create("payments")`: the consumer props plus event callbacks and lifecycle hooks.
+ * @example
+ * ```ts
+ * const payments = payments.create("payments", {}); // this interface: props + on<Event> callbacks
+ * payments.mount("#payments-payments");
+ * ```
+ * @see https://docs.whop.com/elements/latest/payments/payments
+ */
+export interface PaymentsElementCreateOptions {
+	/**
+	 * 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 "payment" element. Set at create (or as `<PaymentElement />` JSX props), and updatable live via `update()`.
  * @see https://docs.whop.com/elements/latest/payments/payment
@@ -273,10 +469,10 @@ export interface PaymentElementCreateOptions {
  */
 export interface AddressElementProps {
 	/**
-	 * `full` (default) stacks labeled fields. `compact` groups placeholder-labeled fields within one border.
-	 * @default "full"
+	 * Browser autocomplete purpose: `billing` (default) or `shipping`.
+	 * @default "billing"
 	 */
-	layout?: "full" | "compact";
+	mode?: "billing" | "shipping";
 	/**
 	 * Address line 2: always visible (default), revealed by a text button (`toggle`), or never collected.
 	 * @default "always"
@@ -288,10 +484,10 @@ export interface AddressElementProps {
 	 */
 	name?: "split" | "combined" | "none";
 	/**
-	 * Browser autocomplete purpose: `billing` (default) or `shipping`.
-	 * @default "billing"
+	 * `full` (default) stacks labeled fields. `compact` groups placeholder-labeled fields within one border.
+	 * @default "full"
 	 */
-	mode?: "billing" | "shipping";
+	layout?: "full" | "compact";
 	/**
 	 * `full` (default) follows the selected country's complete address format. `minimal` collects only country and postal code. `name` independently adds required name fields. Set `name` to `none` to omit them. This element does not add fields required by a payment method. Card confirmation requires a name, country, and postal code, so keep `name` enabled or pass `billingDetails.name`.
 	 * @default "full"
@@ -323,7 +519,7 @@ export interface AddressElementProps {
 	/**
 	 * Additional fields rendered with the address form. Values are validated and emitted in the separate `custom` map.
 	 */
-	customFields?: ({ key: string; label: string; type: "text" | "phone" | "select" | "date"; position: "after_name" | "after_organization" | "before_country" | "after_address"; required?: boolean | undefined; options?: string[] | undefined; format?: string | undefined; autocomplete?: string | undefined; })[];
+	customFields?: ({ key: string; label: string; type: "text" | "select" | "phone" | "date"; position: "after_name" | "after_organization" | "before_country" | "after_address"; required?: boolean | undefined; options?: string[] | undefined; format?: string | undefined; autocomplete?: string | undefined; })[];
 	/**
 	 * Fallback country after `defaultValues` and IP detection. Use an ISO 3166-1 alpha-2 code. An empty value falls back to `US`.
 	 * @default ""
@@ -369,10 +565,10 @@ export interface AddressElementHandle {
  */
 export interface AddressElementCreateOptions {
 	/**
-	 * `full` (default) stacks labeled fields. `compact` groups placeholder-labeled fields within one border.
-	 * @default "full"
+	 * Browser autocomplete purpose: `billing` (default) or `shipping`.
+	 * @default "billing"
 	 */
-	layout?: "full" | "compact";
+	mode?: "billing" | "shipping";
 	/**
 	 * Address line 2: always visible (default), revealed by a text button (`toggle`), or never collected.
 	 * @default "always"
@@ -384,10 +580,10 @@ export interface AddressElementCreateOptions {
 	 */
 	name?: "split" | "combined" | "none";
 	/**
-	 * Browser autocomplete purpose: `billing` (default) or `shipping`.
-	 * @default "billing"
+	 * `full` (default) stacks labeled fields. `compact` groups placeholder-labeled fields within one border.
+	 * @default "full"
 	 */
-	mode?: "billing" | "shipping";
+	layout?: "full" | "compact";
 	/**
 	 * `full` (default) follows the selected country's complete address format. `minimal` collects only country and postal code. `name` independently adds required name fields. Set `name` to `none` to omit them. This element does not add fields required by a payment method. Card confirmation requires a name, country, and postal code, so keep `name` enabled or pass `billingDetails.name`.
 	 * @default "full"
@@ -419,7 +615,7 @@ export interface AddressElementCreateOptions {
 	/**
 	 * Additional fields rendered with the address form. Values are validated and emitted in the separate `custom` map.
 	 */
-	customFields?: ({ key: string; label: string; type: "text" | "phone" | "select" | "date"; position: "after_name" | "after_organization" | "before_country" | "after_address"; required?: boolean | undefined; options?: string[] | undefined; format?: string | undefined; autocomplete?: string | undefined; })[];
+	customFields?: ({ key: string; label: string; type: "text" | "select" | "phone" | "date"; position: "after_name" | "after_organization" | "before_country" | "after_address"; required?: boolean | undefined; options?: string[] | undefined; format?: string | undefined; autocomplete?: string | undefined; })[];
 	/**
 	 * Fallback country after `defaultValues` and IP detection. Use an ISO 3166-1 alpha-2 code. An empty value falls back to `US`.
 	 * @default ""
@@ -950,6 +1146,11 @@ export interface PaymentRequestResourceOptions {
 	 * @default true
 	 */
 	requestPayerEmail?: boolean;
+	/**
+	 * Ask the sheet for the payer's phone number, delivered as `payer.phone` on the result — in E.164 where it parses against the country of the contact that supplied it, as the wallet gave it otherwise; `payer.country` is the billing country. Google Pay collects it through the billing address the sheet already asks for.
+	 * @default false
+	 */
+	requestPayerPhone?: boolean;
 	/**
 	 * Ask the sheet for a shipping address (and offer `shippingOptions` when given).
 	 * @default false
@@ -1018,6 +1219,10 @@ export interface PaymentRequestResource {
  * @see https://docs.whop.com/elements/latest/payments/overview
  */
 export interface PaymentsHandle {
+	/**
+	 * 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: "payments", options?: PaymentsElementCreateOptions): PaymentsElementHandle;
 	/**
 	 * Shows available payment methods and collects the selected method's required fields and disclosures. Use `change` to enable your pay button. In its activation handler, call `payments.createConfirmationToken()`. Confirm the token server-side, then pass any pending step to `payments.handleNextAction(…)`. Use `addressChange` for address-dependent updates.
 	 * Exclusive slot `entry`. Mount exactly one of: payment | card | cardFields.
@@ -1070,7 +1275,7 @@ export interface PaymentsHandle {
  */
 export interface PaymentsStatics {
 	/**
-	 * Completes a confirmed payment's pending step without mounting an element. `clientSecret` identifies the payment. You don't need a payment ID. Inline steps open in a dialog and resolve with `redirected: false`. Dismissing the dialog returns the payment's current status, which can remain pending. Full-page steps redirect with `redirected: true` to `return_url`, or a hosted receipt when the payment has no return URL. Inside an iframe they navigate the top-level tab. If the embedding page refuses that navigation, they reject with code `TAB_NAVIGATION_BLOCKED`, and the payment stays pending. Set `returnUrl` to update the destination before presentation. An update failure rejects before any step runs. Inline steps never navigate to that URL. A payment with no pending step resolves immediately.
+	 * Completes a confirmed payment's pending step without mounting an element. `clientSecret` identifies the payment. You don't need a payment ID. Inline steps open in a dialog and resolve with `redirected: false`. Dismissing the dialog returns the payment's current status, which can remain pending. Full-page steps redirect with `redirected: true` to `return_url`, or a hosted receipt when the payment has no return URL. Inside an iframe they navigate the top-level tab. If the embedding page refuses that navigation, they reject with code `TAB_NAVIGATION_BLOCKED`, and the payment stays pending. Set `returnUrl` to update the destination before presentation. An update failure rejects before any step runs. Inline steps never navigate to that URL. A payment whose charge is still being decided is polled until a step appears or it settles; a decided payment with no step resolves immediately.
 	 */
 	handleNextAction: (input: { clientSecret: string; returnUrl?: string | undefined; pollIntervalMs?: number | undefined; }) => Promise<{ status: string; redirected: boolean; lastPaymentError: { code?: string | null | undefined; decline_code?: string | null | undefined; message?: string | null | undefined; } | null; }>;
 	/**
@@ -1149,7 +1354,7 @@ export interface PaymentRequestResult {
 	 */
 	ctok: string;
 	type: "apple_pay" | "google_pay";
-	payer: { email?: string | undefined; name?: string | undefined; phone?: string | undefined; };
+	payer: { email?: string | undefined; name?: string | undefined; phone?: string | undefined; country?: string | undefined; };
 	shipping: { address?: PaymentRequestAddress | undefined; option?: PaymentRequestShippingOption | undefined; } | null;
 }