@flopay/react 1.0.3 → 1.1.0

package/dist/index.mjs

@@ -100,9 +100,9 @@ function FloPayProvider({
 }
 
 // src/flopay-checkout.tsx
-import React6, { useCallback as useCallback2, useEffect as useEffect4, useMemo as useMemo3, useRef as useRef3, useState as useState3 } from "react";
-import { PaymentAPI as PaymentAPI3 } from "@flopay/js";
-import { SDK_VERSION, FloPayError as FloPayError4, resolveBillingApiUrl as resolveBillingApiUrl3, buildCheckoutDisplayData, resolveButtonsLayoutTheme as resolveButtonsLayoutTheme2 } from "@flopay/shared";
+import React7, { useCallback as useCallback2, useEffect as useEffect5, useMemo as useMemo4, useRef as useRef4, useState as useState4 } from "react";
+import { PaymentAPI as PaymentAPI4 } from "@flopay/js";
+import { SDK_VERSION, FloPayError as FloPayError5, resolveBillingApiUrl as resolveBillingApiUrl3, buildCheckoutDisplayData, resolveButtonsLayoutTheme as resolveButtonsLayoutTheme2 } from "@flopay/shared";
 
 // src/card-button-content.tsx
 import "react";
@@ -248,8 +248,8 @@ import {
   isAVSFieldVisible,
   getStateFromPostalCode
 } from "@flopay/shared";
-import { PaymentAPI } from "@flopay/js";
-import { forwardRef, useCallback, useContext as useContext3, useEffect as useEffect3, useImperativeHandle, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
+import { PaymentAPI as PaymentAPI2 } from "@flopay/js";
+import { forwardRef, useCallback, useContext as useContext3, useEffect as useEffect4, useImperativeHandle, useMemo as useMemo3, useRef as useRef3, useState as useState3 } from "react";
 
 // src/hooks.ts
 import { useContext as useContext2 } from "react";
@@ -651,11 +651,562 @@ function isInAppBrowser(userAgent) {
   return false;
 }
 
+// src/direct-paypal-button.tsx
+import { useEffect as useEffect3, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
+import { loadScript } from "@paypal/paypal-js";
+import { PaymentAPI } from "@flopay/js";
+import { FloPayError as FloPayError2, normalizeGatewayEnvironment } from "@flopay/shared";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var DEFAULT_BUTTON_HEIGHT = 45;
+function DirectPayPalButton({
+  sessionId,
+  billingApiUrl,
+  email,
+  clientId,
+  environment,
+  currency,
+  isSubscription,
+  onTokenizedBody,
+  onComplete,
+  onErrorChange,
+  onDecline,
+  isProcessing = false,
+  onLoadStateChange,
+  onButtonClick,
+  runBeforeButtonClick,
+  session,
+  existingOrderId,
+  debug = false
+}) {
+  const containerRef = useRef2(null);
+  const [ready, setReady] = useState2(false);
+  const [failed, setFailed] = useState2(false);
+  const [submitting, setSubmitting] = useState2(false);
+  const baseUrl = useMemo2(() => billingApiUrl.replace(/\/+$/, ""), [billingApiUrl]);
+  const [debugLines, setDebugLines] = useState2([]);
+  const appendDebug = (line) => {
+    if (!debug) return;
+    setDebugLines((prev) => [...prev, `${(/* @__PURE__ */ new Date()).toISOString().slice(11, 23)} ${line}`]);
+  };
+  const onTokenizedBodyRef = useRef2(onTokenizedBody);
+  const onCompleteRef = useRef2(onComplete);
+  const onErrorChangeRef = useRef2(onErrorChange);
+  const onDeclineRef = useRef2(onDecline);
+  const onButtonClickRef = useRef2(onButtonClick);
+  const onLoadStateChangeRef = useRef2(onLoadStateChange);
+  const runBeforeButtonClickRef = useRef2(runBeforeButtonClick);
+  const sessionRef = useRef2(session);
+  const emailRef = useRef2(email);
+  const beforeClickRef = useRef2(null);
+  useEffect3(() => {
+    onTokenizedBodyRef.current = onTokenizedBody;
+  }, [onTokenizedBody]);
+  useEffect3(() => {
+    onCompleteRef.current = onComplete;
+  }, [onComplete]);
+  useEffect3(() => {
+    onErrorChangeRef.current = onErrorChange;
+  }, [onErrorChange]);
+  useEffect3(() => {
+    onDeclineRef.current = onDecline;
+  }, [onDecline]);
+  useEffect3(() => {
+    onButtonClickRef.current = onButtonClick;
+  }, [onButtonClick]);
+  useEffect3(() => {
+    onLoadStateChangeRef.current = onLoadStateChange;
+  }, [onLoadStateChange]);
+  useEffect3(() => {
+    runBeforeButtonClickRef.current = runBeforeButtonClick;
+  }, [runBeforeButtonClick]);
+  useEffect3(() => {
+    sessionRef.current = session;
+  }, [session]);
+  useEffect3(() => {
+    emailRef.current = email;
+  }, [email]);
+  useEffect3(() => {
+    onLoadStateChangeRef.current?.(ready && !failed);
+  }, [ready, failed]);
+  const normalizedEnv = normalizeGatewayEnvironment(environment);
+  useEffect3(() => {
+    const maskedClient = clientId ? `${clientId.slice(0, 6)}\u2026(len ${clientId.length})` : "(empty)";
+    const ua = typeof navigator !== "undefined" ? navigator.userAgent : "(no navigator)";
+    appendDebug(`mount clientId=${maskedClient} env=${environment ?? "(unset)"}\u2192${normalizedEnv ?? "live"} ccy=${currency} sub=${isSubscription}`);
+    appendDebug(`ua=${ua.slice(0, 80)}${ua.length > 80 ? "\u2026" : ""}`);
+    if (!clientId) {
+      appendDebug("FAIL: clientId empty \u2014 gateway misconfigured");
+      setFailed(true);
+      onErrorChangeRef.current?.("Direct PayPal gateway is misconfigured.");
+      return;
+    }
+    if (!containerRef.current) {
+      appendDebug("FAIL: containerRef not attached");
+      return;
+    }
+    let cancelled = false;
+    let activeButtons = null;
+    let rendered = false;
+    const container = containerRef.current;
+    let containerObserver = null;
+    let perfObserver = null;
+    const watchdogTimers = [];
+    const formatDims = (el) => {
+      if (!el || typeof el.getBoundingClientRect !== "function") return "(no rect)";
+      const rect = el.getBoundingClientRect();
+      return `${Math.round(rect.width)}\xD7${Math.round(rect.height)}`;
+    };
+    const classifyIframeSrc = (raw) => {
+      if (!raw) return "(empty)";
+      try {
+        const url = new URL(raw, typeof window !== "undefined" ? window.location.href : "https://localhost");
+        const path = url.pathname.toLowerCase();
+        if (path.includes("checkcaptcha") || path.includes("captcha")) return `CAPTCHA(${url.host}${path})`;
+        if (path.includes("risk") || path.includes("challenge")) return `RISK(${url.host}${path})`;
+        if (path.includes("smart/buttons")) return `smart-buttons(${url.host})`;
+        return `${url.host}${path}`.slice(0, 100);
+      } catch {
+        return raw.slice(0, 80);
+      }
+    };
+    const describeIframe = (frame) => {
+      const src = frame.getAttribute("src");
+      const srcdoc = frame.getAttribute("srcdoc");
+      const name = frame.getAttribute("name");
+      const sandbox = frame.getAttribute("sandbox");
+      const parts = [];
+      if (src) parts.push(`src=${classifyIframeSrc(src)}`);
+      if (srcdoc) parts.push(`srcdoc[${srcdoc.length}ch]`);
+      if (!src && !srcdoc) parts.push("src=(empty) srcdoc=(empty)");
+      if (name) parts.push(`name=${name.slice(0, 40)}`);
+      if (sandbox !== null) parts.push(`sandbox="${sandbox.slice(0, 40)}"`);
+      return parts.join(" ");
+    };
+    const inspectFrameContent = (frame) => {
+      if (!(frame instanceof HTMLIFrameElement)) return "";
+      try {
+        const cd = frame.contentDocument;
+        if (!cd) return "cd=null";
+        const bodyChildren = cd.body?.children.length ?? 0;
+        const bodyLen = cd.body?.innerHTML.length ?? 0;
+        const headLen = cd.head?.innerHTML.length ?? 0;
+        return `cd=same-origin readyState=${cd.readyState} body[${bodyChildren}children,${bodyLen}ch] head[${headLen}ch]`;
+      } catch (err) {
+        return `cd=cross-origin(${err.message.slice(0, 30)})`;
+      }
+    };
+    const errorMessages = [];
+    const onWindowError = (ev) => {
+      const msg = ev.message ?? String(ev.error ?? "(no message)");
+      if (msg && (msg.toLowerCase().includes("paypal") || msg.toLowerCase().includes("zoid") || msg.toLowerCase().includes("postrobot") || msg.toLowerCase().includes("storage"))) {
+        appendDebug(`window:error ${msg.slice(0, 140)}`);
+        errorMessages.push(msg);
+      }
+    };
+    const onUnhandledRejection = (ev) => {
+      const reason = ev.reason instanceof Error ? ev.reason.message : String(ev.reason ?? "(no reason)");
+      if (reason && (reason.toLowerCase().includes("paypal") || reason.toLowerCase().includes("zoid") || reason.toLowerCase().includes("postrobot") || reason.toLowerCase().includes("storage"))) {
+        appendDebug(`window:rejection ${reason.slice(0, 140)}`);
+        errorMessages.push(reason);
+      }
+    };
+    if (debug && typeof window !== "undefined") {
+      window.addEventListener("error", onWindowError);
+      window.addEventListener("unhandledrejection", onUnhandledRejection);
+    }
+    const paypalRequestCount = { value: 0 };
+    if (debug && typeof PerformanceObserver !== "undefined") {
+      try {
+        perfObserver = new PerformanceObserver((list) => {
+          for (const entry of list.getEntries()) {
+            if (!entry.name.toLowerCase().includes("paypal")) continue;
+            paypalRequestCount.value += 1;
+            const dur = Math.round(entry.duration);
+            appendDebug(`net ${dur}ms ${entry.name.slice(0, 90)}`);
+          }
+        });
+        perfObserver.observe({ type: "resource", buffered: true });
+      } catch {
+      }
+    }
+    const stopDiagnostics = () => {
+      containerObserver?.disconnect();
+      containerObserver = null;
+      perfObserver?.disconnect();
+      perfObserver = null;
+      while (watchdogTimers.length) clearTimeout(watchdogTimers.pop());
+      if (debug && typeof window !== "undefined") {
+        window.removeEventListener("error", onWindowError);
+        window.removeEventListener("unhandledrejection", onUnhandledRejection);
+      }
+    };
+    const isZoidLifecycleMessage = (message) => {
+      if (!message) return false;
+      const lower = message.toLowerCase();
+      return lower.includes("zoid destroyed") || lower.includes("destroyed all components") || lower.includes("window closed") || lower.includes("detected container element removed");
+    };
+    const forwardError = (message) => {
+      if (cancelled) return;
+      if (isZoidLifecycleMessage(message)) return;
+      onErrorChangeRef.current?.(message);
+    };
+    const markRenderFailed = (message) => {
+      if (cancelled) return;
+      if (isZoidLifecycleMessage(message)) {
+        appendDebug(`markRenderFailed:skip-zoid msg=${message.slice(0, 80)}`);
+        return;
+      }
+      setFailed(true);
+      forwardError(message);
+    };
+    setFailed(false);
+    const dispatchTokenizedBody = async (body) => {
+      const prepared = beforeClickRef.current;
+      const effectiveSessionId = prepared?.sessionId ?? sessionId;
+      if (onTokenizedBodyRef.current) {
+        onTokenizedBodyRef.current(body, {
+          sessionId: effectiveSessionId,
+          accountPatch: prepared?.accountPatch
+        });
+        return;
+      }
+      try {
+        const currentSession = sessionRef.current;
+        const currentEmail = prepared?.accountPatch?.email ?? emailRef.current;
+        const effectiveUserId = prepared?.accountPatch?.userId ?? currentSession?.customer?.id ?? currentSession?.accountData?.userId ?? "";
+        const api = new PaymentAPI(baseUrl);
+        const response = await api.processPayment(
+          effectiveUserId,
+          {
+            sessionId: effectiveSessionId,
+            tokenizedData: body,
+            accountData: {
+              userId: effectiveUserId,
+              email: currentEmail ?? currentSession?.customer?.email ?? "",
+              firstName: prepared?.accountPatch?.firstName ?? currentSession?.customer?.firstName ?? currentSession?.accountData?.firstName ?? "",
+              lastName: prepared?.accountPatch?.lastName ?? currentSession?.customer?.lastName ?? currentSession?.accountData?.lastName ?? "",
+              country: prepared?.accountPatch?.country ?? currentSession?.customer?.country ?? currentSession?.accountData?.country ?? void 0,
+              zip: prepared?.accountPatch?.zip ?? currentSession?.customer?.zip ?? currentSession?.accountData?.zip ?? void 0
+            }
+          }
+        );
+        if (response.ok) {
+          onCompleteRef.current?.({ status: "succeeded", checkoutMethod: "paypal" });
+          return;
+        }
+        const json = await response.json().catch(() => null);
+        const message = json?.["message"] ?? "PayPal payment failed.";
+        forwardError(message);
+        onDeclineRef.current?.(buildDeclineEvent("paypal", message, {
+          code: json?.["code"],
+          declineCode: json?.["declineCode"]
+        }));
+      } catch (err) {
+        const message = err instanceof Error ? err.message : "PayPal payment failed.";
+        forwardError(message);
+        onDeclineRef.current?.(buildDeclineEvent("paypal", message));
+      }
+    };
+    const createPaypalIntent = async (fallbackMessage) => {
+      const prepared = beforeClickRef.current;
+      const effectiveSessionId = prepared?.sessionId ?? sessionId;
+      const effectiveEmail = prepared?.accountPatch?.email ?? emailRef.current;
+      const response = await fetch(`${baseUrl}/v1/checkouts/payments/intents`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          sessionId: effectiveSessionId,
+          email: effectiveEmail,
+          paymentMethodType: "paypal",
+          isPaypal: "true"
+        })
+      });
+      const json = await response.json().catch(() => null);
+      if (!response.ok) {
+        throw new Error(json?.message ?? fallbackMessage);
+      }
+      const id = json?.data?.id;
+      if (!id) {
+        throw new Error(fallbackMessage);
+      }
+      return id;
+    };
+    appendDebug("loadScript:scheduled (deferred 1 tick)");
+    let loadPromise = null;
+    const startTimer = setTimeout(() => {
+      if (cancelled) {
+        appendDebug("loadScript:skipped (cancelled before defer ran)");
+        return;
+      }
+      appendDebug("loadScript:start");
+      const paypalSdkEnv = normalizedEnv === "live" ? "production" : normalizedEnv;
+      loadPromise = loadScript({
+        clientId,
+        currency,
+        // Subscriptions need the `subscription` vault intent; one-time payments
+        // use a standard order capture.
+        intent: isSubscription ? "subscription" : "capture",
+        vault: isSubscription ? true : void 0,
+        // Tell PayPal which environment the clientId belongs to. Without
+        // this, PayPal defaults to live endpoints — and a sandbox clientId
+        // sent to live silently stalls in zoid's prerender forever (no
+        // error, no rejection).
+        ...paypalSdkEnv ? { environment: paypalSdkEnv } : {},
+        // Namespace the sandbox SDK so it can coexist with a production SDK on
+        // the same page without clobbering `window.paypal`.
+        ...paypalSdkEnv === "sandbox" ? { dataNamespace: "paypal_sandbox" } : {}
+      });
+      loadPromise.then((paypal) => {
+        appendDebug(`loadScript:resolved cancelled=${cancelled} ns=${!!paypal} buttons=${!!paypal?.Buttons}`);
+        if (cancelled || !paypal?.Buttons) {
+          if (!cancelled && !paypal?.Buttons) appendDebug("FAIL: namespace missing Buttons factory");
+          return;
+        }
+        const handleApprove = async (data) => {
+          try {
+            setSubmitting(true);
+            onErrorChangeRef.current?.(null);
+            const token = data.subscriptionID ?? data.orderID ?? "";
+            if (!token) {
+              throw new FloPayError2(
+                "PayPal did not return an approval token.",
+                "api_error",
+                { code: "paypal_missing_token" }
+              );
+            }
+            await dispatchTokenizedBody({
+              id: token,
+              isPaypal: true
+            });
+          } catch (err) {
+            forwardError(err instanceof Error ? err.message : "PayPal capture failed.");
+          } finally {
+            setSubmitting(false);
+          }
+        };
+        const buttons = paypal.Buttons({
+          style: { layout: "horizontal", height: DEFAULT_BUTTON_HEIGHT, tagline: false },
+          // PayPal's SDK awaits a Promise returned from `onClick` and aborts
+          // the create-order/create-subscription step when `actions.reject()`
+          // is invoked. Run the consumer's `runBeforeButtonClick` here so
+          // inline-session/account patches land before the order is created,
+          // matching the Stripe-rendered PayPal flow.
+          onClick: async (_data, actions) => {
+            const runner = runBeforeButtonClickRef.current;
+            if (runner) {
+              try {
+                const beforeClick = await runner("paypal");
+                if (!beforeClick.proceed) {
+                  beforeClickRef.current = null;
+                  await actions.reject();
+                  return;
+                }
+                beforeClickRef.current = {
+                  sessionId: beforeClick.sessionId,
+                  accountPatch: beforeClick.accountPatch
+                };
+              } catch (err) {
+                appendDebug(`onClick:runBeforeButtonClick rejected msg=${(err instanceof Error ? err.message : String(err)).slice(0, 120)}`);
+                beforeClickRef.current = null;
+                await actions.reject();
+                return;
+              }
+            } else {
+              beforeClickRef.current = null;
+            }
+            onButtonClickRef.current?.("paypal");
+            await actions.resolve();
+          },
+          // When the SDK is already holding an order/subscription id from a
+          // prior backend round-trip (the `paypal_direct_required` retry
+          // path), feed it straight to PayPal instead of creating a new one.
+          // Otherwise fall back to the normal create-intent call.
+          createOrder: isSubscription ? void 0 : existingOrderId ? () => Promise.resolve(existingOrderId) : () => createPaypalIntent("Failed to create PayPal order."),
+          createSubscription: isSubscription ? existingOrderId ? () => Promise.resolve(existingOrderId) : () => createPaypalIntent("Failed to create PayPal subscription.") : void 0,
+          onApprove: handleApprove,
+          onCancel: () => {
+            beforeClickRef.current = null;
+            onDeclineRef.current?.(buildDeclineEvent("paypal", "PayPal checkout was cancelled."));
+          },
+          onError: (err) => {
+            const message = err instanceof Error ? err.message : "PayPal failed to render.";
+            appendDebug(`onError rendered=${rendered} msg=${message.slice(0, 120)}`);
+            if (rendered) {
+              forwardError(message);
+              onDeclineRef.current?.(buildDeclineEvent("paypal", message));
+              return;
+            }
+            markRenderFailed(message);
+          }
+        });
+        const eligible = buttons.isEligible();
+        appendDebug(`isEligible=${eligible}`);
+        if (!eligible) {
+          setReady(false);
+          markRenderFailed(
+            "PayPal buttons are not eligible to render in this context (paypal_ineligible)."
+          );
+          return;
+        }
+        const typedButtons = buttons;
+        if (debug) {
+          appendDebug(`container:dims ${formatDims(container)} visibility=${typeof document !== "undefined" ? document.visibilityState : "(no document)"}`);
+        }
+        if (debug && typeof MutationObserver !== "undefined") {
+          containerObserver = new MutationObserver((mutations) => {
+            for (const mutation of mutations) {
+              if (mutation.type === "childList") {
+                mutation.addedNodes.forEach((node) => {
+                  if (!(node instanceof Element)) return;
+                  const tag = node.tagName.toLowerCase();
+                  const title = (node.getAttribute("title") ?? "").slice(0, 40);
+                  const detail = tag === "iframe" ? ` ${describeIframe(node)}` : "";
+                  appendDebug(`child+ ${tag}${title ? ` title="${title}"` : ""}${detail} dims=${formatDims(node)}`);
+                });
+              } else if (mutation.type === "attributes" && mutation.target instanceof Element) {
+                const target = mutation.target;
+                if (target.tagName.toLowerCase() !== "iframe") continue;
+                const attr = mutation.attributeName;
+                if (attr === "src" || attr === "srcdoc") {
+                  appendDebug(`attr~ iframe ${attr}=${attr === "srcdoc" ? `[${(target.getAttribute("srcdoc") ?? "").length}ch]` : classifyIframeSrc(target.getAttribute("src"))} dims=${formatDims(target)}`);
+                }
+              }
+            }
+          });
+          containerObserver.observe(container, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ["src", "srcdoc"]
+          });
+        }
+        const snapshotContainer = (when) => {
+          if (cancelled || rendered) return;
+          const iframes = container.querySelectorAll("iframe");
+          const hasStorageAccess = typeof document !== "undefined" && "hasStorageAccess" in document;
+          appendDebug(`watchdog:${when} container=${formatDims(container)} children=${container.childElementCount} iframes=${iframes.length} visibility=${typeof document !== "undefined" ? document.visibilityState : "(no document)"} cookies=${typeof navigator !== "undefined" ? navigator.cookieEnabled : "?"} hasStorageAccessApi=${hasStorageAccess} paypalNetRequests=${paypalRequestCount.value}`);
+          iframes.forEach((frame, i) => {
+            const title = (frame.getAttribute("title") ?? "").slice(0, 40);
+            appendDebug(`  iframe[${i}] ${formatDims(frame)}${title ? ` title="${title}"` : ""} ${describeIframe(frame)}`);
+            const content = inspectFrameContent(frame);
+            if (content) appendDebug(`    ${content}`);
+          });
+          if (errorMessages.length === 0) {
+            appendDebug(`  (no PayPal/zoid window errors captured)`);
+          }
+        };
+        if (debug) {
+          watchdogTimers.push(setTimeout(() => snapshotContainer("3s"), 3e3));
+          watchdogTimers.push(setTimeout(() => snapshotContainer("8s"), 8e3));
+          watchdogTimers.push(setTimeout(() => snapshotContainer("15s"), 15e3));
+        }
+        appendDebug("render:start");
+        buttons.render(container).then(() => {
+          appendDebug(`render:resolved cancelled=${cancelled}`);
+          stopDiagnostics();
+          if (cancelled) {
+            typedButtons.close().catch(() => {
+            });
+            return;
+          }
+          activeButtons = typedButtons;
+          rendered = true;
+          setReady(true);
+        }).catch((err) => {
+          const message = err instanceof Error ? err.message : "PayPal failed to render.";
+          appendDebug(`render:rejected msg=${message.slice(0, 120)}`);
+          stopDiagnostics();
+          markRenderFailed(message);
+        });
+      }).catch((err) => {
+        const message = err instanceof Error ? err.message : "PayPal SDK failed to load.";
+        appendDebug(`loadScript:rejected msg=${message.slice(0, 120)}`);
+        markRenderFailed(message);
+      });
+    }, 0);
+    return () => {
+      cancelled = true;
+      clearTimeout(startTimer);
+      stopDiagnostics();
+      if (activeButtons) {
+        activeButtons.close().catch(() => {
+        });
+      }
+    };
+  }, [baseUrl, clientId, currency, environment, isSubscription, sessionId, existingOrderId]);
+  const debugPanel = debug ? /* @__PURE__ */ jsxs3(
+    "pre",
+    {
+      "data-testid": "flopay-direct-paypal-debug",
+      style: {
+        margin: "0 0 8px 0",
+        padding: "6px 8px",
+        background: failed ? "#fef2f2" : "#f3f4f6",
+        border: `1px solid ${failed ? "#fca5a5" : "#d1d5db"}`,
+        borderRadius: 6,
+        color: "#111827",
+        font: "11px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace",
+        whiteSpace: "pre-wrap",
+        wordBreak: "break-word",
+        maxHeight: 220,
+        overflowY: "auto"
+      },
+      children: [
+        `FloPay/DirectPayPal-debug (ready=${ready} failed=${failed})`,
+        debugLines.length === 0 ? "\n(waiting for first lifecycle event\u2026)" : `
+${debugLines.join("\n")}`
+      ]
+    }
+  ) : null;
+  if (failed) {
+    return debug ? /* @__PURE__ */ jsx5("div", { children: debugPanel }) : null;
+  }
+  return (
+    // Single wrapper so the parent flex container sees exactly one flex item
+    // (otherwise the fragment's placeholder + container become two siblings
+    // and any spacing-sensitive layout has to reason about both). The wrapper
+    // intentionally has no margin/padding so the parent owns all spacing.
+    /* @__PURE__ */ jsxs3("div", { children: [
+      debugPanel,
+      /* @__PURE__ */ jsxs3("div", { style: { position: "relative", minHeight: DEFAULT_BUTTON_HEIGHT }, children: [
+        !ready && /* @__PURE__ */ jsx5(
+          "div",
+          {
+            "data-testid": "flopay-direct-paypal-placeholder",
+            style: {
+              position: "absolute",
+              inset: 0,
+              borderRadius: 8,
+              background: "#e5e7eb",
+              animation: "flopay-pulse 1.5s ease-in-out infinite",
+              pointerEvents: "none"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          "div",
+          {
+            ref: containerRef,
+            "data-testid": "flopay-direct-paypal-container",
+            style: {
+              minHeight: DEFAULT_BUTTON_HEIGHT,
+              display: "flex",
+              opacity: ready ? 1 : 0
+            },
+            "aria-busy": submitting || isProcessing
+          }
+        )
+      ] })
+    ] })
+  );
+}
+
 // src/split-card-form.tsx
-import { FloPayError as FloPayError2 } from "@flopay/shared";
-import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { FloPayError as FloPayError3 } from "@flopay/shared";
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var WALLET_RESUME_KEY = "flopay_wallet_resume";
 var FLOPAY_KEYFRAMES = `
+.paypal-buttons { margin: 0 !important; vertical-align: top !important; }
 @keyframes flopay-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
 @keyframes flopay-fade-in { 0% { opacity: 0; } 100% { opacity: 1; } }
 @keyframes flopay-buttons-enter {
@@ -689,13 +1240,13 @@ function getButtonMethodLabel(method) {
   }
 }
 function normalizeBeforeButtonClickError(method, err) {
-  return err instanceof FloPayError2 ? err : new FloPayError2(
+  return err instanceof FloPayError3 ? err : new FloPayError3(
     err instanceof Error ? err.message : `${getButtonMethodLabel(method)} before-click hook failed.`,
     "validation_error"
   );
 }
 function FloPayKeyframes() {
-  return /* @__PURE__ */ jsx5("style", { children: FLOPAY_KEYFRAMES });
+  return /* @__PURE__ */ jsx6("style", { children: FLOPAY_KEYFRAMES });
 }
 function toCssSize(value) {
   if (typeof value === "number") return `${value}px`;
@@ -716,8 +1267,8 @@ function ExpressCheckoutReadySwap({
   children
 }) {
   if (state === "unavailable" || state === "load_error") return null;
-  return /* @__PURE__ */ jsxs3("div", { style: { position: "relative", minHeight: 44 }, children: [
-    /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsxs4("div", { style: { position: "relative", minHeight: 44 }, children: [
+    /* @__PURE__ */ jsx6(
       "div",
       {
         "data-testid": placeholderTestId,
@@ -736,7 +1287,7 @@ function ExpressCheckoutReadySwap({
         }
       }
     ),
-    /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx6(
       "div",
       {
         style: {
@@ -756,7 +1307,7 @@ function isExpressCheckoutRowVisible(state) {
 }
 var SplitCardForm = forwardRef(
   function SplitCardForm2(props, ref) {
-    return /* @__PURE__ */ jsx5(SplitCardFormInner, { ...props, innerRef: ref });
+    return /* @__PURE__ */ jsx6(SplitCardFormInner, { ...props, innerRef: ref });
   }
 );
 function PayPalButtonInner({
@@ -773,15 +1324,15 @@ function PayPalButtonInner({
 }) {
   const stripe = useStripeRaw();
   const elements = useStripeElements();
-  const [loadState, setLoadState] = useState2("loading");
-  useEffect3(() => {
+  const [loadState, setLoadState] = useState3("loading");
+  useEffect4(() => {
     onLoadStateChange?.(loadState);
   }, [loadState, onLoadStateChange]);
-  const [submitting, setSubmitting] = useState2(false);
-  const paypalResumeAttempted = useRef2(false);
-  const beforeClickRef = useRef2(null);
+  const [submitting, setSubmitting] = useState3(false);
+  const paypalResumeAttempted = useRef3(false);
+  const beforeClickRef = useRef3(null);
   const baseUrl = billingApiUrl.replace(/\/+$/, "");
-  useEffect3(() => {
+  useEffect4(() => {
     if (!stripe || paypalResumeAttempted.current) return;
     const params = new URLSearchParams(window.location.search);
     const paymentIntentId = params.get("payment_intent");
@@ -938,8 +1489,8 @@ function PayPalButtonInner({
       setSubmitting(false);
     }
   }, [stripe, elements, sessionId, email, baseUrl, onTokenizedBody, onErrorChange, onDecline, runBeforeButtonClick]);
-  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
-    /* @__PURE__ */ jsx5(ExpressCheckoutReadySwap, { state: loadState, placeholderTestId: "flopay-paypal-placeholder", children: /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
+    /* @__PURE__ */ jsx6(ExpressCheckoutReadySwap, { state: loadState, placeholderTestId: "flopay-paypal-placeholder", children: /* @__PURE__ */ jsx6(
       ExpressCheckoutElement,
       {
         onReady: (event) => setLoadState(resolveExpressCheckoutLoadState(event, ["paypal"])),
@@ -964,7 +1515,7 @@ function PayPalButtonInner({
         }
       }
     ) }),
-    submitting && /* @__PURE__ */ jsx5(ProcessingOverlay, { status: "processing" })
+    submitting && /* @__PURE__ */ jsx6(ProcessingOverlay, { status: "processing" })
   ] });
 }
 function WalletButtonInner({
@@ -982,14 +1533,14 @@ function WalletButtonInner({
 }) {
   const stripe = useStripeRaw();
   const elements = useStripeElements();
-  const [loadState, setLoadState] = useState2("loading");
-  useEffect3(() => {
+  const [loadState, setLoadState] = useState3("loading");
+  useEffect4(() => {
     onLoadStateChange?.(loadState);
   }, [loadState, onLoadStateChange]);
-  const [submitting, setSubmitting] = useState2(false);
+  const [submitting, setSubmitting] = useState3(false);
   const baseUrl = billingApiUrl.replace(/\/+$/, "");
-  const lastWalletMethodRef = useRef2("card");
-  const beforeClickRef = useRef2(null);
+  const lastWalletMethodRef = useRef3("card");
+  const beforeClickRef = useRef3(null);
   const handleWalletConfirm = useCallback(
     async (event) => {
       if (!stripe || !elements) return;
@@ -1079,12 +1630,16 @@ function WalletButtonInner({
     },
     [stripe, elements, sessionId, email, baseUrl, onTokenizedBody, onErrorChange, onDecline, runBeforeButtonClick]
   );
-  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
-    /* @__PURE__ */ jsx5(ExpressCheckoutReadySwap, { state: loadState, placeholderTestId: "flopay-wallet-placeholder", children: /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
+    /* @__PURE__ */ jsx6(ExpressCheckoutReadySwap, { state: loadState, placeholderTestId: "flopay-wallet-placeholder", children: /* @__PURE__ */ jsx6(
       ExpressCheckoutElement,
       {
-        onReady: (event) => setLoadState(resolveExpressCheckoutLoadState(event, ["applePay", "googlePay"])),
-        onLoadError: () => setLoadState("load_error"),
+        onReady: (event) => {
+          setLoadState(resolveExpressCheckoutLoadState(event, ["applePay", "googlePay"]));
+        },
+        onLoadError: (e) => {
+          setLoadState("load_error");
+        },
         onClick: async (event) => {
           lastWalletMethodRef.current = event.expressPaymentType === "apple_pay" ? "apple_pay" : "google_pay";
           const beforeClick = runBeforeButtonClick ? await runBeforeButtonClick(lastWalletMethodRef.current) : { proceed: true };
@@ -1119,7 +1674,7 @@ function WalletButtonInner({
         }
       }
     ) }),
-    submitting && /* @__PURE__ */ jsx5(ProcessingOverlay, { status: "processing" })
+    submitting && /* @__PURE__ */ jsx6(ProcessingOverlay, { status: "processing" })
   ] });
 }
 function SplitCardFormInner({
@@ -1171,6 +1726,10 @@ function SplitCardFormInner({
   totalAmount = 0,
   currency = "usd",
   initialCardOpen = false,
+  directPaypal,
+  isSubscription = false,
+  session,
+  debug = false,
   innerRef
 }) {
   const flopay = useFloPay();
@@ -1178,25 +1737,25 @@ function SplitCardFormInner({
   const elements = useElements();
   const checkout = useContext3(CheckoutContext);
   const contextBillingUrl = useBillingApiUrl();
-  const [processing, setProcessing] = useState2(false);
-  const [error, setError] = useState2(null);
-  const [is3DSActive, setIs3DSActive] = useState2(false);
-  const [selectedCountry, setSelectedCountry] = useState2(countryProp ?? "US");
-  const [zipCode, setZipCode] = useState2(zipProp ?? "");
-  const [addressLine1, setAddressLine1] = useState2(addressLine1Prop ?? "");
-  const [addressLine2, setAddressLine2] = useState2(addressLine2Prop ?? "");
-  const [city, setCity] = useState2(cityProp ?? "");
-  const [stateValue, setStateValue] = useState2(stateProp ?? "");
-  const [accountPatch, setAccountPatch] = useState2({});
-  const zipCodeRef = useRef2(zipProp ?? "");
-  const selectedCountryRef = useRef2(countryProp ?? "US");
-  const addressLine1Ref = useRef2(addressLine1Prop ?? "");
-  const addressLine2Ref = useRef2(addressLine2Prop ?? "");
-  const cityRef = useRef2(cityProp ?? "");
-  const stateRef = useRef2(stateProp ?? "");
-  const avsConfig = useMemo2(() => resolveAVSConfig(enableAVSProp), [enableAVSProp]);
+  const [processing, setProcessing] = useState3(false);
+  const [error, setError] = useState3(null);
+  const [is3DSActive, setIs3DSActive] = useState3(false);
+  const [selectedCountry, setSelectedCountry] = useState3(countryProp ?? "US");
+  const [zipCode, setZipCode] = useState3(zipProp ?? "");
+  const [addressLine1, setAddressLine1] = useState3(addressLine1Prop ?? "");
+  const [addressLine2, setAddressLine2] = useState3(addressLine2Prop ?? "");
+  const [city, setCity] = useState3(cityProp ?? "");
+  const [stateValue, setStateValue] = useState3(stateProp ?? "");
+  const [accountPatch, setAccountPatch] = useState3({});
+  const zipCodeRef = useRef3(zipProp ?? "");
+  const selectedCountryRef = useRef3(countryProp ?? "US");
+  const addressLine1Ref = useRef3(addressLine1Prop ?? "");
+  const addressLine2Ref = useRef3(addressLine2Prop ?? "");
+  const cityRef = useRef3(cityProp ?? "");
+  const stateRef = useRef3(stateProp ?? "");
+  const avsConfig = useMemo3(() => resolveAVSConfig(enableAVSProp), [enableAVSProp]);
   const enableAVS = avsConfig !== null;
-  const [viewState, setViewState] = useState2(initialCardOpen ? "card" : "buttons");
+  const [viewState, setViewState] = useState3(initialCardOpen ? "card" : "buttons");
   const showCardForm = viewState === "expanding" || viewState === "card";
   const TRANSITION_MS = 280;
   const expandToCard = useCallback(() => {
@@ -1207,18 +1766,23 @@ function SplitCardFormInner({
     setViewState("collapsing");
     setTimeout(() => setViewState("buttons"), TRANSITION_MS);
   }, []);
-  useEffect3(() => {
+  useEffect4(() => {
     if (layout === "buttons" && initialCardOpen) {
       setViewState("card");
     }
   }, [layout, initialCardOpen]);
-  const [fullName, setFullName] = useState2("");
-  const [formReady, setFormReady] = useState2(false);
-  const [overlayStatus, setOverlayStatus] = useState2(null);
-  const processingRef = useRef2(false);
+  const [fullName, setFullName] = useState3("");
+  const [formReady, setFormReady] = useState3(false);
+  const [overlayStatus, setOverlayStatus] = useState3(null);
+  const processingRef = useRef3(false);
+  const [paypalDirectRetry, setPaypalDirectRetry] = useState3(null);
+  const paypalDirectRetryRef = useRef3(paypalDirectRetry);
+  useEffect4(() => {
+    paypalDirectRetryRef.current = paypalDirectRetry;
+  }, [paypalDirectRetry]);
   const resolvedBillingApiUrl = billingApiUrl || contextBillingUrl;
   const displayError = externalError ?? error;
-  const bStyles = useMemo2(() => {
+  const bStyles = useMemo3(() => {
     const base = resolveButtonsLayoutTheme(buttonsTheme);
     if (!buttonsStylesOverride) return base;
     return {
@@ -1236,7 +1800,7 @@ function SplitCardFormInner({
   const isSubmitting = (externalProcessing ?? processing) || isInlineSessionPatchProcessing;
   const isSelfContained = !onTokenizedBody;
   const baseUrl = resolvedBillingApiUrl.replace(/\/+$/, "");
-  const resolvedAccount = useMemo2(() => mergeAccountPatch({
+  const resolvedAccount = useMemo3(() => mergeAccountPatch({
     userId,
     email,
     firstName,
@@ -1244,23 +1808,23 @@ function SplitCardFormInner({
     country: countryProp,
     zip: zipProp
   }, accountPatch), [userId, email, firstName, lastName, countryProp, zipProp, accountPatch]);
-  const stripeInstance = useMemo2(() => {
+  const stripeInstance = useMemo3(() => {
     if (!flopay) return null;
     return flopay.getRawProvider();
   }, [flopay]);
-  const paypalStripeInstance = useMemo2(() => {
+  const paypalStripeInstance = useMemo3(() => {
     if (!paypalFlopay) return null;
     return paypalFlopay.getRawProvider();
   }, [paypalFlopay]);
   const amountInCents = totalAmount || 100;
-  const walletOptions = useMemo2(() => ({
+  const walletOptions = useMemo3(() => ({
     mode: "payment",
     amount: amountInCents,
     currency: currency.toLowerCase(),
     paymentMethodCreation: "manual",
     captureMethod: "manual"
   }), [amountInCents, currency]);
-  const paypalOptions = useMemo2(() => ({
+  const paypalOptions = useMemo3(() => ({
     mode: "payment",
     amount: amountInCents,
     currency: currency.toLowerCase(),
@@ -1281,17 +1845,20 @@ function SplitCardFormInner({
     [onDecline]
   );
   const showWallets = showApplePay || showGooglePay;
-  const [paypalLoadState, setPaypalLoadState] = useState2("loading");
-  const [walletLoadState, setWalletLoadState] = useState2("loading");
-  const [inAppBrowserDetected, setInAppBrowserDetected] = useState2();
-  useEffect3(() => {
+  const [paypalLoadState, setPaypalLoadState] = useState3("loading");
+  const [walletLoadState, setWalletLoadState] = useState3("loading");
+  const [directPaypalReady, setDirectPaypalReady] = useState3(false);
+  const [inAppBrowserDetected, setInAppBrowserDetected] = useState3();
+  useEffect4(() => {
     setInAppBrowserDetected(isInAppBrowser());
   }, []);
-  const shouldShowPayPal = showPayPal && inAppBrowserDetected === false;
-  const shouldShowWallets = showWallets && inAppBrowserDetected === false;
-  const shouldRenderPayPal = shouldShowPayPal && !!paypalStripeInstance;
+  const directPaypalConfigured = !!directPaypal?.clientId;
+  const shouldShowPayPal = showPayPal && (directPaypalConfigured || inAppBrowserDetected === false);
+  const shouldShowWallets = showWallets;
+  const shouldRenderDirectPayPal = shouldShowPayPal && directPaypalConfigured;
+  const shouldRenderStripePayPal = shouldShowPayPal && !directPaypalConfigured && !!paypalStripeInstance;
   const shouldRenderWallets = shouldShowWallets && !!stripeInstance;
-  const shouldDisplayPayPalRow = shouldRenderPayPal && isExpressCheckoutRowVisible(paypalLoadState);
+  const shouldDisplayPayPalRow = shouldRenderDirectPayPal ? directPaypalReady : shouldRenderStripePayPal && isExpressCheckoutRowVisible(paypalLoadState);
   const shouldDisplayWalletRow = shouldRenderWallets && isExpressCheckoutRowVisible(walletLoadState);
   const handleNameChange = useCallback((value) => {
     setFullName(value);
@@ -1365,7 +1932,7 @@ function SplitCardFormInner({
       const resolvedCompletionPaymentMethodId = overrides?.completionPaymentMethodId ?? resolveTokenizedPaymentMethodId(tokenizedBody);
       const requestTokenizedBody = tokenizedBody.originalPaymentMethodId ? { ...tokenizedBody, originalPaymentMethodId: void 0 } : tokenizedBody;
       try {
-        const api = new PaymentAPI(baseUrl);
+        const api = new PaymentAPI2(baseUrl);
         const response = await api.processPayment(effectiveAccount.userId ?? "", {
           sessionId: effectiveSessionId,
           tokenizedData: requestTokenizedBody,
@@ -1410,6 +1977,7 @@ function SplitCardFormInner({
         if (response.ok) {
           markSessionRecentlyCompleted(effectiveSessionId);
           setOverlayStatus("success");
+          setPaypalDirectRetry(null);
           await new Promise((r) => setTimeout(r, PROCESSING_OVERLAY_SUCCESS_DELAY_MS));
           onComplete?.({
             status: "succeeded",
@@ -1517,6 +2085,24 @@ function SplitCardFormInner({
           }
           return;
         }
+        if (json?.type === "paypal_direct_required") {
+          const orderId = json["orderId"];
+          if (!orderId) {
+            setOverlayStatus("error");
+            updateError("PayPal retry required but no order id provided.");
+            return;
+          }
+          const prevAttempts = paypalDirectRetryRef.current?.attempts ?? 0;
+          if (prevAttempts >= 2) {
+            setOverlayStatus("error");
+            updateError("PayPal payment could not be completed after multiple attempts.");
+            emitDecline("paypal", "paypal_direct_required retry limit exceeded");
+            return;
+          }
+          setPaypalDirectRetry({ orderId, attempts: prevAttempts + 1 });
+          setOverlayStatus(null);
+          return;
+        }
         setOverlayStatus("error");
         const message = json?.message ?? "Payment failed. Please try again.";
         updateError(message);
@@ -1574,7 +2160,7 @@ function SplitCardFormInner({
       }
     }
   }), [flopay, dispatchTokenizedBody, onError, updateError, emitDecline]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (typeof window === "undefined") return;
     const stored = localStorage.getItem(WALLET_RESUME_KEY);
     if (!stored) return;
@@ -1658,7 +2244,7 @@ function SplitCardFormInner({
           return;
         }
         if (!sessionId || !resolvedAccount.email) {
-          throw new FloPayError2("Missing sessionId or email", "validation_error");
+          throw new FloPayError3("Missing sessionId or email", "validation_error");
         }
         const intentResponse = await fetch(`${baseUrl}/v1/checkouts/payments/intents`, {
           method: "POST",
@@ -1684,7 +2270,7 @@ function SplitCardFormInner({
         }
         const intentJson = await intentResponse.json();
         const intentClientSecret = intentJson.data?.id;
-        if (!intentClientSecret) throw new FloPayError2("No client_secret in payment intent response", "api_error");
+        if (!intentClientSecret) throw new FloPayError3("No client_secret in payment intent response", "api_error");
         const confirmResult = await flopay.confirmCardPayment({
           clientSecret: intentClientSecret,
           paymentMethodId: pmResult.paymentMethodId
@@ -1705,7 +2291,7 @@ function SplitCardFormInner({
         const paymentIntentId = confirmResult.paymentIntentId ?? confirmedPaymentIntent?.id;
         const paymentMethodId = confirmResult.paymentMethodId ?? resolvePaymentIntentPaymentMethodId(confirmedPaymentIntent) ?? pmResult.paymentMethodId;
         if (!paymentIntentId) {
-          const error2 = new FloPayError2("No payment intent returned after confirmation.", "api_error");
+          const error2 = new FloPayError3("No payment intent returned after confirmation.", "api_error");
           setOverlayStatus("error");
           updateError(error2.message);
           onError?.(error2);
@@ -1734,7 +2320,7 @@ function SplitCardFormInner({
   );
   const isReady = flopay !== null && elements !== null;
   if (!isReady) {
-    return /* @__PURE__ */ jsx5("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." });
+    return /* @__PURE__ */ jsx6("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." });
   }
   const isButtons = layout === "buttons";
   const resolvedBorder = isButtons ? bStyles.cardInputBorder ?? "#e5e7eb" : "#A4A4FF";
@@ -1777,7 +2363,7 @@ function SplitCardFormInner({
       invalid: { color: "#ef4444" }
     }
   };
-  const cardFormBlock = /* @__PURE__ */ jsxs3("div", { style: {
+  const cardFormBlock = /* @__PURE__ */ jsxs4("div", { style: {
     backgroundColor: cardBg,
     borderRadius: "8px",
     padding: isButtons ? "0" : "1rem",
@@ -1785,7 +2371,7 @@ function SplitCardFormInner({
     ...isButtons ? { padding: bStyles.cardFormContainer?.padding ?? "0" } : {},
     ...sharedInputPlaceholderVars
   }, children: [
-    /* @__PURE__ */ jsx5("style", { children: `
+    /* @__PURE__ */ jsx6("style", { children: `
         .flopay-shared-input::placeholder {
           color: var(--flopay-input-placeholder-color);
           opacity: 1;
@@ -1794,12 +2380,12 @@ function SplitCardFormInner({
           font-weight: var(--flopay-input-font-weight);
         }
       ` }),
-    isButtons && showCardForm && /* @__PURE__ */ jsxs3("div", { style: {
+    isButtons && showCardForm && /* @__PURE__ */ jsxs4("div", { style: {
       display: "flex",
       alignItems: "center",
       padding: "0.75rem 0 0.625rem"
     }, children: [
-      /* @__PURE__ */ jsxs3(
+      /* @__PURE__ */ jsxs4(
         "button",
         {
           type: "button",
@@ -1821,7 +2407,7 @@ function SplitCardFormInner({
           },
           "aria-label": "Back to payment methods",
           children: [
-            /* @__PURE__ */ jsx5("span", { style: {
+            /* @__PURE__ */ jsx6("span", { style: {
               display: "inline-flex",
               alignItems: "center",
               justifyContent: "center",
@@ -1831,12 +2417,12 @@ function SplitCardFormInner({
               backgroundColor: "#f3f4f6",
               transition: "background-color 0.15s",
               ...bStyles.backButtonIcon
-            }, children: /* @__PURE__ */ jsx5("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx5("path", { d: "M15 18l-6-6 6-6" }) }) }),
-            /* @__PURE__ */ jsx5(BackButtonContentSlot, { content: cardBackButtonContent })
+            }, children: /* @__PURE__ */ jsx6("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx6("path", { d: "M15 18l-6-6 6-6" }) }) }),
+            /* @__PURE__ */ jsx6(BackButtonContentSlot, { content: cardBackButtonContent })
           ]
         }
       ),
-      hideTitle ? /* @__PURE__ */ jsx5("div", { style: { flex: 1 } }) : /* @__PURE__ */ jsx5("div", { style: {
+      hideTitle ? /* @__PURE__ */ jsx6("div", { style: { flex: 1 } }) : /* @__PURE__ */ jsx6("div", { style: {
         flex: 1,
         textAlign: "center",
         fontWeight: 600,
@@ -1844,18 +2430,18 @@ function SplitCardFormInner({
         color: "#262833",
         paddingRight: 80,
         ...bStyles.title
-      }, children: /* @__PURE__ */ jsx5(TitleContentSlot, { content: cardTitleContent }) })
+      }, children: /* @__PURE__ */ jsx6(TitleContentSlot, { content: cardTitleContent }) })
     ] }),
-    !isButtons && !hideTitle && /* @__PURE__ */ jsx5("div", { style: { textAlign: "center", fontWeight: 600, fontSize: "1.1rem", padding: "0.5rem 0", color: "#262833" }, children: /* @__PURE__ */ jsx5(TitleContentSlot, { content: cardTitleContent }) }),
-    /* @__PURE__ */ jsx5("div", { style: {
+    !isButtons && !hideTitle && /* @__PURE__ */ jsx6("div", { style: { textAlign: "center", fontWeight: 600, fontSize: "1.1rem", padding: "0.5rem 0", color: "#262833" }, children: /* @__PURE__ */ jsx6(TitleContentSlot, { content: cardTitleContent }) }),
+    /* @__PURE__ */ jsx6("div", { style: {
       backgroundColor: cardInputBg,
       border: `1px solid ${resolvedBorder}`,
       borderTopLeftRadius: "8px",
       borderTopRightRadius: "8px",
       padding: "10px"
-    }, children: /* @__PURE__ */ jsx5(CardNumberElement, { onReady: () => setFormReady(true), options: stripeElementStyle }) }),
-    /* @__PURE__ */ jsxs3("div", { style: { display: "flex" }, children: [
-      /* @__PURE__ */ jsx5("div", { style: {
+    }, children: /* @__PURE__ */ jsx6(CardNumberElement, { onReady: () => setFormReady(true), options: stripeElementStyle }) }),
+    /* @__PURE__ */ jsxs4("div", { style: { display: "flex" }, children: [
+      /* @__PURE__ */ jsx6("div", { style: {
         flex: 1,
         backgroundColor: cardInputBg,
         border: `1px solid ${resolvedBorder}`,
@@ -1863,23 +2449,23 @@ function SplitCardFormInner({
         borderRight: "none",
         borderBottomLeftRadius: "8px",
         padding: "10px"
-      }, children: /* @__PURE__ */ jsx5(CardExpiryElement, { options: stripeElementStyle }) }),
-      /* @__PURE__ */ jsx5("div", { style: {
+      }, children: /* @__PURE__ */ jsx6(CardExpiryElement, { options: stripeElementStyle }) }),
+      /* @__PURE__ */ jsx6("div", { style: {
         flex: 1,
         backgroundColor: cardInputBg,
         border: `1px solid ${resolvedBorder}`,
         borderTop: "none",
         borderBottomRightRadius: "8px",
         padding: "10px"
-      }, children: /* @__PURE__ */ jsx5(CardCvcElement, { options: stripeElementStyle }) })
+      }, children: /* @__PURE__ */ jsx6(CardCvcElement, { options: stripeElementStyle }) })
     ] }),
-    /* @__PURE__ */ jsx5("div", { style: {
+    /* @__PURE__ */ jsx6("div", { style: {
       backgroundColor: cardInputBg,
       border: `1px solid ${resolvedBorder}`,
       borderRadius: "8px",
       marginTop: "0.5rem",
       padding: "10px"
-    }, children: /* @__PURE__ */ jsx5(
+    }, children: /* @__PURE__ */ jsx6(
       "input",
       {
         className: "flopay-shared-input",
@@ -1918,8 +2504,8 @@ function SplitCardFormInner({
         ...isButtons && bStyles.nameInput ? bStyles.nameInput : {}
       });
       const stateOpts = getStateOptions(cc);
-      return /* @__PURE__ */ jsxs3(Fragment2, { children: [
-        isAVSFieldVisible(avsConfig.address_line_1, cc) && /* @__PURE__ */ jsx5("div", { style: inputWrapStyle(bStyles.addressLine1Input), children: /* @__PURE__ */ jsx5(
+      return /* @__PURE__ */ jsxs4(Fragment2, { children: [
+        isAVSFieldVisible(avsConfig.address_line_1, cc) && /* @__PURE__ */ jsx6("div", { style: inputWrapStyle(bStyles.addressLine1Input), children: /* @__PURE__ */ jsx6(
           "input",
           {
             className: "flopay-shared-input",
@@ -1936,7 +2522,7 @@ function SplitCardFormInner({
             style: inputFieldStyle()
           }
         ) }),
-        isAVSFieldVisible(avsConfig.address_line_2, cc) && /* @__PURE__ */ jsx5("div", { style: inputWrapStyle(bStyles.addressLine2Input), children: /* @__PURE__ */ jsx5(
+        isAVSFieldVisible(avsConfig.address_line_2, cc) && /* @__PURE__ */ jsx6("div", { style: inputWrapStyle(bStyles.addressLine2Input), children: /* @__PURE__ */ jsx6(
           "input",
           {
             className: "flopay-shared-input",
@@ -1952,12 +2538,12 @@ function SplitCardFormInner({
             style: inputFieldStyle()
           }
         ) }),
-        (isAVSFieldVisible(avsConfig.city, cc) || isAVSFieldVisible(avsConfig.state, cc)) && /* @__PURE__ */ jsxs3("div", { style: {
+        (isAVSFieldVisible(avsConfig.city, cc) || isAVSFieldVisible(avsConfig.state, cc)) && /* @__PURE__ */ jsxs4("div", { style: {
           display: "flex",
           gap: "0",
           marginTop: "0.5rem"
         }, children: [
-          isAVSFieldVisible(avsConfig.city, cc) && /* @__PURE__ */ jsx5("div", { style: {
+          isAVSFieldVisible(avsConfig.city, cc) && /* @__PURE__ */ jsx6("div", { style: {
             flex: 1,
             backgroundColor: cardInputBg,
             border: `1px solid ${resolvedBorder}`,
@@ -1966,7 +2552,7 @@ function SplitCardFormInner({
             borderBottomLeftRadius: "8px",
             ...isAVSFieldVisible(avsConfig.state, cc) ? { borderRight: "none", borderTopRightRadius: 0, borderBottomRightRadius: 0 } : { borderRadius: "8px" },
             ...isButtons && bStyles.cityInput ? bStyles.cityInput : {}
-          }, children: /* @__PURE__ */ jsx5(
+          }, children: /* @__PURE__ */ jsx6(
             "input",
             {
               className: "flopay-shared-input",
@@ -1983,7 +2569,7 @@ function SplitCardFormInner({
               style: inputFieldStyle()
             }
           ) }),
-          isAVSFieldVisible(avsConfig.state, cc) && /* @__PURE__ */ jsx5("div", { style: {
+          isAVSFieldVisible(avsConfig.state, cc) && /* @__PURE__ */ jsx6("div", { style: {
             flex: 1,
             backgroundColor: cardInputBg,
             border: `1px solid ${resolvedBorder}`,
@@ -1992,7 +2578,7 @@ function SplitCardFormInner({
             borderBottomRightRadius: "8px",
             ...isAVSFieldVisible(avsConfig.city, cc) ? { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 } : { borderRadius: "8px" },
             ...isButtons && bStyles.stateInput ? bStyles.stateInput : {}
-          }, children: stateOpts ? /* @__PURE__ */ jsxs3(
+          }, children: stateOpts ? /* @__PURE__ */ jsxs4(
             "select",
             {
               value: stateValue,
@@ -2006,11 +2592,11 @@ function SplitCardFormInner({
               "data-testid": "flopay-state",
               style: { ...inputFieldStyle(), cursor: "pointer" },
               children: [
-                /* @__PURE__ */ jsx5("option", { value: "", children: getStateLabel(cc) }),
-                stateOpts.map((s) => /* @__PURE__ */ jsx5("option", { value: s.code, children: s.name }, s.code))
+                /* @__PURE__ */ jsx6("option", { value: "", children: getStateLabel(cc) }),
+                stateOpts.map((s) => /* @__PURE__ */ jsx6("option", { value: s.code, children: s.name }, s.code))
               ]
             }
-          ) : /* @__PURE__ */ jsx5(
+          ) : /* @__PURE__ */ jsx6(
             "input",
             {
               className: "flopay-shared-input",
@@ -2028,20 +2614,20 @@ function SplitCardFormInner({
             }
           ) })
         ] }),
-        (isAVSFieldVisible(avsConfig.country, cc) || isAVSFieldVisible(avsConfig.postal_code, cc)) && /* @__PURE__ */ jsxs3("div", { style: {
+        (isAVSFieldVisible(avsConfig.country, cc) || isAVSFieldVisible(avsConfig.postal_code, cc)) && /* @__PURE__ */ jsxs4("div", { style: {
           display: "flex",
           flexDirection: avsLayoutProp === "column" ? "column" : "row",
           gap: avsLayoutProp === "column" ? "0.5rem" : "0",
           marginTop: "0.5rem"
         }, children: [
-          isAVSFieldVisible(avsConfig.country, cc) && /* @__PURE__ */ jsx5("div", { style: {
+          isAVSFieldVisible(avsConfig.country, cc) && /* @__PURE__ */ jsx6("div", { style: {
             flex: avsLayoutProp === "row" ? 1 : void 0,
             backgroundColor: cardInputBg,
             border: `1px solid ${resolvedBorder}`,
             padding: "10px",
             ...avsLayoutProp === "row" && isAVSFieldVisible(avsConfig.postal_code, cc) ? { borderRadius: "0", borderTopLeftRadius: "8px", borderBottomLeftRadius: "8px", borderRight: "none" } : { borderRadius: "8px" },
             ...isButtons && bStyles.countrySelect ? bStyles.countrySelect : {}
-          }, children: /* @__PURE__ */ jsx5(
+          }, children: /* @__PURE__ */ jsx6(
             "select",
             {
               value: selectedCountry,
@@ -2056,21 +2642,21 @@ function SplitCardFormInner({
               autoComplete: "country",
               "data-testid": "flopay-country",
               style: { ...inputFieldStyle(), cursor: "pointer" },
-              children: COUNTRY_OPTIONS.map((c) => /* @__PURE__ */ jsxs3("option", { value: c.code, children: [
+              children: COUNTRY_OPTIONS.map((c) => /* @__PURE__ */ jsxs4("option", { value: c.code, children: [
                 c.flag,
                 " ",
                 c.name
               ] }, c.code))
             }
           ) }),
-          isAVSFieldVisible(avsConfig.postal_code, cc) && /* @__PURE__ */ jsx5("div", { style: {
+          isAVSFieldVisible(avsConfig.postal_code, cc) && /* @__PURE__ */ jsx6("div", { style: {
             flex: avsLayoutProp === "row" ? 1 : void 0,
             backgroundColor: cardInputBg,
             border: `1px solid ${resolvedBorder}`,
             padding: "10px",
             ...avsLayoutProp === "row" && isAVSFieldVisible(avsConfig.country, cc) ? { borderRadius: "0", borderTopRightRadius: "8px", borderBottomRightRadius: "8px" } : { borderRadius: "8px" },
             ...isButtons && bStyles.zipInput ? bStyles.zipInput : {}
-          }, children: /* @__PURE__ */ jsx5(
+          }, children: /* @__PURE__ */ jsx6(
             "input",
             {
               className: "flopay-shared-input",
@@ -2091,7 +2677,7 @@ function SplitCardFormInner({
         ] })
       ] });
     })(),
-    displayError && /* @__PURE__ */ jsxs3("div", { role: "alert", "data-testid": "flopay-error", style: {
+    displayError && /* @__PURE__ */ jsxs4("div", { role: "alert", "data-testid": "flopay-error", style: {
       margin: "0.75rem 0",
       padding: "0.625rem 0.875rem",
       background: "#FEF2F2",
@@ -2105,10 +2691,10 @@ function SplitCardFormInner({
       gap: "0.5rem",
       ...isButtons && bStyles.errorBanner ? bStyles.errorBanner : {}
     }, children: [
-      /* @__PURE__ */ jsx5("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx5("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+      /* @__PURE__ */ jsx6("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx6("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
       displayError
     ] }),
-    children ?? /* @__PURE__ */ jsx5(
+    children ?? /* @__PURE__ */ jsx6(
       "button",
       {
         type: "submit",
@@ -2131,7 +2717,7 @@ function SplitCardFormInner({
         children: isSubmitting ? "PROCESSING..." : submitLabel
       }
     ),
-    !isButtons && showSecurityFooter && /* @__PURE__ */ jsx5("div", { style: {
+    !isButtons && showSecurityFooter && /* @__PURE__ */ jsx6("div", { style: {
       backgroundColor: "#EFF9F0",
       borderRadius: "8px",
       padding: "0.75rem",
@@ -2148,11 +2734,11 @@ function SplitCardFormInner({
     const cardButtonSizing = cardButtonContent === void 0 ? { boxSizing: "border-box", height: DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT, padding: "0 1rem" } : { padding: "0.9rem 1rem" };
     const buttonsAnim = viewState === "expanding" ? `flopay-buttons-exit ${TRANSITION_MS}ms cubic-bezier(0.4, 0, 0.2, 1) both` : viewState === "collapsing" ? `flopay-buttons-enter ${TRANSITION_MS}ms cubic-bezier(0, 0, 0.2, 1) both` : void 0;
     const cardAnim = viewState === "expanding" ? `flopay-card-enter ${TRANSITION_MS}ms cubic-bezier(0, 0, 0.2, 1) both` : viewState === "collapsing" ? `flopay-card-exit ${TRANSITION_MS}ms cubic-bezier(0.4, 0, 0.2, 1) both` : void 0;
-    return /* @__PURE__ */ jsxs3("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
-      /* @__PURE__ */ jsx5(FloPayKeyframes, {}),
-      overlayStatus && /* @__PURE__ */ jsx5(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
-      /* @__PURE__ */ jsxs3("div", { style: { display: "grid" }, children: [
-        /* @__PURE__ */ jsxs3("div", { style: {
+    return /* @__PURE__ */ jsxs4("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
+      /* @__PURE__ */ jsx6(FloPayKeyframes, {}),
+      overlayStatus && /* @__PURE__ */ jsx6(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
+      /* @__PURE__ */ jsxs4("div", { style: { display: "grid" }, children: [
+        /* @__PURE__ */ jsxs4("div", { style: {
           gridArea: "1 / 1",
           display: "flex",
           flexDirection: "column",
@@ -2161,7 +2747,75 @@ function SplitCardFormInner({
           ...!isButtonsView && !buttonsAnim ? { visibility: "hidden", position: "absolute", pointerEvents: "none", width: "100%" } : {},
           ...buttonsAnim ? { animation: buttonsAnim, pointerEvents: "none" } : {}
         }, children: [
-          shouldRenderPayPal && /* @__PURE__ */ jsx5(StripeElements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ jsx5(
+          debug && showPayPal && /* @__PURE__ */ jsx6(
+            "pre",
+            {
+              "data-testid": "flopay-direct-paypal-gate-debug",
+              style: {
+                margin: 0,
+                padding: "6px 8px",
+                background: "#eef2ff",
+                border: "1px solid #c7d2fe",
+                borderRadius: 6,
+                color: "#111827",
+                font: "11px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace",
+                whiteSpace: "pre-wrap",
+                wordBreak: "break-word"
+              },
+              children: [
+                "FloPay/DirectPayPal-debug (parent gate)",
+                `  showPayPal=${showPayPal}`,
+                `  directPaypalConfigured=${directPaypalConfigured}`,
+                `  inAppBrowserDetected=${String(inAppBrowserDetected)}`,
+                `  shouldRenderDirectPayPal=${shouldRenderDirectPayPal}`,
+                `  shouldRenderStripePayPal=${shouldRenderStripePayPal}`,
+                `  hasPaypalStripeInstance=${!!paypalStripeInstance}`
+              ].join("\n")
+            }
+          ),
+          shouldRenderDirectPayPal && directPaypal && /* @__PURE__ */ jsxs4(Fragment2, { children: [
+            paypalDirectRetry && /* @__PURE__ */ jsx6(
+              "div",
+              {
+                "data-testid": "flopay-paypal-direct-retry-notice",
+                style: {
+                  padding: "8px 10px",
+                  background: "#fef3c7",
+                  border: "1px solid #fcd34d",
+                  borderRadius: 6,
+                  color: "#78350f",
+                  fontSize: 13,
+                  lineHeight: 1.4
+                },
+                children: "Please confirm your PayPal payment to complete checkout."
+              }
+            ),
+            /* @__PURE__ */ jsx6(
+              DirectPayPalButton,
+              {
+                sessionId,
+                billingApiUrl: resolvedBillingApiUrl,
+                email: resolvedAccount.email,
+                clientId: directPaypal.clientId,
+                environment: directPaypal.environment,
+                currency: currency.toUpperCase(),
+                isSubscription,
+                onTokenizedBody: dispatchTokenizedBody,
+                onComplete,
+                onErrorChange: updateError,
+                onDecline,
+                onButtonClick,
+                runBeforeButtonClick,
+                isProcessing: isSubmitting,
+                onLoadStateChange: setDirectPaypalReady,
+                session: session ?? null,
+                existingOrderId: paypalDirectRetry?.orderId,
+                debug
+              },
+              paypalDirectRetry?.orderId ?? "fresh"
+            )
+          ] }),
+          shouldRenderStripePayPal && /* @__PURE__ */ jsx6(StripeElements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ jsx6(
             PayPalButtonInner,
             {
               sessionId,
@@ -2176,7 +2830,7 @@ function SplitCardFormInner({
               onLoadStateChange: setPaypalLoadState
             }
           ) }),
-          shouldRenderWallets ? /* @__PURE__ */ jsx5(StripeElements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ jsx5(
+          shouldRenderWallets ? /* @__PURE__ */ jsx6(StripeElements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ jsx6(
             WalletButtonInner,
             {
               sessionId,
@@ -2191,8 +2845,8 @@ function SplitCardFormInner({
               runBeforeButtonClick,
               onLoadStateChange: setWalletLoadState
             }
-          ) }) : shouldShowWallets ? /* @__PURE__ */ jsx5("div", { style: { height: DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT, borderRadius: 8, background: "#e5e7eb", animation: "flopay-pulse 1.5s ease-in-out infinite" } }) : null,
-          /* @__PURE__ */ jsx5(
+          ) }) : shouldShowWallets ? /* @__PURE__ */ jsx6("div", { style: { height: DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT, borderRadius: 8, background: "#e5e7eb", animation: "flopay-pulse 1.5s ease-in-out infinite" } }) : null,
+          /* @__PURE__ */ jsx6(
             "button",
             {
               type: "button",
@@ -2230,10 +2884,10 @@ function SplitCardFormInner({
               onMouseUp: (e) => {
                 e.currentTarget.style.transform = "scale(1)";
               },
-              children: /* @__PURE__ */ jsx5(CardButtonContentSlot, { content: cardButtonContent })
+              children: /* @__PURE__ */ jsx6(CardButtonContentSlot, { content: cardButtonContent })
             }
           ),
-          displayError && viewState === "buttons" && /* @__PURE__ */ jsxs3("div", { role: "alert", "data-testid": "flopay-error", style: {
+          displayError && viewState === "buttons" && /* @__PURE__ */ jsxs4("div", { role: "alert", "data-testid": "flopay-error", style: {
             margin: "0.25rem 0",
             padding: "0.625rem 0.875rem",
             background: "#FEF2F2",
@@ -2247,11 +2901,11 @@ function SplitCardFormInner({
             gap: "0.5rem",
             ...bStyles.errorBanner ? bStyles.errorBanner : {}
           }, children: [
-            /* @__PURE__ */ jsx5("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx5("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+            /* @__PURE__ */ jsx6("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx6("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
             displayError
           ] })
         ] }),
-        isCardView && /* @__PURE__ */ jsx5("div", { style: {
+        isCardView && /* @__PURE__ */ jsx6("div", { style: {
           gridArea: "1 / 1",
           ...cardAnim ? { animation: cardAnim } : {},
           ...viewState === "collapsing" ? { pointerEvents: "none" } : {}
@@ -2259,37 +2913,111 @@ function SplitCardFormInner({
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxs3("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
-    /* @__PURE__ */ jsx5(FloPayKeyframes, {}),
-    overlayStatus && /* @__PURE__ */ jsx5(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
-    shouldRenderWallets && /* @__PURE__ */ jsx5(StripeElements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ jsx5(
-      WalletButtonInner,
-      {
-        sessionId,
-        email: resolvedAccount.email,
-        billingApiUrl: resolvedBillingApiUrl,
-        showApplePay,
-        showGooglePay,
-        onTokenizedBody: dispatchTokenizedBody,
-        onErrorChange: updateError,
-        onDecline,
-        onLoadStateChange: setWalletLoadState
-      }
-    ) }),
-    shouldRenderPayPal && /* @__PURE__ */ jsx5(StripeElements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ jsx5(
-      PayPalButtonInner,
-      {
-        sessionId,
-        email: resolvedAccount.email,
-        billingApiUrl: resolvedBillingApiUrl,
-        onTokenizedBody: dispatchTokenizedBody,
-        onErrorChange: updateError,
-        isProcessing: isSubmitting,
-        onDecline,
-        onLoadStateChange: setPaypalLoadState
-      }
-    ) }),
-    (shouldDisplayWalletRow || shouldDisplayPayPalRow) && /* @__PURE__ */ jsxs3("div", { style: {
+  return /* @__PURE__ */ jsxs4("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsx6(FloPayKeyframes, {}),
+    overlayStatus && /* @__PURE__ */ jsx6(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
+    /* @__PURE__ */ jsxs4("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
+      debug && showPayPal && /* @__PURE__ */ jsx6(
+        "pre",
+        {
+          "data-testid": "flopay-direct-paypal-gate-debug-default",
+          style: {
+            margin: 0,
+            padding: "6px 8px",
+            background: "#eef2ff",
+            border: "1px solid #c7d2fe",
+            borderRadius: 6,
+            color: "#111827",
+            font: "11px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace",
+            whiteSpace: "pre-wrap",
+            wordBreak: "break-word"
+          },
+          children: [
+            "FloPay/DirectPayPal-debug (parent gate)",
+            `  showPayPal=${showPayPal}`,
+            `  directPaypalConfigured=${directPaypalConfigured}`,
+            `  inAppBrowserDetected=${String(inAppBrowserDetected)}`,
+            `  shouldRenderDirectPayPal=${shouldRenderDirectPayPal}`,
+            `  shouldRenderStripePayPal=${shouldRenderStripePayPal}`,
+            `  hasPaypalStripeInstance=${!!paypalStripeInstance}`
+          ].join("\n")
+        }
+      ),
+      shouldRenderDirectPayPal && directPaypal && /* @__PURE__ */ jsxs4(Fragment2, { children: [
+        paypalDirectRetry && /* @__PURE__ */ jsx6(
+          "div",
+          {
+            "data-testid": "flopay-paypal-direct-retry-notice-default",
+            style: {
+              padding: "8px 10px",
+              background: "#fef3c7",
+              border: "1px solid #fcd34d",
+              borderRadius: 6,
+              color: "#78350f",
+              fontSize: 13,
+              lineHeight: 1.4
+            },
+            children: "Please confirm your PayPal payment to complete checkout."
+          }
+        ),
+        /* @__PURE__ */ jsx6(
+          DirectPayPalButton,
+          {
+            sessionId,
+            billingApiUrl: resolvedBillingApiUrl,
+            email: resolvedAccount.email,
+            clientId: directPaypal.clientId,
+            environment: directPaypal.environment,
+            currency: currency.toUpperCase(),
+            isSubscription,
+            onTokenizedBody: dispatchTokenizedBody,
+            onComplete,
+            onErrorChange: updateError,
+            onDecline,
+            onButtonClick,
+            runBeforeButtonClick,
+            isProcessing: isSubmitting,
+            onLoadStateChange: setDirectPaypalReady,
+            session: session ?? null,
+            existingOrderId: paypalDirectRetry?.orderId,
+            debug
+          },
+          paypalDirectRetry?.orderId ?? "fresh"
+        )
+      ] }),
+      shouldRenderStripePayPal && /* @__PURE__ */ jsx6(StripeElements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ jsx6(
+        PayPalButtonInner,
+        {
+          sessionId,
+          email: resolvedAccount.email,
+          billingApiUrl: resolvedBillingApiUrl,
+          onTokenizedBody: dispatchTokenizedBody,
+          onErrorChange: updateError,
+          isProcessing: isSubmitting,
+          onButtonClick,
+          onDecline,
+          runBeforeButtonClick,
+          onLoadStateChange: setPaypalLoadState
+        }
+      ) }),
+      shouldRenderWallets && /* @__PURE__ */ jsx6(StripeElements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ jsx6(
+        WalletButtonInner,
+        {
+          sessionId,
+          email: resolvedAccount.email,
+          billingApiUrl: resolvedBillingApiUrl,
+          showApplePay,
+          showGooglePay,
+          onTokenizedBody: dispatchTokenizedBody,
+          onErrorChange: updateError,
+          onButtonClick,
+          onDecline,
+          runBeforeButtonClick,
+          onLoadStateChange: setWalletLoadState
+        }
+      ) })
+    ] }),
+    (shouldDisplayWalletRow || shouldDisplayPayPalRow) && /* @__PURE__ */ jsxs4("div", { style: {
       display: "flex",
       alignItems: "center",
       gap: "0.75rem",
@@ -2297,17 +3025,17 @@ function SplitCardFormInner({
       color: "#999",
       fontSize: "0.85rem"
     }, children: [
-      /* @__PURE__ */ jsx5("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } }),
-      /* @__PURE__ */ jsx5("span", { children: "or pay with card" }),
-      /* @__PURE__ */ jsx5("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } })
+      /* @__PURE__ */ jsx6("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } }),
+      /* @__PURE__ */ jsx6("span", { children: "or pay with card" }),
+      /* @__PURE__ */ jsx6("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } })
     ] }),
     cardFormBlock
   ] });
 }
 
 // src/saved-payment-flow.ts
-import { loadFloPay, PaymentAPI as PaymentAPI2 } from "@flopay/js";
-import { FloPayError as FloPayError3 } from "@flopay/shared";
+import { loadFloPay, PaymentAPI as PaymentAPI3 } from "@flopay/js";
+import { FloPayError as FloPayError4 } from "@flopay/shared";
 var DEFAULT_SAVED_PAYMENT_DECLINE_METHOD = "card";
 function getRedirectResultFromCheckoutProcessError(error) {
   if (!error?.type || !error.threeDSecureToken) {
@@ -2325,7 +3053,7 @@ function getRedirectResultFromCheckoutProcessError(error) {
 function checkoutProcessErrorToFloPayError(error, fallbackMessage = "Payment failed. Please try again.", options) {
   const checkoutMethod = options?.checkoutMethod ?? error?.checkoutMethod ?? (error?.type === "paypal_redirect_required" ? "paypal" : "card");
   return Object.assign(
-    new FloPayError3(
+    new FloPayError4(
       error?.message ?? fallbackMessage,
       "api_error",
       {
@@ -2380,16 +3108,19 @@ function getRedirectTokenFromProcessResponse(json, options) {
         return candidate;
       }
     }
-    const nestedGatewayData = nestedRecord.gatewayData;
-    if (nestedGatewayData && typeof nestedGatewayData === "object") {
-      const nestedGatewayDataRecord = nestedGatewayData;
-      const gatewayCandidates = [
-        nestedGatewayDataRecord.stripeClientSecret,
-        nestedGatewayDataRecord.clientSecret
-      ];
-      for (const candidate of gatewayCandidates) {
-        if (typeof candidate === "string" && candidate.length > 0 && (!options?.requirePaymentIntentClientSecret || isStripePaymentIntentClientSecret(candidate))) {
-          return candidate;
+    const nestedGateways = nestedRecord.gateways;
+    if (nestedGateways && typeof nestedGateways === "object") {
+      const stripeGateway = nestedGateways.stripe;
+      if (stripeGateway && typeof stripeGateway === "object") {
+        const stripeRecord = stripeGateway;
+        const gatewayCandidates = [
+          stripeRecord.stripeClientSecret,
+          stripeRecord.clientSecret
+        ];
+        for (const candidate of gatewayCandidates) {
+          if (typeof candidate === "string" && candidate.length > 0 && (!options?.requirePaymentIntentClientSecret || isStripePaymentIntentClientSecret(candidate))) {
+            return candidate;
+          }
         }
       }
     }
@@ -2414,9 +3145,9 @@ async function recover3DSRedirectResult({
     return null;
   }
   try {
-    const api = new PaymentAPI2(billingApiUrl);
+    const api = new PaymentAPI3(billingApiUrl);
     const unified = await api.getUnifiedCheckoutSession(sessionId);
-    const refreshedToken = unified.provider === "stripe" ? unified.data.stripe?.clientSecret : void 0;
+    const refreshedToken = unified.data.stripe?.clientSecret;
     if (isStripePaymentIntentClientSecret(refreshedToken)) {
       return {
         type: "3ds_required",
@@ -2442,7 +3173,7 @@ async function processSavedPaymentForMode({
   const lastName = session.customer?.lastName ?? session.accountData?.lastName ?? "";
   const country = session.customer?.country ?? session.accountData?.country ?? void 0;
   const zip = session.customer?.zip ?? session.accountData?.zip ?? void 0;
-  const api = new PaymentAPI2(baseUrl);
+  const api = new PaymentAPI3(baseUrl);
   const response = await retryOnceOnFetchFailure(() => api.processPayment(customerId, {
     sessionId: resolvedSessionId,
     tokenizedData,
@@ -2471,7 +3202,7 @@ async function processSavedPaymentForMode({
   if (json?.type === "paypal_redirect_required" || json?.type === "3ds_required") {
     const redirectToken = getRedirectTokenFromProcessResponse(json);
     if (!redirectToken) {
-      throw new FloPayError3(
+      throw new FloPayError4(
         "Authentication is required but no redirect token was provided.",
         "api_error",
         { code: "authentication_required" }
@@ -2493,7 +3224,7 @@ async function processSavedPaymentForMode({
       return recoveredRedirect;
     }
     throw Object.assign(
-      new FloPayError3(
+      new FloPayError4(
         "Your card requires authentication. Please enter your payment details below.",
         "api_error",
         { code: "authentication_required" }
@@ -2501,7 +3232,7 @@ async function processSavedPaymentForMode({
       { checkoutMethod: "card" }
     );
   }
-  throw new FloPayError3(
+  throw new FloPayError4(
     json?.message ?? "Payment failed. Please try again.",
     "api_error",
     {
@@ -2521,13 +3252,13 @@ async function processSavedPaymentWithIntent({
   const customerEmail = session.customer?.email ?? session.accountData?.email ?? "";
   if (!customerEmail) {
     throw Object.assign(
-      new FloPayError3("Customer email is required to create a payment intent.", "validation_error", {
+      new FloPayError4("Customer email is required to create a payment intent.", "validation_error", {
         param: "email"
       }),
       { checkoutMethod: "card" }
     );
   }
-  const api = new PaymentAPI2(billingApiUrl);
+  const api = new PaymentAPI3(billingApiUrl);
   const intentResponse = await retryOnceOnFetchFailure(() => api.createPaymentIntent(
     sessionId,
     customerEmail,
@@ -2549,7 +3280,7 @@ async function processSavedPaymentWithIntent({
   });
   if (!intentClientSecret) {
     throw Object.assign(
-      new FloPayError3("No client secret in payment intent response.", "api_error"),
+      new FloPayError4("No client secret in payment intent response.", "api_error"),
       { checkoutMethod: "card" }
     );
   }
@@ -2572,7 +3303,7 @@ async function processSavedPaymentWithIntent({
   const confirmedPaymentMethodId = confirmResult.paymentMethodId ?? resolvePaymentIntentPaymentMethodId(confirmedPaymentIntent) ?? paymentMethodId;
   if (!confirmedPaymentIntentId || confirmResult.status !== "succeeded" && confirmResult.status !== "processing" && confirmResult.status !== "requires_capture") {
     throw Object.assign(
-      new FloPayError3(
+      new FloPayError4(
         `Unfortunately, your payment could not be processed. Please try again using a different payment method or contact your bank for assistance. If the issue persists, feel free to reach out to us for support.`,
         "api_error",
         {
@@ -2620,12 +3351,12 @@ async function handleSavedPaymentRedirectResult(redirectResult, {
 }) {
   const stripe = flopay?.getRawProvider();
   if (!stripe) {
-    throw new FloPayError3("Payment provider is not available.", "api_error");
+    throw new FloPayError4("Payment provider is not available.", "api_error");
   }
   if (redirectResult.type === "3ds_required") {
     if (!attempt3DS || !redirectResult.threeDSecureToken) {
       throw Object.assign(
-        new FloPayError3(
+        new FloPayError4(
           "Your card requires authentication. Please enter your payment details below.",
           "api_error",
           { code: "authentication_required" }
@@ -2641,7 +3372,7 @@ async function handleSavedPaymentRedirectResult(redirectResult, {
       );
       if (retrieveError) {
         throw Object.assign(
-          new FloPayError3(
+          new FloPayError4(
             retrieveError.message ?? "Failed to retrieve 3DS payment status.",
             "api_error",
             { code: retrieveError.code }
@@ -2667,7 +3398,7 @@ async function handleSavedPaymentRedirectResult(redirectResult, {
       );
       if (confirmError) {
         throw Object.assign(
-          new FloPayError3(
+          new FloPayError4(
             confirmError.message ?? "3DS authentication failed.",
             "api_error",
             { code: confirmError.code }
@@ -2682,7 +3413,7 @@ async function handleSavedPaymentRedirectResult(redirectResult, {
       });
       if (nextActionError) {
         throw Object.assign(
-          new FloPayError3(
+          new FloPayError4(
             nextActionError.message ?? "3DS authentication failed.",
             "api_error",
             { code: nextActionError.code }
@@ -2722,7 +3453,7 @@ async function handleSavedPaymentRedirectResult(redirectResult, {
       });
     }
     throw Object.assign(
-      new FloPayError3("3DS authentication did not complete successfully.", "api_error"),
+      new FloPayError4("3DS authentication did not complete successfully.", "api_error"),
       { checkoutMethod: "card" }
     );
   }
@@ -2730,7 +3461,7 @@ async function handleSavedPaymentRedirectResult(redirectResult, {
     const paypalStripe = (paypalFlopay ?? flopay)?.getRawProvider();
     if (!paypalStripe) {
       throw Object.assign(
-        new FloPayError3("PayPal is not available.", "api_error"),
+        new FloPayError4("PayPal is not available.", "api_error"),
         { checkoutMethod: "paypal" }
       );
     }
@@ -2740,7 +3471,7 @@ async function handleSavedPaymentRedirectResult(redirectResult, {
       });
       if (error2) {
         throw Object.assign(
-          new FloPayError3(
+          new FloPayError4(
             error2.message ?? "PayPal authorization failed.",
             "api_error",
             { code: error2.code }
@@ -2763,7 +3494,7 @@ async function handleSavedPaymentRedirectResult(redirectResult, {
     });
     if (error) {
       throw Object.assign(
-        new FloPayError3(
+        new FloPayError4(
           error.message ?? "PayPal authorization failed.",
           "api_error",
           { code: error.code }
@@ -2776,33 +3507,33 @@ async function handleSavedPaymentRedirectResult(redirectResult, {
       checkoutMethod: "paypal"
     };
   }
-  throw new FloPayError3("Unsupported payment redirect state.", "api_error");
+  throw new FloPayError4("Unsupported payment redirect state.", "api_error");
 }
 function normalizeSavedPaymentError(err) {
-  if (err instanceof FloPayError3) {
+  if (err instanceof FloPayError4) {
     return err;
   }
-  return new FloPayError3(
+  return new FloPayError4(
     err instanceof Error ? err.message : "Payment failed. Please try again.",
     "api_error"
   );
 }
 function resolveSavedPaymentPublishableKeys(unified) {
-  let publishableKey;
-  let paypalPublishableKey;
-  if (unified.provider === "stripe") {
-    publishableKey = unified.data.stripe?.publishableKey;
-    paypalPublishableKey = unified.data.stripe?.paypalPublishableKey ?? void 0;
-  }
+  const publishableKey = unified.data.stripe?.publishableKey;
   if (!publishableKey) {
-    throw new FloPayError3(
-      "No publishable key found in the checkout session. Ensure the session includes gatewayData.publishableKey.",
+    throw new FloPayError4(
+      "No publishable key found in the checkout session. Ensure the session advertises gateways.stripe.",
       "validation_error"
     );
   }
   return {
     publishableKey,
-    paypalPublishableKey
+    // Direct-PayPal sessions can still use Stripe's PayPal Element for the
+    // saved-PM redirect leg. Prefer the dedicated Stripe-PayPal sub-account
+    // publishable key when the backend advertises one; fall back to the
+    // primary Stripe publishable key so the resume flow still has a Stripe
+    // instance to drive Stripe's PayPal PI.
+    paypalPublishableKey: unified.data.stripe?.paypalPublishableKey ?? publishableKey
   };
 }
 async function loadSavedPaymentProviders({
@@ -2832,13 +3563,21 @@ async function loadSavedPaymentProviders({
 }
 
 // src/flopay-checkout.tsx
-import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2 = 44;
 var PAYPAL_RESUME_STORAGE_KEY = "flopay_checkout_saved_payment_resume";
 var sessionInflightMap = /* @__PURE__ */ new Map();
 function sleep(ms) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
+function resolveDirectPaypalConfig(unified) {
+  const clientId = unified?.data.paypal?.publishableKey;
+  if (!clientId) return void 0;
+  return {
+    clientId,
+    environment: unified?.data.paypal?.environment
+  };
+}
 function canUseStorage() {
   return typeof window !== "undefined" && typeof window.sessionStorage !== "undefined";
 }
@@ -2912,6 +3651,7 @@ function FloPayCheckout({
   showPayPal = true,
   showApplePay = true,
   showGooglePay = true,
+  debug = false,
   layout,
   buttonsTheme,
   buttonsStyles,
@@ -2935,37 +3675,37 @@ function FloPayCheckout({
   const resolvedBillingUrl = resolveBillingApiUrl3(billingApiUrl);
   const checkoutType = createSessionParams ? "embedded_checkout" : "standard_checkout";
   const checkoutLayout = children ? "custom_layout" : layout === "buttons" ? "buttons_layout" : "default_layout";
-  const [unified, setUnified] = useState3(null);
-  const [flopay, setFloPay] = useState3(null);
-  const flopayRef = useRef3(null);
-  const [paypalFlopay, setPaypalFloPay] = useState3(null);
-  const paypalFlopayRef = useRef3(null);
-  const [session, setSession] = useState3(null);
-  const [resolvedSessionId, setResolvedSessionId] = useState3(sessionIdProp ?? "");
+  const [unified, setUnified] = useState4(null);
+  const [flopay, setFloPay] = useState4(null);
+  const flopayRef = useRef4(null);
+  const [paypalFlopay, setPaypalFloPay] = useState4(null);
+  const paypalFlopayRef = useRef4(null);
+  const [session, setSession] = useState4(null);
+  const [resolvedSessionId, setResolvedSessionId] = useState4(sessionIdProp ?? "");
   const activeSessionId = sessionIdProp ?? resolvedSessionId;
   const initSessionDependency = createSessionParams ? "" : activeSessionId;
-  const [isLoading, setIsLoading] = useState3(true);
-  const [loadError, setLoadError] = useState3(null);
-  const [currentMode, setCurrentMode] = useState3("full");
-  const [confirmProcessing, setConfirmProcessing] = useState3(false);
-  const [modeError, setModeError] = useState3(initialErrorMessage);
-  const [modeOverlayStatus, setModeOverlayStatus] = useState3(null);
-  const [modeOverlayError, setModeOverlayError] = useState3(null);
-  const [createSessionPatch, setCreateSessionPatch] = useState3(void 0);
-  const [createSessionPatchBaseHash, setCreateSessionPatchBaseHash] = useState3("");
-  const [cardBootstrapPending, setCardBootstrapPending] = useState3(false);
-  const autoCheckoutAttempted = useRef3(false);
-  const paypalResumeAttempted = useRef3(false);
-  const savedPaymentKeysRef = useRef3(null);
-  const onCompleteRef = useRef3(onComplete);
+  const [isLoading, setIsLoading] = useState4(true);
+  const [loadError, setLoadError] = useState4(null);
+  const [currentMode, setCurrentMode] = useState4("full");
+  const [confirmProcessing, setConfirmProcessing] = useState4(false);
+  const [modeError, setModeError] = useState4(initialErrorMessage);
+  const [modeOverlayStatus, setModeOverlayStatus] = useState4(null);
+  const [modeOverlayError, setModeOverlayError] = useState4(null);
+  const [createSessionPatch, setCreateSessionPatch] = useState4(void 0);
+  const [createSessionPatchBaseHash, setCreateSessionPatchBaseHash] = useState4("");
+  const [cardBootstrapPending, setCardBootstrapPending] = useState4(false);
+  const autoCheckoutAttempted = useRef4(false);
+  const paypalResumeAttempted = useRef4(false);
+  const savedPaymentKeysRef = useRef4(null);
+  const onCompleteRef = useRef4(onComplete);
   onCompleteRef.current = onComplete;
-  const onErrorRef = useRef3(onError);
+  const onErrorRef = useRef4(onError);
   onErrorRef.current = onError;
-  const onDeclineRef = useRef3(onDecline);
+  const onDeclineRef = useRef4(onDecline);
   onDeclineRef.current = onDecline;
-  const onSessionCompletedRef = useRef3(onSessionCompleted);
+  const onSessionCompletedRef = useRef4(onSessionCompleted);
   onSessionCompletedRef.current = onSessionCompleted;
-  useEffect4(() => {
+  useEffect5(() => {
     console.info("[FloPay] Checkout initialized", {
       sdk_version: SDK_VERSION,
       checkout_type: checkoutType,
@@ -2973,31 +3713,31 @@ function FloPayCheckout({
       billing_api_url: resolvedBillingUrl
     });
   }, [checkoutLayout, checkoutType, resolvedBillingUrl]);
-  const baseCreateSessionHash = useMemo3(
+  const baseCreateSessionHash = useMemo4(
     () => createSessionParams ? hashCreateParams(createSessionParams) : "",
     [createSessionParams]
   );
-  const activeCreateSessionPatch = useMemo3(
+  const activeCreateSessionPatch = useMemo4(
     () => createSessionPatchBaseHash === baseCreateSessionHash ? createSessionPatch : void 0,
     [createSessionPatch, createSessionPatchBaseHash, baseCreateSessionHash]
   );
-  const effectiveCreateSessionBase = useMemo3(
+  const effectiveCreateSessionBase = useMemo4(
     () => createSessionParams ? mergeInlineSessionPatch(createSessionParams, activeCreateSessionPatch) : void 0,
     [createSessionParams, activeCreateSessionPatch]
   );
   const effectiveCreateSessionMode = checkoutModeProp ?? effectiveCreateSessionBase?.checkoutMode ?? "full";
-  const effectiveCreateSession = useMemo3(
+  const effectiveCreateSession = useMemo4(
     () => effectiveCreateSessionBase ? {
       ...effectiveCreateSessionBase,
       checkoutMode: effectiveCreateSessionMode
     } : void 0,
     [effectiveCreateSessionBase, effectiveCreateSessionMode]
   );
-  useEffect4(() => {
+  useEffect5(() => {
     setCreateSessionPatch(void 0);
     setCreateSessionPatchBaseHash(baseCreateSessionHash);
   }, [baseCreateSessionHash]);
-  useEffect4(() => {
+  useEffect5(() => {
     setModeError(initialErrorMessage);
   }, [initialErrorMessage]);
   const emitDecline = useCallback2(
@@ -3035,12 +3775,12 @@ function FloPayCheckout({
             clearPayPalResumeState();
           }
         } else if (options?.initialAutoProcessingPending) {
-          const api = new PaymentAPI3(resolvedBillingUrl);
+          const api = new PaymentAPI4(resolvedBillingUrl);
           const completed = await api.waitForCheckoutSessionCompletion(options.initialAutoProcessingPending.sessionId, {
             initialDelayMs: options.initialAutoProcessingPending.retryAfterMs
           });
           if (completed.data.session?.status !== "complete") {
-            throw new FloPayError4("Automatic payment failed. Please try again.", "api_error", {
+            throw new FloPayError5("Automatic payment failed. Please try again.", "api_error", {
               code: completed.data.session?.status === "expired" ? "checkout_session_expired" : "checkout_processing_timeout"
             });
           }
@@ -3124,7 +3864,7 @@ function FloPayCheckout({
       resolvedBillingUrl
     ]
   );
-  useEffect4(() => {
+  useEffect5(() => {
     if (typeof window === "undefined" || paypalResumeAttempted.current) {
       return;
     }
@@ -3146,7 +3886,7 @@ function FloPayCheckout({
       try {
         if (params.get("redirect_status") === "failed") {
           throw Object.assign(
-            new FloPayError4("PayPal payment was declined. Please try again.", "api_error"),
+            new FloPayError5("PayPal payment was declined. Please try again.", "api_error"),
             { checkoutMethod: "paypal" }
           );
         }
@@ -3162,14 +3902,14 @@ function FloPayCheckout({
         const paypalStripe = (resumePaypalFlopay ?? resumeFlopay).getRawProvider();
         if (!paypalStripe) {
           throw Object.assign(
-            new FloPayError4("PayPal is not available.", "api_error"),
+            new FloPayError5("PayPal is not available.", "api_error"),
             { checkoutMethod: "paypal" }
           );
         }
         const { paymentIntent, error } = await paypalStripe.retrievePaymentIntent(clientSecret);
         if (error) {
           throw Object.assign(
-            new FloPayError4(
+            new FloPayError5(
               error.message ?? "Failed to retrieve PayPal payment status.",
               "api_error",
               { code: error.code }
@@ -3180,14 +3920,14 @@ function FloPayCheckout({
         const resultStatus = mapPayPalIntentStatusToPaymentResult(paymentIntent?.status);
         if (!paymentIntent || resultStatus === "failed") {
           throw Object.assign(
-            new FloPayError4("PayPal payment was not completed. Please try again.", "api_error"),
+            new FloPayError5("PayPal payment was not completed. Please try again.", "api_error"),
             { checkoutMethod: "paypal" }
           );
         }
         const paymentMethodId = typeof paymentIntent.payment_method === "string" ? paymentIntent.payment_method : paymentIntent.payment_method?.id;
         let finalResultStatus = resultStatus;
         if (resumeState.sessionId) {
-          const resumeApi = new PaymentAPI3(resolvedBillingUrl);
+          const resumeApi = new PaymentAPI4(resolvedBillingUrl);
           const resumeSessionResult = await resumeApi.getUnifiedCheckoutSession(resumeState.sessionId);
           const resumeSession = resumeSessionResult.data.session;
           if (resumeSession && resumeSession.status !== "complete") {
@@ -3204,7 +3944,7 @@ function FloPayCheckout({
             });
             if (processResult.type !== "success") {
               throw Object.assign(
-                new FloPayError4("Failed to finalize PayPal payment.", "api_error"),
+                new FloPayError5("Failed to finalize PayPal payment.", "api_error"),
                 { checkoutMethod: "paypal" }
               );
             }
@@ -3241,7 +3981,7 @@ function FloPayCheckout({
       }
     })();
   }, [emitDecline, locale, normalizeSavedPaymentError, resolvedBillingUrl]);
-  const initializedHashRef = useRef3(null);
+  const initializedHashRef = useRef4(null);
   function hashCreateParams(params) {
     const key = JSON.stringify({
       c: params?.clientId,
@@ -3266,23 +4006,23 @@ function FloPayCheckout({
     }
     return `flopay_session_${Math.abs(h).toString(36)}`;
   }
-  const createSessionHash = useMemo3(
+  const createSessionHash = useMemo4(
     () => effectiveCreateSession ? hashCreateParams(effectiveCreateSession) : "",
     [effectiveCreateSession]
   );
-  const createSessionParamsRef = useRef3(effectiveCreateSession);
+  const createSessionParamsRef = useRef4(effectiveCreateSession);
   createSessionParamsRef.current = effectiveCreateSession;
-  useEffect4(() => {
+  useEffect5(() => {
     setResolvedSessionId(sessionIdProp ?? "");
   }, [sessionIdProp]);
-  useEffect4(() => {
+  useEffect5(() => {
     autoCheckoutAttempted.current = false;
     setModeError(initialErrorMessage);
     setModeOverlayError(null);
     setModeOverlayStatus(null);
   }, [createSessionHash, initialErrorMessage, sessionIdProp]);
   async function resolveInlineSession(params, cacheKey) {
-    const api = new PaymentAPI3(resolvedBillingUrl);
+    const api = new PaymentAPI4(resolvedBillingUrl);
     let sid = typeof window !== "undefined" ? window.sessionStorage.getItem(cacheKey) : null;
     let realResult = null;
     if (sid) {
@@ -3322,7 +4062,7 @@ function FloPayCheckout({
     async (patch) => {
       const baseParams = createSessionParamsRef.current;
       if (!baseParams) {
-        throw new FloPayError4("createSession is required to bootstrap checkout.", "validation_error");
+        throw new FloPayError5("createSession is required to bootstrap checkout.", "validation_error");
       }
       const mergedParams = mergeInlineSessionPatch(baseParams, patch);
       const cacheKey = hashCreateParams(mergedParams);
@@ -3402,7 +4142,7 @@ function FloPayCheckout({
     resolvedSessionId,
     session
   ]);
-  useEffect4(() => {
+  useEffect5(() => {
     let cancelled = false;
     setLoadError(null);
     if (createSessionHash) {
@@ -3446,7 +4186,7 @@ function FloPayCheckout({
           }
         } catch (err) {
           if (cancelled) return;
-          const errorCode = err instanceof FloPayError4 ? err.code : typeof err === "object" && err !== null && "code" in err ? err.code : void 0;
+          const errorCode = err instanceof FloPayError5 ? err.code : typeof err === "object" && err !== null && "code" in err ? err.code : void 0;
           if (shouldAutoProcessInlineSession && errorCode === "session_auto_completed") {
             autoCheckoutAttempted.current = true;
             setModeOverlayStatus("success");
@@ -3462,7 +4202,7 @@ function FloPayCheckout({
             setModeOverlayStatus(null);
             setModeOverlayError(null);
           }
-          const floPayErr = err instanceof FloPayError4 ? err : new FloPayError4(err instanceof Error ? err.message : "Failed to create session", "api_error");
+          const floPayErr = err instanceof FloPayError5 ? err : new FloPayError5(err instanceof Error ? err.message : "Failed to create session", "api_error");
           setLoadError(floPayErr);
         }
       })();
@@ -3473,14 +4213,14 @@ function FloPayCheckout({
     setIsLoading(true);
     async function init() {
       try {
-        const api = new PaymentAPI3(resolvedBillingUrl);
+        const api = new PaymentAPI4(resolvedBillingUrl);
         const result = await api.getUnifiedCheckoutSession(activeSessionId);
         if (cancelled) return;
         setUnified(result);
         const sess = result.data.session ?? null;
         setSession(sess);
         if (!sess) {
-          throw new FloPayError4("No session data returned", "api_error");
+          throw new FloPayError5("No session data returned", "api_error");
         }
         if (sess.status === "complete") {
           setIsLoading(false);
@@ -3488,7 +4228,7 @@ function FloPayCheckout({
           return;
         }
         if (sess.status === "expired") {
-          throw new FloPayError4("Checkout session has expired.", "api_error", {
+          throw new FloPayError5("Checkout session has expired.", "api_error", {
             code: "checkout_session_expired"
           });
         }
@@ -3522,7 +4262,7 @@ function FloPayCheckout({
         if (!cancelled) setIsLoading(false);
       } catch (err) {
         if (cancelled) return;
-        const floPayErr = err instanceof FloPayError4 ? err : new FloPayError4(err instanceof Error ? err.message : "Failed to initialize checkout", "api_error");
+        const floPayErr = err instanceof FloPayError5 ? err : new FloPayError5(err instanceof Error ? err.message : "Failed to initialize checkout", "api_error");
         setLoadError(floPayErr);
         setIsLoading(false);
       }
@@ -3575,14 +4315,14 @@ function FloPayCheckout({
       setConfirmProcessing(false);
     }
   }, [activeSessionId, confirmProcessing, runSavedPaymentFlow, session]);
-  const providerOptions = useMemo3(() => {
+  const providerOptions = useMemo4(() => {
     if (!unified || !session) return void 0;
     const opts = {
       appearance,
       paymentMethodCreation: "manual",
       billingApiUrl: resolvedBillingUrl
     };
-    if (unified.provider === "stripe" && unified.data.stripe?.clientSecret) {
+    if (unified.data.stripe?.clientSecret) {
       opts.clientSecret = unified.data.stripe.clientSecret;
     } else {
       const displayTotal = buildCheckoutDisplayData(session).total;
@@ -3594,7 +4334,7 @@ function FloPayCheckout({
   const shouldHandleInlineSessionPatch = Boolean(
     createSessionParams && !children && layout === "buttons" && onBeforeButtonClick && effectiveCreateSessionMode === "full"
   );
-  const checkoutValue = useMemo3(
+  const checkoutValue = useMemo4(
     () => ({
       session,
       loading: isLoading,
@@ -3616,7 +4356,7 @@ function FloPayCheckout({
     ]
   );
   const shouldShowInterimButtons = Boolean(createSessionParams) && layout === "buttons" && (!flopay || !providerOptions);
-  const modeOverlay = modeOverlayStatus ? /* @__PURE__ */ jsx6(
+  const modeOverlay = modeOverlayStatus ? /* @__PURE__ */ jsx7(
     ProcessingOverlay,
     {
       status: modeOverlayStatus,
@@ -3625,31 +4365,31 @@ function FloPayCheckout({
   ) : null;
   if (isLoading) {
     if (loadingNode) {
-      return /* @__PURE__ */ jsxs4(Fragment3, { children: [
+      return /* @__PURE__ */ jsxs5(Fragment3, { children: [
         loadingNode,
         modeOverlay
       ] });
     }
     if (layout === "buttons") {
-      const skeletonBar = (h) => /* @__PURE__ */ jsx6("div", { style: {
+      const skeletonBar = (h) => /* @__PURE__ */ jsx7("div", { style: {
         height: h,
         borderRadius: 8,
         background: "#e5e7eb",
         animation: "flopay-loading-pulse 1.5s ease-in-out infinite"
       } });
-      return /* @__PURE__ */ jsxs4(Fragment3, { children: [
-        /* @__PURE__ */ jsxs4("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
+      return /* @__PURE__ */ jsxs5(Fragment3, { children: [
+        /* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
           showPayPal && skeletonBar(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
           (showApplePay || showGooglePay) && skeletonBar(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
           skeletonBar(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
-          /* @__PURE__ */ jsx6("style", { children: `@keyframes flopay-loading-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
+          /* @__PURE__ */ jsx7("style", { children: `@keyframes flopay-loading-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
         ] }),
         modeOverlay
       ] });
     }
-    return /* @__PURE__ */ jsxs4(Fragment3, { children: [
-      /* @__PURE__ */ jsxs4("div", { style: { display: "flex", justifyContent: "center", padding: 32 }, children: [
-        /* @__PURE__ */ jsx6("div", { style: {
+    return /* @__PURE__ */ jsxs5(Fragment3, { children: [
+      /* @__PURE__ */ jsxs5("div", { style: { display: "flex", justifyContent: "center", padding: 32 }, children: [
+        /* @__PURE__ */ jsx7("div", { style: {
           width: 24,
           height: 24,
           border: "2px solid #e5e7eb",
@@ -3657,16 +4397,16 @@ function FloPayCheckout({
           borderRadius: "50%",
           animation: "spin 0.6s linear infinite"
         } }),
-        /* @__PURE__ */ jsx6("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` })
+        /* @__PURE__ */ jsx7("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` })
       ] }),
       modeOverlay
     ] });
   }
   if (loadError) {
     if (errorNode) {
-      return /* @__PURE__ */ jsx6(CheckoutContext.Provider, { value: checkoutValue, children: errorNode(loadError) });
+      return /* @__PURE__ */ jsx7(CheckoutContext.Provider, { value: checkoutValue, children: errorNode(loadError) });
     }
-    return /* @__PURE__ */ jsx6(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsx7(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx7(
       "div",
       {
         style: {
@@ -3680,8 +4420,8 @@ function FloPayCheckout({
     ) });
   }
   if (shouldShowInterimButtons) {
-    return /* @__PURE__ */ jsxs4(Fragment3, { children: [
-      /* @__PURE__ */ jsx6(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsxs5(Fragment3, { children: [
+      /* @__PURE__ */ jsx7(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx7(
         InterimButtonsView,
         {
           onButtonClick,
@@ -3699,12 +4439,12 @@ function FloPayCheckout({
     ] });
   }
   if (!flopay || !providerOptions) {
-    return /* @__PURE__ */ jsx6(Fragment3, { children: modeOverlay });
+    return /* @__PURE__ */ jsx7(Fragment3, { children: modeOverlay });
   }
   if (currentMode === "confirm") {
-    return /* @__PURE__ */ jsxs4(Fragment3, { children: [
-      /* @__PURE__ */ jsx6(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx6(FloPayProvider, { flopay, paypalFlopay, options: providerOptions, children: /* @__PURE__ */ jsxs4("div", { className, children: [
-        modeError && /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsxs5(Fragment3, { children: [
+      /* @__PURE__ */ jsx7(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx7(FloPayProvider, { flopay, paypalFlopay, options: providerOptions, children: /* @__PURE__ */ jsxs5("div", { className, children: [
+        modeError && /* @__PURE__ */ jsx7(
           "div",
           {
             style: {
@@ -3719,7 +4459,7 @@ function FloPayCheckout({
         renderConfirmButton ? renderConfirmButton({
           onConfirm: handleConfirmCheckout,
           isProcessing: confirmProcessing
-        }) : /* @__PURE__ */ jsx6(
+        }) : /* @__PURE__ */ jsx7(
           "button",
           {
             type: "button",
@@ -3744,9 +4484,9 @@ function FloPayCheckout({
       modeOverlay
     ] });
   }
-  return /* @__PURE__ */ jsxs4(Fragment3, { children: [
-    /* @__PURE__ */ jsx6(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx6(FloPayProvider, { flopay, paypalFlopay, options: providerOptions, children: children ? /* @__PURE__ */ jsxs4(Fragment3, { children: [
-      modeError && /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsxs5(Fragment3, { children: [
+    /* @__PURE__ */ jsx7(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx7(FloPayProvider, { flopay, paypalFlopay, options: providerOptions, children: children ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
+      modeError && /* @__PURE__ */ jsx7(
         "div",
         {
           style: {
@@ -3761,7 +4501,7 @@ function FloPayCheckout({
           children: modeError
         }
       ),
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx7(
         SessionInjector,
         {
           sessionId: activeSessionId,
@@ -3770,7 +4510,7 @@ function FloPayCheckout({
           children
         }
       )
-    ] }) : /* @__PURE__ */ jsx6(
+    ] }) : /* @__PURE__ */ jsx7(
       SplitCardForm,
       {
         sessionId: activeSessionId,
@@ -3809,7 +4549,11 @@ function FloPayCheckout({
         checkoutType: createSessionParams ? "embedded_checkout" : "standard_checkout",
         checkoutLayout: children ? "custom_layout" : layout === "buttons" ? "buttons_layout" : "default_layout",
         submitLabel,
-        className
+        className,
+        directPaypal: resolveDirectPaypalConfig(unified),
+        isSubscription: session?.mode === "subscription",
+        session,
+        debug
       }
     ) }) }),
     modeOverlay
@@ -3821,8 +4565,8 @@ function SessionInjector({
   session,
   children
 }) {
-  return /* @__PURE__ */ jsx6(Fragment3, { children: React6.Children.map(children, (child) => {
-    if (!React6.isValidElement(child)) return child;
+  return /* @__PURE__ */ jsx7(Fragment3, { children: React7.Children.map(children, (child) => {
+    if (!React7.isValidElement(child)) return child;
     const existing = child.props;
     const injected = {};
     if (!existing.sessionId) injected.sessionId = sessionId;
@@ -3836,7 +4580,7 @@ function SessionInjector({
         injected.lastName = session.customer.lastName;
     }
     if (Object.keys(injected).length === 0) return child;
-    return React6.cloneElement(child, injected);
+    return React7.cloneElement(child, injected);
   }) });
 }
 function InterimButtonsView({
@@ -3854,14 +4598,14 @@ function InterimButtonsView({
   cardBackButtonContent,
   cardTitleContent
 }) {
-  const [showCardForm, setShowCardForm] = useState3(false);
+  const [showCardForm, setShowCardForm] = useState4(false);
   const isCardOpenControlled = typeof cardOpen === "boolean";
-  useEffect4(() => {
+  useEffect5(() => {
     if (isCardOpenControlled) {
       setShowCardForm(cardOpen);
     }
   }, [cardOpen, isCardOpenControlled]);
-  const bStyles = useMemo3(() => {
+  const bStyles = useMemo4(() => {
     const base = resolveButtonsLayoutTheme2(buttonsTheme);
     if (!stylesOverride) return base;
     return {
@@ -3875,7 +4619,7 @@ function InterimButtonsView({
       title: { ...base.title, ...stylesOverride.title }
     };
   }, [buttonsTheme, stylesOverride]);
-  const skeleton = (h) => /* @__PURE__ */ jsx6("div", { style: {
+  const skeleton = (h) => /* @__PURE__ */ jsx7("div", { style: {
     height: h,
     borderRadius: 8,
     background: "#e5e7eb",
@@ -3887,15 +4631,15 @@ function InterimButtonsView({
     const inputBg = bStyles.cardInputBackground ?? "white";
     const hideBackButtonLabel = isEmptySlotContent(cardBackButtonContent);
     const hideTitle = isEmptySlotContent(cardTitleContent);
-    return /* @__PURE__ */ jsxs4("div", { style: {
+    return /* @__PURE__ */ jsxs5("div", { style: {
       backgroundColor: bStyles.cardFormContainer?.backgroundColor ?? "white",
       borderRadius: "8px",
       animation: "flopay-interim-expand 0.35s cubic-bezier(0.4, 0, 0.2, 1) both",
       overflow: "hidden",
       ...bStyles.cardFormContainer
     }, children: [
-      /* @__PURE__ */ jsxs4("div", { style: { display: "flex", alignItems: "center", padding: "0.75rem 0 0.625rem" }, children: [
-        /* @__PURE__ */ jsxs4(
+      /* @__PURE__ */ jsxs5("div", { style: { display: "flex", alignItems: "center", padding: "0.75rem 0 0.625rem" }, children: [
+        /* @__PURE__ */ jsxs5(
           "button",
           {
             type: "button",
@@ -3922,7 +4666,7 @@ function InterimButtonsView({
               ...bStyles.backButton
             },
             children: [
-              /* @__PURE__ */ jsx6("span", { style: {
+              /* @__PURE__ */ jsx7("span", { style: {
                 display: "inline-flex",
                 alignItems: "center",
                 justifyContent: "center",
@@ -3931,12 +4675,12 @@ function InterimButtonsView({
                 borderRadius: "50%",
                 backgroundColor: "#f3f4f6",
                 ...bStyles.backButtonIcon
-              }, children: /* @__PURE__ */ jsx6("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx6("path", { d: "M15 18l-6-6 6-6" }) }) }),
-              /* @__PURE__ */ jsx6(BackButtonContentSlot, { content: cardBackButtonContent })
+              }, children: /* @__PURE__ */ jsx7("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx7("path", { d: "M15 18l-6-6 6-6" }) }) }),
+              /* @__PURE__ */ jsx7(BackButtonContentSlot, { content: cardBackButtonContent })
             ]
           }
         ),
-        hideTitle ? /* @__PURE__ */ jsx6("div", { style: { flex: 1 } }) : /* @__PURE__ */ jsx6("div", { style: {
+        hideTitle ? /* @__PURE__ */ jsx7("div", { style: { flex: 1 } }) : /* @__PURE__ */ jsx7("div", { style: {
           flex: 1,
           textAlign: "center",
           fontWeight: 600,
@@ -3944,15 +4688,15 @@ function InterimButtonsView({
           color: "#262833",
           paddingRight: 80,
           ...bStyles.title
-        }, children: /* @__PURE__ */ jsx6(TitleContentSlot, { content: cardTitleContent }) })
+        }, children: /* @__PURE__ */ jsx7(TitleContentSlot, { content: cardTitleContent }) })
       ] }),
-      /* @__PURE__ */ jsx6("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTopLeftRadius: 8, borderTopRightRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx6("div", { style: { width: "60%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
-      /* @__PURE__ */ jsxs4("div", { style: { display: "flex" }, children: [
-        /* @__PURE__ */ jsx6("div", { style: { flex: 1, backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTop: "none", borderRight: "none", borderBottomLeftRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx6("div", { style: { width: "50%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
-        /* @__PURE__ */ jsx6("div", { style: { flex: 1, backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTop: "none", borderBottomRightRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx6("div", { style: { width: "40%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) })
+      /* @__PURE__ */ jsx7("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTopLeftRadius: 8, borderTopRightRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx7("div", { style: { width: "60%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
+      /* @__PURE__ */ jsxs5("div", { style: { display: "flex" }, children: [
+        /* @__PURE__ */ jsx7("div", { style: { flex: 1, backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTop: "none", borderRight: "none", borderBottomLeftRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx7("div", { style: { width: "50%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
+        /* @__PURE__ */ jsx7("div", { style: { flex: 1, backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTop: "none", borderBottomRightRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx7("div", { style: { width: "40%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) })
       ] }),
-      /* @__PURE__ */ jsx6("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderRadius: 8, marginTop: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx6("div", { style: { width: "45%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
-      /* @__PURE__ */ jsx6("div", { style: {
+      /* @__PURE__ */ jsx7("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderRadius: 8, marginTop: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx7("div", { style: { width: "45%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
+      /* @__PURE__ */ jsx7("div", { style: {
         height: 50,
         borderRadius: 8,
         marginTop: 16,
@@ -3961,7 +4705,7 @@ function InterimButtonsView({
         ...bStyles.submitButton,
         opacity: 0.5
       } }),
-      /* @__PURE__ */ jsx6("style", { children: `
+      /* @__PURE__ */ jsx7("style", { children: `
           @keyframes flopay-interim-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
           @keyframes flopay-interim-expand {
             0% { opacity: 0; max-height: 0; transform: translateY(-12px); }
@@ -3971,10 +4715,10 @@ function InterimButtonsView({
         ` })
     ] });
   }
-  return /* @__PURE__ */ jsxs4("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
+  return /* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
     showPayPal && skeleton(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
     (showApplePay || showGooglePay) && skeleton(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx7(
       "button",
       {
         type: "button",
@@ -4014,10 +4758,10 @@ function InterimButtonsView({
         onMouseUp: (e) => {
           e.currentTarget.style.transform = "scale(1)";
         },
-        children: /* @__PURE__ */ jsx6(CardButtonContentSlot, { content: cardButtonContent })
+        children: /* @__PURE__ */ jsx7(CardButtonContentSlot, { content: cardButtonContent })
       }
     ),
-    errorMessage && /* @__PURE__ */ jsxs4("div", { style: {
+    errorMessage && /* @__PURE__ */ jsxs5("div", { style: {
       margin: "0.25rem 0",
       padding: "0.625rem 0.875rem",
       background: "#FEF2F2",
@@ -4031,22 +4775,22 @@ function InterimButtonsView({
       gap: "0.5rem",
       ...bStyles.errorBanner
     }, children: [
-      /* @__PURE__ */ jsx6("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx6("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+      /* @__PURE__ */ jsx7("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx7("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
       errorMessage
     ] }),
-    /* @__PURE__ */ jsx6("style", { children: `@keyframes flopay-interim-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
+    /* @__PURE__ */ jsx7("style", { children: `@keyframes flopay-interim-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
   ] });
 }
 
 // src/checkout-form.tsx
-import { PaymentAPI as PaymentAPI4 } from "@flopay/js";
-import { FloPayError as FloPayError5 } from "@flopay/shared";
-import { forwardRef as forwardRef2, useCallback as useCallback3, useEffect as useEffect5, useImperativeHandle as useImperativeHandle2, useState as useState4 } from "react";
-import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { PaymentAPI as PaymentAPI5 } from "@flopay/js";
+import { FloPayError as FloPayError6 } from "@flopay/shared";
+import { forwardRef as forwardRef2, useCallback as useCallback3, useEffect as useEffect6, useImperativeHandle as useImperativeHandle2, useState as useState5 } from "react";
+import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var WALLET_RESUME_KEY2 = "flopay_wallet_resume";
 var CheckoutForm = forwardRef2(
   function CheckoutForm2(props, ref) {
-    return /* @__PURE__ */ jsx7(CheckoutFormInner, { ...props, innerRef: ref });
+    return /* @__PURE__ */ jsx8(CheckoutFormInner, { ...props, innerRef: ref });
   }
 );
 function CheckoutFormInner({
@@ -4075,9 +4819,9 @@ function CheckoutFormInner({
   const paypalFlopay = usePayPalFloPay();
   const elements = useElements();
   const contextBillingUrl = useBillingApiUrl();
-  const [processing, setProcessing] = useState4(false);
-  const [error, setError] = useState4(null);
-  const [is3DSActive, setIs3DSActive] = useState4(false);
+  const [processing, setProcessing] = useState5(false);
+  const [error, setError] = useState5(null);
+  const [is3DSActive, setIs3DSActive] = useState5(false);
   const displayError = externalError ?? error;
   const isSubmitting = externalProcessing ?? processing;
   const isSelfContained = !onTokenizedBody;
@@ -4102,7 +4846,7 @@ function CheckoutFormInner({
       const resolvedCompletionPaymentMethodId = completionPaymentMethodId ?? resolveTokenizedPaymentMethodId(tokenizedBody);
       const requestTokenizedBody = tokenizedBody.originalPaymentMethodId ? { ...tokenizedBody, originalPaymentMethodId: void 0 } : tokenizedBody;
       try {
-        const api = new PaymentAPI4(baseUrl);
+        const api = new PaymentAPI5(baseUrl);
         const response = await api.processPayment(userId ?? "", {
           sessionId,
           tokenizedData: requestTokenizedBody,
@@ -4243,7 +4987,7 @@ function CheckoutFormInner({
       }
     }
   }), [flopay, dispatchTokenizedBody, onError, updateError, emitDecline]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (typeof window === "undefined") return;
     const stored = localStorage.getItem(WALLET_RESUME_KEY2);
     if (!stored) return;
@@ -4285,7 +5029,7 @@ function CheckoutFormInner({
           return;
         }
         if (!sessionId || !email) {
-          throw new FloPayError5("Missing sessionId or email", "validation_error");
+          throw new FloPayError6("Missing sessionId or email", "validation_error");
         }
         const intentResponse = await fetch(`${baseUrl}/v1/checkouts/payments/intents`, {
           method: "POST",
@@ -4309,7 +5053,7 @@ function CheckoutFormInner({
         }
         const intentJson = await intentResponse.json();
         const intentClientSecret = intentJson.data?.id;
-        if (!intentClientSecret) throw new FloPayError5("No client_secret in payment intent response", "api_error");
+        if (!intentClientSecret) throw new FloPayError6("No client_secret in payment intent response", "api_error");
         const confirmResult = await flopay.confirmCardPayment({
           clientSecret: intentClientSecret,
           paymentMethodId: pmResult.paymentMethodId
@@ -4328,7 +5072,7 @@ function CheckoutFormInner({
         const paymentIntentId = confirmResult.paymentIntentId ?? confirmedPaymentIntent?.id;
         const paymentMethodId = confirmResult.paymentMethodId ?? resolvePaymentIntentPaymentMethodId(confirmedPaymentIntent) ?? pmResult.paymentMethodId;
         if (!paymentIntentId) {
-          const error2 = new FloPayError5("No payment intent returned after confirmation.", "api_error");
+          const error2 = new FloPayError6("No payment intent returned after confirmation.", "api_error");
           updateError(error2.message);
           onError?.(error2);
           return;
@@ -4351,8 +5095,8 @@ function CheckoutFormInner({
     [flopay, elements, isSubmitting, sessionId, email, baseUrl, isSelfContained, dispatchTokenizedBody, onError, updateError, emitDecline]
   );
   const isReady = flopay !== null && elements !== null;
-  return /* @__PURE__ */ jsxs5("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
-    (is3DSActive || isSubmitting) && /* @__PURE__ */ jsx7("div", { "data-testid": "flopay-overlay", style: {
+  return /* @__PURE__ */ jsxs6("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
+    (is3DSActive || isSubmitting) && /* @__PURE__ */ jsx8("div", { "data-testid": "flopay-overlay", style: {
       position: "absolute",
       inset: 0,
       background: "rgba(255,255,255,0.7)",
@@ -4361,12 +5105,12 @@ function CheckoutFormInner({
       justifyContent: "center",
       zIndex: 10
     }, children: is3DSActive ? "Verifying payment..." : "Processing..." }),
-    !isReady && /* @__PURE__ */ jsx7("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." }),
-    isReady && /* @__PURE__ */ jsxs5(Fragment4, { children: [
-      /* @__PURE__ */ jsx7(PaymentElement, { options: { layout } }),
-      showAddress && /* @__PURE__ */ jsx7(AddressElement, { options: { mode: showAddress === true ? "billing" : showAddress } }),
-      displayError && /* @__PURE__ */ jsx7("div", { role: "alert", "data-testid": "flopay-error", style: { color: "red", margin: "0.75rem 0" }, children: displayError }),
-      children ?? /* @__PURE__ */ jsx7(
+    !isReady && /* @__PURE__ */ jsx8("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." }),
+    isReady && /* @__PURE__ */ jsxs6(Fragment4, { children: [
+      /* @__PURE__ */ jsx8(PaymentElement, { options: { layout } }),
+      showAddress && /* @__PURE__ */ jsx8(AddressElement, { options: { mode: showAddress === true ? "billing" : showAddress } }),
+      displayError && /* @__PURE__ */ jsx8("div", { role: "alert", "data-testid": "flopay-error", style: { color: "red", margin: "0.75rem 0" }, children: displayError }),
+      children ?? /* @__PURE__ */ jsx8(
         "button",
         {
           type: "submit",
@@ -4380,10 +5124,10 @@ function CheckoutFormInner({
 }
 
 // src/paypal-button.tsx
-import { PaymentAPI as PaymentAPI5 } from "@flopay/js";
-import { FloPayError as FloPayError6 } from "@flopay/shared";
-import { useCallback as useCallback4, useEffect as useEffect6, useRef as useRef4, useState as useState5 } from "react";
-import { Fragment as Fragment5, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { PaymentAPI as PaymentAPI6 } from "@flopay/js";
+import { FloPayError as FloPayError7 } from "@flopay/shared";
+import { useCallback as useCallback4, useEffect as useEffect7, useRef as useRef5, useState as useState6 } from "react";
+import { Fragment as Fragment5, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 function PayPalButton({
   sessionId,
   billingApiUrl,
@@ -4400,14 +5144,14 @@ function PayPalButton({
   const flopay = useFloPay();
   const elements = useElements();
   const contextBillingUrl = useBillingApiUrl();
-  const [ready, setReady] = useState5(false);
-  const [submitting, setSubmitting] = useState5(false);
-  const paypalResumeAttempted = useRef4(false);
+  const [ready, setReady] = useState6(false);
+  const [submitting, setSubmitting] = useState6(false);
+  const paypalResumeAttempted = useRef5(false);
   const baseUrl = (billingApiUrl || contextBillingUrl).replace(/\/+$/, "");
   const processPaymentInternal = useCallback4(
     async (tokenizedBody) => {
       try {
-        const api = new PaymentAPI5(baseUrl);
+        const api = new PaymentAPI6(baseUrl);
         const response = await api.processPayment(userId ?? "", {
           sessionId,
           tokenizedData: tokenizedBody,
@@ -4441,7 +5185,7 @@ function PayPalButton({
     },
     [onTokenizedBody, processPaymentInternal]
   );
-  useEffect6(() => {
+  useEffect7(() => {
     if (!flopay || paypalResumeAttempted.current) return;
     const params = new URLSearchParams(window.location.search);
     const paymentIntentId = params.get("payment_intent");
@@ -4495,7 +5239,7 @@ function PayPalButton({
       setSubmitting(true);
       onErrorChange?.(null);
       if (!sessionId || !email) {
-        throw new FloPayError6("Missing sessionId or email for PayPal payment", "validation_error");
+        throw new FloPayError7("Missing sessionId or email for PayPal payment", "validation_error");
       }
       const result = await flopay.confirmPayPalPayment({
         billingApiUrl: baseUrl,
@@ -4522,11 +5266,11 @@ function PayPalButton({
     }
   }, [flopay, elements, sessionId, email, baseUrl, dispatchTokenizedBody, onErrorChange]);
   if (!flopay || !elements) {
-    return /* @__PURE__ */ jsx8("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6, animation: "pulse 1.5s infinite" } });
+    return /* @__PURE__ */ jsx9("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6, animation: "pulse 1.5s infinite" } });
   }
-  return /* @__PURE__ */ jsxs6(Fragment5, { children: [
-    !ready && /* @__PURE__ */ jsx8("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6 } }),
-    /* @__PURE__ */ jsx8("div", { style: ready ? {} : { display: "none" }, children: /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsxs7(Fragment5, { children: [
+    !ready && /* @__PURE__ */ jsx9("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6 } }),
+    /* @__PURE__ */ jsx9("div", { style: ready ? {} : { display: "none" }, children: /* @__PURE__ */ jsx9(
       "button",
       {
         type: "button",
@@ -4548,7 +5292,7 @@ function PayPalButton({
         children: submitting ? "Processing..." : "PayPal"
       }
     ) }),
-    (submitting || isProcessing) && /* @__PURE__ */ jsx8("div", { style: {
+    (submitting || isProcessing) && /* @__PURE__ */ jsx9("div", { style: {
       position: "fixed",
       inset: 0,
       background: "rgba(0,0,0,0.4)",
@@ -4556,7 +5300,7 @@ function PayPalButton({
       alignItems: "center",
       justifyContent: "center",
       zIndex: 1e3
-    }, children: /* @__PURE__ */ jsx8("div", { style: {
+    }, children: /* @__PURE__ */ jsx9("div", { style: {
       background: "white",
       borderRadius: 8,
       padding: "1.5rem",
@@ -4568,20 +5312,20 @@ function PayPalButton({
 }
 
 // src/automatic-payment-button.tsx
-import { useCallback as useCallback5, useEffect as useEffect7, useMemo as useMemo4, useRef as useRef5, useState as useState6 } from "react";
-import { PaymentAPI as PaymentAPI6 } from "@flopay/js";
-import { FloPayError as FloPayError7, resolveBillingApiUrl as resolveBillingApiUrl4, resolveButtonsLayoutTheme as resolveButtonsLayoutTheme3 } from "@flopay/shared";
-import { Fragment as Fragment6, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { useCallback as useCallback5, useEffect as useEffect8, useMemo as useMemo5, useRef as useRef6, useState as useState7 } from "react";
+import { PaymentAPI as PaymentAPI7 } from "@flopay/js";
+import { FloPayError as FloPayError8, resolveBillingApiUrl as resolveBillingApiUrl4, resolveButtonsLayoutTheme as resolveButtonsLayoutTheme3 } from "@flopay/shared";
+import { Fragment as Fragment6, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 var DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT3 = 44;
 var PAYPAL_RESUME_STORAGE_KEY2 = "flopay_automatic_payment_button_resume";
 function sleep2(ms) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
 function coerceError(err, fallbackMessage) {
-  if (err instanceof FloPayError7) {
+  if (err instanceof FloPayError8) {
     return err;
   }
-  return new FloPayError7(
+  return new FloPayError8(
     err instanceof Error ? err.message : fallbackMessage,
     "api_error"
   );
@@ -4688,11 +5432,11 @@ function FloPayAutomaticPaymentButton({
   style,
   ...buttonProps
 }) {
-  const resolvedBillingUrl = useMemo4(
+  const resolvedBillingUrl = useMemo5(
     () => resolveBillingApiUrl4(billingApiUrl),
     [billingApiUrl]
   );
-  const createSessionDraft = useMemo4(
+  const createSessionDraft = useMemo5(
     () => resolveCreateSessionDraft({
       createSession,
       clientId,
@@ -4718,43 +5462,47 @@ function FloPayAutomaticPaymentButton({
       utmMetadata
     ]
   );
-  const [isProcessing, setIsProcessing] = useState6(false);
-  const [overlayStatus, setOverlayStatus] = useState6(null);
-  const [overlayError, setOverlayError] = useState6(null);
-  const [fallbackSession, setFallbackSession] = useState6(null);
-  const automaticPaymentToken = useMemo4(
+  const [isProcessing, setIsProcessing] = useState7(false);
+  const [overlayStatus, setOverlayStatus] = useState7(null);
+  const [overlayError, setOverlayError] = useState7(null);
+  const [fallbackSession, setFallbackSession] = useState7(null);
+  const automaticPaymentToken = useMemo5(
     () => paymentMethodId ? {
       id: paymentMethodId,
-      type: "card",
+      // Saved PayPal `user_payment_method` records are submitted with
+      // `type: 'paypal'` so the backend routes the upsell through the
+      // direct PayPal gateway's vaulted-token flow. Card and wallet PMs
+      // continue to use `type: 'card'`.
+      type: checkoutMethod === "paypal" ? "paypal" : "card",
       ...checkoutMethod === "paypal" ? { isPaypal: true } : {}
     } : void 0,
     [checkoutMethod, paymentMethodId]
   );
-  const isMountedRef = useRef5(true);
-  const resumeAttemptedRef = useRef5(false);
-  const fallbackSessionRef = useRef5(fallbackSession);
-  const onSuccessRef = useRef5(onSuccess);
-  const onErrorRef = useRef5(onError);
-  const onDeclineRef = useRef5(onDecline);
-  useEffect7(() => {
+  const isMountedRef = useRef6(true);
+  const resumeAttemptedRef = useRef6(false);
+  const fallbackSessionRef = useRef6(fallbackSession);
+  const onSuccessRef = useRef6(onSuccess);
+  const onErrorRef = useRef6(onError);
+  const onDeclineRef = useRef6(onDecline);
+  useEffect8(() => {
     fallbackSessionRef.current = fallbackSession;
   }, [fallbackSession]);
-  useEffect7(() => {
+  useEffect8(() => {
     onSuccessRef.current = onSuccess;
   }, [onSuccess]);
-  useEffect7(() => {
+  useEffect8(() => {
     onErrorRef.current = onError;
   }, [onError]);
-  useEffect7(() => {
+  useEffect8(() => {
     onDeclineRef.current = onDecline;
   }, [onDecline]);
-  useEffect7(() => {
+  useEffect8(() => {
     isMountedRef.current = true;
     return () => {
       isMountedRef.current = false;
     };
   }, []);
-  useEffect7(() => {
+  useEffect8(() => {
     if (!fallbackSession || typeof window === "undefined") {
       return;
     }
@@ -4795,7 +5543,7 @@ function FloPayAutomaticPaymentButton({
   const processResolvedSession = useCallback5(async (apiResult, resolvedSessionId, options) => {
     const session = apiResult.data.session ?? null;
     if (!session) {
-      throw new FloPayError7("No session data returned", "api_error");
+      throw new FloPayError8("No session data returned", "api_error");
     }
     if (session.status === "complete") {
       await showSuccess({
@@ -4807,7 +5555,7 @@ function FloPayAutomaticPaymentButton({
       return;
     }
     if (session.status === "expired") {
-      throw new FloPayError7("Checkout session has expired.", "api_error", {
+      throw new FloPayError8("Checkout session has expired.", "api_error", {
         code: "checkout_session_expired"
       });
     }
@@ -4817,13 +5565,13 @@ function FloPayAutomaticPaymentButton({
       const shouldTreatCreateSessionFlowAsServerAutoAttempt = options?.fromCreateSession && (apiResult.autoProcessingAttempted === true || !!apiResult.autoProcessingError || !!redirectResult);
       const shouldRetryPayPalClientSide = checkoutMethod === "paypal" && automaticPaymentToken?.isPaypal === true && options?.fromCreateSession === true;
       if (apiResult.autoProcessingPending) {
-        const api = new PaymentAPI6(resolvedBillingUrl);
+        const api = new PaymentAPI7(resolvedBillingUrl);
         const completed = await api.waitForCheckoutSessionCompletion(apiResult.autoProcessingPending.sessionId, {
           initialDelayMs: apiResult.autoProcessingPending.retryAfterMs
         });
         const completedSession = completed.data.session;
         if (!completedSession || completedSession.status !== "complete") {
-          throw new FloPayError7("Automatic payment failed. Please try again.", "api_error", {
+          throw new FloPayError8("Automatic payment failed. Please try again.", "api_error", {
             code: completedSession?.status === "expired" ? "checkout_session_expired" : "checkout_processing_timeout"
           });
         }
@@ -5022,7 +5770,7 @@ function FloPayAutomaticPaymentButton({
     }
     setFallbackSession(null);
     if (sessionId && createSessionDraft) {
-      const error = new FloPayError7(
+      const error = new FloPayError8(
         "Provide either sessionId or create-session props, not both.",
         "validation_error"
       );
@@ -5034,7 +5782,7 @@ function FloPayAutomaticPaymentButton({
       return;
     }
     if (!sessionId && !createSessionDraft) {
-      const error = new FloPayError7(
+      const error = new FloPayError8(
         "Provide a sessionId or the props required to create an automatic payment session.",
         "validation_error"
       );
@@ -5049,7 +5797,7 @@ function FloPayAutomaticPaymentButton({
     setOverlayError(null);
     setOverlayStatus("processing");
     try {
-      const api = new PaymentAPI6(resolvedBillingUrl);
+      const api = new PaymentAPI7(resolvedBillingUrl);
       if (sessionId) {
         const result = await api.getUnifiedCheckoutSession(sessionId);
         await processResolvedSession(result, sessionId);
@@ -5064,7 +5812,7 @@ function FloPayAutomaticPaymentButton({
           fromCreateSession: true
         });
       } catch (err) {
-        if (err instanceof FloPayError7 && err.code === "session_auto_completed") {
+        if (err instanceof FloPayError8 && err.code === "session_auto_completed") {
           await showSuccess({
             result: { status: "succeeded" },
             session: null,
@@ -5113,7 +5861,7 @@ function FloPayAutomaticPaymentButton({
   const handleFallbackDecline = useCallback5((decline) => {
     onDeclineRef.current?.(decline);
   }, []);
-  useEffect7(() => {
+  useEffect8(() => {
     if (typeof window === "undefined" || resumeAttemptedRef.current) {
       return;
     }
@@ -5134,7 +5882,7 @@ function FloPayAutomaticPaymentButton({
       try {
         if (params.get("redirect_status") === "failed") {
           throw Object.assign(
-            new FloPayError7("PayPal payment was declined. Please try again.", "api_error"),
+            new FloPayError8("PayPal payment was declined. Please try again.", "api_error"),
             { checkoutMethod: "paypal" }
           );
         }
@@ -5150,14 +5898,14 @@ function FloPayAutomaticPaymentButton({
         const paypalStripe = (paypalFlopay ?? flopay).getRawProvider();
         if (!paypalStripe) {
           throw Object.assign(
-            new FloPayError7("PayPal is not available.", "api_error"),
+            new FloPayError8("PayPal is not available.", "api_error"),
             { checkoutMethod: "paypal" }
           );
         }
         const { paymentIntent, error } = await paypalStripe.retrievePaymentIntent(clientSecret);
         if (error) {
           throw Object.assign(
-            new FloPayError7(
+            new FloPayError8(
               error.message ?? "Failed to retrieve PayPal payment status.",
               "api_error",
               { code: error.code }
@@ -5168,23 +5916,23 @@ function FloPayAutomaticPaymentButton({
         const resultStatus = mapPayPalIntentStatusToPaymentResult(paymentIntent?.status);
         if (!paymentIntent || resultStatus === "failed") {
           throw Object.assign(
-            new FloPayError7("PayPal payment was not completed. Please try again.", "api_error"),
+            new FloPayError8("PayPal payment was not completed. Please try again.", "api_error"),
             { checkoutMethod: "paypal" }
           );
         }
         const paymentMethodId2 = typeof paymentIntent.payment_method === "string" ? paymentIntent.payment_method : paymentIntent.payment_method?.id;
         if (!resumeState.sessionId) {
           throw Object.assign(
-            new FloPayError7("Missing session id on PayPal resume.", "api_error"),
+            new FloPayError8("Missing session id on PayPal resume.", "api_error"),
             { checkoutMethod: "paypal" }
           );
         }
-        const api = new PaymentAPI6(resolvedBillingUrl);
+        const api = new PaymentAPI7(resolvedBillingUrl);
         const sessionResult = await api.getUnifiedCheckoutSession(resumeState.sessionId);
         let resumeSession = sessionResult.data.session;
         if (!resumeSession) {
           throw Object.assign(
-            new FloPayError7("Could not load session to capture PayPal payment.", "api_error"),
+            new FloPayError8("Could not load session to capture PayPal payment.", "api_error"),
             { checkoutMethod: "paypal" }
           );
         }
@@ -5203,7 +5951,7 @@ function FloPayAutomaticPaymentButton({
           });
           if (processResult.type !== "success") {
             throw Object.assign(
-              new FloPayError7("Failed to finalize PayPal payment.", "api_error"),
+              new FloPayError8("Failed to finalize PayPal payment.", "api_error"),
               { checkoutMethod: "paypal" }
             );
           }
@@ -5244,7 +5992,7 @@ function FloPayAutomaticPaymentButton({
       }
     })();
   }, [locale, resolvedBillingUrl, showError, showSuccess]);
-  const bStyles = useMemo4(() => {
+  const bStyles = useMemo5(() => {
     const base = resolveButtonsLayoutTheme3(buttonsTheme);
     if (!stylesOverride) return base;
     return {
@@ -5254,8 +6002,8 @@ function FloPayAutomaticPaymentButton({
     };
   }, [buttonsTheme, stylesOverride]);
   const cardButtonSizing = children === void 0 ? { boxSizing: "border-box", height: DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT3, padding: "0 1rem" } : { padding: "0.9rem 1rem" };
-  return /* @__PURE__ */ jsxs7(Fragment6, { children: [
-    /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsxs8(Fragment6, { children: [
+    /* @__PURE__ */ jsx10(
       "button",
       {
         ...buttonProps,
@@ -5296,17 +6044,17 @@ function FloPayAutomaticPaymentButton({
             e.currentTarget.style.transform = "scale(1)";
           }
         },
-        children: /* @__PURE__ */ jsx9(CardButtonContentSlot, { content: children })
+        children: /* @__PURE__ */ jsx10(CardButtonContentSlot, { content: children })
       }
     ),
-    overlayStatus && /* @__PURE__ */ jsx9(
+    overlayStatus && /* @__PURE__ */ jsx10(
       ProcessingOverlay,
       {
         status: overlayStatus,
         errorMessage: overlayError
       }
     ),
-    fallbackSession && /* @__PURE__ */ jsx9(
+    fallbackSession && /* @__PURE__ */ jsx10(
       "div",
       {
         "data-testid": "flopay-automatic-payment-fallback",
@@ -5327,7 +6075,7 @@ function FloPayAutomaticPaymentButton({
           padding: "1.5rem",
           zIndex: 1100
         },
-        children: /* @__PURE__ */ jsx9(
+        children: /* @__PURE__ */ jsx10(
           "div",
           {
             style: {
@@ -5343,7 +6091,7 @@ function FloPayAutomaticPaymentButton({
               flexDirection: "column",
               gap: "1rem"
             },
-            children: /* @__PURE__ */ jsx9(
+            children: /* @__PURE__ */ jsx10(
               FloPayCheckout,
               {
                 sessionId: fallbackSession.sessionId,
@@ -5370,6 +6118,7 @@ export {
   CardExpiryElement,
   CardNumberElement,
   CheckoutForm,
+  DirectPayPalButton,
   FloPayAutomaticPaymentButton,
   FloPayCheckout,
   FloPayProvider,