@flopay/react 0.1.0

package/dist/index.cjs

@@ -0,0 +1,1828 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AddressElement: () => AddressElement,
+  CardCvcElement: () => CardCvcElement,
+  CardElement: () => CardElement,
+  CardExpiryElement: () => CardExpiryElement,
+  CardNumberElement: () => CardNumberElement,
+  CheckoutForm: () => CheckoutForm,
+  FloPayCheckout: () => FloPayCheckout,
+  FloPayProvider: () => FloPayProvider,
+  PayPalButton: () => PayPalButton,
+  PaymentElement: () => PaymentElement,
+  SplitCardForm: () => SplitCardForm,
+  useCheckout: () => useCheckout,
+  useElements: () => useElements,
+  useFloPay: () => useFloPay
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/provider.tsx
+var import_react2 = require("react");
+var import_shared = require("@flopay/shared");
+
+// src/context.ts
+var import_react = require("react");
+var FloPayContext = (0, import_react.createContext)({
+  flopay: null,
+  elements: null,
+  billingApiUrl: ""
+});
+var CheckoutContext = (0, import_react.createContext)({
+  session: null,
+  loading: false,
+  error: null
+});
+
+// src/provider.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function FloPayProvider({
+  flopay: floPayProp,
+  options,
+  children
+}) {
+  const [flopay, setFloPay] = (0, import_react2.useState)(
+    floPayProp instanceof Promise ? null : floPayProp
+  );
+  const [elements, setElements] = (0, import_react2.useState)(null);
+  (0, import_react2.useEffect)(() => {
+    let cancelled = false;
+    if (floPayProp instanceof Promise) {
+      floPayProp.then((instance) => {
+        if (!cancelled) {
+          setFloPay(instance);
+        }
+      });
+    } else {
+      setFloPay(floPayProp);
+    }
+    return () => {
+      cancelled = true;
+    };
+  }, [floPayProp]);
+  (0, import_react2.useEffect)(() => {
+    if (!flopay) {
+      setElements(null);
+      return;
+    }
+    const els = flopay.elements({
+      appearance: options?.appearance,
+      clientSecret: options?.clientSecret,
+      amount: options?.amount,
+      currency: options?.currency,
+      paymentMethodCreation: options?.paymentMethodCreation
+    });
+    setElements(els);
+    return () => {
+      els.destroy();
+    };
+  }, [flopay, options?.appearance, options?.clientSecret, options?.amount, options?.currency]);
+  const resolvedBillingApiUrl = (0, import_shared.resolveBillingApiUrl)(options?.billingApiUrl);
+  const value = (0, import_react2.useMemo)(
+    () => ({ flopay, elements, billingApiUrl: resolvedBillingApiUrl }),
+    [flopay, elements, resolvedBillingApiUrl]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FloPayContext.Provider, { value, children });
+}
+
+// src/flopay-checkout.tsx
+var import_react6 = __toESM(require("react"), 1);
+var import_js = require("@flopay/js");
+var import_shared4 = require("@flopay/shared");
+
+// src/elements.tsx
+var import_react3 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function createElementComponent(elementType, displayName) {
+  function ElementComponent({
+    className,
+    id,
+    style,
+    options,
+    onChange,
+    onReady,
+    onFocus,
+    onBlur,
+    onEscape
+  }) {
+    const containerRef = (0, import_react3.useRef)(null);
+    const elementRef = (0, import_react3.useRef)(null);
+    const { elements } = (0, import_react3.useContext)(FloPayContext);
+    (0, import_react3.useEffect)(() => {
+      if (!elements || !containerRef.current) return;
+      let mounted = true;
+      (async () => {
+        let element = elements.getElement(elementType);
+        if (!element) {
+          element = await elements.create(elementType, options);
+        }
+        if (!mounted || !containerRef.current) {
+          return;
+        }
+        element.mount(containerRef.current);
+        elementRef.current = element;
+        if (onChange) element.on("change", onChange);
+        if (onReady) element.on("ready", onReady);
+        if (onFocus) element.on("focus", onFocus);
+        if (onBlur) element.on("blur", onBlur);
+        if (onEscape) element.on("escape", onEscape);
+      })();
+      return () => {
+        mounted = false;
+        if (elementRef.current) {
+          try {
+            elementRef.current.unmount();
+          } catch {
+          }
+          elementRef.current = null;
+        }
+      };
+    }, [elements]);
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref: containerRef, className, id, style });
+  }
+  ElementComponent.displayName = displayName;
+  return ElementComponent;
+}
+var PaymentElement = createElementComponent("payment", "PaymentElement");
+var CardElement = createElementComponent("card", "CardElement");
+var CardNumberElement = createElementComponent("cardNumber", "CardNumberElement");
+var CardExpiryElement = createElementComponent("cardExpiry", "CardExpiryElement");
+var CardCvcElement = createElementComponent("cardCvc", "CardCvcElement");
+var AddressElement = createElementComponent("address", "AddressElement");
+
+// src/split-card-form.tsx
+var import_react_stripe_js = require("@stripe/react-stripe-js");
+var import_react5 = require("react");
+
+// src/hooks.ts
+var import_react4 = require("react");
+var import_shared2 = require("@flopay/shared");
+function useFloPay() {
+  const ctx = (0, import_react4.useContext)(FloPayContext);
+  return ctx.flopay;
+}
+function useElements() {
+  const ctx = (0, import_react4.useContext)(FloPayContext);
+  return ctx.elements;
+}
+function useCheckout() {
+  return (0, import_react4.useContext)(CheckoutContext);
+}
+function useBillingApiUrl() {
+  const ctx = (0, import_react4.useContext)(FloPayContext);
+  return ctx.billingApiUrl || (0, import_shared2.resolveBillingApiUrl)();
+}
+
+// src/split-card-form.tsx
+var import_shared3 = require("@flopay/shared");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var WALLET_RESUME_KEY = "flopay_wallet_resume";
+function ProcessingOverlay({ status }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: {
+    position: "fixed",
+    inset: 0,
+    background: "rgba(0,0,0,0.35)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 1e3,
+    backdropFilter: "blur(2px)"
+  }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: {
+    background: "white",
+    borderRadius: 12,
+    padding: "2rem 2.5rem",
+    textAlign: "center",
+    boxShadow: "0 8px 32px rgba(0,0,0,0.18)",
+    minWidth: 240,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: 16
+  }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { width: 48, height: 48, position: "relative" }, children: [
+      status === "processing" && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        "svg",
+        {
+          width: "48",
+          height: "48",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          style: { animation: "flopay-spin 0.8s linear infinite" },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "12", cy: "12", r: "10", stroke: "#e5e7eb", strokeWidth: "3" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M4 12a8 8 0 018-8v3a5 5 0 00-5 5H4z", fill: "#4A49FF" })
+          ]
+        }
+      ),
+      status === "success" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { animation: "flopay-pop 0.4s cubic-bezier(0.34,1.56,0.64,1)" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "12", cy: "12", r: "11", fill: "#22c55e" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "path",
+          {
+            d: "M7 12.5l3 3 7-7",
+            stroke: "white",
+            strokeWidth: "2.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            style: { strokeDasharray: 20, strokeDashoffset: 20, animation: "flopay-draw 0.4s 0.15s ease forwards" }
+          }
+        )
+      ] }) }),
+      status === "error" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { animation: "flopay-shake 0.4s ease" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "12", cy: "12", r: "11", fill: "#ef4444" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "path",
+          {
+            d: "M8 8l8 8M16 8l-8 8",
+            stroke: "white",
+            strokeWidth: "2.5",
+            strokeLinecap: "round",
+            style: { strokeDasharray: 12, strokeDashoffset: 12, animation: "flopay-draw 0.3s 0.1s ease forwards" }
+          }
+        )
+      ] }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { style: {
+      fontSize: 14,
+      fontWeight: 600,
+      letterSpacing: "0.05em",
+      color: status === "success" ? "#16a34a" : status === "error" ? "#dc2626" : "#374151"
+    }, children: [
+      status === "processing" && "PROCESSING...",
+      status === "success" && "PAYMENT SUCCESSFUL",
+      status === "error" && "PAYMENT FAILED"
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("style", { children: `
+          @keyframes flopay-spin { to { transform: rotate(360deg); } }
+          @keyframes flopay-pop { 0% { transform: scale(0); } 100% { transform: scale(1); } }
+          @keyframes flopay-draw { to { stroke-dashoffset: 0; } }
+          @keyframes flopay-shake { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-4px); } 40%,80% { transform: translateX(4px); } }
+        ` })
+  ] }) });
+}
+var SplitCardForm = (0, import_react5.forwardRef)(
+  function SplitCardForm2(props, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SplitCardFormInner, { ...props, innerRef: ref });
+  }
+);
+function PayPalButtonInner({
+  sessionId,
+  email,
+  billingApiUrl,
+  onTokenizedBody,
+  onErrorChange,
+  isProcessing = false
+}) {
+  const stripe = (0, import_react_stripe_js.useStripe)();
+  const elements = (0, import_react_stripe_js.useElements)();
+  const [ready, setReady] = (0, import_react5.useState)(false);
+  const [submitting, setSubmitting] = (0, import_react5.useState)(false);
+  const paypalResumeAttempted = (0, import_react5.useRef)(false);
+  const baseUrl = billingApiUrl.replace(/\/+$/, "");
+  (0, import_react5.useEffect)(() => {
+    if (!stripe || paypalResumeAttempted.current) return;
+    const params = new URLSearchParams(window.location.search);
+    const paymentIntentId = params.get("payment_intent");
+    const clientSecret = params.get("payment_intent_client_secret");
+    const redirectStatus = params.get("redirect_status");
+    if (!paymentIntentId || !clientSecret) return;
+    paypalResumeAttempted.current = true;
+    (async () => {
+      try {
+        setSubmitting(true);
+        if (redirectStatus === "failed") {
+          onErrorChange?.("PayPal payment was declined. Please try again.");
+          return;
+        }
+        const { paymentIntent, error } = await stripe.retrievePaymentIntent(clientSecret);
+        if (error) {
+          onErrorChange?.(error.message ?? "Failed to retrieve PayPal payment status.");
+          return;
+        }
+        if (paymentIntent && (paymentIntent.status === "requires_capture" || paymentIntent.status === "succeeded")) {
+          const paymentMethodId = typeof paymentIntent.payment_method === "string" ? paymentIntent.payment_method : paymentIntent.payment_method?.id;
+          onTokenizedBody({
+            id: paymentMethodId ?? paymentIntent.id,
+            type: "card",
+            threeDSecureActionResultTokenId: paymentIntent.id,
+            isPaypal: true
+          });
+          const url = new URL(window.location.href);
+          url.searchParams.delete("payment_intent");
+          url.searchParams.delete("payment_intent_client_secret");
+          url.searchParams.delete("redirect_status");
+          window.history.replaceState({}, "", url.toString());
+        } else {
+          onErrorChange?.("PayPal payment was not completed. Please try again.");
+        }
+      } catch (err) {
+        onErrorChange?.(err instanceof Error ? err.message : "Failed to complete PayPal payment.");
+      } finally {
+        setSubmitting(false);
+      }
+    })();
+  }, [stripe, onTokenizedBody, onErrorChange]);
+  const handlePayPalConfirm = (0, import_react5.useCallback)(async (_event) => {
+    if (!stripe || !elements) return;
+    try {
+      setSubmitting(true);
+      onErrorChange?.(null);
+      if (!sessionId || !email) {
+        throw new Error("Missing sessionId or email for PayPal payment");
+      }
+      const createPM = stripe.createPaymentMethod;
+      const { error: pmError, paymentMethod } = await createPM({ type: "paypal" });
+      if (pmError) {
+        console.warn("[FloPay] Could not create PayPal PM upfront:", pmError.message);
+      }
+      const intentResponse = await fetch(`${baseUrl}/v1/checkouts/payments/intents`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          sessionId,
+          email,
+          paymentMethodType: paymentMethod?.id ?? "paypal",
+          isPaypal: "true"
+        })
+      });
+      if (!intentResponse.ok) throw new Error("Failed to create payment intent");
+      const intentJson = await intentResponse.json();
+      const intentClientSecret = intentJson.data?.id;
+      if (!intentClientSecret) throw new Error("No client_secret in payment intent response");
+      const confirmParams = {
+        return_url: window.location.href
+      };
+      if (paymentMethod?.id) {
+        confirmParams["payment_method"] = paymentMethod.id;
+      }
+      const { error: confirmError, paymentIntent } = await stripe.confirmPayment({
+        clientSecret: intentClientSecret,
+        confirmParams,
+        redirect: "if_required"
+      });
+      if (confirmError) {
+        onErrorChange?.(confirmError.message ?? "PayPal payment failed.");
+        return;
+      }
+      const confirmedPmId = typeof paymentIntent?.payment_method === "string" ? paymentIntent.payment_method : paymentIntent?.payment_method?.id;
+      onTokenizedBody({
+        id: confirmedPmId ?? paymentIntent?.id,
+        type: "card",
+        threeDSecureActionResultTokenId: paymentIntent?.id,
+        isPaypal: true
+      });
+    } catch (err) {
+      onErrorChange?.(err instanceof Error ? err.message : "PayPal payment failed. Please try again.");
+    } finally {
+      setSubmitting(false);
+    }
+  }, [stripe, elements, sessionId, email, baseUrl, onTokenizedBody, onErrorChange]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { marginBottom: ready ? "0.5rem" : 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_react_stripe_js.ExpressCheckoutElement,
+      {
+        onReady: () => setReady(true),
+        onLoadError: () => {
+        },
+        onConfirm: handlePayPalConfirm,
+        options: {
+          buttonType: { paypal: "paypal" },
+          paymentMethods: {
+            applePay: "never",
+            googlePay: "never",
+            paypal: "auto",
+            link: "never"
+          }
+        }
+      }
+    ) }),
+    submitting && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ProcessingOverlay, { status: "processing" })
+  ] });
+}
+function WalletButtonInner({
+  sessionId,
+  email,
+  billingApiUrl,
+  showApplePay = true,
+  showGooglePay = true,
+  onTokenizedBody,
+  onErrorChange
+}) {
+  const stripe = (0, import_react_stripe_js.useStripe)();
+  const elements = (0, import_react_stripe_js.useElements)();
+  const [ready, setReady] = (0, import_react5.useState)(false);
+  const [submitting, setSubmitting] = (0, import_react5.useState)(false);
+  const baseUrl = billingApiUrl.replace(/\/+$/, "");
+  const handleWalletConfirm = (0, import_react5.useCallback)(
+    async (_event) => {
+      if (!stripe || !elements) return;
+      try {
+        setSubmitting(true);
+        onErrorChange?.(null);
+        const { error: submitError } = await elements.submit();
+        if (submitError) {
+          onErrorChange?.(submitError.message ?? "Wallet payment failed.");
+          return;
+        }
+        const { error: pmError, paymentMethod } = await stripe.createPaymentMethod({ elements });
+        if (pmError || !paymentMethod) {
+          onErrorChange?.(pmError?.message ?? "Failed to create payment method.");
+          return;
+        }
+        if (!sessionId || !email) {
+          throw new Error("Missing sessionId or email for wallet payment");
+        }
+        const intentResponse = await fetch(`${baseUrl}/v1/checkouts/payments/intents`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            sessionId,
+            email,
+            paymentMethodType: paymentMethod.id,
+            isPaypal: false
+          })
+        });
+        if (!intentResponse.ok) throw new Error("Failed to create payment intent");
+        const intentJson = await intentResponse.json();
+        const intentClientSecret = intentJson.data?.id;
+        if (!intentClientSecret) throw new Error("No client_secret in payment intent response");
+        const { error: confirmError, paymentIntent } = await stripe.confirmCardPayment(
+          intentClientSecret,
+          { payment_method: paymentMethod.id }
+        );
+        if (confirmError) {
+          onErrorChange?.(confirmError.message ?? "Wallet payment failed.");
+          return;
+        }
+        onTokenizedBody({
+          id: paymentMethod.id,
+          type: "card",
+          threeDSecureActionResultTokenId: paymentIntent?.id
+        });
+      } catch (err) {
+        onErrorChange?.(err instanceof Error ? err.message : "Wallet payment failed. Please try again.");
+      } finally {
+        setSubmitting(false);
+      }
+    },
+    [stripe, elements, sessionId, email, baseUrl, onTokenizedBody, onErrorChange]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { marginBottom: ready ? "0.5rem" : 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_react_stripe_js.ExpressCheckoutElement,
+      {
+        onReady: () => setReady(true),
+        onLoadError: () => {
+        },
+        onConfirm: handleWalletConfirm,
+        options: {
+          buttonType: { applePay: "plain", googlePay: "plain" },
+          paymentMethods: {
+            applePay: showApplePay ? "auto" : "never",
+            googlePay: showGooglePay ? "auto" : "never",
+            paypal: "never",
+            link: "never"
+          },
+          layout: { overflow: "never" }
+        }
+      }
+    ) }),
+    submitting && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ProcessingOverlay, { status: "processing" })
+  ] });
+}
+function SplitCardFormInner({
+  sessionId,
+  billingApiUrl,
+  email,
+  userId,
+  onComplete,
+  onError,
+  onTokenizedBody,
+  firstName,
+  lastName,
+  chv,
+  submitLabel = "CONFIRM PAYMENT",
+  className,
+  children,
+  isProcessing: externalProcessing,
+  error: externalError,
+  onErrorChange,
+  onFirstNameChange,
+  onLastNameChange,
+  showPayPal = true,
+  showApplePay = true,
+  showGooglePay = true,
+  totalAmount = 0,
+  currency = "usd",
+  innerRef
+}) {
+  const flopay = useFloPay();
+  const elements = useElements();
+  const contextBillingUrl = useBillingApiUrl();
+  const [processing, setProcessing] = (0, import_react5.useState)(false);
+  const [error, setError] = (0, import_react5.useState)(null);
+  const [is3DSActive, setIs3DSActive] = (0, import_react5.useState)(false);
+  const [fullName, setFullName] = (0, import_react5.useState)("");
+  const [formReady, setFormReady] = (0, import_react5.useState)(false);
+  const [overlayStatus, setOverlayStatus] = (0, import_react5.useState)(null);
+  const processingRef = (0, import_react5.useRef)(false);
+  const resolvedBillingApiUrl = billingApiUrl || contextBillingUrl;
+  const displayError = externalError ?? error;
+  const isSubmitting = externalProcessing ?? processing;
+  const isSelfContained = !onTokenizedBody;
+  const baseUrl = resolvedBillingApiUrl.replace(/\/+$/, "");
+  const stripeInstance = (0, import_react5.useMemo)(() => {
+    if (!flopay) return null;
+    return flopay.getRawProvider();
+  }, [flopay]);
+  const amountInCents = totalAmount || 100;
+  const walletOptions = (0, import_react5.useMemo)(() => ({
+    mode: "payment",
+    amount: amountInCents,
+    currency: currency.toLowerCase(),
+    paymentMethodCreation: "manual",
+    captureMethod: "manual"
+  }), [amountInCents, currency]);
+  const paypalOptions = (0, import_react5.useMemo)(() => ({
+    mode: "payment",
+    amount: amountInCents,
+    currency: currency.toLowerCase(),
+    captureMethod: "manual"
+  }), [amountInCents, currency]);
+  const updateError = (0, import_react5.useCallback)(
+    (err) => {
+      setError(err);
+      onErrorChange?.(err);
+    },
+    [onErrorChange]
+  );
+  const showWallets = showApplePay || showGooglePay;
+  const handleNameChange = (0, import_react5.useCallback)((value) => {
+    setFullName(value);
+    const parts = value.trim().split(/\s+/);
+    onFirstNameChange?.(parts[0] ?? "");
+    onLastNameChange?.(parts.length > 1 ? parts.slice(1).join(" ") : "");
+  }, [onFirstNameChange, onLastNameChange]);
+  const processPaymentInternal = (0, import_react5.useCallback)(
+    async (tokenizedBody) => {
+      if (processingRef.current) return;
+      processingRef.current = true;
+      setProcessing(true);
+      setOverlayStatus("processing");
+      updateError(null);
+      try {
+        const response = await fetch(`${baseUrl}/v1/checkouts/sessions/process`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            "x-user-id": userId ?? ""
+          },
+          body: JSON.stringify({
+            sessionId,
+            tokenizedData: tokenizedBody,
+            accountData: {
+              userId: userId ?? "",
+              email: email ?? "",
+              firstName: firstName ?? fullName.trim().split(/\s+/)[0] ?? "",
+              lastName: lastName ?? fullName.trim().split(/\s+/).slice(1).join(" ") ?? ""
+            },
+            chv
+          })
+        });
+        if (response.ok) {
+          setOverlayStatus("success");
+          await new Promise((r) => setTimeout(r, 1200));
+          onComplete?.({
+            status: "succeeded",
+            paymentIntentId: tokenizedBody.threeDSecureActionResultTokenId
+          });
+          return;
+        }
+        const json = await response.json().catch(() => null);
+        if (json?.type === "3ds_required") {
+          const secret = json["threeDSecureToken"];
+          if (!flopay || !secret) {
+            setOverlayStatus("error");
+            updateError("3DS authentication required but no token provided.");
+            return;
+          }
+          setIs3DSActive(true);
+          try {
+            const result = await flopay.confirmPayment({
+              clientSecret: secret,
+              returnUrl: window.location.href
+            });
+            if (result.error) {
+              setOverlayStatus("error");
+              updateError(result.error.message);
+              onError?.(result.error);
+              return;
+            }
+            if (result.status === "succeeded" || result.status === "processing") {
+              processingRef.current = false;
+              await processPaymentInternal({
+                id: result.paymentIntentId,
+                type: "card",
+                threeDSecureActionResultTokenId: result.paymentIntentId
+              });
+            }
+          } finally {
+            setIs3DSActive(false);
+          }
+          return;
+        }
+        if (json?.type === "paypal_redirect_required") {
+          const secret = json["threeDSecureToken"];
+          const savedPmId = json["paymentMethodId"] || tokenizedBody.id || "";
+          if (!flopay || !secret) {
+            setOverlayStatus("error");
+            updateError("PayPal authorization required but no token provided.");
+            return;
+          }
+          try {
+            const stripeInstance2 = flopay.getRawProvider();
+            if (!stripeInstance2) {
+              updateError("Payment provider not available.");
+              return;
+            }
+            const confirmParams = {
+              return_url: window.location.href
+            };
+            if (savedPmId) {
+              confirmParams["payment_method"] = savedPmId;
+            }
+            const { error: confirmError } = await stripeInstance2.confirmPayment({
+              clientSecret: secret,
+              confirmParams,
+              redirect: "if_required"
+            });
+            if (confirmError) {
+              setOverlayStatus("error");
+              updateError(confirmError.message ?? "PayPal payment failed.");
+            }
+          } catch (err) {
+            setOverlayStatus("error");
+            updateError(err instanceof Error ? err.message : "PayPal authorization failed.");
+          }
+          return;
+        }
+        setOverlayStatus("error");
+        updateError(json?.message ?? "Payment failed. Please try again.");
+        await new Promise((r) => setTimeout(r, 1500));
+      } catch (err) {
+        setOverlayStatus("error");
+        updateError(err instanceof Error ? err.message : "An unexpected error occurred");
+        await new Promise((r) => setTimeout(r, 1500));
+      } finally {
+        setProcessing(false);
+        setOverlayStatus(null);
+        processingRef.current = false;
+      }
+    },
+    [baseUrl, sessionId, userId, email, firstName, lastName, fullName, chv, flopay, onComplete, onError, updateError]
+  );
+  const dispatchTokenizedBody = (0, import_react5.useCallback)(
+    (tokenizedBody) => {
+      if (onTokenizedBody) {
+        onTokenizedBody(tokenizedBody);
+      } else {
+        processPaymentInternal(tokenizedBody);
+      }
+    },
+    [onTokenizedBody, processPaymentInternal]
+  );
+  (0, import_react5.useImperativeHandle)(innerRef, () => ({
+    async handleNextAction(secret) {
+      if (!flopay) return;
+      setIs3DSActive(true);
+      try {
+        const result = await flopay.confirmPayment({
+          clientSecret: secret,
+          returnUrl: window.location.href
+        });
+        if (result.error) {
+          updateError(result.error.message);
+          onError?.(result.error);
+        } else if (result.status === "succeeded" || result.status === "processing") {
+          dispatchTokenizedBody({
+            id: result.paymentIntentId,
+            type: "card",
+            threeDSecureActionResultTokenId: result.paymentIntentId
+          });
+        }
+      } catch (err) {
+        updateError(err instanceof Error ? err.message : "Payment authentication failed.");
+      } finally {
+        setIs3DSActive(false);
+      }
+    }
+  }), [flopay, dispatchTokenizedBody, onError, updateError]);
+  (0, import_react5.useEffect)(() => {
+    if (typeof window === "undefined") return;
+    const stored = localStorage.getItem(WALLET_RESUME_KEY);
+    if (!stored) return;
+    try {
+      const payload = JSON.parse(stored);
+      if (payload.sessionId === sessionId) {
+        localStorage.removeItem(WALLET_RESUME_KEY);
+        dispatchTokenizedBody({
+          id: payload.tokenId,
+          type: payload.tokenType,
+          threeDSecureActionResultTokenId: payload.paymentIntentId
+        });
+      }
+    } catch {
+      localStorage.removeItem(WALLET_RESUME_KEY);
+    }
+  }, [sessionId, dispatchTokenizedBody]);
+  const handleSubmit = (0, import_react5.useCallback)(
+    async (e) => {
+      e.preventDefault();
+      if (!flopay || !elements || isSubmitting || processingRef.current) return;
+      setProcessing(true);
+      setOverlayStatus("processing");
+      updateError(null);
+      let handedOff = false;
+      try {
+        const submitResult = await flopay.submitElements();
+        if (submitResult.error) {
+          updateError(submitResult.error.message);
+          onError?.(submitResult.error);
+          return;
+        }
+        const pmResult = await flopay.createPaymentMethod();
+        if (pmResult.error || !pmResult.paymentMethodId) {
+          updateError(pmResult.error?.message ?? "Failed to create payment method.");
+          return;
+        }
+        if (!sessionId || !email) {
+          throw new import_shared3.FloPayError("Missing sessionId or email", "validation_error");
+        }
+        const intentResponse = await fetch(`${baseUrl}/v1/checkouts/payments/intents`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            sessionId,
+            email,
+            paymentMethodType: pmResult.paymentMethodId,
+            isPaypal: false
+          })
+        });
+        if (!intentResponse.ok) throw new import_shared3.FloPayError("Failed to create payment intent", "api_error");
+        const intentJson = await intentResponse.json();
+        const intentClientSecret = intentJson.data?.id;
+        if (!intentClientSecret) throw new import_shared3.FloPayError("No client_secret in payment intent response", "api_error");
+        const confirmResult = await flopay.confirmCardPayment({
+          clientSecret: intentClientSecret,
+          paymentMethodId: pmResult.paymentMethodId
+        });
+        if (confirmResult.error) {
+          setOverlayStatus("error");
+          updateError(confirmResult.error.message);
+          await new Promise((r) => setTimeout(r, 1500));
+          return;
+        }
+        handedOff = isSelfContained;
+        dispatchTokenizedBody({
+          id: pmResult.paymentMethodId,
+          type: "card",
+          threeDSecureActionResultTokenId: confirmResult.paymentIntentId
+        });
+      } catch (err) {
+        setOverlayStatus("error");
+        updateError(err instanceof Error ? err.message : "An unexpected error occurred");
+        await new Promise((r) => setTimeout(r, 1500));
+      } finally {
+        if (!handedOff) {
+          setProcessing(false);
+          setOverlayStatus(null);
+        }
+      }
+    },
+    [flopay, elements, isSubmitting, sessionId, email, baseUrl, isSelfContained, dispatchTokenizedBody, onError, updateError]
+  );
+  const isReady = flopay !== null && elements !== null;
+  if (!isReady) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
+    overlayStatus && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ProcessingOverlay, { status: overlayStatus }),
+    showWallets && stripeInstance && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_stripe_js.Elements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      WalletButtonInner,
+      {
+        sessionId,
+        email,
+        billingApiUrl: resolvedBillingApiUrl,
+        showApplePay,
+        showGooglePay,
+        onTokenizedBody: dispatchTokenizedBody,
+        onErrorChange: updateError
+      }
+    ) }),
+    showPayPal && stripeInstance && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_stripe_js.Elements, { stripe: stripeInstance, options: paypalOptions, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      PayPalButtonInner,
+      {
+        sessionId,
+        email,
+        billingApiUrl: resolvedBillingApiUrl,
+        onTokenizedBody: dispatchTokenizedBody,
+        onErrorChange: updateError,
+        isProcessing: isSubmitting
+      }
+    ) }),
+    (showWallets && stripeInstance || showPayPal && stripeInstance) && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: {
+      display: "flex",
+      alignItems: "center",
+      gap: "0.75rem",
+      margin: "0.5rem 0 0.75rem",
+      color: "#999",
+      fontSize: "0.85rem"
+    }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "or pay with card" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { backgroundColor: "#EDEDFF", borderRadius: "8px", padding: "1rem" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { textAlign: "center", fontWeight: 600, fontSize: "1.1rem", padding: "0.5rem 0", color: "#262833" }, children: "Secure card checkout" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: {
+        backgroundColor: "white",
+        border: "1px solid #A4A4FF",
+        borderTopLeftRadius: "8px",
+        borderTopRightRadius: "8px",
+        padding: "10px"
+      }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CardNumberElement, { onReady: () => setFormReady(true) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: {
+          flex: 1,
+          backgroundColor: "white",
+          border: "1px solid #A4A4FF",
+          borderTop: "none",
+          borderRight: "none",
+          borderBottomLeftRadius: "8px",
+          padding: "10px"
+        }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CardExpiryElement, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: {
+          flex: 1,
+          backgroundColor: "white",
+          border: "1px solid #A4A4FF",
+          borderTop: "none",
+          borderBottomRightRadius: "8px",
+          padding: "10px"
+        }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CardCvcElement, {}) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: {
+        backgroundColor: "white",
+        border: "1px solid #A4A4FF",
+        borderRadius: "8px",
+        marginTop: "0.5rem",
+        padding: "10px"
+      }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "input",
+        {
+          placeholder: "Full Name on Card",
+          autoComplete: "cc-name",
+          value: fullName,
+          onChange: (e) => handleNameChange(e.target.value),
+          disabled: isSubmitting,
+          required: true,
+          style: {
+            width: "100%",
+            border: "none",
+            outline: "none",
+            fontSize: "16px",
+            fontFamily: "Poppins, sans-serif",
+            color: "#262833"
+          }
+        }
+      ) }),
+      displayError && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { role: "alert", "data-testid": "flopay-error", style: { color: "red", margin: "0.75rem 0", fontSize: "0.9rem" }, children: displayError }),
+      children ?? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "button",
+        {
+          type: "submit",
+          disabled: !formReady || isSubmitting,
+          "data-testid": "flopay-submit",
+          style: {
+            width: "100%",
+            padding: "0.875rem",
+            marginTop: "1rem",
+            backgroundColor: "#4A49FF",
+            color: "white",
+            border: "none",
+            borderRadius: "8px",
+            fontSize: "1rem",
+            fontWeight: 600,
+            cursor: !formReady || isSubmitting ? "not-allowed" : "pointer",
+            opacity: !formReady || isSubmitting ? 0.5 : 1
+          },
+          children: isSubmitting ? "PROCESSING..." : submitLabel
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: {
+        backgroundColor: "#EFF9F0",
+        borderRadius: "8px",
+        padding: "0.75rem",
+        marginTop: "0.75rem",
+        textAlign: "center",
+        fontSize: "0.85rem",
+        fontWeight: 600,
+        color: "#7DAD3A"
+      }, children: "Secure Card Checkout" })
+    ] })
+  ] });
+}
+
+// src/flopay-checkout.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function FloPayCheckout({
+  sessionId,
+  billingApiUrl,
+  appearance,
+  locale,
+  fallbackPublishableKey,
+  loading: loadingNode,
+  error: errorNode,
+  onComplete,
+  onError,
+  showPayPal = true,
+  showApplePay = true,
+  showGooglePay = true,
+  submitLabel,
+  className,
+  children,
+  checkoutMode: checkoutModeProp,
+  confirmLabel,
+  renderConfirmButton,
+  onSessionCompleted
+}) {
+  const resolvedBillingUrl = (0, import_shared4.resolveBillingApiUrl)(billingApiUrl);
+  const [unified, setUnified] = (0, import_react6.useState)(null);
+  const [flopay, setFloPay] = (0, import_react6.useState)(null);
+  const flopayRef = (0, import_react6.useRef)(null);
+  const [session, setSession] = (0, import_react6.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react6.useState)(true);
+  const [loadError, setLoadError] = (0, import_react6.useState)(null);
+  const [currentMode, setCurrentMode] = (0, import_react6.useState)("full");
+  const [confirmProcessing, setConfirmProcessing] = (0, import_react6.useState)(false);
+  const [modeError, setModeError] = (0, import_react6.useState)(null);
+  const autoCheckoutAttempted = (0, import_react6.useRef)(false);
+  const processPaymentForMode = (0, import_react6.useCallback)(
+    async (sess) => {
+      const baseUrl = resolvedBillingUrl.replace(/\/+$/, "");
+      const response = await fetch(`${baseUrl}/v1/checkouts/sessions/process`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "x-user-id": sess.customer?.id ?? ""
+        },
+        body: JSON.stringify({
+          sessionId,
+          tokenizedData: { id: void 0 },
+          accountData: {
+            userId: sess.customer?.id ?? "",
+            email: sess.customer?.email ?? "",
+            firstName: sess.customer?.firstName ?? "",
+            lastName: sess.customer?.lastName ?? ""
+          }
+        })
+      });
+      if (response.ok) {
+        onComplete?.({ status: "succeeded" });
+        return null;
+      }
+      const json = await response.json().catch(() => null);
+      if ((json?.type === "paypal_redirect_required" || json?.type === "3ds_required") && json?.threeDSecureToken) {
+        return {
+          type: json.type,
+          threeDSecureToken: json.threeDSecureToken,
+          paymentMethodId: json.paymentMethodId
+        };
+      }
+      throw new import_shared4.FloPayError(
+        json?.message ?? "Payment failed. Please try again.",
+        "api_error"
+      );
+    },
+    [resolvedBillingUrl, sessionId, onComplete]
+  );
+  (0, import_react6.useEffect)(() => {
+    let cancelled = false;
+    setIsLoading(true);
+    setLoadError(null);
+    async function init() {
+      try {
+        const api = new import_js.PaymentAPI(resolvedBillingUrl);
+        const result = await api.getUnifiedCheckoutSession(sessionId);
+        if (cancelled) return;
+        setUnified(result);
+        const sess = result.data.session ?? null;
+        setSession(sess);
+        if (!sess) {
+          throw new import_shared4.FloPayError("No session data returned", "api_error");
+        }
+        if (sess.status === "complete") {
+          setIsLoading(false);
+          onSessionCompleted?.(sess.successUrl ?? "");
+          return;
+        }
+        const effectiveMode = checkoutModeProp ?? sess.checkoutMode ?? "full";
+        setCurrentMode(effectiveMode);
+        const hasPayPalRedirectParams = typeof window !== "undefined" && new URLSearchParams(window.location.search).has("payment_intent");
+        if (effectiveMode === "auto" && !autoCheckoutAttempted.current && !hasPayPalRedirectParams) {
+          autoCheckoutAttempted.current = true;
+          const stripeInitPromise = initStripe(result, sess);
+          try {
+            const redirectResult = await processPaymentForMode(sess);
+            if (!redirectResult) {
+              if (!cancelled) setIsLoading(false);
+              return;
+            }
+            if (cancelled) return;
+            await stripeInitPromise;
+            if (redirectResult.type === "paypal_redirect_required") {
+              const stripeRef = flopayRef.current;
+              if (stripeRef) {
+                const rawStripe = stripeRef.getRawProvider();
+                if (rawStripe) {
+                  const confirmParams = {
+                    return_url: window.location.href
+                  };
+                  if (redirectResult.paymentMethodId) {
+                    confirmParams["payment_method"] = redirectResult.paymentMethodId;
+                  }
+                  await rawStripe.confirmPayment({
+                    clientSecret: redirectResult.threeDSecureToken,
+                    confirmParams,
+                    redirect: "if_required"
+                  });
+                  if (!cancelled) setIsLoading(false);
+                  return;
+                }
+              }
+            }
+            if (!cancelled) {
+              setCurrentMode("full");
+              setIsLoading(false);
+            }
+            return;
+          } catch {
+            if (cancelled) return;
+            setCurrentMode("full");
+            await stripeInitPromise;
+            if (!cancelled) setIsLoading(false);
+            return;
+          }
+        }
+        await initStripe(result, sess);
+        if (!cancelled) setIsLoading(false);
+      } catch (err) {
+        if (cancelled) return;
+        const floPayErr = err instanceof import_shared4.FloPayError ? err : new import_shared4.FloPayError(
+          err instanceof Error ? err.message : "Failed to initialize checkout",
+          "api_error"
+        );
+        setLoadError(floPayErr);
+        setIsLoading(false);
+      }
+    }
+    async function initStripe(result, _sess) {
+      let publishableKey;
+      if (result.provider === "stripe") {
+        publishableKey = result.data.stripe?.publishableKey;
+      }
+      if (!publishableKey) publishableKey = fallbackPublishableKey;
+      if (!publishableKey) {
+        throw new import_shared4.FloPayError(
+          "No publishable key found in session response. Provide a fallbackPublishableKey prop or ensure the session includes gatewayData.publishableKey.",
+          "validation_error"
+        );
+      }
+      const instance = await (0, import_js.loadFloPay)(publishableKey, {
+        billingApiUrl: resolvedBillingUrl,
+        locale
+      });
+      flopayRef.current = instance;
+      setFloPay(instance);
+    }
+    init();
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    sessionId,
+    resolvedBillingUrl,
+    fallbackPublishableKey,
+    locale,
+    checkoutModeProp,
+    onSessionCompleted,
+    processPaymentForMode
+  ]);
+  const handleConfirmCheckout = (0, import_react6.useCallback)(async () => {
+    if (confirmProcessing || !session) return;
+    setConfirmProcessing(true);
+    setModeError(null);
+    try {
+      await processPaymentForMode(session);
+    } catch (err) {
+      const floPayErr = err instanceof import_shared4.FloPayError ? err : new import_shared4.FloPayError(
+        err instanceof Error ? err.message : "Payment failed",
+        "api_error"
+      );
+      setModeError(floPayErr.message);
+      onError?.(floPayErr);
+      setCurrentMode("full");
+    } finally {
+      setConfirmProcessing(false);
+    }
+  }, [confirmProcessing, session, processPaymentForMode, onError]);
+  const providerOptions = (0, import_react6.useMemo)(() => {
+    if (!unified || !session) return void 0;
+    const opts = {
+      appearance,
+      paymentMethodCreation: "manual",
+      billingApiUrl: resolvedBillingUrl
+    };
+    if (unified.provider === "stripe" && unified.data.stripe?.clientSecret) {
+      opts.clientSecret = unified.data.stripe.clientSecret;
+    } else {
+      const displayTotal = (0, import_shared4.buildCheckoutDisplayData)(session).total;
+      opts.amount = Math.round(displayTotal * 100) || session.amount;
+      opts.currency = session.currency?.toLowerCase();
+    }
+    return opts;
+  }, [unified, session, appearance, resolvedBillingUrl]);
+  const checkoutValue = (0, import_react6.useMemo)(
+    () => ({
+      session,
+      loading: isLoading,
+      error: loadError,
+      checkoutMode: currentMode
+    }),
+    [session, isLoading, loadError, currentMode]
+  );
+  if (isLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: loadingNode ?? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "div",
+      {
+        style: {
+          display: "flex",
+          justifyContent: "center",
+          padding: 32
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "div",
+            {
+              style: {
+                width: 24,
+                height: 24,
+                border: "2px solid #e5e7eb",
+                borderTopColor: "#6b7280",
+                borderRadius: "50%",
+                animation: "spin 0.6s linear infinite"
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` })
+        ]
+      }
+    ) });
+  }
+  if (loadError) {
+    if (errorNode) return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: errorNode(loadError) });
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "div",
+      {
+        style: {
+          padding: 24,
+          textAlign: "center",
+          color: "#dc2626",
+          fontSize: 14
+        },
+        children: loadError.message
+      }
+    );
+  }
+  if (!flopay || !providerOptions) return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, {});
+  if (currentMode === "confirm") {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FloPayProvider, { flopay, options: providerOptions, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className, children: [
+      modeError && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "div",
+        {
+          style: {
+            color: "#dc2626",
+            fontSize: "0.875rem",
+            marginBottom: "0.75rem",
+            textAlign: "center"
+          },
+          children: modeError
+        }
+      ),
+      renderConfirmButton ? renderConfirmButton({
+        onConfirm: handleConfirmCheckout,
+        isProcessing: confirmProcessing
+      }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: handleConfirmCheckout,
+          disabled: confirmProcessing,
+          style: {
+            width: "100%",
+            padding: "0.875rem",
+            backgroundColor: "#4A49FF",
+            color: "white",
+            border: "none",
+            borderRadius: "8px",
+            fontSize: "1rem",
+            fontWeight: 600,
+            cursor: confirmProcessing ? "not-allowed" : "pointer",
+            opacity: confirmProcessing ? 0.6 : 1
+          },
+          children: confirmProcessing ? "Processing..." : confirmLabel ?? "Confirm Purchase"
+        }
+      )
+    ] }) }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FloPayProvider, { flopay, options: providerOptions, children: children ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    SessionInjector,
+    {
+      sessionId,
+      billingApiUrl: resolvedBillingUrl,
+      session,
+      children
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    SplitCardForm,
+    {
+      sessionId,
+      email: session?.customer?.email,
+      userId: session?.customer?.id,
+      firstName: session?.customer?.firstName,
+      lastName: session?.customer?.lastName,
+      totalAmount: session ? Math.round((0, import_shared4.buildCheckoutDisplayData)(session).total * 100) : 0,
+      currency: session?.currency?.toLowerCase() ?? "usd",
+      onComplete,
+      onError,
+      showPayPal,
+      showApplePay,
+      showGooglePay,
+      submitLabel,
+      className
+    }
+  ) }) });
+}
+function SessionInjector({
+  sessionId,
+  billingApiUrl,
+  session,
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: import_react6.default.Children.map(children, (child) => {
+    if (!import_react6.default.isValidElement(child)) return child;
+    const existing = child.props;
+    const injected = {};
+    if (!existing.sessionId) injected.sessionId = sessionId;
+    if (!existing.billingApiUrl) injected.billingApiUrl = billingApiUrl;
+    if (session?.customer) {
+      if (!existing.email) injected.email = session.customer.email;
+      if (!existing.userId) injected.userId = session.customer.id;
+      if (!existing.firstName)
+        injected.firstName = session.customer.firstName;
+      if (!existing.lastName)
+        injected.lastName = session.customer.lastName;
+    }
+    if (Object.keys(injected).length === 0) return child;
+    return import_react6.default.cloneElement(child, injected);
+  }) });
+}
+
+// src/checkout-form.tsx
+var import_shared5 = require("@flopay/shared");
+var import_react7 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var WALLET_RESUME_KEY2 = "flopay_wallet_resume";
+var CheckoutForm = (0, import_react7.forwardRef)(
+  function CheckoutForm2(props, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CheckoutFormInner, { ...props, innerRef: ref });
+  }
+);
+function CheckoutFormInner({
+  sessionId,
+  billingApiUrl,
+  email,
+  userId,
+  onComplete,
+  onError,
+  onTokenizedBody,
+  layout = "auto",
+  submitLabel = "Pay",
+  showAddress = false,
+  className,
+  children,
+  firstName,
+  lastName,
+  chv,
+  isProcessing: externalProcessing,
+  error: externalError,
+  onErrorChange,
+  innerRef
+}) {
+  const flopay = useFloPay();
+  const elements = useElements();
+  const contextBillingUrl = useBillingApiUrl();
+  const [processing, setProcessing] = (0, import_react7.useState)(false);
+  const [error, setError] = (0, import_react7.useState)(null);
+  const [is3DSActive, setIs3DSActive] = (0, import_react7.useState)(false);
+  const displayError = externalError ?? error;
+  const isSubmitting = externalProcessing ?? processing;
+  const isSelfContained = !onTokenizedBody;
+  const baseUrl = (billingApiUrl || contextBillingUrl).replace(/\/+$/, "");
+  const updateError = (0, import_react7.useCallback)(
+    (err) => {
+      setError(err);
+      onErrorChange?.(err);
+    },
+    [onErrorChange]
+  );
+  const processPaymentInternal = (0, import_react7.useCallback)(
+    async (tokenizedBody) => {
+      setProcessing(true);
+      updateError(null);
+      try {
+        const response = await fetch(`${baseUrl}/v1/checkouts/sessions/process`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            "x-user-id": userId ?? ""
+          },
+          body: JSON.stringify({
+            sessionId,
+            tokenizedData: tokenizedBody,
+            accountData: {
+              userId: userId ?? "",
+              email: email ?? "",
+              firstName: firstName ?? "",
+              lastName: lastName ?? ""
+            },
+            chv
+          })
+        });
+        if (response.ok) {
+          onComplete?.({
+            status: "succeeded",
+            paymentIntentId: tokenizedBody.threeDSecureActionResultTokenId
+          });
+          return;
+        }
+        const json = await response.json().catch(() => null);
+        if (json?.type === "3ds_required") {
+          const secret = json["threeDSecureToken"];
+          if (!flopay || !secret) {
+            updateError("3DS authentication required but no token provided.");
+            return;
+          }
+          setIs3DSActive(true);
+          try {
+            const result = await flopay.confirmPayment({
+              clientSecret: secret,
+              returnUrl: window.location.href
+            });
+            if (result.error) {
+              updateError(result.error.message);
+              onError?.(result.error);
+              return;
+            }
+            if (result.status === "succeeded" || result.status === "processing") {
+              await processPaymentInternal({
+                id: result.paymentIntentId,
+                type: "card",
+                threeDSecureActionResultTokenId: result.paymentIntentId
+              });
+            }
+          } finally {
+            setIs3DSActive(false);
+          }
+          return;
+        }
+        if (json?.type === "paypal_redirect_required") {
+          const secret = json["clientSecret"];
+          const pmId = json["paymentMethodId"];
+          if (flopay && secret) {
+            localStorage.setItem(WALLET_RESUME_KEY2, JSON.stringify({
+              sessionId,
+              paymentIntentId: "",
+              tokenType: "card",
+              tokenId: pmId,
+              status: "pending_redirect"
+            }));
+            await flopay.confirmPayment({
+              clientSecret: secret,
+              returnUrl: window.location.href
+            });
+          }
+          return;
+        }
+        const errorMessage = json?.message ?? "Payment failed. Please try again.";
+        updateError(errorMessage);
+      } catch (err) {
+        updateError(err instanceof Error ? err.message : "An unexpected error occurred");
+      } finally {
+        setProcessing(false);
+      }
+    },
+    [baseUrl, sessionId, userId, email, firstName, lastName, chv, flopay, onComplete, onError, updateError]
+  );
+  const dispatchTokenizedBody = (0, import_react7.useCallback)(
+    (tokenizedBody) => {
+      if (onTokenizedBody) {
+        onTokenizedBody(tokenizedBody);
+      } else {
+        processPaymentInternal(tokenizedBody);
+      }
+    },
+    [onTokenizedBody, processPaymentInternal]
+  );
+  (0, import_react7.useImperativeHandle)(innerRef, () => ({
+    async handleNextAction(secret) {
+      if (!flopay) return;
+      setIs3DSActive(true);
+      try {
+        const result = await flopay.confirmPayment({
+          clientSecret: secret,
+          returnUrl: window.location.href
+        });
+        if (result.error) {
+          updateError(result.error.message);
+          onError?.(result.error);
+        } else if (result.status === "succeeded" || result.status === "processing") {
+          dispatchTokenizedBody({
+            id: result.paymentIntentId,
+            type: "card",
+            threeDSecureActionResultTokenId: result.paymentIntentId
+          });
+        }
+      } catch (err) {
+        updateError(err instanceof Error ? err.message : "Payment authentication failed.");
+      } finally {
+        setIs3DSActive(false);
+      }
+    }
+  }), [flopay, dispatchTokenizedBody, onError, updateError]);
+  (0, import_react7.useEffect)(() => {
+    if (typeof window === "undefined") return;
+    const stored = localStorage.getItem(WALLET_RESUME_KEY2);
+    if (!stored) return;
+    try {
+      const payload = JSON.parse(stored);
+      if (payload.sessionId === sessionId) {
+        localStorage.removeItem(WALLET_RESUME_KEY2);
+        dispatchTokenizedBody({
+          id: payload.tokenId,
+          type: payload.tokenType,
+          threeDSecureActionResultTokenId: payload.paymentIntentId
+        });
+      }
+    } catch {
+      localStorage.removeItem(WALLET_RESUME_KEY2);
+    }
+  }, [sessionId, dispatchTokenizedBody]);
+  const handleSubmit = (0, import_react7.useCallback)(
+    async (e) => {
+      e.preventDefault();
+      if (!flopay || !elements || isSubmitting) return;
+      setProcessing(true);
+      updateError(null);
+      try {
+        const submitResult = await flopay.submitElements();
+        if (submitResult.error) {
+          updateError(submitResult.error.message);
+          onError?.(submitResult.error);
+          return;
+        }
+        const pmResult = await flopay.createPaymentMethod();
+        if (pmResult.error || !pmResult.paymentMethodId) {
+          updateError(pmResult.error?.message ?? "Failed to create payment method.");
+          return;
+        }
+        if (!sessionId || !email) {
+          throw new import_shared5.FloPayError("Missing sessionId or email", "validation_error");
+        }
+        const intentResponse = await fetch(`${baseUrl}/v1/checkouts/payments/intents`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            sessionId,
+            email,
+            paymentMethodType: pmResult.paymentMethodId,
+            isPaypal: false
+          })
+        });
+        if (!intentResponse.ok) throw new import_shared5.FloPayError("Failed to create payment intent", "api_error");
+        const intentJson = await intentResponse.json();
+        const intentClientSecret = intentJson.data?.id;
+        if (!intentClientSecret) throw new import_shared5.FloPayError("No client_secret in payment intent response", "api_error");
+        const confirmResult = await flopay.confirmCardPayment({
+          clientSecret: intentClientSecret,
+          paymentMethodId: pmResult.paymentMethodId
+        });
+        if (confirmResult.error) {
+          updateError(confirmResult.error.message);
+          return;
+        }
+        dispatchTokenizedBody({
+          id: pmResult.paymentMethodId,
+          type: "card",
+          threeDSecureActionResultTokenId: confirmResult.paymentIntentId
+        });
+      } catch (err) {
+        updateError(err instanceof Error ? err.message : "An unexpected error occurred");
+      } finally {
+        if (isSelfContained) {
+        } else {
+          setProcessing(false);
+        }
+      }
+    },
+    [flopay, elements, isSubmitting, sessionId, email, baseUrl, isSelfContained, dispatchTokenizedBody, onError, updateError]
+  );
+  const isReady = flopay !== null && elements !== null;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
+    (is3DSActive || isSubmitting) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { "data-testid": "flopay-overlay", style: {
+      position: "absolute",
+      inset: 0,
+      background: "rgba(255,255,255,0.7)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      zIndex: 10
+    }, children: is3DSActive ? "Verifying payment..." : "Processing..." }),
+    !isReady && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." }),
+    isReady && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PaymentElement, { options: { layout } }),
+      showAddress && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AddressElement, { options: { mode: showAddress === true ? "billing" : showAddress } }),
+      displayError && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { role: "alert", "data-testid": "flopay-error", style: { color: "red", margin: "0.75rem 0" }, children: displayError }),
+      children ?? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "button",
+        {
+          type: "submit",
+          disabled: isSubmitting || !isReady,
+          "data-testid": "flopay-submit",
+          children: isSubmitting ? "Processing..." : submitLabel
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/paypal-button.tsx
+var import_shared6 = require("@flopay/shared");
+var import_react8 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function PayPalButton({
+  sessionId,
+  billingApiUrl,
+  email,
+  userId,
+  firstName,
+  lastName,
+  chv,
+  onTokenizedBody,
+  onComplete,
+  onErrorChange,
+  isProcessing = false
+}) {
+  const flopay = useFloPay();
+  const elements = useElements();
+  const contextBillingUrl = useBillingApiUrl();
+  const [ready, setReady] = (0, import_react8.useState)(false);
+  const [submitting, setSubmitting] = (0, import_react8.useState)(false);
+  const paypalResumeAttempted = (0, import_react8.useRef)(false);
+  const baseUrl = (billingApiUrl || contextBillingUrl).replace(/\/+$/, "");
+  const processPaymentInternal = (0, import_react8.useCallback)(
+    async (tokenizedBody) => {
+      try {
+        const response = await fetch(`${baseUrl}/v1/checkouts/sessions/process`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            "x-user-id": userId ?? ""
+          },
+          body: JSON.stringify({
+            sessionId,
+            tokenizedData: tokenizedBody,
+            accountData: {
+              userId: userId ?? "",
+              email: email ?? "",
+              firstName: firstName ?? "",
+              lastName: lastName ?? ""
+            },
+            chv
+          })
+        });
+        if (response.ok) {
+          onComplete?.();
+          return;
+        }
+        const json = await response.json().catch(() => null);
+        onErrorChange?.(json?.message ?? "Payment failed. Please try again.");
+      } catch (err) {
+        onErrorChange?.(err instanceof Error ? err.message : "An unexpected error occurred");
+      }
+    },
+    [baseUrl, sessionId, userId, email, firstName, lastName, chv, onComplete, onErrorChange]
+  );
+  const dispatchTokenizedBody = (0, import_react8.useCallback)(
+    (body) => {
+      if (onTokenizedBody) {
+        onTokenizedBody(body);
+      } else {
+        processPaymentInternal(body);
+      }
+    },
+    [onTokenizedBody, processPaymentInternal]
+  );
+  (0, import_react8.useEffect)(() => {
+    if (!flopay || paypalResumeAttempted.current) return;
+    const params = new URLSearchParams(window.location.search);
+    const paymentIntentId = params.get("payment_intent");
+    const clientSecret = params.get("payment_intent_client_secret");
+    const redirectStatus = params.get("redirect_status");
+    if (!paymentIntentId || !clientSecret) return;
+    paypalResumeAttempted.current = true;
+    (async () => {
+      try {
+        setSubmitting(true);
+        if (redirectStatus === "failed") {
+          onErrorChange?.("PayPal payment was declined. Please try again.");
+          return;
+        }
+        const provider = flopay.getRawProvider();
+        if (!provider?.retrievePaymentIntent) {
+          onErrorChange?.("Cannot retrieve PayPal payment status.");
+          return;
+        }
+        const { paymentIntent, error: retrieveError } = await provider.retrievePaymentIntent(clientSecret);
+        if (retrieveError) {
+          onErrorChange?.(retrieveError.message ?? "Failed to retrieve PayPal payment status.");
+          return;
+        }
+        if (paymentIntent && (paymentIntent.status === "requires_capture" || paymentIntent.status === "succeeded")) {
+          const pmId = typeof paymentIntent.payment_method === "string" ? paymentIntent.payment_method : paymentIntent.payment_method?.id;
+          dispatchTokenizedBody({
+            id: pmId ?? paymentIntent.id,
+            type: "card",
+            threeDSecureActionResultTokenId: paymentIntent.id,
+            isPaypal: true
+          });
+          const url = new URL(window.location.href);
+          url.searchParams.delete("payment_intent");
+          url.searchParams.delete("payment_intent_client_secret");
+          url.searchParams.delete("redirect_status");
+          window.history.replaceState({}, "", url.toString());
+        } else {
+          onErrorChange?.("PayPal payment was not completed. Please try again.");
+        }
+      } catch (err) {
+        onErrorChange?.(err instanceof Error ? err.message : "Failed to complete PayPal payment.");
+      } finally {
+        setSubmitting(false);
+      }
+    })();
+  }, [flopay, dispatchTokenizedBody, onErrorChange]);
+  const handlePayPalConfirm = (0, import_react8.useCallback)(async () => {
+    if (!flopay || !elements) return;
+    try {
+      setSubmitting(true);
+      onErrorChange?.(null);
+      if (!sessionId || !email) {
+        throw new import_shared6.FloPayError("Missing sessionId or email for PayPal payment", "validation_error");
+      }
+      const intentResponse = await fetch(`${baseUrl}/v1/checkouts/payments/intents`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          sessionId,
+          email,
+          paymentMethodType: "paypal",
+          isPaypal: "true"
+        })
+      });
+      if (!intentResponse.ok) throw new import_shared6.FloPayError("Failed to create payment intent", "api_error");
+      const intentJson = await intentResponse.json();
+      const intentClientSecret = intentJson.data?.id;
+      if (!intentClientSecret) throw new import_shared6.FloPayError("No client_secret in response", "api_error");
+      const result = await flopay.confirmPayment({
+        clientSecret: intentClientSecret,
+        returnUrl: window.location.href
+      });
+      if (result.status === "succeeded" || result.status === "processing") {
+        dispatchTokenizedBody({
+          id: result.paymentIntentId,
+          type: "card",
+          threeDSecureActionResultTokenId: result.paymentIntentId,
+          isPaypal: true
+        });
+      } else if (result.error) {
+        onErrorChange?.(result.error.message);
+      }
+    } catch (err) {
+      onErrorChange?.(err instanceof Error ? err.message : "PayPal payment failed. Please try again.");
+    } finally {
+      setSubmitting(false);
+    }
+  }, [flopay, elements, sessionId, email, baseUrl, dispatchTokenizedBody, onErrorChange]);
+  if (!flopay || !elements) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6, animation: "pulse 1.5s infinite" } });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+    !ready && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6 } }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: ready ? {} : { display: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: handlePayPalConfirm,
+        disabled: submitting || isProcessing,
+        style: {
+          width: "100%",
+          height: 45,
+          backgroundColor: "#ffc439",
+          color: "#003087",
+          border: "none",
+          borderRadius: 6,
+          fontSize: "1rem",
+          fontWeight: 700,
+          cursor: submitting || isProcessing ? "not-allowed" : "pointer",
+          opacity: submitting || isProcessing ? 0.6 : 1
+        },
+        ref: () => setReady(true),
+        children: submitting ? "Processing..." : "PayPal"
+      }
+    ) }),
+    (submitting || isProcessing) && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
+      position: "fixed",
+      inset: 0,
+      background: "rgba(0,0,0,0.4)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      zIndex: 1e3
+    }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
+      background: "white",
+      borderRadius: 8,
+      padding: "1.5rem",
+      textAlign: "center",
+      boxShadow: "0 4px 24px rgba(0,0,0,0.15)",
+      width: 280
+    }, children: "Processing PayPal payment..." }) })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AddressElement,
+  CardCvcElement,
+  CardElement,
+  CardExpiryElement,
+  CardNumberElement,
+  CheckoutForm,
+  FloPayCheckout,
+  FloPayProvider,
+  PayPalButton,
+  PaymentElement,
+  SplitCardForm,
+  useCheckout,
+  useElements,
+  useFloPay
+});
+//# sourceMappingURL=index.cjs.map