Checkout

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 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.

This page documents @whop/elements@1.0.0-beta.0 and @whop/elements-react@1.0.0-beta.0.

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:

import { WhopElements, Checkout } from "@whop/elements-react";
import { loadWhop } from "@whop/elements";

function Example() {
  return (
    <WhopElements elements={loadWhop()}>
      <Checkout /* options */>
        {/* mount elements here */}
      </Checkout>
    </WhopElements>
  );
}

<script src="https://js.whop.cloud/elements/amber/elements.js" data-whop-elements></script>
<script type="module">
  const checkout = window.WhopElements().checkout.create({ /* options */ });
</script>

Options

Pass these to whop.checkout.create({ … }), or as props on <Checkout> in React.

string

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 names one — omitting it refuses loudly at mount. Set at create only: the session is minted from it, and changing it later refuses.

number

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

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.

string

The affiliate this checkout is attributed to. Set at create only.

CheckoutAttributionInput

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.

Record<string, string>

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.

string

Where the buyer lands after an off-site payment step. Https-only (http for localhost). Set at create only.

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 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<CheckoutOptions>) => void

Types

Named types used throughout this page.

`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.