@whop/checkout 0.0.37 → 0.0.38

package/README.md

@@ -2,7 +2,7 @@
 
 Embedded checkout allows you to embed Whop's checkout flow on your own website in two easy steps. This allows you to offer your users a seamless checkout experience without leaving your website.
 
-React users should use the `@whop/react` package which includes a version of this feature optimized for react.
+**For React users**: This package now includes React components! Use `@whop/checkout/react` for React integration. Alternatively, you can still use the standalone `@whop/react` package which provides additional React-specific features.
 
 ## Step 1: Add the script tag
 
@@ -28,6 +28,110 @@ This will now mount an iframe inside of the element with the plan id you provide
 
 You can configure the redirect url in your [whop's settings](https://whop.com/dashboard/whops/) or in your [company's settings](https://whop.com/dashboard/settings/checkout/) on the dashboard. If both are specified, the redirect url specified in the whop's settings will take precedence.
 
+## React Integration
+
+For React applications, you can use the React component instead of the script-based approach:
+
+### Installation and Setup
+
+```bash
+npm install @whop/checkout
+# or
+pnpm add @whop/checkout
+```
+
+### Basic Usage
+
+```tsx
+import { WhopCheckoutEmbed } from "@whop/checkout/react";
+
+export default function CheckoutPage() {
+  return (
+    <WhopCheckoutEmbed 
+      planId="plan_XXXXXXXXX"
+      onComplete={(planId, receiptId) => {
+        console.log("Checkout completed!", { planId, receiptId });
+      }}
+    />
+  );
+}
+```
+
+### Advanced Usage with Controls
+
+```tsx
+import { WhopCheckoutEmbed, useCheckoutEmbedControls } from "@whop/checkout/react";
+
+export default function CheckoutPage() {
+  const checkoutRef = useCheckoutEmbedControls();
+
+  const handleSubmit = () => {
+    checkoutRef.current?.submit();
+  };
+
+  const handleGetEmail = async () => {
+    try {
+      const email = await checkoutRef.current?.getEmail();
+      console.log("Current email:", email);
+    } catch (error) {
+      console.error("Failed to get email:", error);
+    }
+  };
+
+  return (
+    <div>
+      <WhopCheckoutEmbed 
+        ref={checkoutRef}
+        planId="plan_XXXXXXXXX"
+        theme="dark"
+        onComplete={(planId, receiptId) => {
+          console.log("Checkout completed!", { planId, receiptId });
+        }}
+        onStateChange={(state) => {
+          console.log("Checkout state changed:", state);
+        }}
+      />
+      <button onClick={handleSubmit}>Submit Checkout</button>
+      <button onClick={handleGetEmail}>Get Email</button>
+    </div>
+  );
+}
+```
+
+### React Component Props
+
+The `WhopCheckoutEmbed` component accepts the following props:
+
+- `planId` (required): The plan ID you want to checkout
+- `theme`: Theme preference (`"light"`, `"dark"`, or `"system"`)
+- `sessionId`: Session ID for attaching metadata
+- `hidePrice`: Hide the price in the checkout form
+- `skipRedirect`: Skip the final redirect after completion
+- `onComplete`: Callback when checkout is complete
+- `onStateChange`: Callback when checkout state changes
+- `utm`: UTM parameters for tracking
+- `styles`: Custom styles for the embed
+- `prefill`: Prefill options (e.g., email)
+- `themeOptions`: Theme customization options
+- `hideSubmitButton`: Hide the submit button
+- `hideTermsAndConditions`: Hide terms and conditions
+- `hideEmail`: Hide the email input
+- `disableEmail`: Disable the email input
+- `fallback`: Fallback content while loading
+
+### React Version Compatibility
+
+This package is compatible with React 18+ and React 19. It uses:
+
+- Modern React 18+ type definitions for better type safety
+- React hooks and modern patterns  
+- Server-side rendering safe patterns
+- forwardRef for proper ref handling
+
+### TypeScript Support
+
+Full TypeScript support is included with proper type definitions for all components and hooks.
+
 ## Available methods
 
 First, attach an `id` to the checkout container:

package/dist/static/checkout/react/index.cjs

@@ -0,0 +1 @@
+"use strict";function e(e,t){if(t==null||t>e.length)t=e.length;for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function t(e){if(Array.isArray(e))return e}function r(t){if(Array.isArray(t))return e(t)}function n(e){if(e===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called")}return e}function o(e,t,r,n,o,i,u){try{var a=e[i](u);var c=a.value}catch(e){r(e);return}if(a.done){t(c)}else{Promise.resolve(c).then(n,o)}}function i(e){return function(){var t=this,r=arguments;return new Promise(function(n,i){var u=e.apply(t,r);function a(e){o(u,n,i,a,c,"next",e)}function c(e){o(u,n,i,a,c,"throw",e)}a(undefined)})}}function u(e,t,r){t=f(t);return E(e,x()?Reflect.construct(t,r||[],f(e).constructor):t.apply(e,r))}function a(e,t){if(!(e instanceof t)){throw new TypeError("Cannot call a class as a function")}}function c(e,t,r){if(x()){c=Reflect.construct}else{c=function e(e,t,r){var n=[null];n.push.apply(n,t);var o=Function.bind.apply(e,n);var i=new o;if(r)j(i,r.prototype);return i}}return c.apply(null,arguments)}function l(e,t,r){if(t in e){Object.defineProperty(e,t,{value:r,enumerable:true,configurable:true,writable:true})}else{e[t]=r}return e}function f(e){f=Object.setPrototypeOf?Object.getPrototypeOf:function e(e){return e.__proto__||Object.getPrototypeOf(e)};return f(e)}function s(e,t){if(typeof t!=="function"&&t!==null){throw new TypeError("Super expression must either be null or a function")}e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:true,configurable:true}});if(t)j(e,t)}function d(e){return Function.toString.call(e).indexOf("[native code]")!==-1}function p(e){if(typeof Symbol!=="undefined"&&e[Symbol.iterator]!=null||e["@@iterator"]!=null)return Array.from(e)}function v(e,t){var r=e==null?null:typeof Symbol!=="undefined"&&e[Symbol.iterator]||e["@@iterator"];if(r==null)return;var n=[];var o=true;var i=false;var u,a;try{for(r=r.call(e);!(o=(u=r.next()).done);o=true){n.push(u.value);if(t&&n.length===t)break}}catch(e){i=true;a=e}finally{try{if(!o&&r["return"]!=null)r["return"]()}finally{if(i)throw a}}return n}function m(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function y(){throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function h(e){for(var t=1;t<arguments.length;t++){var r=arguments[t]!=null?arguments[t]:{};var n=Object.keys(r);if(typeof Object.getOwnPropertySymbols==="function"){n=n.concat(Object.getOwnPropertySymbols(r).filter(function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable}))}n.forEach(function(t){l(e,t,r[t])})}return e}function b(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);if(t){n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})}r.push.apply(r,n)}return r}function w(e,t){t=t!=null?t:{};if(Object.getOwnPropertyDescriptors){Object.defineProperties(e,Object.getOwnPropertyDescriptors(t))}else{b(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})}return e}function g(e,t){if(e==null)return{};var r=O(e,t);var n,o;if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++){n=i[o];if(t.indexOf(n)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(e,n))continue;r[n]=e[n]}}return r}function O(e,t){if(e==null)return{};var r={};var n=Object.keys(e);var o,i;for(i=0;i<n.length;i++){o=n[i];if(t.indexOf(o)>=0)continue;r[o]=e[o]}return r}function E(e,t){if(t&&(_(t)==="object"||typeof t==="function")){return t}return n(e)}function j(e,t){j=Object.setPrototypeOf||function e(e,t){e.__proto__=t;return e};return j(e,t)}function P(e,r){return t(e)||v(e,r)||S(e,r)||m()}function k(e){return r(e)||p(e)||S(e)||y()}function _(e){"@swc/helpers - typeof";return e&&typeof Symbol!=="undefined"&&e.constructor===Symbol?"symbol":typeof e}function S(t,r){if(!t)return;if(typeof t==="string")return e(t,r);var n=Object.prototype.toString.call(t).slice(8,-1);if(n==="Object"&&t.constructor)n=t.constructor.name;if(n==="Map"||n==="Set")return Array.from(n);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return e(t,r)}function C(e){var t=typeof Map==="function"?new Map:undefined;C=function e(e){if(e===null||!d(e))return e;if(typeof e!=="function"){throw new TypeError("Super expression must either be null or a function")}if(typeof t!=="undefined"){if(t.has(e))return t.get(e);t.set(e,r)}function r(){return c(e,arguments,f(this).constructor)}r.prototype=Object.create(e.prototype,{constructor:{value:r,enumerable:false,writable:true,configurable:true}});return j(r,e)};return C(e)}function x(){try{var e=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(e){}return(x=function(){return!!e})()}function R(e,t){var r,n,o,i={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},u=Object.create((typeof Iterator==="function"?Iterator:Object).prototype);return u.next=a(0),u["throw"]=a(1),u["return"]=a(2),typeof Symbol==="function"&&(u[Symbol.iterator]=function(){return this}),u;function a(e){return function(t){return c([e,t])}}function c(a){if(r)throw new TypeError("Generator is already executing.");while(u&&(u=0,a[0]&&(i=0)),i)try{if(r=1,n&&(o=a[0]&2?n["return"]:a[0]?n["throw"]||((o=n["return"])&&o.call(n),0):n.next)&&!(o=o.call(n,a[1])).done)return o;if(n=0,o)a=[a[0]&2,o.value];switch(a[0]){case 0:case 1:o=a;break;case 4:i.label++;return{value:a[1],done:false};case 5:i.label++;n=a[1];a=[0];continue;case 7:a=i.ops.pop();i.trys.pop();continue;default:if(!(o=i.trys,o=o.length>0&&o[o.length-1])&&(a[0]===6||a[0]===2)){i=0;continue}if(a[0]===3&&(!o||a[1]>o[0]&&a[1]<o[3])){i.label=a[1];break}if(a[0]===6&&i.label<o[1]){i.label=o[1];o=a;break}if(o&&i.label<o[2]){i.label=o[2];i.ops.push(a);break}if(o[2])i.ops.pop();i.trys.pop();continue}a=t.call(e,i)}catch(e){a=[6,e];n=0}finally{r=o=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}}var W=Object.create;var A=Object.defineProperty;var I=Object.getOwnPropertyDescriptor;var T=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,U=Object.prototype.hasOwnProperty;var L=function(e,t,r){return t in e?A(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r};var D=function(e,t){for(var r in t)A(e,r,{get:t[r],enumerable:!0})},q=function(e,t,r,n){var o=true,i=false,u=undefined;if(t&&(typeof t==="undefined"?"undefined":_(t))=="object"||typeof t=="function")try{var a=function(){var o=l.value;!U.call(e,o)&&o!==r&&A(e,o,{get:function(){return t[o]},enumerable:!(n=I(t,o))||n.enumerable})};for(var c=T(t)[Symbol.iterator](),l;!(o=(l=c.next()).done);o=true)a()}catch(e){i=true;u=e}finally{try{if(!o&&c.return!=null){c.return()}}finally{if(i){throw u}}}return e};var N=function(e,t,r){return r=e!=null?W(M(e)):{},q(t||!e||!e.__esModule?A(r,"default",{value:e,enumerable:!0}):r,e)},V=function(e){return q(A({},"__esModule",{value:!0}),e)};var z=function(e,t,r){return L(e,(typeof t==="undefined"?"undefined":_(t))!="symbol"?t+"":t,r)};var B={};D(B,{WhopCheckoutEmbed:function(){return eO},useCheckoutEmbedControls:function(){return ej}});module.exports=V(B);var F=N(require("react"));var G=/*#__PURE__*/function(e){s(t,e);function t(){a(this,t);var e;e=u(this,t,arguments);z(e,"type","WhopCheckoutError");return e}return t}(C(Error));var $=/*#__PURE__*/function(e){s(t,e);function t(e){a(this,t);var r;r=u(this,t,[e!==null&&e!==void 0?e:"Timeout waiting for embed response"]);z(r,"name","WhopCheckoutRpcTimeoutError");return r}return t}(G);var H=/*#__PURE__*/function(e){s(t,e);function t(){a(this,t);var e;e=u(this,t,arguments);z(e,"name","WhopCheckoutSetEmailError");return e}return t}(G);var J=["resize","center","complete","state","get-email-result","set-email-result"];function K(e){return _(e.data)=="object"&&e.data!==null&&"event"in e.data&&J.includes(e.data.event)}function Q(e,t){return K(e)&&e.data.event===t}var X=[];function Y(e){return X[e]||(X[e]=(e+256).toString(16).slice(1))}function Z(){var e=new Uint8Array(16);if((typeof crypto==="undefined"?"undefined":_(crypto))<"u"&&typeof crypto.getRandomValues=="function")crypto.getRandomValues(e);else for(var t=0;t<16;t++)e[t]=Math.random()*256|0;return e[6]=e[6]&15|64,e[8]=e[8]&63|128,Y(e[0])+Y(e[1])+Y(e[2])+Y(e[3])+"-"+Y(e[4])+Y(e[5])+"-"+Y(e[6])+Y(e[7])+"-"+Y(e[8])+Y(e[9])+"-"+Y(e[10])+Y(e[11])+Y(e[12])+Y(e[13])+Y(e[14])+Y(e[15])}function ee(e,t,r,n){var o=arguments.length>4&&arguments[4]!==void 0?arguments[4]:2e3;var i;var u=new URL(e.src).origin,a=Z();return(i=e.contentWindow)===null||i===void 0?void 0:i.postMessage(w(h({},t),{__scope:"whop-embedded-checkout",event_id:a}),u),new Promise(function(t,i){var u=setTimeout(function(){i(new $),window.removeEventListener("message",c)},o),c=function(o){if(o.source===e.contentWindow&&Q(o,r)&&o.data.event===r&&o.data.event_id===a){clearTimeout(u),window.removeEventListener("message",c);try{t(n(o.data))}catch(e){i(e)}}};window.addEventListener("message",c)})}function et(e,t){function r(r){r.source===e.contentWindow&&K(r)&&t(r.data)}return window.addEventListener("message",r),function(){window.removeEventListener("message",r)}}function er(e,t){var r=arguments.length>2&&arguments[2]!==void 0?arguments[2]:2e3;return i(function(){return R(this,function(n){return[2,ee(e,{event:"set-email",email:t},"set-email-result",function(e){if(!e.ok)throw new H(e.error)},r)]})})()}function en(e){var t=arguments.length>1&&arguments[1]!==void 0?arguments[1]:2e3;return i(function(){return R(this,function(r){return[2,ee(e,{event:"get-email"},"get-email-result",function(e){return e.email},t)]})})()}function eo(e,t){var r;var n=new URL(e.src).origin;(r=e.contentWindow)===null||r===void 0?void 0:r.postMessage({__scope:"whop-embedded-checkout",event:"submit"},n)}function ei(e,t,r,n,o,i,u,a,c,l,f,s,d,p){var v=new URL("/embedded/checkout/".concat(e,"/"),n!==null&&n!==void 0?n:"https://whop.com/");if(v.searchParams.set("h",window.location.origin),t&&v.searchParams.set("theme",t),r&&v.searchParams.set("session",r),o&&v.searchParams.set("hide_price","true"),i&&v.searchParams.set("skip_redirect","true"),f&&v.searchParams.set("hide_submit_button","true"),s&&v.searchParams.set("hide_tos","true"),d&&v.searchParams.set("email.hidden","1"),p&&v.searchParams.set("email.disabled","1"),u){var m=true,y=false,h=undefined,b=true,w=false,g=undefined;try{for(var O=Object.entries(u).sort(function(e,t){return e[0].localeCompare(t[0])})[Symbol.iterator](),E;!(b=(E=O.next()).done);b=true){var j=P(E.value,2),k=j[0],_=j[1];if(k.startsWith("utm_"))if(Array.isArray(_))try{for(var S=_[Symbol.iterator](),C;!(m=(C=S.next()).done);m=true){var x=C.value;v.searchParams.append(k,x)}}catch(e){y=true;h=e}finally{try{if(!m&&S.return!=null){S.return()}}finally{if(y){throw h}}}else v.searchParams.set(k,_)}}catch(e){w=true;g=e}finally{try{if(!b&&O.return!=null){O.return()}}finally{if(w){throw g}}}}if(a){var R=true,W=false,A=undefined,I=true,T=false,M=undefined;try{for(var U=Object.entries(a)[Symbol.iterator](),L;!(I=(L=U.next()).done);I=true){var D=P(L.value,2),q=D[0],N=D[1];if(N)try{for(var V=Object.entries(N)[Symbol.iterator](),z;!(R=(z=V.next()).done);R=true){var B=P(z.value,2),F=B[0],G=B[1];v.searchParams.set("style.".concat(q,".").concat(F),G.toString())}}catch(e){W=true;A=e}finally{try{if(!R&&V.return!=null){V.return()}}finally{if(W){throw A}}}}}catch(e){T=true;M=e}finally{try{if(!I&&U.return!=null){U.return()}}finally{if(T){throw M}}}}var $=true,H=false,J=undefined;if((c===null||c===void 0?void 0:c.email)&&v.searchParams.set("email",c.email),l)try{for(var K=Object.entries(l)[Symbol.iterator](),Q;!($=(Q=K.next()).done);$=true){var X=P(Q.value,2),Y=X[0],Z=X[1];Z&&v.searchParams.set("theme.".concat(Y),Z)}}catch(e){H=true;J=e}finally{try{if(!$&&K.return!=null){K.return()}}finally{if(H){throw J}}}return v.toString()}var eu=["allow-forms","allow-modals","allow-orientation-lock","allow-pointer-lock","allow-popups","allow-presentation","allow-same-origin","allow-scripts","allow-top-navigation","allow-top-navigation-by-user-activation","allow-downloads"],ea="document-domain; execution-while-not-rendered; execution-while-out-of-viewport; payment; paymentRequest; sync-script;";var ec=require("react");function el(){return function(){}}function ef(){return(0,ec.useSyncExternalStore)(el,function(){return!0},function(){return!1})}var es=["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"];function ed(e){return e?es.includes(e):!1}var ep=require("react");var ev=require("react"),em=Symbol("none");function ey(e){var t=(0,ev.useRef)(em);return t.current===em&&(t.current=e()),t}function eh(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++){t[r]=arguments[r]}var n=ey(function(){return ei.apply(void 0,k(t))}),o=n.current;return o&&eb.apply(void 0,[o].concat(k(t))),o}function eb(e){for(var t=arguments.length,r=new Array(t>1?t-1:0),n=1;n<t;n++){r[n-1]=arguments[n]}var o=P(r,12),i=o[0],u=o[1],a=o[2],c=o[3],l=o[4],f=o[5],s=o[6],d=o[7],p=o[8],v=o[9],m=o[10],y=o[11];var h=(0,ep.useMemo)(function(){return ei(i,u,a,void 0,l,f,s,d,p,v,m,y)},[i,u,a,l,f,s,d,p,v,m,y]);(0,ep.useEffect)(function(){e!==h&&process.env.NODE_ENV==="development"&&console.warn("[WhopCheckoutEmbed] iframeUrl changed from ".concat(e," to ").concat(h,". Updating props on the checkout embed is not supported. Please rerender the component."))},[e,h])}var ew=eu.join(" ");var eg=(0,F.forwardRef)(function(e,t){var r=e.planId,n=e.theme,o=e.sessionId,i=e.hidePrice,u=i===void 0?!1:i,a=e.skipRedirect,c=a===void 0?!1:a,l=e.onComplete,f=e.onStateChange,s=e.utm,d=e.styles,p=e.prefill,v=e.themeOptions,m=e.hideSubmitButton,y=m===void 0?!1:m,h=e.hideTermsAndConditions,b=h===void 0?!1:h,w=e.hideEmail,g=w===void 0?!1:w,O=e.disableEmail,E=O===void 0?!1:O;var j=(0,F.useMemo)(function(){return{accentColor:ed(v===null||v===void 0?void 0:v.accentColor)?v.accentColor:void 0}},[v===null||v===void 0?void 0:v.accentColor]),k=eh(r,n,o,void 0,u,c||!!l,s,d,p,j,y,b,g,E),_=(0,F.useRef)(null),S=P((0,F.useState)(480),2),C=S[0],x=S[1];return(0,F.useEffect)(function(){var e=_.current;if(e)return et(e,function(t){switch(t.event){case"resize":{x(t.height);break}case"center":{e.scrollIntoView({block:"center",inline:"center"});break}case"complete":{l&&l(t.plan_id,t.receipt_id);break}case"state":{f&&f(t.state);break}}})},[l,f]),t&&(typeof t=="function"?t({submit:function(e){_.current&&eo(_.current,e)},getEmail:function(e){if(!_.current)throw new Error("Whop embedded checkout frame not found");return en(_.current,e)},setEmail:function(e,t){if(!_.current)throw new Error("Whop embedded checkout frame not found");return er(_.current,e,t)}}):t.current={submit:function(e){_.current&&eo(_.current,e)},getEmail:function(e){if(!_.current)throw new Error("Whop embedded checkout frame not found");return en(_.current,e)},setEmail:function(e,t){if(!_.current)throw new Error("Whop embedded checkout frame not found");return er(_.current,e,t)}}),F.default.createElement("iframe",{ref:_,allow:ea,sandbox:ew,title:"Whop Embedded Checkout",src:k!==null&&k!==void 0?k:void 0,style:{border:"none",height:"".concat(C,"px"),width:"100%",overflow:"hidden"}})});eg.displayName="WhopCheckoutEmbedInner";var eO=(0,F.forwardRef)(function(e,t){var r=e.fallback,n=g(e,["fallback"]);return ef()?F.default.createElement(eg,w(h({},n),{ref:t})):r!==null&&r!==void 0?r:null});eO.displayName="WhopCheckoutEmbed";var eE=require("react");function ej(){return(0,eE.useRef)(null)}0&&(module.exports={WhopCheckoutEmbed:WhopCheckoutEmbed,useCheckoutEmbedControls:useCheckoutEmbedControls});

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

@@ -0,0 +1,140 @@
+import * as React from 'react';
+import React__default, { MutableRefObject, ReactNode } from 'react';
+import { WhopCheckoutSubmitDetails, WhopCheckoutState, WhopEmbeddedCheckoutStyleOptions, WhopEmbeddedCheckoutPrefillOptions } from '../util.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];
+
+interface WhopCheckoutEmbedControls {
+    submit: (opts?: WhopCheckoutSubmitDetails) => void;
+    getEmail: (timeout?: number) => Promise<string>;
+    setEmail: (email: string, timeout?: number) => Promise<void>;
+}
+
+interface WhopCheckoutEmbedThemeOptions {
+    /**
+     * **Optional** - The accent color you want to use in the embed.
+     *
+     * defaults to `blue`
+     */
+    accentColor?: AccentColor;
+}
+interface WhopCheckoutEmbedProps {
+    /**
+     * **Required** - The plan id you want to checkout.
+     */
+    planId: string;
+    /**
+     * **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** - 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.
+     *
+     * @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;
+    /**
+     * **Optional** - A callback function that will be called when the checkout state changes.
+     */
+    onStateChange?: (
+    /** The new state of the checkout. */
+    state: WhopCheckoutState) => 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;
+}
+
+/**
+ * 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<WhopCheckoutEmbedProps & {
+    /**
+     * **Optional** - The fallback content to show while the checkout is loading.
+     */
+    fallback?: ReactNode;
+}, "ref"> & React__default.RefAttributes<WhopCheckoutEmbedControls>>;
+
+declare function useCheckoutEmbedControls(): React.RefObject<WhopCheckoutEmbedControls>;
+
+export { WhopCheckoutEmbed, type WhopCheckoutEmbedProps, type WhopCheckoutEmbedThemeOptions, WhopEmbeddedCheckoutPrefillOptions, WhopEmbeddedCheckoutStyleOptions, useCheckoutEmbedControls };

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

@@ -0,0 +1,140 @@
+import * as React from 'react';
+import React__default, { MutableRefObject, ReactNode } from 'react';
+import { WhopCheckoutSubmitDetails, WhopCheckoutState, WhopEmbeddedCheckoutStyleOptions, WhopEmbeddedCheckoutPrefillOptions } from '../util.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];
+
+interface WhopCheckoutEmbedControls {
+    submit: (opts?: WhopCheckoutSubmitDetails) => void;
+    getEmail: (timeout?: number) => Promise<string>;
+    setEmail: (email: string, timeout?: number) => Promise<void>;
+}
+
+interface WhopCheckoutEmbedThemeOptions {
+    /**
+     * **Optional** - The accent color you want to use in the embed.
+     *
+     * defaults to `blue`
+     */
+    accentColor?: AccentColor;
+}
+interface WhopCheckoutEmbedProps {
+    /**
+     * **Required** - The plan id you want to checkout.
+     */
+    planId: string;
+    /**
+     * **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** - 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.
+     *
+     * @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;
+    /**
+     * **Optional** - A callback function that will be called when the checkout state changes.
+     */
+    onStateChange?: (
+    /** The new state of the checkout. */
+    state: WhopCheckoutState) => 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;
+}
+
+/**
+ * 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<WhopCheckoutEmbedProps & {
+    /**
+     * **Optional** - The fallback content to show while the checkout is loading.
+     */
+    fallback?: ReactNode;
+}, "ref"> & React__default.RefAttributes<WhopCheckoutEmbedControls>>;
+
+declare function useCheckoutEmbedControls(): React.RefObject<WhopCheckoutEmbedControls>;
+
+export { WhopCheckoutEmbed, type WhopCheckoutEmbedProps, type WhopCheckoutEmbedThemeOptions, WhopEmbeddedCheckoutPrefillOptions, WhopEmbeddedCheckoutStyleOptions, useCheckoutEmbedControls };

package/dist/static/checkout/react/index.js

@@ -0,0 +1 @@
+"use strict";function e(e,r){if(r==null||r>e.length)r=e.length;for(var t=0,n=new Array(r);t<r;t++)n[t]=e[t];return n}function r(e){if(Array.isArray(e))return e}function t(r){if(Array.isArray(r))return e(r)}function n(e){if(e===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called")}return e}function o(e,r,t,n,o,i,u){try{var a=e[i](u);var c=a.value}catch(e){t(e);return}if(a.done){r(c)}else{Promise.resolve(c).then(n,o)}}function i(e){return function(){var r=this,t=arguments;return new Promise(function(n,i){var u=e.apply(r,t);function a(e){o(u,n,i,a,c,"next",e)}function c(e){o(u,n,i,a,c,"throw",e)}a(undefined)})}}function u(e,r,t){r=f(r);return P(e,R()?Reflect.construct(r,t||[],f(e).constructor):r.apply(e,t))}function a(e,r){if(!(e instanceof r)){throw new TypeError("Cannot call a class as a function")}}function c(e,r,t){if(R()){c=Reflect.construct}else{c=function e(e,r,t){var n=[null];n.push.apply(n,r);var o=Function.bind.apply(e,n);var i=new o;if(t)j(i,t.prototype);return i}}return c.apply(null,arguments)}function l(e,r,t){if(r in e){Object.defineProperty(e,r,{value:t,enumerable:true,configurable:true,writable:true})}else{e[r]=t}return e}function f(e){f=Object.setPrototypeOf?Object.getPrototypeOf:function e(e){return e.__proto__||Object.getPrototypeOf(e)};return f(e)}function s(e,r){if(typeof r!=="function"&&r!==null){throw new TypeError("Super expression must either be null or a function")}e.prototype=Object.create(r&&r.prototype,{constructor:{value:e,writable:true,configurable:true}});if(r)j(e,r)}function d(e){return Function.toString.call(e).indexOf("[native code]")!==-1}function p(e){if(typeof Symbol!=="undefined"&&e[Symbol.iterator]!=null||e["@@iterator"]!=null)return Array.from(e)}function v(e,r){var t=e==null?null:typeof Symbol!=="undefined"&&e[Symbol.iterator]||e["@@iterator"];if(t==null)return;var n=[];var o=true;var i=false;var u,a;try{for(t=t.call(e);!(o=(u=t.next()).done);o=true){n.push(u.value);if(r&&n.length===r)break}}catch(e){i=true;a=e}finally{try{if(!o&&t["return"]!=null)t["return"]()}finally{if(i)throw a}}return n}function y(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function m(){throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function h(e){for(var r=1;r<arguments.length;r++){var t=arguments[r]!=null?arguments[r]:{};var n=Object.keys(t);if(typeof Object.getOwnPropertySymbols==="function"){n=n.concat(Object.getOwnPropertySymbols(t).filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))}n.forEach(function(r){l(e,r,t[r])})}return e}function b(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);if(r){n=n.filter(function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable})}t.push.apply(t,n)}return t}function w(e,r){r=r!=null?r:{};if(Object.getOwnPropertyDescriptors){Object.defineProperties(e,Object.getOwnPropertyDescriptors(r))}else{b(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}function g(e,r){if(e==null)return{};var t=O(e,r);var n,o;if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++){n=i[o];if(r.indexOf(n)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(e,n))continue;t[n]=e[n]}}return t}function O(e,r){if(e==null)return{};var t={};var n=Object.keys(e);var o,i;for(i=0;i<n.length;i++){o=n[i];if(r.indexOf(o)>=0)continue;t[o]=e[o]}return t}function P(e,r){if(r&&(S(r)==="object"||typeof r==="function")){return r}return n(e)}function j(e,r){j=Object.setPrototypeOf||function e(e,r){e.__proto__=r;return e};return j(e,r)}function E(e,t){return r(e)||v(e,t)||_(e,t)||y()}function k(e){return t(e)||p(e)||_(e)||m()}function S(e){"@swc/helpers - typeof";return e&&typeof Symbol!=="undefined"&&e.constructor===Symbol?"symbol":typeof e}function _(r,t){if(!r)return;if(typeof r==="string")return e(r,t);var n=Object.prototype.toString.call(r).slice(8,-1);if(n==="Object"&&r.constructor)n=r.constructor.name;if(n==="Map"||n==="Set")return Array.from(n);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return e(r,t)}function x(e){var r=typeof Map==="function"?new Map:undefined;x=function e(e){if(e===null||!d(e))return e;if(typeof e!=="function"){throw new TypeError("Super expression must either be null or a function")}if(typeof r!=="undefined"){if(r.has(e))return r.get(e);r.set(e,t)}function t(){return c(e,arguments,f(this).constructor)}t.prototype=Object.create(e.prototype,{constructor:{value:t,enumerable:false,writable:true,configurable:true}});return j(t,e)};return x(e)}function R(){try{var e=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(e){}return(R=function(){return!!e})()}function C(e,r){var t,n,o,i={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},u=Object.create((typeof Iterator==="function"?Iterator:Object).prototype);return u.next=a(0),u["throw"]=a(1),u["return"]=a(2),typeof Symbol==="function"&&(u[Symbol.iterator]=function(){return this}),u;function a(e){return function(r){return c([e,r])}}function c(a){if(t)throw new TypeError("Generator is already executing.");while(u&&(u=0,a[0]&&(i=0)),i)try{if(t=1,n&&(o=a[0]&2?n["return"]:a[0]?n["throw"]||((o=n["return"])&&o.call(n),0):n.next)&&!(o=o.call(n,a[1])).done)return o;if(n=0,o)a=[a[0]&2,o.value];switch(a[0]){case 0:case 1:o=a;break;case 4:i.label++;return{value:a[1],done:false};case 5:i.label++;n=a[1];a=[0];continue;case 7:a=i.ops.pop();i.trys.pop();continue;default:if(!(o=i.trys,o=o.length>0&&o[o.length-1])&&(a[0]===6||a[0]===2)){i=0;continue}if(a[0]===3&&(!o||a[1]>o[0]&&a[1]<o[3])){i.label=a[1];break}if(a[0]===6&&i.label<o[1]){i.label=o[1];o=a;break}if(o&&i.label<o[2]){i.label=o[2];i.ops.push(a);break}if(o[2])i.ops.pop();i.trys.pop();continue}a=r.call(e,i)}catch(e){a=[6,e];n=0}finally{t=o=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}}(function(){var e=function e(e){return S(e.data)=="object"&&e.data!==null&&"event"in e.data&&F.includes(e.data.event)};var r=function r(r,t){return e(r)&&r.data.event===t};var t=function e(e){return G[e]||(G[e]=(e+256).toString(16).slice(1))};var n=function e(){var e=new Uint8Array(16);if((typeof crypto==="undefined"?"undefined":S(crypto))<"u"&&typeof crypto.getRandomValues=="function")crypto.getRandomValues(e);else for(var r=0;r<16;r++)e[r]=Math.random()*256|0;return e[6]=e[6]&15|64,e[8]=e[8]&63|128,t(e[0])+t(e[1])+t(e[2])+t(e[3])+"-"+t(e[4])+t(e[5])+"-"+t(e[6])+t(e[7])+"-"+t(e[8])+t(e[9])+"-"+t(e[10])+t(e[11])+t(e[12])+t(e[13])+t(e[14])+t(e[15])};var o=function e(e,t,o,i){var u=arguments.length>4&&arguments[4]!==void 0?arguments[4]:2e3;var a;var c=new URL(e.src).origin,l=n();return(a=e.contentWindow)===null||a===void 0?void 0:a.postMessage(w(h({},t),{__scope:"whop-embedded-checkout",event_id:l}),c),new Promise(function(t,n){var a=setTimeout(function(){n(new z),window.removeEventListener("message",c)},u),c=function(u){if(u.source===e.contentWindow&&r(u,o)&&u.data.event===o&&u.data.event_id===l){clearTimeout(a),window.removeEventListener("message",c);try{t(i(u.data))}catch(e){n(e)}}};window.addEventListener("message",c)})};var c=function r(r,t){function n(n){n.source===r.contentWindow&&e(n)&&t(n.data)}return window.addEventListener("message",n),function(){window.removeEventListener("message",n)}};var l=function e(e,r){var t=arguments.length>2&&arguments[2]!==void 0?arguments[2]:2e3;return i(function(){return C(this,function(n){return[2,o(e,{event:"set-email",email:r},"set-email-result",function(e){if(!e.ok)throw new B(e.error)},t)]})})()};var f=function e(e){var r=arguments.length>1&&arguments[1]!==void 0?arguments[1]:2e3;return i(function(){return C(this,function(t){return[2,o(e,{event:"get-email"},"get-email-result",function(e){return e.email},r)]})})()};var d=function e(e,r){var t;var n=new URL(e.src).origin;(t=e.contentWindow)===null||t===void 0?void 0:t.postMessage({__scope:"whop-embedded-checkout",event:"submit"},n)};var p=function e(e,r,t,n,o,i,u,a,c,l,f,s,d,p){var v=new URL("/embedded/checkout/".concat(e,"/"),n!==null&&n!==void 0?n:"https://whop.com/");if(v.searchParams.set("h",window.location.origin),r&&v.searchParams.set("theme",r),t&&v.searchParams.set("session",t),o&&v.searchParams.set("hide_price","true"),i&&v.searchParams.set("skip_redirect","true"),f&&v.searchParams.set("hide_submit_button","true"),s&&v.searchParams.set("hide_tos","true"),d&&v.searchParams.set("email.hidden","1"),p&&v.searchParams.set("email.disabled","1"),u){var y=true,m=false,h=undefined,b=true,w=false,g=undefined;try{for(var O=Object.entries(u).sort(function(e,r){return e[0].localeCompare(r[0])})[Symbol.iterator](),P;!(b=(P=O.next()).done);b=true){var j=E(P.value,2),k=j[0],S=j[1];if(k.startsWith("utm_"))if(Array.isArray(S))try{for(var _=S[Symbol.iterator](),x;!(y=(x=_.next()).done);y=true){var R=x.value;v.searchParams.append(k,R)}}catch(e){m=true;h=e}finally{try{if(!y&&_.return!=null){_.return()}}finally{if(m){throw h}}}else v.searchParams.set(k,S)}}catch(e){w=true;g=e}finally{try{if(!b&&O.return!=null){O.return()}}finally{if(w){throw g}}}}if(a){var C=true,W=false,A=undefined,I=true,q=false,T=undefined;try{for(var U=Object.entries(a)[Symbol.iterator](),M;!(I=(M=U.next()).done);I=true){var D=E(M.value,2),L=D[0],N=D[1];if(N)try{for(var V=Object.entries(N)[Symbol.iterator](),z;!(C=(z=V.next()).done);C=true){var B=E(z.value,2),F=B[0],G=B[1];v.searchParams.set("style.".concat(L,".").concat(F),G.toString())}}catch(e){W=true;A=e}finally{try{if(!C&&V.return!=null){V.return()}}finally{if(W){throw A}}}}}catch(e){q=true;T=e}finally{try{if(!I&&U.return!=null){U.return()}}finally{if(q){throw T}}}}var $=true,H=false,J=undefined;if((c===null||c===void 0?void 0:c.email)&&v.searchParams.set("email",c.email),l)try{for(var K=Object.entries(l)[Symbol.iterator](),Q;!($=(Q=K.next()).done);$=true){var X=E(Q.value,2),Y=X[0],Z=X[1];Z&&v.searchParams.set("theme.".concat(Y),Z)}}catch(e){H=true;J=e}finally{try{if(!$&&K.return!=null){K.return()}}finally{if(H){throw J}}}return v.toString()};var v=function e(){return function(){}};var y=function e(){return(0,J.useSyncExternalStore)(v,function(){return!0},function(){return!1})};var m=function e(e){return e?K.includes(e):!1};var b=function e(e){var r=(0,X.useRef)(Y);return r.current===Y&&(r.current=e()),r};var O=function e(){for(var e=arguments.length,r=new Array(e),t=0;t<e;t++){r[t]=arguments[t]}var n=b(function(){return p.apply(void 0,k(r))}),o=n.current;return o&&P.apply(void 0,[o].concat(k(r))),o};var P=function e(e){for(var r=arguments.length,t=new Array(r>1?r-1:0),n=1;n<r;n++){t[n-1]=arguments[n]}var o=E(t,12),i=o[0],u=o[1],a=o[2],c=o[3],l=o[4],f=o[5],s=o[6],d=o[7],v=o[8],y=o[9],m=o[10],h=o[11];var b=(0,Q.useMemo)(function(){return p(i,u,a,void 0,l,f,s,d,v,y,m,h)},[i,u,a,l,f,s,d,v,y,m,h]);(0,Q.useEffect)(function(){e!==b&&process.env.NODE_ENV==="development"&&console.warn("[WhopCheckoutEmbed] iframeUrl changed from ".concat(e," to ").concat(b,". Updating props on the checkout embed is not supported. Please rerender the component."))},[e,b])};var j=function e(){return(0,et.useRef)(null)};var _=Object.create;var R=Object.defineProperty;var W=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var I=Object.getPrototypeOf,q=Object.prototype.hasOwnProperty;var T=function(e,r,t){return r in e?R(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t};var U=function(e){return(typeof require==="undefined"?"undefined":S(require))<"u"?require:(typeof Proxy==="undefined"?"undefined":S(Proxy))<"u"?new Proxy(e,{get:function(e,r){return((typeof require==="undefined"?"undefined":S(require))<"u"?require:e)[r]}}):e}(function(e){if((typeof require==="undefined"?"undefined":S(require))<"u")return require.apply(this,arguments);throw Error('Dynamic require of "'+e+'" is not supported')});var M=function(e,r,t,n){var o=true,i=false,u=undefined;if(r&&(typeof r==="undefined"?"undefined":S(r))=="object"||typeof r=="function")try{var a=function(){var o=l.value;!q.call(e,o)&&o!==t&&R(e,o,{get:function(){return r[o]},enumerable:!(n=W(r,o))||n.enumerable})};for(var c=A(r)[Symbol.iterator](),l;!(o=(l=c.next()).done);o=true)a()}catch(e){i=true;u=e}finally{try{if(!o&&c.return!=null){c.return()}}finally{if(i){throw u}}}return e};var D=function(e,r,t){return t=e!=null?_(I(e)):{},M(r||!e||!e.__esModule?R(t,"default",{value:e,enumerable:!0}):t,e)};var L=function(e,r,t){return T(e,(typeof r==="undefined"?"undefined":S(r))!="symbol"?r+"":r,t)};var N=D(U("react"));var V=/*#__PURE__*/function(e){s(r,e);function r(){a(this,r);var e;e=u(this,r,arguments);L(e,"type","WhopCheckoutError");return e}return r}(x(Error));var z=/*#__PURE__*/function(e){s(r,e);function r(e){a(this,r);var t;t=u(this,r,[e!==null&&e!==void 0?e:"Timeout waiting for embed response"]);L(t,"name","WhopCheckoutRpcTimeoutError");return t}return r}(V);var B=/*#__PURE__*/function(e){s(r,e);function r(){a(this,r);var e;e=u(this,r,arguments);L(e,"name","WhopCheckoutSetEmailError");return e}return r}(V);var F=["resize","center","complete","state","get-email-result","set-email-result"];var G=[];var $=["allow-forms","allow-modals","allow-orientation-lock","allow-pointer-lock","allow-popups","allow-presentation","allow-same-origin","allow-scripts","allow-top-navigation","allow-top-navigation-by-user-activation","allow-downloads"],H="document-domain; execution-while-not-rendered; execution-while-out-of-viewport; payment; paymentRequest; sync-script;";var J=U("react");var K=["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"];var Q=U("react");var X=U("react"),Y=Symbol("none");var Z=$.join(" ");var ee=(0,N.forwardRef)(function(e,r){var t=e.planId,n=e.theme,o=e.sessionId,i=e.hidePrice,u=i===void 0?!1:i,a=e.skipRedirect,s=a===void 0?!1:a,p=e.onComplete,v=e.onStateChange,y=e.utm,h=e.styles,b=e.prefill,w=e.themeOptions,g=e.hideSubmitButton,P=g===void 0?!1:g,j=e.hideTermsAndConditions,k=j===void 0?!1:j,S=e.hideEmail,_=S===void 0?!1:S,x=e.disableEmail,R=x===void 0?!1:x;var C=(0,N.useMemo)(function(){return{accentColor:m(w===null||w===void 0?void 0:w.accentColor)?w.accentColor:void 0}},[w===null||w===void 0?void 0:w.accentColor]),W=O(t,n,o,void 0,u,s||!!p,y,h,b,C,P,k,_,R),A=(0,N.useRef)(null),I=E((0,N.useState)(480),2),q=I[0],T=I[1];return(0,N.useEffect)(function(){var e=A.current;if(e)return c(e,function(r){switch(r.event){case"resize":{T(r.height);break}case"center":{e.scrollIntoView({block:"center",inline:"center"});break}case"complete":{p&&p(r.plan_id,r.receipt_id);break}case"state":{v&&v(r.state);break}}})},[p,v]),r&&(typeof r=="function"?r({submit:function(e){A.current&&d(A.current,e)},getEmail:function(e){if(!A.current)throw new Error("Whop embedded checkout frame not found");return f(A.current,e)},setEmail:function(e,r){if(!A.current)throw new Error("Whop embedded checkout frame not found");return l(A.current,e,r)}}):r.current={submit:function(e){A.current&&d(A.current,e)},getEmail:function(e){if(!A.current)throw new Error("Whop embedded checkout frame not found");return f(A.current,e)},setEmail:function(e,r){if(!A.current)throw new Error("Whop embedded checkout frame not found");return l(A.current,e,r)}}),N.default.createElement("iframe",{ref:A,allow:H,sandbox:Z,title:"Whop Embedded Checkout",src:W!==null&&W!==void 0?W:void 0,style:{border:"none",height:"".concat(q,"px"),width:"100%",overflow:"hidden"}})});ee.displayName="WhopCheckoutEmbedInner";var er=(0,N.forwardRef)(function(e,r){var t=e.fallback,n=g(e,["fallback"]);return y()?N.default.createElement(ee,w(h({},n),{ref:r})):t!==null&&t!==void 0?t:null});er.displayName="WhopCheckoutEmbed";var et=U("react")})();

package/dist/static/checkout/react/index.mjs

@@ -0,0 +1 @@
+function e(e,r){if(r==null||r>e.length)r=e.length;for(var t=0,n=new Array(r);t<r;t++)n[t]=e[t];return n}function r(e){if(Array.isArray(e))return e}function t(r){if(Array.isArray(r))return e(r)}function n(e,r,t){if(r in e){Object.defineProperty(e,r,{value:t,enumerable:true,configurable:true,writable:true})}else{e[r]=t}return e}function o(e){if(typeof Symbol!=="undefined"&&e[Symbol.iterator]!=null||e["@@iterator"]!=null)return Array.from(e)}function i(e,r){var t=e==null?null:typeof Symbol!=="undefined"&&e[Symbol.iterator]||e["@@iterator"];if(t==null)return;var n=[];var o=true;var i=false;var u,a;try{for(t=t.call(e);!(o=(u=t.next()).done);o=true){n.push(u.value);if(r&&n.length===r)break}}catch(e){i=true;a=e}finally{try{if(!o&&t["return"]!=null)t["return"]()}finally{if(i)throw a}}return n}function u(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function a(){throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function c(e){for(var r=1;r<arguments.length;r++){var t=arguments[r]!=null?arguments[r]:{};var o=Object.keys(t);if(typeof Object.getOwnPropertySymbols==="function"){o=o.concat(Object.getOwnPropertySymbols(t).filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))}o.forEach(function(r){n(e,r,t[r])})}return e}function l(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);if(r){n=n.filter(function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable})}t.push.apply(t,n)}return t}function f(e,r){r=r!=null?r:{};if(Object.getOwnPropertyDescriptors){Object.defineProperties(e,Object.getOwnPropertyDescriptors(r))}else{l(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}function s(e,r){if(e==null)return{};var t=d(e,r);var n,o;if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++){n=i[o];if(r.indexOf(n)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(e,n))continue;t[n]=e[n]}}return t}function d(e,r){if(e==null)return{};var t={};var n=Object.keys(e);var o,i;for(i=0;i<n.length;i++){o=n[i];if(r.indexOf(o)>=0)continue;t[o]=e[o]}return t}function m(e,t){return r(e)||i(e,t)||b(e,t)||u()}function p(e){return t(e)||o(e)||b(e)||a()}function b(r,t){if(!r)return;if(typeof r==="string")return e(r,t);var n=Object.prototype.toString.call(r).slice(8,-1);if(n==="Object"&&r.constructor)n=r.constructor.name;if(n==="Map"||n==="Set")return Array.from(n);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return e(r,t)}import{b as y,c as h,d as v,e as g,f as w,g as O,h as E}from"../chunk-N2KVERZN.mjs";import j,{forwardRef as k,useEffect as S,useMemo as P,useRef as C,useState as A}from"react";import{useSyncExternalStore as I}from"react";function W(){return function(){}}function x(){return I(W,function(){return!0},function(){return!1})}var D=["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"];function N(e){return e?D.includes(e):!1}import{useEffect as R,useMemo as M}from"react";import{useRef as T}from"react";var U=Symbol("none");function V(e){var r=T(U);return r.current===U&&(r.current=e()),r}function _(){for(var e=arguments.length,r=new Array(e),t=0;t<e;t++){r[t]=arguments[t]}var n=V(function(){return w.apply(void 0,p(r))}),o=n.current;return o&&z.apply(void 0,[o].concat(p(r))),o}function z(e){for(var r=arguments.length,t=new Array(r>1?r-1:0),n=1;n<r;n++){t[n-1]=arguments[n]}var o=m(t,12),i=o[0],u=o[1],a=o[2],c=o[3],l=o[4],f=o[5],s=o[6],d=o[7],p=o[8],b=o[9],y=o[10],h=o[11];var v=M(function(){return w(i,u,a,void 0,l,f,s,d,p,b,y,h)},[i,u,a,l,f,s,d,p,b,y,h]);R(function(){e!==v&&process.env.NODE_ENV==="development"&&console.warn("[WhopCheckoutEmbed] iframeUrl changed from ".concat(e," to ").concat(v,". Updating props on the checkout embed is not supported. Please rerender the component."))},[e,v])}var Z=O.join(" ");var B=k(function(e,r){var t=e.planId,n=e.theme,o=e.sessionId,i=e.hidePrice,u=i===void 0?!1:i,a=e.skipRedirect,c=a===void 0?!1:a,l=e.onComplete,f=e.onStateChange,s=e.utm,d=e.styles,p=e.prefill,b=e.themeOptions,w=e.hideSubmitButton,O=w===void 0?!1:w,k=e.hideTermsAndConditions,I=k===void 0?!1:k,W=e.hideEmail,x=W===void 0?!1:W,D=e.disableEmail,R=D===void 0?!1:D;var M=P(function(){return{accentColor:N(b===null||b===void 0?void 0:b.accentColor)?b.accentColor:void 0}},[b===null||b===void 0?void 0:b.accentColor]),T=_(t,n,o,void 0,u,c||!!l,s,d,p,M,O,I,x,R),U=C(null),V=m(A(480),2),z=V[0],B=V[1];return S(function(){var e=U.current;if(e)return y(e,function(r){switch(r.event){case"resize":{B(r.height);break}case"center":{e.scrollIntoView({block:"center",inline:"center"});break}case"complete":{l&&l(r.plan_id,r.receipt_id);break}case"state":{f&&f(r.state);break}}})},[l,f]),r&&(typeof r=="function"?r({submit:function(e){U.current&&g(U.current,e)},getEmail:function(e){if(!U.current)throw new Error("Whop embedded checkout frame not found");return v(U.current,e)},setEmail:function(e,r){if(!U.current)throw new Error("Whop embedded checkout frame not found");return h(U.current,e,r)}}):r.current={submit:function(e){U.current&&g(U.current,e)},getEmail:function(e){if(!U.current)throw new Error("Whop embedded checkout frame not found");return v(U.current,e)},setEmail:function(e,r){if(!U.current)throw new Error("Whop embedded checkout frame not found");return h(U.current,e,r)}}),j.createElement("iframe",{ref:U,allow:E,sandbox:Z,title:"Whop Embedded Checkout",src:T!==null&&T!==void 0?T:void 0,style:{border:"none",height:"".concat(z,"px"),width:"100%",overflow:"hidden"}})});B.displayName="WhopCheckoutEmbedInner";var K=k(function(e,r){var t=e.fallback,n=s(e,["fallback"]);return x()?j.createElement(B,f(c({},n),{ref:r})):t!==null&&t!==void 0?t:null});K.displayName="WhopCheckoutEmbed";import{useRef as $}from"react";function q(){return $(null)}export{K as WhopCheckoutEmbed,q as useCheckoutEmbedControls};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@whop/checkout",
   "description": "Embed Whop checkout on any website",
-  "version": "0.0.37",
+  "version": "0.0.38",
   "repository": {
     "type": "git",
     "url": "https://github.com/whopio/whop-sdk-ts",
@@ -24,26 +24,42 @@
   ],
   "exports": {
     ".": {
+      "types": "./dist/static/checkout/index.d.ts",
       "import": "./dist/static/checkout/index.mjs",
       "require": "./dist/static/checkout/index.cjs",
-      "types": "./dist/static/checkout/index.d.ts",
       "default": "./dist/static/checkout/index.js"
     },
     "./loader": "./dist/static/checkout/loader.js",
+    "./react": {
+      "types": "./dist/static/checkout/react/index.d.ts",
+      "import": "./dist/static/checkout/react/index.mjs",
+      "require": "./dist/static/checkout/react/index.cjs",
+      "default": "./dist/static/checkout/react/index.js"
+    },
     "./util": {
+      "types": "./dist/static/checkout/util.d.ts",
       "import": "./dist/static/checkout/util.mjs",
       "require": "./dist/static/checkout/util.cjs",
-      "types": "./dist/static/checkout/util.d.ts",
       "default": "./dist/static/checkout/util.js"
     }
   },
   "devDependencies": {
     "@swc/core": "1.11.29",
     "@types/node": "latest",
+    "@types/react": "^18.0.0",
+    "react": "^18.0.0",
     "tsup": "8.5.0",
     "typescript": "latest",
     "wrangler": "^4.19.1"
   },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
   "engines": {
     "node": "22.x",
     "pnpm": "9.15.9"