@whop/react/dist/checkout/embed.cjs

React SDK for building embedded apps on Whop

"use client";
"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "WhopCheckoutEmbed", {
    enumerable: true,
    get: function() {
        return WhopCheckoutEmbed;
    }
});
const _util = require("@whop/checkout/util");
const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
const _useishydrated = require("../util/use-is-hydrated");
const _colors = require("./colors");
const _util1 = require("./util");
function _getRequireWildcardCache(nodeInterop) {
    if (typeof WeakMap !== "function") return null;
    var cacheBabelInterop = new WeakMap();
    var cacheNodeInterop = new WeakMap();
    return (_getRequireWildcardCache = function(nodeInterop) {
        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
    })(nodeInterop);
}
function _interop_require_wildcard(obj, nodeInterop) {
    if (!nodeInterop && obj && obj.__esModule) {
        return obj;
    }
    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
        return {
            default: obj
        };
    }
    var cache = _getRequireWildcardCache(nodeInterop);
    if (cache && cache.has(obj)) {
        return cache.get(obj);
    }
    var newObj = {
        __proto__: null
    };
    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
    for(var key in obj){
        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
            if (desc && (desc.get || desc.set)) {
                Object.defineProperty(newObj, key, desc);
            } else {
                newObj[key] = obj[key];
            }
        }
    }
    newObj.default = obj;
    if (cache) {
        cache.set(obj, newObj);
    }
    return newObj;
}
function WhopCheckoutEmbedInner({ planId, ref, theme, sessionId, hidePrice = false, skipRedirect = false, onComplete, onStateChange, utm, styles, prefill, themeOptions, hideSubmitButton = false, hideTermsAndConditions = false, hideEmail = false, disableEmail = false }) {
    const resolvedThemeOptions = (0, _react.useMemo)(()=>{
        return {
            accentColor: (0, _colors.isAccentColor)(themeOptions?.accentColor) ? themeOptions.accentColor : undefined
        };
    }, [
        themeOptions?.accentColor
    ]);
    const iframeUrl = (0, _util1.useEmbeddedCheckoutIframeUrl)(planId, theme, sessionId, undefined, hidePrice, skipRedirect || !!onComplete, utm, styles, prefill, resolvedThemeOptions, hideSubmitButton, hideTermsAndConditions, hideEmail, disableEmail);
    const iframeRef = (0, _react.useRef)(null);
    const [height, setHeight] = (0, _react.useState)(480);
    (0, _react.useEffect)(()=>{
        const iframe = iframeRef.current;
        if (!iframe) return;
        return (0, _util.onWhopCheckoutMessage)(iframe, function handleWhopCheckoutMessage(message) {
            switch(message.event){
                case "resize":
                    {
                        setHeight(message.height);
                        break;
                    }
                case "center":
                    {
                        iframe.scrollIntoView({
                            block: "center",
                            inline: "center"
                        });
                        break;
                    }
                case "complete":
                    {
                        if (onComplete) {
                            onComplete(message.plan_id, message.receipt_id);
                        }
                        break;
                    }
                case "state":
                    {
                        if (onStateChange) {
                            onStateChange(message.state);
                        }
                        break;
                    }
            }
        });
    }, [
        onComplete,
        onStateChange
    ]);
    if (ref) {
        ref.current = {
            submit: (opts)=>{
                if (!iframeRef.current) return;
                (0, _util.submitCheckoutFrame)(iframeRef.current, opts);
            },
            getEmail: (timeout)=>{
                if (!iframeRef.current) throw new Error("Whop embedded checkout frame not found");
                return (0, _util.getEmail)(iframeRef.current, timeout);
            },
            setEmail: (email, timeout)=>{
                if (!iframeRef.current) throw new Error("Whop embedded checkout frame not found");
                return (0, _util.setEmail)(iframeRef.current, email, timeout);
            }
        };
    }
    return _react.default.createElement("iframe", {
        ref: iframeRef,
        allow: _util.EMBEDDED_CHECKOUT_IFRAME_ALLOW_STRING,
        sandbox: _util1.EMBEDDED_CHECKOUT_IFRAME_SANDBOX_STRING,
        title: "Whop Embedded Checkout",
        src: iframeUrl,
        style: {
            border: "none",
            height: `${height}px`,
            width: "100%",
            overflow: "hidden"
        }
    });
}
function WhopCheckoutEmbed({ fallback = null, ...props }) {
    const isHydrated = (0, _useishydrated.useIsHydrated)();
    if (!isHydrated) {
        return fallback;
    }
    return _react.default.createElement(WhopCheckoutEmbedInner, props);
}