@appfunnel-dev/sdk 0.5.0 → 0.7.0

package/dist/index.js

@@ -1,7 +1,11 @@
-import { createContext, useCallback, useSyncExternalStore, useMemo, useState, useRef, useEffect, useContext } from 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { useNavigation, useResponses } from './chunk-P4SLDMWY.js';
+export { useNavigation, useResponse, useResponses } from './chunk-P4SLDMWY.js';
+import { useFunnelContext } from './chunk-H3KHXZSI.js';
+export { FunnelProvider, registerIntegration } from './chunk-H3KHXZSI.js';
+import { forwardRef, useState, useRef, useEffect, useCallback, useImperativeHandle, useMemo, useSyncExternalStore } from 'react';
 import { loadStripe } from '@stripe/stripe-js';
-import { Elements, useStripe, useElements, PaymentElement } from '@stripe/react-stripe-js';
+import { useStripe, useElements, PaymentElement, EmbeddedCheckoutProvider, EmbeddedCheckout, Elements } from '@stripe/react-stripe-js';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
 // src/config.ts
 function defineConfig(config) {
@@ -10,23 +14,11 @@ function defineConfig(config) {
 function definePage(definition) {
   return definition;
 }
-function registerIntegration(id, loader) {
-}
-var FunnelContext = createContext(null);
-function useFunnelContext() {
-  const ctx = useContext(FunnelContext);
-  if (!ctx) {
-    throw new Error("useFunnelContext must be used within a <FunnelProvider>");
-  }
-  return ctx;
-}
-
-// src/hooks/useVariable.ts
 function useVariable(id) {
   const { variableStore } = useFunnelContext();
   const subscribe = useCallback(
-    (callback) => variableStore.subscribe(callback),
-    [variableStore]
+    (callback) => variableStore.subscribe(callback, { keys: [id] }),
+    [variableStore, id]
   );
   const getSnapshot = useCallback(
     () => variableStore.get(id),
@@ -51,10 +43,106 @@ function useVariables() {
   );
   return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
 }
+
+// src/utils/date.ts
+function toISODate(input) {
+  if (!input || !input.trim()) return "";
+  const s = input.trim();
+  if (/^\d{4}-\d{2}-\d{2}$/.test(s)) return s;
+  if (/^\d{4}-\d{2}-\d{2}T/.test(s)) return s.slice(0, 10);
+  const sepMatch = s.match(/^(\d{1,2})[/\-.](\d{1,2})[/\-.](\d{4})$/);
+  if (sepMatch) {
+    const a = parseInt(sepMatch[1], 10);
+    const b = parseInt(sepMatch[2], 10);
+    const year = sepMatch[3];
+    let month;
+    let day;
+    if (a > 12 && b <= 12) {
+      day = a;
+      month = b;
+    } else if (b > 12 && a <= 12) {
+      month = a;
+      day = b;
+    } else {
+      month = a;
+      day = b;
+    }
+    if (month >= 1 && month <= 12 && day >= 1 && day <= 31) {
+      return `${year}-${String(month).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
+    }
+  }
+  const ymdSlash = s.match(/^(\d{4})[/\-.](\d{1,2})[/\-.](\d{1,2})$/);
+  if (ymdSlash) {
+    const year = ymdSlash[1];
+    const month = parseInt(ymdSlash[2], 10);
+    const day = parseInt(ymdSlash[3], 10);
+    if (month >= 1 && month <= 12 && day >= 1 && day <= 31) {
+      return `${year}-${String(month).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
+    }
+  }
+  if (/^\d{8}$/.test(s)) {
+    const a = parseInt(s.slice(0, 2), 10);
+    const b = parseInt(s.slice(2, 4), 10);
+    const year = s.slice(4, 8);
+    let month;
+    let day;
+    if (a > 12 && b <= 12) {
+      day = a;
+      month = b;
+    } else {
+      month = a;
+      day = b;
+    }
+    if (month >= 1 && month <= 12 && day >= 1 && day <= 31) {
+      return `${year}-${String(month).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
+    }
+  }
+  throw new Error(
+    `[AppFunnel] Invalid date format: "${input}". Expected a date string like MM/DD/YYYY, DD/MM/YYYY, YYYY-MM-DD, or MMDDYYYY.`
+  );
+}
+function toISODateWithFormat(input, format) {
+  if (!input || !input.trim()) return "";
+  const s = input.trim();
+  if (/^\d{4}-\d{2}-\d{2}$/.test(s) || /^\d{4}-\d{2}-\d{2}T/.test(s)) {
+    return s.slice(0, 10);
+  }
+  const digits = s.replace(/[^\d]/g, "");
+  if (format === "YYYY-MM-DD") {
+    const m = s.match(/^(\d{4})[/\-.](\d{1,2})[/\-.](\d{1,2})$/);
+    if (m) return `${m[1]}-${m[2].padStart(2, "0")}-${m[3].padStart(2, "0")}`;
+    if (digits.length === 8) {
+      return `${digits.slice(0, 4)}-${digits.slice(4, 6)}-${digits.slice(6, 8)}`;
+    }
+  }
+  if (format === "MM/DD/YYYY") {
+    const m = s.match(/^(\d{1,2})[/\-.](\d{1,2})[/\-.](\d{4})$/);
+    if (m) return `${m[3]}-${m[1].padStart(2, "0")}-${m[2].padStart(2, "0")}`;
+    if (digits.length === 8) {
+      return `${digits.slice(4, 8)}-${digits.slice(0, 2)}-${digits.slice(2, 4)}`;
+    }
+  }
+  if (format === "DD/MM/YYYY") {
+    const m = s.match(/^(\d{1,2})[/\-.](\d{1,2})[/\-.](\d{4})$/);
+    if (m) return `${m[3]}-${m[2].padStart(2, "0")}-${m[1].padStart(2, "0")}`;
+    if (digits.length === 8) {
+      return `${digits.slice(4, 8)}-${digits.slice(2, 4)}-${digits.slice(0, 2)}`;
+    }
+  }
+  throw new Error(
+    `[AppFunnel] Invalid date format: "${input}". Expected format ${format} (e.g. ${{
+      "MM/DD/YYYY": "03/15/1990 or 03151990",
+      "DD/MM/YYYY": "15/03/1990 or 15031990",
+      "YYYY-MM-DD": "1990-03-15 or 19900315"
+    }[format]}).`
+  );
+}
+
+// src/hooks/useUser.ts
 function useUser() {
-  const { variableStore, tracker } = useFunnelContext();
+  const { variableStore } = useFunnelContext();
   const subscribe = useCallback(
-    (cb) => variableStore.subscribe(cb),
+    (cb) => variableStore.subscribe(cb, { prefix: "user." }),
     [variableStore]
   );
   const getSnapshot = useCallback(
@@ -71,24 +159,23 @@ function useUser() {
       dateOfBirth: variables["user.dateOfBirth"] || "",
       setEmail(email) {
         variableStore.set("user.email", email);
-        tracker.identify(email);
       },
       setName(name) {
         variableStore.set("user.name", name);
       },
       setDateOfBirth(dateOfBirth) {
-        variableStore.set("user.dateOfBirth", dateOfBirth);
+        variableStore.set("user.dateOfBirth", toISODate(dateOfBirth));
       }
     }),
-    [variables, variableStore, tracker]
+    [variables, variableStore]
   );
 }
 function useUserProperty(field) {
   const { variableStore } = useFunnelContext();
   const key = `user.${field}`;
   const subscribe = useCallback(
-    (cb) => variableStore.subscribe(cb),
-    [variableStore]
+    (cb) => variableStore.subscribe(cb, { keys: [key] }),
+    [variableStore, key]
   );
   const getSnapshot = useCallback(
     () => variableStore.get(key) || "",
@@ -101,49 +188,28 @@ function useUserProperty(field) {
   );
   return [value, setValue];
 }
-function useResponse(key) {
+function useDateOfBirth(format = "MM/DD/YYYY") {
   const { variableStore } = useFunnelContext();
-  const prefixedKey = `answers.${key}`;
+  const key = "user.dateOfBirth";
   const subscribe = useCallback(
-    (cb) => variableStore.subscribe(cb),
+    (cb) => variableStore.subscribe(cb, { keys: [key] }),
     [variableStore]
   );
   const getSnapshot = useCallback(
-    () => variableStore.get(prefixedKey),
-    [variableStore, prefixedKey]
+    () => variableStore.get(key) || "",
+    [variableStore]
   );
   const value = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
   const setValue = useCallback(
-    (v) => variableStore.set(prefixedKey, v),
-    [variableStore, prefixedKey]
+    (v) => variableStore.set(key, toISODateWithFormat(v, format)),
+    [variableStore, format]
   );
   return [value, setValue];
 }
-function useResponses() {
-  const { variableStore } = useFunnelContext();
-  const subscribe = useCallback(
-    (cb) => variableStore.subscribe(cb),
-    [variableStore]
-  );
-  const getSnapshot = useCallback(
-    () => variableStore.getState(),
-    [variableStore]
-  );
-  const variables = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-  return useMemo(() => {
-    const result = {};
-    for (const [key, value] of Object.entries(variables)) {
-      if (key.startsWith("answers.")) {
-        result[key.slice(8)] = value;
-      }
-    }
-    return result;
-  }, [variables]);
-}
 function useQueryParams() {
   const { variableStore } = useFunnelContext();
   const subscribe = useCallback(
-    (cb) => variableStore.subscribe(cb),
+    (cb) => variableStore.subscribe(cb, { prefix: "query." }),
     [variableStore]
   );
   const getSnapshot = useCallback(
@@ -165,8 +231,8 @@ function useQueryParam(key) {
   const { variableStore } = useFunnelContext();
   const prefixedKey = `query.${key}`;
   const subscribe = useCallback(
-    (cb) => variableStore.subscribe(cb),
-    [variableStore]
+    (cb) => variableStore.subscribe(cb, { keys: [prefixedKey] }),
+    [variableStore, prefixedKey]
   );
   const getSnapshot = useCallback(
     () => variableStore.get(prefixedKey) || "",
@@ -178,8 +244,8 @@ function useData(key) {
   const { variableStore } = useFunnelContext();
   const prefixedKey = `data.${key}`;
   const subscribe = useCallback(
-    (cb) => variableStore.subscribe(cb),
-    [variableStore]
+    (cb) => variableStore.subscribe(cb, { keys: [prefixedKey] }),
+    [variableStore, prefixedKey]
   );
   const getSnapshot = useCallback(
     () => variableStore.get(prefixedKey),
@@ -250,99 +316,10 @@ function useTranslation() {
   const availableLocales = i18n.getAvailableLocales();
   return { t, locale, setLocale, availableLocales };
 }
-function useNavigation() {
-  const { router, variableStore, tracker } = useFunnelContext();
-  const subscribe = useCallback(
-    (cb) => variableStore.subscribe(cb),
-    [variableStore]
-  );
-  const getSnapshot = useCallback(
-    () => variableStore.getState(),
-    [variableStore]
-  );
-  const variables = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-  const goToNextPage = useCallback(() => {
-    const previousPage = router.getCurrentPage();
-    if (previousPage) {
-      tracker.stopPageTracking();
-    }
-    const nextKey = router.goToNextPage(variables);
-    if (nextKey) {
-      const nextPage = router.getCurrentPage();
-      if (nextPage) {
-        tracker.track("page.view", {
-          pageId: nextPage.key,
-          pageKey: nextPage.key,
-          pageName: nextPage.name
-        });
-        tracker.startPageTracking(nextPage.key);
-      }
-      variableStore.setMany({
-        "page.currentId": nextKey,
-        "page.currentIndex": router.getPageHistory().length,
-        "page.current": router.getPageHistory().length + 1,
-        "page.startedAt": Date.now(),
-        "page.timeOnCurrent": 0
-      });
-    }
-  }, [router, variables, tracker, variableStore]);
-  const goBack = useCallback(() => {
-    tracker.stopPageTracking();
-    const prevKey = router.goBack();
-    if (prevKey) {
-      const page = router.getCurrentPage();
-      if (page) {
-        tracker.track("page.view", {
-          pageId: page.key,
-          pageKey: page.key,
-          pageName: page.name
-        });
-        tracker.startPageTracking(page.key);
-      }
-      variableStore.setMany({
-        "page.currentId": prevKey,
-        "page.currentIndex": router.getPageHistory().length,
-        "page.current": router.getPageHistory().length + 1,
-        "page.startedAt": Date.now(),
-        "page.timeOnCurrent": 0
-      });
-    }
-  }, [router, tracker, variableStore]);
-  const goToPage = useCallback((pageKey) => {
-    tracker.stopPageTracking();
-    const key = router.goToPage(pageKey);
-    if (key) {
-      const page = router.getCurrentPage();
-      if (page) {
-        tracker.track("page.view", {
-          pageId: page.key,
-          pageKey: page.key,
-          pageName: page.name
-        });
-        tracker.startPageTracking(page.key);
-      }
-      variableStore.setMany({
-        "page.currentId": key,
-        "page.currentIndex": router.getPageHistory().length,
-        "page.current": router.getPageHistory().length + 1,
-        "page.startedAt": Date.now(),
-        "page.timeOnCurrent": 0
-      });
-    }
-  }, [router, tracker, variableStore]);
-  return {
-    goToNextPage,
-    goBack,
-    goToPage,
-    currentPage: router.getCurrentPage(),
-    pageHistory: router.getPageHistory(),
-    progress: router.getProgress()
-  };
-}
 function useProducts() {
   const { products, variableStore, selectProduct: ctxSelect } = useFunnelContext();
   const subscribe = useCallback(
-    (cb) => variableStore.subscribe(cb),
+    (cb) => variableStore.subscribe(cb, { keys: ["products.selectedProductId"] }),
     [variableStore]
   );
   const getSnapshot = useCallback(
@@ -372,10 +349,19 @@ function useTracking() {
   );
   return { track, identify };
 }
+var PAYMENT_KEYS = [
+  "card.last4",
+  "card.brand",
+  "card.expMonth",
+  "card.expYear",
+  "payment.loading",
+  "payment.error",
+  "payment.customerId"
+];
 function usePayment() {
-  const { variableStore, tracker } = useFunnelContext();
+  const { variableStore } = useFunnelContext();
   const subscribe = useCallback(
-    (cb) => variableStore.subscribe(cb),
+    (cb) => variableStore.subscribe(cb, { keys: PAYMENT_KEYS }),
     [variableStore]
   );
   const getSnapshot = useCallback(
@@ -388,14 +374,188 @@ function usePayment() {
     const brand = variables["card.brand"] || "";
     const expMonth = variables["card.expMonth"] || 0;
     const expYear = variables["card.expYear"] || 0;
+    const customerId = variables["payment.customerId"] || null;
     return {
-      customerId: tracker.getCustomerId(),
+      customerId,
       isAuthorized: !!last4,
       loading: !!variables["payment.loading"],
       error: variables["payment.error"] || null,
       cardDetails: last4 ? { last4, brand, expMonth, expYear } : null
     };
-  }, [variables, tracker]);
+  }, [variables]);
+}
+var DEVICE_KEYS = [
+  "os.name",
+  "os.timezone",
+  "device.type",
+  "device.isMobile",
+  "device.isTablet",
+  "device.screenWidth",
+  "device.screenHeight",
+  "device.viewportWidth",
+  "device.viewportHeight",
+  "device.colorDepth",
+  "device.pixelRatio",
+  "browser.name",
+  "browser.version",
+  "browser.userAgent",
+  "browser.cookieEnabled",
+  "browser.online",
+  "browser.language"
+];
+function useDeviceInfo() {
+  const { variableStore } = useFunnelContext();
+  const subscribe = useCallback(
+    (cb) => variableStore.subscribe(cb, { keys: DEVICE_KEYS }),
+    [variableStore]
+  );
+  const getSnapshot = useCallback(
+    () => variableStore.getState(),
+    [variableStore]
+  );
+  const variables = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  return useMemo(() => ({
+    os: {
+      name: variables["os.name"] || "",
+      timezone: variables["os.timezone"] || ""
+    },
+    device: {
+      type: variables["device.type"] || "desktop",
+      isMobile: !!variables["device.isMobile"],
+      isTablet: !!variables["device.isTablet"],
+      screenWidth: variables["device.screenWidth"] || 0,
+      screenHeight: variables["device.screenHeight"] || 0,
+      viewportWidth: variables["device.viewportWidth"] || 0,
+      viewportHeight: variables["device.viewportHeight"] || 0,
+      colorDepth: variables["device.colorDepth"] || 24,
+      pixelRatio: variables["device.pixelRatio"] || 1
+    },
+    browser: {
+      name: variables["browser.name"] || "",
+      version: variables["browser.version"] || "",
+      userAgent: variables["browser.userAgent"] || "",
+      cookieEnabled: variables["browser.cookieEnabled"] !== false,
+      online: variables["browser.online"] !== false,
+      language: variables["browser.language"] || "en"
+    }
+  }), [variables]);
+}
+function useSafeArea() {
+  const [insets, setInsets] = useState({ top: 0, right: 0, bottom: 0, left: 0 });
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const el = document.createElement("div");
+    el.style.cssText = [
+      "position:fixed",
+      "top:env(safe-area-inset-top,0px)",
+      "right:env(safe-area-inset-right,0px)",
+      "bottom:env(safe-area-inset-bottom,0px)",
+      "left:env(safe-area-inset-left,0px)",
+      "pointer-events:none",
+      "visibility:hidden",
+      "z-index:-1"
+    ].join(";");
+    document.body.appendChild(el);
+    function read() {
+      const style = getComputedStyle(el);
+      setInsets({
+        top: parseFloat(style.top) || 0,
+        right: parseFloat(style.right) || 0,
+        bottom: parseFloat(style.bottom) || 0,
+        left: parseFloat(style.left) || 0
+      });
+    }
+    read();
+    const observer = new ResizeObserver(read);
+    observer.observe(el);
+    window.addEventListener("resize", read);
+    return () => {
+      observer.disconnect();
+      window.removeEventListener("resize", read);
+      el.remove();
+    };
+  }, []);
+  return insets;
+}
+function useKeyboard() {
+  const [state, setState] = useState({ isOpen: false, height: 0 });
+  const timeoutRef = useRef();
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    if ("virtualKeyboard" in navigator) {
+      const vk = navigator.virtualKeyboard;
+      vk.overlaysContent = true;
+      const handler = () => {
+        const h = vk.boundingRect.height;
+        setState((prev) => {
+          if (prev.height === h && prev.isOpen === h > 0) return prev;
+          return { isOpen: h > 0, height: h };
+        });
+      };
+      vk.addEventListener("geometrychange", handler);
+      handler();
+      return () => vk.removeEventListener("geometrychange", handler);
+    }
+    const vv = window.visualViewport;
+    if (!vv) return;
+    let layoutHeight = window.innerHeight;
+    function compute() {
+      const kbHeight = Math.max(0, layoutHeight - vv.height);
+      const h = kbHeight > 40 ? Math.round(kbHeight) : 0;
+      setState((prev) => {
+        if (prev.height === h && prev.isOpen === h > 0) return prev;
+        return { isOpen: h > 0, height: h };
+      });
+    }
+    function onViewportResize() {
+      compute();
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = setTimeout(compute, 1e3);
+    }
+    function onWindowResize() {
+      layoutHeight = window.innerHeight;
+      compute();
+    }
+    vv.addEventListener("resize", onViewportResize);
+    window.addEventListener("resize", onWindowResize);
+    window.addEventListener("orientationchange", onWindowResize);
+    compute();
+    return () => {
+      clearTimeout(timeoutRef.current);
+      vv.removeEventListener("resize", onViewportResize);
+      window.removeEventListener("resize", onWindowResize);
+      window.removeEventListener("orientationchange", onWindowResize);
+    };
+  }, []);
+  return state;
+}
+var PAGE_KEYS = [
+  "page.currentId",
+  "page.currentIndex",
+  "page.current",
+  "page.total",
+  "page.progressPercentage",
+  "page.startedAt"
+];
+function usePageData() {
+  const { variableStore } = useFunnelContext();
+  const subscribe = useCallback(
+    (cb) => variableStore.subscribe(cb, { keys: PAGE_KEYS }),
+    [variableStore]
+  );
+  const getSnapshot = useCallback(
+    () => variableStore.getState(),
+    [variableStore]
+  );
+  const variables = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  return useMemo(() => ({
+    currentId: variables["page.currentId"] || "",
+    currentIndex: variables["page.currentIndex"] || 0,
+    current: variables["page.current"] || 1,
+    total: variables["page.total"] || 0,
+    progressPercentage: variables["page.progressPercentage"] || 0,
+    startedAt: variables["page.startedAt"] || 0
+  }), [variables]);
 }
 
 // src/hooks/useFunnel.ts
@@ -415,242 +575,282 @@ function useFunnel() {
     payment: usePayment()
   };
 }
-function InnerPaymentForm({
-  paymentMode,
-  validateOnly,
-  onSuccess,
-  onError
-}) {
-  const stripe = useStripe();
-  const elements = useElements();
-  const [error, setError] = useState(null);
-  const { variableStore, campaignId, tracker, apiBaseUrl, products } = useFunnelContext();
-  const handleSubmit = useCallback(async () => {
-    if (!stripe || !elements) {
-      const msg = "Stripe not loaded";
-      setError(msg);
-      onError?.(msg);
-      return;
-    }
-    setError(null);
-    variableStore.set("payment.loading", true);
-    try {
-      const confirmFn = paymentMode === "setup" ? stripe.confirmSetup : stripe.confirmPayment;
-      const confirmResult = await confirmFn({
-        elements,
-        redirect: "if_required",
-        confirmParams: { return_url: window.location.href }
-      });
-      if (confirmResult.error) {
-        const msg = confirmResult.error.message || "Payment failed";
+var API_BASE_URL = "https://api.appfunnel.net";
+var InnerPaymentForm = forwardRef(
+  function InnerPaymentForm2({ paymentMode, validateOnly, onSuccess, onError, onReady, layout }, ref) {
+    const stripe = useStripe();
+    const elements = useElements();
+    const [error, setError] = useState(null);
+    const { variableStore, campaignId, tracker, products } = useFunnelContext();
+    const readyFired = useRef(false);
+    useEffect(() => {
+      if (stripe && elements && !readyFired.current) {
+        readyFired.current = true;
+        onReady?.();
+      }
+    }, [stripe, elements, onReady]);
+    const handleSubmit = useCallback(async () => {
+      if (!stripe || !elements) {
+        const msg = "Stripe not loaded";
         setError(msg);
-        variableStore.set("payment.error", msg);
         onError?.(msg);
         return;
       }
-      tracker.track("checkout.payment_added");
-      if (validateOnly) {
-        const piId = "paymentIntent" in confirmResult ? confirmResult.paymentIntent : void 0;
-        if (!piId?.id) {
-          const msg = "PaymentIntent not found after confirmation";
+      setError(null);
+      variableStore.set("payment.loading", true);
+      try {
+        const confirmFn = paymentMode === "setup" ? stripe.confirmSetup : stripe.confirmPayment;
+        const confirmResult = await confirmFn({
+          elements,
+          redirect: "if_required",
+          confirmParams: { return_url: window.location.href }
+        });
+        if (confirmResult.error) {
+          const msg = confirmResult.error.message || "Payment failed";
           setError(msg);
           variableStore.set("payment.error", msg);
           onError?.(msg);
           return;
         }
-        const response2 = await fetch(
-          `${apiBaseUrl}/campaign/${campaignId}/stripe/validate-card`,
+        tracker.track("checkout.payment_added");
+        if (validateOnly) {
+          const piId = "paymentIntent" in confirmResult ? confirmResult.paymentIntent : void 0;
+          if (!piId?.id) {
+            const msg = "PaymentIntent not found after confirmation";
+            setError(msg);
+            variableStore.set("payment.error", msg);
+            onError?.(msg);
+            return;
+          }
+          const response2 = await fetch(
+            `${API_BASE_URL}/campaign/${campaignId}/stripe/validate-card`,
+            {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({
+                campaignId,
+                sessionId: tracker.getSessionId(),
+                paymentIntentId: piId.id
+              })
+            }
+          );
+          const result2 = await response2.json();
+          if (!result2.success) {
+            const msg = result2.error || "Card validation failed";
+            setError(msg);
+            variableStore.set("payment.error", msg);
+            onError?.(msg);
+            return;
+          }
+          variableStore.setMany({
+            "card.last4": result2.card.last4,
+            "card.brand": result2.card.brand,
+            "card.expMonth": result2.card.expMonth,
+            "card.expYear": result2.card.expYear,
+            "card.funding": result2.card.funding,
+            "payment.error": ""
+          });
+          onSuccess?.();
+          return;
+        }
+        const paymentIntentId = "paymentIntent" in confirmResult ? confirmResult.paymentIntent?.id : void 0;
+        const selectedId = variableStore.get("products.selectedProductId");
+        const product = products.find((p) => p.id === selectedId);
+        if (!product?.stripePriceId) {
+          const msg = "No product selected or missing Stripe price";
+          setError(msg);
+          variableStore.set("payment.error", msg);
+          onError?.(msg);
+          return;
+        }
+        const response = await fetch(
+          `${API_BASE_URL}/campaign/${campaignId}/stripe/purchase`,
           {
             method: "POST",
             headers: { "Content-Type": "application/json" },
             body: JSON.stringify({
               campaignId,
               sessionId: tracker.getSessionId(),
-              paymentIntentId: piId.id
+              stripePriceId: product.stripePriceId,
+              trialPeriodDays: product.hasTrial ? product.trialDays : void 0,
+              onSessionPiId: paymentMode === "payment" ? paymentIntentId : void 0
             })
           }
         );
-        const result2 = await response2.json();
-        if (!result2.success) {
-          const msg = result2.error || "Card validation failed";
+        const result = await response.json();
+        if (result.success) {
+          variableStore.set("payment.error", "");
+          if (result.eventId || result.eventIds?.firstPeriod) {
+            tracker.track("purchase.complete", {
+              amount: product.rawPrice ? product.rawPrice / 100 : 0,
+              currency: product.currencyCode || "USD"
+            });
+          }
+          onSuccess?.();
+        } else {
+          const msg = result.error || "Failed to process payment";
           setError(msg);
           variableStore.set("payment.error", msg);
           onError?.(msg);
-          return;
         }
-        variableStore.setMany({
-          "card.last4": result2.card.last4,
-          "card.brand": result2.card.brand,
-          "card.expMonth": result2.card.expMonth,
-          "card.expYear": result2.card.expYear,
-          "card.funding": result2.card.funding,
-          "payment.error": ""
-        });
-        onSuccess?.();
-        return;
-      }
-      const paymentIntentId = "paymentIntent" in confirmResult ? confirmResult.paymentIntent?.id : void 0;
-      const selectedId = variableStore.get("products.selectedProductId");
-      const product = products.find((p) => p.id === selectedId);
-      if (!product?.stripePriceId) {
-        const msg = "No product selected or missing Stripe price";
+      } catch (err) {
+        const msg = err instanceof Error ? err.message : "An error occurred";
         setError(msg);
         variableStore.set("payment.error", msg);
         onError?.(msg);
-        return;
+      } finally {
+        variableStore.set("payment.loading", false);
       }
-      const variables = variableStore.getState();
-      await tracker.updateUserData(variables);
-      const response = await fetch(
-        `${apiBaseUrl}/campaign/${campaignId}/stripe/purchase`,
-        {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({
-            campaignId,
-            sessionId: tracker.getSessionId(),
-            stripePriceId: product.stripePriceId,
-            trialPeriodDays: product.hasTrial ? product.trialDays : void 0,
-            onSessionPiId: paymentMode === "payment" ? paymentIntentId : void 0
-          })
-        }
-      );
-      const result = await response.json();
-      if (result.success) {
-        variableStore.set("payment.error", "");
-        if (result.eventId || result.eventIds?.firstPeriod) {
-          tracker.track("purchase.complete", {
-            amount: product.rawPrice ? product.rawPrice / 100 : 0,
-            currency: product.currencyCode || "USD"
+    }, [stripe, elements, paymentMode, validateOnly, variableStore, campaignId, tracker, products, onSuccess, onError]);
+    useImperativeHandle(ref, () => ({ submit: handleSubmit }), [handleSubmit]);
+    return /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(PaymentElement, { options: { layout: layout || "tabs" } }),
+      error && /* @__PURE__ */ jsx("div", { style: { color: "#ef4444", fontSize: "14px", marginTop: "12px" }, children: error })
+    ] });
+  }
+);
+var StripePaymentForm = forwardRef(
+  function StripePaymentForm2({
+    productId,
+    mode = "checkout",
+    variant = "elements",
+    onSuccess,
+    onError,
+    onReady,
+    className,
+    appearance,
+    layout
+  }, ref) {
+    const { campaignId, tracker, variableStore, products } = useFunnelContext();
+    const [email] = useVariable("user.email");
+    const validateOnly = mode === "validate-only";
+    const product = useMemo(() => {
+      if (productId) return products.find((p) => p.id === productId) || null;
+      const selectedId = variableStore.get("products.selectedProductId");
+      return products.find((p) => p.id === selectedId) || null;
+    }, [productId, products, variableStore]);
+    const paymentMode = useMemo(() => {
+      if (validateOnly) return "payment";
+      if (product?.hasTrial && !product.paidTrial) return "setup";
+      return "payment";
+    }, [product, validateOnly]);
+    const [stripePromise, setStripePromise] = useState(null);
+    const [clientSecret, setClientSecret] = useState(null);
+    const [error, setError] = useState(null);
+    const [isLoading, setIsLoading] = useState(false);
+    const hasInitialized = useRef(false);
+    useEffect(() => {
+      if (!email || !campaignId || hasInitialized.current) return;
+      if (!product?.storePriceId) return;
+      hasInitialized.current = true;
+      setIsLoading(true);
+      variableStore.set("payment.loading", true);
+      const createIntent = async () => {
+        try {
+          if (variant === "embedded") {
+            const response = await fetch(
+              `${API_BASE_URL}/campaign/${campaignId}/stripe/checkout-session`,
+              {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({
+                  campaignId,
+                  sessionId: tracker.getSessionId(),
+                  customerEmail: email,
+                  priceId: product.storePriceId,
+                  trialPeriodDays: product.hasTrial ? product.trialDays : void 0
+                })
+              }
+            );
+            const result = await response.json();
+            if (!result.success) throw new Error(result.error || "Failed to create checkout session");
+            setStripePromise(loadStripe(result.publishableKey));
+            setClientSecret(result.clientSecret);
+          } else {
+            const endpoint = paymentMode === "setup" ? `/campaign/${campaignId}/stripe/setup-intent` : `/campaign/${campaignId}/stripe/payment-intent`;
+            const body = {
+              campaignId,
+              sessionId: tracker.getSessionId(),
+              customerEmail: email,
+              priceId: product.storePriceId
+            };
+            if (validateOnly) body.validateOnly = true;
+            const response = await fetch(`${API_BASE_URL}${endpoint}`, {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify(body)
+            });
+            const result = await response.json();
+            if (!result.success) throw new Error(result.error || "Failed to create intent");
+            setStripePromise(loadStripe(result.publishableKey));
+            setClientSecret(result.clientSecret);
+            variableStore.set("user.stripeCustomerId", result.customerId);
+          }
+          tracker.track("checkout.start", {
+            productId: product.id,
+            priceId: product.stripePriceId || product.storePriceId,
+            productName: product.displayName
           });
+        } catch (err) {
+          const msg = err instanceof Error ? err.message : "Failed to initialize payment";
+          setError(msg);
+          variableStore.set("payment.error", msg);
+        } finally {
+          setIsLoading(false);
+          variableStore.set("payment.loading", false);
         }
-        onSuccess?.();
-      } else {
-        const msg = result.error || "Failed to process payment";
-        setError(msg);
-        variableStore.set("payment.error", msg);
-        onError?.(msg);
-      }
-    } catch (err) {
-      const msg = err instanceof Error ? err.message : "An error occurred";
-      setError(msg);
-      variableStore.set("payment.error", msg);
-      onError?.(msg);
-    } finally {
-      variableStore.set("payment.loading", false);
+      };
+      createIntent();
+    }, [email, campaignId, product, paymentMode, validateOnly, variant, tracker, variableStore]);
+    if (isLoading) {
+      return /* @__PURE__ */ jsx("div", { className, style: { padding: "20px", textAlign: "center", color: "#6b7280" }, children: "Loading payment form..." });
     }
-  }, [stripe, elements, paymentMode, validateOnly, variableStore, campaignId, tracker, apiBaseUrl, products, onSuccess, onError]);
-  useEffect(() => {
-    if (typeof window !== "undefined") {
-      window.__paymentElementSubmit = handleSubmit;
+    if (!email) {
+      return /* @__PURE__ */ jsx("div", { className, style: { padding: "20px", textAlign: "center", color: "#ef4444", fontSize: "14px" }, children: "Email is required to initialize payment" });
     }
-    return () => {
-      if (typeof window !== "undefined") {
-        delete window.__paymentElementSubmit;
-      }
-    };
-  }, [handleSubmit]);
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx(PaymentElement, { options: { layout: "tabs" } }),
-    error && /* @__PURE__ */ jsx("div", { style: { color: "#ef4444", fontSize: "14px", marginTop: "12px" }, children: error })
-  ] });
-}
-function PaymentForm({
-  productId,
-  mode = "checkout",
-  onSuccess,
-  onError,
-  className,
-  appearance
-}) {
-  const { campaignId, tracker, variableStore, apiBaseUrl, products } = useFunnelContext();
-  const [email] = useVariable("user.email");
-  const validateOnly = mode === "validate-only";
-  const product = useMemo(() => {
-    if (productId) return products.find((p) => p.id === productId) || null;
-    const selectedId = variableStore.get("products.selectedProductId");
-    return products.find((p) => p.id === selectedId) || null;
-  }, [productId, products, variableStore]);
-  const paymentMode = useMemo(() => {
-    if (validateOnly) return "payment";
-    if (product?.hasTrial && !product.paidTrial) return "setup";
-    return "payment";
-  }, [product, validateOnly]);
-  const [stripePromise, setStripePromise] = useState(null);
-  const [clientSecret, setClientSecret] = useState(null);
-  const [error, setError] = useState(null);
-  const [isLoading, setIsLoading] = useState(false);
-  const hasInitialized = useRef(false);
-  useEffect(() => {
-    if (!email || !campaignId || hasInitialized.current) return;
-    if (!product?.storePriceId) return;
-    hasInitialized.current = true;
-    setIsLoading(true);
-    variableStore.set("payment.loading", true);
-    const createIntent = async () => {
-      try {
-        const endpoint = paymentMode === "setup" ? `/campaign/${campaignId}/stripe/setup-intent` : `/campaign/${campaignId}/stripe/payment-intent`;
-        const body = {
-          campaignId,
-          sessionId: tracker.getSessionId(),
-          customerEmail: email,
-          priceId: product.storePriceId
-        };
-        if (validateOnly) body.validateOnly = true;
-        const response = await fetch(`${apiBaseUrl}${endpoint}`, {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify(body)
-        });
-        const result = await response.json();
-        if (!result.success) {
-          throw new Error(result.error || "Failed to create intent");
+    if (error) {
+      return /* @__PURE__ */ jsx("div", { className, style: { padding: "20px", textAlign: "center", color: "#ef4444", fontSize: "14px" }, children: error });
+    }
+    if (!stripePromise || !clientSecret) {
+      return /* @__PURE__ */ jsx("div", { className, style: { padding: "20px", textAlign: "center", color: "#6b7280" }, children: "Initializing payment..." });
+    }
+    if (variant === "embedded") {
+      return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(
+        EmbeddedCheckoutProvider,
+        {
+          stripe: stripePromise,
+          options: {
+            clientSecret,
+            onComplete: () => {
+              tracker.track("purchase.complete", {
+                amount: product?.rawPrice ? product.rawPrice / 100 : 0,
+                currency: product?.currencyCode || "USD"
+              });
+              onSuccess?.();
+            }
+          },
+          children: /* @__PURE__ */ jsx(EmbeddedCheckout, {})
         }
-        setStripePromise(loadStripe(result.publishableKey));
-        setClientSecret(result.clientSecret);
-        variableStore.set("user.stripeCustomerId", result.customerId);
-        tracker.track("checkout.start", {
-          productId: product.id,
-          priceId: product.stripePriceId || product.storePriceId,
-          productName: product.displayName
-        });
-      } catch (err) {
-        const msg = err instanceof Error ? err.message : "Failed to initialize payment";
-        setError(msg);
-        variableStore.set("payment.error", msg);
-      } finally {
-        setIsLoading(false);
-        variableStore.set("payment.loading", false);
-      }
+      ) });
+    }
+    const defaultAppearance = {
+      theme: "stripe",
+      variables: { colorPrimary: "#3b82f6", borderRadius: "8px" }
     };
-    createIntent();
-  }, [email, campaignId, product, paymentMode, validateOnly, tracker, variableStore, apiBaseUrl]);
-  if (isLoading) {
-    return /* @__PURE__ */ jsx("div", { className, style: { padding: "20px", textAlign: "center", color: "#6b7280" }, children: "Loading payment form..." });
-  }
-  if (!email) {
-    return /* @__PURE__ */ jsx("div", { className, style: { padding: "20px", textAlign: "center", color: "#ef4444", fontSize: "14px" }, children: "Email is required to initialize payment" });
-  }
-  if (error) {
-    return /* @__PURE__ */ jsx("div", { className, style: { padding: "20px", textAlign: "center", color: "#ef4444", fontSize: "14px" }, children: error });
-  }
-  if (!stripePromise || !clientSecret) {
-    return /* @__PURE__ */ jsx("div", { className, style: { padding: "20px", textAlign: "center", color: "#6b7280" }, children: "Initializing payment..." });
+    return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(Elements, { stripe: stripePromise, options: { clientSecret, appearance: appearance || defaultAppearance }, children: /* @__PURE__ */ jsx(
+      InnerPaymentForm,
+      {
+        ref,
+        paymentMode,
+        validateOnly,
+        onSuccess,
+        onError,
+        onReady,
+        layout
+      }
+    ) }) });
   }
-  const defaultAppearance = {
-    theme: "stripe",
-    variables: { colorPrimary: "#3b82f6", borderRadius: "8px" }
-  };
-  return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(Elements, { stripe: stripePromise, options: { clientSecret, appearance: appearance || defaultAppearance }, children: /* @__PURE__ */ jsx(
-    InnerPaymentForm,
-    {
-      paymentMode,
-      validateOnly,
-      onSuccess,
-      onError
-    }
-  ) }) });
-}
+);
 function PaddleCheckout({
   productId,
   mode = "overlay",
@@ -715,6 +915,6 @@ function PaddleCheckout({
   return null;
 }
 
-export { PaddleCheckout, PaymentForm, defineConfig, definePage, registerIntegration, useData, useFunnel, useLocale, useNavigation, usePayment, useProducts, useQueryParam, useQueryParams, useResponse, useResponses, useTracking, useTranslation, useUser, useUserProperty, useVariable, useVariables };
+export { PaddleCheckout, StripePaymentForm, defineConfig, definePage, useData, useDateOfBirth, useDeviceInfo, useFunnel, useKeyboard, useLocale, usePageData, usePayment, useProducts, useQueryParam, useQueryParams, useSafeArea, useTracking, useTranslation, useUser, useUserProperty, useVariable, useVariables };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map