@whop/checkout 0.0.44 → 0.0.45

package/dist/static/checkout/react/index.d.mts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import React__default, { MutableRefObject, ReactNode } from 'react';
-import { W as WhopCheckoutSubmitDetails, a as WhopCheckoutAddress, b as WhopCheckoutState, c as WhopEmbeddedCheckoutStyleOptions, d as WhopEmbeddedCheckoutPrefillOptions } from '../util-DnHRCaD4.mjs';
+import { W as WhopCheckoutSubmitDetails, a as WhopCheckoutAddress, b as WhopCheckoutState, c as WhopEmbeddedCheckoutStyleOptions, d as WhopEmbeddedCheckoutPrefillOptions } from '../util-BT4ixYy-.mjs';
 
 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];
@@ -32,11 +32,7 @@ interface WhopCheckoutEmbedThemeOptions {
     highContrast?: boolean;
 }
 
-interface WhopCheckoutEmbedProps {
-    /**
-     * **Required** - The plan id you want to checkout.
-     */
-    planId: string;
+type WhopCheckoutEmbedProps = {
     /**
      * **Optional** - A ref to the embed controls.
      *
@@ -51,12 +47,6 @@ interface WhopCheckoutEmbedProps {
      * @default "system"
      */
     theme?: "light" | "dark" | "system";
-    /**
-     * **Optional** - 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** - Turn on to hide the price in the embedded checkout form.
      *
@@ -72,11 +62,15 @@ interface WhopCheckoutEmbedProps {
     /**
      * **Optional** - A callback function that will be called when the checkout is complete.
      */
-    onComplete?: (
+    onComplete?: ((
     /** The plan id of the plan that was purchased. */
     plan_id: string, 
     /** The receipt id of the purchase. */
-    receipt_id?: string) => void;
+    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.
      */
@@ -153,7 +147,19 @@ interface WhopCheckoutEmbedProps {
      * @default undefined
      */
     setupFutureUsage?: "off_session";
-}
+} & ({
+    /**
+     * **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:
@@ -166,13 +172,260 @@ interface WhopCheckoutEmbedProps {
  * }
  * ```
  */
-declare const WhopCheckoutEmbed: React__default.ForwardRefExoticComponent<Omit<WhopCheckoutEmbedProps & {
+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** - 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";
+} & {
+    /**
+     * **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** - 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";
+} & {
+    /**
+     * **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>>;
+}, "ref">) & React__default.RefAttributes<WhopCheckoutEmbedControls>>;
 
-declare function useCheckoutEmbedControls(): React.RefObject<WhopCheckoutEmbedControls>;
+declare function useCheckoutEmbedControls(): React.RefObject<WhopCheckoutEmbedControls | null>;
 
 export { type AccentColor, WhopCheckoutEmbed, type WhopCheckoutEmbedProps, type WhopCheckoutEmbedThemeOptions, WhopEmbeddedCheckoutPrefillOptions, WhopEmbeddedCheckoutStyleOptions, accentColorValues, isAccentColor, useCheckoutEmbedControls };

package/dist/static/checkout/react/index.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import React__default, { MutableRefObject, ReactNode } from 'react';
-import { W as WhopCheckoutSubmitDetails, a as WhopCheckoutAddress, b as WhopCheckoutState, c as WhopEmbeddedCheckoutStyleOptions, d as WhopEmbeddedCheckoutPrefillOptions } from '../util-DnHRCaD4.js';
+import { W as WhopCheckoutSubmitDetails, a as WhopCheckoutAddress, b as WhopCheckoutState, c as WhopEmbeddedCheckoutStyleOptions, d as WhopEmbeddedCheckoutPrefillOptions } from '../util-BT4ixYy-.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];
@@ -32,11 +32,7 @@ interface WhopCheckoutEmbedThemeOptions {
     highContrast?: boolean;
 }
 
-interface WhopCheckoutEmbedProps {
-    /**
-     * **Required** - The plan id you want to checkout.
-     */
-    planId: string;
+type WhopCheckoutEmbedProps = {
     /**
      * **Optional** - A ref to the embed controls.
      *
@@ -51,12 +47,6 @@ interface WhopCheckoutEmbedProps {
      * @default "system"
      */
     theme?: "light" | "dark" | "system";
-    /**
-     * **Optional** - 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** - Turn on to hide the price in the embedded checkout form.
      *
@@ -72,11 +62,15 @@ interface WhopCheckoutEmbedProps {
     /**
      * **Optional** - A callback function that will be called when the checkout is complete.
      */
-    onComplete?: (
+    onComplete?: ((
     /** The plan id of the plan that was purchased. */
     plan_id: string, 
     /** The receipt id of the purchase. */
-    receipt_id?: string) => void;
+    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.
      */
@@ -153,7 +147,19 @@ interface WhopCheckoutEmbedProps {
      * @default undefined
      */
     setupFutureUsage?: "off_session";
-}
+} & ({
+    /**
+     * **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:
@@ -166,13 +172,260 @@ interface WhopCheckoutEmbedProps {
  * }
  * ```
  */
-declare const WhopCheckoutEmbed: React__default.ForwardRefExoticComponent<Omit<WhopCheckoutEmbedProps & {
+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** - 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";
+} & {
+    /**
+     * **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** - 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";
+} & {
+    /**
+     * **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>>;
+}, "ref">) & React__default.RefAttributes<WhopCheckoutEmbedControls>>;
 
-declare function useCheckoutEmbedControls(): React.RefObject<WhopCheckoutEmbedControls>;
+declare function useCheckoutEmbedControls(): React.RefObject<WhopCheckoutEmbedControls | null>;
 
 export { type AccentColor, WhopCheckoutEmbed, type WhopCheckoutEmbedProps, type WhopCheckoutEmbedThemeOptions, WhopEmbeddedCheckoutPrefillOptions, WhopEmbeddedCheckoutStyleOptions, accentColorValues, isAccentColor, useCheckoutEmbedControls };