@whop/checkout

import * as React from 'react'; import React__default, { MutableRefObject, ReactNode } from 'react'; import { W as WhopCheckoutSubmitDetails, a as WhopCheckoutAddress, b as WhopCheckoutCurrenciesAvailable, c as WhopCheckoutState, d as WhopCheckoutPaymentError, e as WhopCheckoutPromoCode, f as WhopCheckoutCurrencyChanged, g as WhopEmbeddedCheckoutStyleOptions, h as WhopEmbeddedCheckoutPrefillOptions, i as WhopEmbeddedCheckoutEnvironment, j as WhopExpressButtonMethod, k as WhopExpressButtonRendered } from '../util-Bam41fGP.js'; declare const accentColorValues: readonly ["tomato", "red", "ruby", "crimson", "pink", "plum", "purple", "violet", "iris", "cyan", "teal", "jade", "green", "grass", "brown", "blue", "orange", "indigo", "sky", "mint", "yellow", "amber", "lime", "lemon", "magenta", "gold", "bronze", "gray"]; type AccentColor = (typeof accentColorValues)[number]; declare function isAccentColor(color?: string): color is AccentColor; interface WhopCheckoutEmbedControls { submit: (opts?: WhopCheckoutSubmitDetails) => Promise<void>; getEmail: (timeout?: number) => Promise<string>; setEmail: (email: string, timeout?: number) => Promise<void>; setAddress: (address: WhopCheckoutAddress, timeout?: number) => Promise<void>; getAddress: (timeout?: number) => Promise<{ address: WhopCheckoutAddress; isComplete: boolean; }>; setDisplayCurrency: (currency: string, timeout?: number) => Promise<void>; getAvailableCurrencies: () => WhopCheckoutCurrenciesAvailable | null; } interface WhopCheckoutEmbedThemeOptions { /** * **Optional** - The accent color you want to use in the embed. * * Accepts any hex color like `#7c3aed`, or one of the named palette values. * * defaults to `blue` */ accentColor?: AccentColor | (string & {}); /** * **Optional** - Set to true to enable high contrast mode. Only recommended when accent color is set to `gray` * * @default false */ highContrast?: boolean; /** * **Optional** - The background color of the checkout embed. * * Accepts a hex color like `#09090b`. The embed automatically picks light or dark text and tints its panels and inputs to fit the color, overriding `theme`. */ backgroundColor?: string; /** * **Optional** - The corner radius for the embed, in pixels. * * Inputs use the value as-is; buttons and containers scale proportionally. */ borderRadius?: number | string; } type WhopCheckoutEmbedProps = { /** * **Optional** - A ref to the embed controls. * * This can be used to submit the checkout form. */ ref?: MutableRefObject<WhopCheckoutEmbedControls | null>; /** * **Optional** - The theme you want to use for the checkout. * * Possible values are `light`, `dark` or `system`. * * @default "system" */ theme?: "light" | "dark" | "system"; /** * **Optional** - Turn on to hide the price in the embedded checkout form. * * @default false */ hidePrice?: boolean; /** * **Optional** - Set to `true` to skip the final redirect and keep the top frame loaded. * * @default false */ skipRedirect?: boolean; /** * **Optional** - A callback function that will be called when the checkout is complete. */ onComplete?: (( /** The plan id of the plan that was purchased. */ plan_id: string, /** The receipt id of the purchase. */ receipt_id?: string) => void) | (( /** The session id that was used to create the checkout. */ session_id: string, /** The setup intent that was created */ setup_intent_id?: string) => void); /** * **Optional** - A callback function that will be called when the checkout state changes. */ onStateChange?: ( /** The new state of the checkout. */ state: WhopCheckoutState) => void; /** * **Optional** - A callback function that will be called when the address validation error occurs. */ onAddressValidationError?: (error: { /** The error message of the address validation error. */ error_message: string; /** The error code of the address validation error. */ error_code: string; }) => void; /** * **Optional** - A callback function that will be called when checkout payment processing fails. */ onPaymentError?: (error: WhopCheckoutPaymentError) => void; /** * **Optional** - A callback function that will be called when the promo code changes. */ onPromoCodeChanged?: ( /** The promo code object, or null when the code was removed. */ promoCode: WhopCheckoutPromoCode | null) => void; /** * **Optional** - A callback function that will be called when the user's identity is captured (email entered or login). * * When the Whop pixel SDK is present on the page, an identify event is automatically fired with the captured data. */ onIdentityCaptured?: (data: { email?: string; user_id?: string; }) => void; /** * **Optional** - A callback function that will be called when the available currencies change. * * Fires on load and whenever the supported currency set updates. Only relevant when `adaptivePricing` is enabled. */ onCurrenciesAvailable?: (data: WhopCheckoutCurrenciesAvailable) => void; /** * **Optional** - A callback function that will be called when the active display currency changes. * * Only relevant when `adaptivePricing` is enabled. */ onCurrencyChanged?: (data: WhopCheckoutCurrencyChanged) => void; /** * **Optional** - The UTM parameters to add to the checkout URL. * * **Note** - The keys must start with `utm_` */ utm?: Record<string, string | string[]>; /** * **Optional** - The styles to apply to the checkout embed. */ styles?: WhopEmbeddedCheckoutStyleOptions; /** * **Optional** - The prefill options to apply to the checkout embed. * * Used to prefill the email in the embedded checkout form. * This setting can be helpful when integrating the embed into a funnel that collects the email prior to payment already. */ prefill?: WhopEmbeddedCheckoutPrefillOptions; /** * **Optional** - The theme options to apply to the checkout embed. */ themeOptions?: WhopCheckoutEmbedThemeOptions; /** * **Optional** - Set to `true` to hide the submit button in the embedded checkout form. * * @default false */ hideSubmitButton?: boolean; /** * **Optional** - Set to `true` to hide the terms and conditions in the embedded checkout form. * * @default false */ hideTermsAndConditions?: boolean; /** * **Optional** - Set to `true` to hide the email input in the embedded checkout form. * * @default false */ hideEmail?: boolean; /** * **Optional** - Set to `true` to disable the email input in the embedded checkout form. * * @default false */ disableEmail?: boolean; /** * **Optional** - Set to `true` to hide the address form in the embedded checkout form. * * @default false */ hideAddressForm?: boolean; /** * **Optional** - The affiliate code to use for the checkout. */ affiliateCode?: string; /** * **Optional** - The setup future usage to use for the checkout. When using the `chargeUser` API you need to set this to `off_session`. This will filter out payment methods that are not supported with that API. * * @default undefined */ setupFutureUsage?: "off_session"; /** * **Optional** - The url to redirect to after the checkout is completed or cancelled on the site of an external payment provider. * * @default undefined * @deprecated use `returnUrl` instead */ redirectUrl?: never; /** * **Optional** - The url to return to after payment authorization flows. * * @default undefined */ returnUrl?: string; /** * **Optional** - When a user gets redirected back to your page after payment authorization, you will receive a state_id in the query parameters. This state ID can be used to restore the previous state of the checkout embed. */ stateId?: string; /** * **Optional** - The promo code to use for the checkout. */ promoCode?: string; /** * **Optional** - The environment to use for the checkout. * * @default "production" */ environment?: WhopEmbeddedCheckoutEnvironment; /** * **Optional** - The Whop pixel user ID (wuid) to pass to checkout. If not provided, auto-reads from the `_wuid` cookie. */ wuid?: string; /** * **Optional** - Set to `true` to enable adaptive pricing (presenting the price in the buyer's local currency when available). * * Embedded checkouts default to disabled. Buyers will be charged in the plan's base currency unless this is explicitly enabled. * * @default false */ adaptivePricing?: boolean; /** * **Optional** - Set to `true` to require phone number collection during checkout, or `false` to disable it. When omitted, the default behavior from the plan's feature settings is used. */ collectPhoneNumbers?: boolean; /** * **Optional** - The language the checkout should render in, as a locale * code (e.g. `"es"`, `"fr"`, `"pt"`). When omitted, the checkout falls back * to the buyer's browser/locale preference. */ locale?: string; } & ({ /** * **Required** - The plan id to use for the checkout. */ planId: string; } | { /** * **Required** - The session id to use for the checkout. * * This can be used to attach metadata to a checkout by first creating a session through the API and then passing the session id to the checkout element. */ sessionId: string; }); /** * This component can be used to embed whop checkout in your react app: * * ```tsx * import { WhopCheckoutEmbed } from "@whop/react/checkout"; * * export default function Home() { * return <WhopCheckoutEmbed planId="plan_XXXXXXXXX" />; * } * ``` */ declare const WhopCheckoutEmbed: React__default.ForwardRefExoticComponent<(Omit<{ /** * **Optional** - A ref to the embed controls. * * This can be used to submit the checkout form. */ ref?: MutableRefObject<WhopCheckoutEmbedControls | null>; /** * **Optional** - The theme you want to use for the checkout. * * Possible values are `light`, `dark` or `system`. * * @default "system" */ theme?: "light" | "dark" | "system"; /** * **Optional** - Turn on to hide the price in the embedded checkout form. * * @default false */ hidePrice?: boolean; /** * **Optional** - Set to `true` to skip the final redirect and keep the top frame loaded. * * @default false */ skipRedirect?: boolean; /** * **Optional** - A callback function that will be called when the checkout is complete. */ onComplete?: (( /** The plan id of the plan that was purchased. */ plan_id: string, /** The receipt id of the purchase. */ receipt_id?: string) => void) | (( /** The session id that was used to create the checkout. */ session_id: string, /** The setup intent that was created */ setup_intent_id?: string) => void); /** * **Optional** - A callback function that will be called when the checkout state changes. */ onStateChange?: ( /** The new state of the checkout. */ state: WhopCheckoutState) => void; /** * **Optional** - A callback function that will be called when the address validation error occurs. */ onAddressValidationError?: (error: { /** The error message of the address validation error. */ error_message: string; /** The error code of the address validation error. */ error_code: string; }) => void; /** * **Optional** - A callback function that will be called when checkout payment processing fails. */ onPaymentError?: (error: WhopCheckoutPaymentError) => void; /** * **Optional** - A callback function that will be called when the promo code changes. */ onPromoCodeChanged?: ( /** The promo code object, or null when the code was removed. */ promoCode: WhopCheckoutPromoCode | null) => void; /** * **Optional** - A callback function that will be called when the user's identity is captured (email entered or login). * * When the Whop pixel SDK is present on the page, an identify event is automatically fired with the captured data. */ onIdentityCaptured?: (data: { email?: string; user_id?: string; }) => void; /** * **Optional** - A callback function that will be called when the available currencies change. * * Fires on load and whenever the supported currency set updates. Only relevant when `adaptivePricing` is enabled. */ onCurrenciesAvailable?: (data: WhopCheckoutCurrenciesAvailable) => void; /** * **Optional** - A callback function that will be called when the active display currency changes. * * Only relevant when `adaptivePricing` is enabled. */ onCurrencyChanged?: (data: WhopCheckoutCurrencyChanged) => void; /** * **Optional** - The UTM parameters to add to the checkout URL. * * **Note** - The keys must start with `utm_` */ utm?: Record<string, string | string[]>; /** * **Optional** - The styles to apply to the checkout embed. */ styles?: WhopEmbeddedCheckoutStyleOptions; /** * **Optional** - The prefill options to apply to the checkout embed. * * Used to prefill the email in the embedded checkout form. * This setting can be helpful when integrating the embed into a funnel that collects the email prior to payment already. */ prefill?: WhopEmbeddedCheckoutPrefillOptions; /** * **Optional** - The theme options to apply to the checkout embed. */ themeOptions?: WhopCheckoutEmbedThemeOptions; /** * **Optional** - Set to `true` to hide the submit button in the embedded checkout form. * * @default false */ hideSubmitButton?: boolean; /** * **Optional** - Set to `true` to hide the terms and conditions in the embedded checkout form. * * @default false */ hideTermsAndConditions?: boolean; /** * **Optional** - Set to `true` to hide the email input in the embedded checkout form. * * @default false */ hideEmail?: boolean; /** * **Optional** - Set to `true` to disable the email input in the embedded checkout form. * * @default false */ disableEmail?: boolean; /** * **Optional** - Set to `true` to hide the address form in the embedded checkout form. * * @default false */ hideAddressForm?: boolean; /** * **Optional** - The affiliate code to use for the checkout. */ affiliateCode?: string; /** * **Optional** - The setup future usage to use for the checkout. When using the `chargeUser` API you need to set this to `off_session`. This will filter out payment methods that are not supported with that API. * * @default undefined */ setupFutureUsage?: "off_session"; /** * **Optional** - The url to redirect to after the checkout is completed or cancelled on the site of an external payment provider. * * @default undefined * @deprecated use `returnUrl` instead */ redirectUrl?: never; /** * **Optional** - The url to return to after payment authorization flows. * * @default undefined */ returnUrl?: string; /** * **Optional** - When a user gets redirected back to your page after payment authorization, you will receive a state_id in the query parameters. This state ID can be used to restore the previous state of the checkout embed. */ stateId?: string; /** * **Optional** - The promo code to use for the checkout. */ promoCode?: string; /** * **Optional** - The environment to use for the checkout. * * @default "production" */ environment?: WhopEmbeddedCheckoutEnvironment; /** * **Optional** - The Whop pixel user ID (wuid) to pass to checkout. If not provided, auto-reads from the `_wuid` cookie. */ wuid?: string; /** * **Optional** - Set to `true` to enable adaptive pricing (presenting the price in the buyer's local currency when available). * * Embedded checkouts default to disabled. Buyers will be charged in the plan's base currency unless this is explicitly enabled. * * @default false */ adaptivePricing?: boolean; /** * **Optional** - Set to `true` to require phone number collection during checkout, or `false` to disable it. When omitted, the default behavior from the plan's feature settings is used. */ collectPhoneNumbers?: boolean; /** * **Optional** - The language the checkout should render in, as a locale * code (e.g. `"es"`, `"fr"`, `"pt"`). When omitted, the checkout falls back * to the buyer's browser/locale preference. */ locale?: string; } & { /** * **Required** - The plan id to use for the checkout. */ planId: string; } & { /** * **Optional** - The fallback content to show while the checkout is loading. */ fallback?: ReactNode; }, "ref"> | Omit<{ /** * **Optional** - A ref to the embed controls. * * This can be used to submit the checkout form. */ ref?: MutableRefObject<WhopCheckoutEmbedControls | null>; /** * **Optional** - The theme you want to use for the checkout. * * Possible values are `light`, `dark` or `system`. * * @default "system" */ theme?: "light" | "dark" | "system"; /** * **Optional** - Turn on to hide the price in the embedded checkout form. * * @default false */ hidePrice?: boolean; /** * **Optional** - Set to `true` to skip the final redirect and keep the top frame loaded. * * @default false */ skipRedirect?: boolean; /** * **Optional** - A callback function that will be called when the checkout is complete. */ onComplete?: (( /** The plan id of the plan that was purchased. */ plan_id: string, /** The receipt id of the purchase. */ receipt_id?: string) => void) | (( /** The session id that was used to create the checkout. */ session_id: string, /** The setup intent that was created */ setup_intent_id?: string) => void); /** * **Optional** - A callback function that will be called when the checkout state changes. */ onStateChange?: ( /** The new state of the checkout. */ state: WhopCheckoutState) => void; /** * **Optional** - A callback function that will be called when the address validation error occurs. */ onAddressValidationError?: (error: { /** The error message of the address validation error. */ error_message: string; /** The error code of the address validation error. */ error_code: string; }) => void; /** * **Optional** - A callback function that will be called when checkout payment processing fails. */ onPaymentError?: (error: WhopCheckoutPaymentError) => void; /** * **Optional** - A callback function that will be called when the promo code changes. */ onPromoCodeChanged?: ( /** The promo code object, or null when the code was removed. */ promoCode: WhopCheckoutPromoCode | null) => void; /** * **Optional** - A callback function that will be called when the user's identity is captured (email entered or login). * * When the Whop pixel SDK is present on the page, an identify event is automatically fired with the captured data. */ onIdentityCaptured?: (data: { email?: string; user_id?: string; }) => void; /** * **Optional** - A callback function that will be called when the available currencies change. * * Fires on load and whenever the supported currency set updates. Only relevant when `adaptivePricing` is enabled. */ onCurrenciesAvailable?: (data: WhopCheckoutCurrenciesAvailable) => void; /** * **Optional** - A callback function that will be called when the active display currency changes. * * Only relevant when `adaptivePricing` is enabled. */ onCurrencyChanged?: (data: WhopCheckoutCurrencyChanged) => void; /** * **Optional** - The UTM parameters to add to the checkout URL. * * **Note** - The keys must start with `utm_` */ utm?: Record<string, string | string[]>; /** * **Optional** - The styles to apply to the checkout embed. */ styles?: WhopEmbeddedCheckoutStyleOptions; /** * **Optional** - The prefill options to apply to the checkout embed. * * Used to prefill the email in the embedded checkout form. * This setting can be helpful when integrating the embed into a funnel that collects the email prior to payment already. */ prefill?: WhopEmbeddedCheckoutPrefillOptions; /** * **Optional** - The theme options to apply to the checkout embed. */ themeOptions?: WhopCheckoutEmbedThemeOptions; /** * **Optional** - Set to `true` to hide the submit button in the embedded checkout form. * * @default false */ hideSubmitButton?: boolean; /** * **Optional** - Set to `true` to hide the terms and conditions in the embedded checkout form. * * @default false */ hideTermsAndConditions?: boolean; /** * **Optional** - Set to `true` to hide the email input in the embedded checkout form. * * @default false */ hideEmail?: boolean; /** * **Optional** - Set to `true` to disable the email input in the embedded checkout form. * * @default false */ disableEmail?: boolean; /** * **Optional** - Set to `true` to hide the address form in the embedded checkout form. * * @default false */ hideAddressForm?: boolean; /** * **Optional** - The affiliate code to use for the checkout. */ affiliateCode?: string; /** * **Optional** - The setup future usage to use for the checkout. When using the `chargeUser` API you need to set this to `off_session`. This will filter out payment methods that are not supported with that API. * * @default undefined */ setupFutureUsage?: "off_session"; /** * **Optional** - The url to redirect to after the checkout is completed or cancelled on the site of an external payment provider. * * @default undefined * @deprecated use `returnUrl` instead */ redirectUrl?: never; /** * **Optional** - The url to return to after payment authorization flows. * * @default undefined */ returnUrl?: string; /** * **Optional** - When a user gets redirected back to your page after payment authorization, you will receive a state_id in the query parameters. This state ID can be used to restore the previous state of the checkout embed. */ stateId?: string; /** * **Optional** - The promo code to use for the checkout. */ promoCode?: string; /** * **Optional** - The environment to use for the checkout. * * @default "production" */ environment?: WhopEmbeddedCheckoutEnvironment; /** * **Optional** - The Whop pixel user ID (wuid) to pass to checkout. If not provided, auto-reads from the `_wuid` cookie. */ wuid?: string; /** * **Optional** - Set to `true` to enable adaptive pricing (presenting the price in the buyer's local currency when available). * * Embedded checkouts default to disabled. Buyers will be charged in the plan's base currency unless this is explicitly enabled. * * @default false */ adaptivePricing?: boolean; /** * **Optional** - Set to `true` to require phone number collection during checkout, or `false` to disable it. When omitted, the default behavior from the plan's feature settings is used. */ collectPhoneNumbers?: boolean; /** * **Optional** - The language the checkout should render in, as a locale * code (e.g. `"es"`, `"fr"`, `"pt"`). When omitted, the checkout falls back * to the buyer's browser/locale preference. */ locale?: string; } & { /** * **Required** - The session id to use for the checkout. * * This can be used to attach metadata to a checkout by first creating a session through the API and then passing the session id to the checkout element. */ sessionId: string; } & { /** * **Optional** - The fallback content to show while the checkout is loading. */ fallback?: ReactNode; }, "ref">) & React__default.RefAttributes<WhopCheckoutEmbedControls>>; interface WhopExpressCheckoutButtonBaseProps { /** * **Required** - The url to return to after payment authorization flows. * * Unlike the regular embedded checkout, this is required on the express * button: payments started here may complete inside the Whop Pay overlay * via a redirect-based payment method (3DS, Sezzle, etc.) and the user * needs somewhere to land that closes the loop on the host page. */ returnUrl: string; methods?: WhopExpressButtonMethod[]; theme?: "light" | "dark" | "system"; themeOptions?: { accentColor?: AccentColor; highContrast?: boolean; }; prefill?: WhopEmbeddedCheckoutPrefillOptions; affiliateCode?: string; stateId?: string; promoCode?: string; setupFutureUsage?: "off_session"; /** * **Optional** - Set to `true` to skip the final redirect and keep the top * frame loaded. Automatically `true` when `onComplete` is provided. * * @default false */ skipRedirect?: boolean; environment?: WhopEmbeddedCheckoutEnvironment; wuid?: string; adaptivePricing?: boolean; /** * **Optional** - The language the checkout should render in, as a locale * code (e.g. `"es"`, `"fr"`, `"pt"`). When omitted, the checkout falls back * to the buyer's browser/locale preference. */ locale?: string; onComplete?: (planId: string, receiptOrSetupIntentId?: string) => void; onExpressMethodResolved?: (info: { rendered: WhopExpressButtonRendered; }) => void; } type WhopExpressCheckoutButtonProps = (WhopExpressCheckoutButtonBaseProps & { planId: string; checkoutConfigurationId?: never; }) | (WhopExpressCheckoutButtonBaseProps & { checkoutConfigurationId: string; planId?: never; }); declare module "react" { namespace JSX { interface IntrinsicElements { "whop-express-checkout-button": React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLElement>, HTMLElement> & { "plan-id"?: string; "checkout-configuration-id"?: string; "return-url"?: string; methods?: string; theme?: "light" | "dark" | "system"; "theme-accent-color"?: string; "theme-high-contrast"?: "true" | "false"; "prefill-email"?: string; "prefill-name"?: string; "prefill-address-line1"?: string; "prefill-address-line2"?: string; "prefill-address-city"?: string; "prefill-address-country"?: string; "prefill-address-state"?: string; "prefill-address-postal-code"?: string; "prefill-shipping-name"?: string; "prefill-shipping-address-line1"?: string; "prefill-shipping-address-line2"?: string; "prefill-shipping-address-city"?: string; "prefill-shipping-address-country"?: string; "prefill-shipping-address-state"?: string; "prefill-shipping-address-postal-code"?: string; "affiliate-code"?: string; "state-id"?: string; "promo-code"?: string; "setup-future-usage"?: "off_session"; "skip-redirect"?: "true" | "false"; environment?: WhopEmbeddedCheckoutEnvironment; wuid?: string; "adaptive-pricing"?: "true" | "false"; locale?: string; }; } } } /** * React wrapper for the express Apple Pay / Google Pay / Whop Pay button. * * ```tsx * import { WhopExpressCheckoutButton } from "@whop/react/checkout"; * * <WhopExpressCheckoutButton * planId="plan_XXXXXXXXX" * returnUrl="https://example.com/thank-you" * fallback={<MyButtonSkeleton />} * /> * ``` * * Renders `fallback` on the server and during hydration, then swaps to * the real `<whop-express-checkout-button>` once we're on the client. * The fallback stays visible until the underlying iframe has measured — * matching the CSS shimmer-loader pattern used in the vanilla showcase. */ declare function WhopExpressCheckoutButton({ fallback, ...props }: WhopExpressCheckoutButtonProps & { /** * **Optional** - Loading content shown while the button is mounting. * Stays visible until the underlying iframe has measured itself (or * has resolved to no available method). */ fallback?: ReactNode; }): string | number | bigint | boolean | React__default.JSX.Element | Iterable<React__default.ReactNode> | Promise<string | number | bigint | boolean | React__default.ReactPortal | React__default.ReactElement<unknown, string | React__default.JSXElementConstructor<any>> | Iterable<React__default.ReactNode> | null | undefined> | null; declare function useCheckoutEmbedControls(): React.RefObject<WhopCheckoutEmbedControls | null>; export { type AccentColor, WhopCheckoutCurrenciesAvailable, WhopCheckoutCurrencyChanged, WhopCheckoutEmbed, type WhopCheckoutEmbedProps, type WhopCheckoutEmbedThemeOptions, WhopCheckoutPaymentError, WhopCheckoutPromoCode, WhopEmbeddedCheckoutEnvironment, WhopEmbeddedCheckoutPrefillOptions, WhopEmbeddedCheckoutStyleOptions, WhopExpressButtonMethod, WhopExpressButtonRendered, WhopExpressCheckoutButton, type WhopExpressCheckoutButtonProps, accentColorValues, isAccentColor, useCheckoutEmbedControls };