```tsx React theme={null} import { WhopElements, Checkout } from "@whop/elements-react"; import { loadWhop } from "@whop/elements"; function Example() { return ( {/* mount elements here */} ); } ``` ```html JavaScript theme={null} ```

## Options Pass these to `whop.checkout.create({ … })`, or as props on `` in React. 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. 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 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. 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. 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. The affiliate this checkout is attributed to. Set at create only. Where this sale came from, for the account's reporting: the campaign parameters of the link the buyer arrived on (`utmSource`, `utmMedium`, `utmCampaign`, `utmTerm`, `utmContent`, a Whop `trackingLinkId`, a `funnelId`, and your own `source`). Everything here is recorded against the order and is never shown to the buyer. Set at create only. Your own key/value pairs to record against the order and read back on the payment — order IDs, cart IDs, or anything you reconcile against. Up to 40 string pairs. Set at create only. Where the buyer lands after an off-site payment step. Https-only (http for localhost). Set at create only. Visual customization for this group's elements. Overrides the global `WhopElements({ appearance })`. Change it live with `update({ 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. ## 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 Checkout handle from `whop.checkout.create({ … })` or `useCheckout()`. ### `update` Merges new handle options into every mounted element. In React, change the namespace props instead. **Signature:** `(options: Partial) => 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` ## Types Named types used throughout this page. ## `CheckoutItemInput` Fields on `CheckoutItemInput`. ### `plan` Existing plan ID, prefixed `plan_`. **Signature:** `string` ### `quantity` Number of units to purchase. Defaults to 1; plans can disallow quantities above 1. **Signature:** `number | undefined` ## `CheckoutAttributionInput` 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. ### `utmSource` **Signature:** `string | undefined` ### `utmMedium` **Signature:** `string | undefined` ### `utmCampaign` **Signature:** `string | undefined` ### `utmTerm` **Signature:** `string | undefined` ### `utmContent` **Signature:** `string | undefined` ### `trackingLinkId` **Signature:** `string | undefined` ### `funnelId` **Signature:** `string | undefined` ### `source` **Signature:** `string | undefined` ## Elements The elements this group mounts. Each has its own page: **Alternatives.** Mount one at a time. Destroy it before mounting another: The full checkout surface — order summary with the live quote, promo code entry, the currency the buyer pays in, everything this checkout has to collect from the buyer, the composed payment methods surface, and the pay flow. What it collects is whatever the seller set up (email, their own questions, a phone number, a shipping address for physical goods, an explicit agreement to their terms), rendered together on one screen in the order they chose — so a seller who starts asking for something new needs no change here. Renders the whole purchase; the checkout controller owns the session and the credential. After a payment that needs an off-site step, this same surface renders the outcome the server reports when the buyer comes back. 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. ## Flow surfaces These internal elements open automatically during guided flows. They aren't part of the consumer API, so you don't mount or configure them. * **CheckoutDetailsElement** (`checkoutDetails`): The order-details sheet a narrow checkout opens for the promo code, currency, and totals. * **PhoneCodeModalElement** (`phoneCodeModal`): The verify\_phone ceremony’s code dialog — the checkout controller opens it while the session holds a texted, unanswered code. The code rides a confirm of its own (the server completes the parked payment on a pass); dismissing the dialog cancels the ceremony with a session write. Internal coordination behind the checkout and express-checkout elements, no consumer surface.