@flopay/react 1.3.4 → 1.4.1

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/provider.tsx
-import { useEffect, useState, useMemo } from "react";
+import { useCallback, useEffect, useState, useMemo, useRef } from "react";
 import { resolveBillingApiUrl } from "@flopay/shared";
 
 // src/context.ts
@@ -16,6 +16,59 @@ var CheckoutContext = createContext({
   error: null
 });
 
+// src/telemetry-bridge.ts
+var FLOPAY_TELEMETRY_BRIDGE = /* @__PURE__ */ Symbol.for("@flopay/js.telemetry.bridge.v1");
+var TELEMETRY_REPORTER_FACTORY = /* @__PURE__ */ Symbol.for("@flopay/js.telemetry.reporter-factory.v1");
+function noopTelemetryBridge() {
+  return {
+    error: () => {
+    },
+    log: () => {
+    },
+    performance: () => {
+    },
+    terminal: () => {
+    },
+    now: () => globalThis.performance?.now() ?? 0,
+    elapsed: (startedAt) => Math.max(0, (globalThis.performance?.now() ?? startedAt) - startedAt),
+    setCheckoutContext: () => {
+    },
+    beginCheckout: () => globalThis.performance?.now() ?? 0,
+    disable: () => {
+    },
+    flush: async () => {
+    },
+    destroy: () => {
+    }
+  };
+}
+function normalizeTelemetryBridge(source) {
+  const fallback = noopTelemetryBridge();
+  const bind = (candidate, defaultValue) => candidate ? candidate.bind(source) : defaultValue;
+  const now = bind(source.now, fallback.now);
+  return {
+    error: bind(source.error, fallback.error),
+    log: bind(source.log, fallback.log),
+    performance: bind(source.performance, fallback.performance),
+    terminal: bind(source.terminal, fallback.terminal),
+    now,
+    elapsed: source.elapsed ? source.elapsed.bind(source) : (startedAt) => Math.max(0, now() - startedAt),
+    setCheckoutContext: bind(source.setCheckoutContext, fallback.setCheckoutContext),
+    beginCheckout: bind(source.beginCheckout, fallback.beginCheckout),
+    disable: bind(source.disable, fallback.disable),
+    flush: bind(source.flush, fallback.flush),
+    destroy: bind(source.destroy, fallback.destroy)
+  };
+}
+function createTelemetryBridge(options) {
+  const factory = globalThis[TELEMETRY_REPORTER_FACTORY];
+  return normalizeTelemetryBridge(factory?.(options) ?? {});
+}
+function getFloPayTelemetryBridge(floPay) {
+  if (!floPay) return void 0;
+  return floPay[FLOPAY_TELEMETRY_BRIDGE];
+}
+
 // src/provider.tsx
 import { jsx } from "react/jsx-runtime";
 function FloPayProvider({
@@ -31,6 +84,18 @@ function FloPayProvider({
     paypalFloPayProp instanceof Promise || !paypalFloPayProp ? null : paypalFloPayProp
   );
   const [elements, setElements] = useState(null);
+  const mountedAt = useRef(null);
+  const renderedElements = useRef(null);
+  const interactiveElements = useRef(null);
+  useEffect(() => {
+    if (!flopay) return;
+    const telemetry = getFloPayTelemetryBridge(flopay);
+    mountedAt.current = telemetry?.beginCheckout() ?? telemetry?.now() ?? 0;
+    telemetry?.log({ name: "checkout.mount", stage: "checkout_mount" });
+    return () => {
+      telemetry?.log({ name: "checkout.unmount", stage: "unmount" });
+    };
+  }, [flopay]);
   useEffect(() => {
     let cancelled = false;
     if (floPayProp instanceof Promise) {
@@ -91,18 +156,46 @@ function FloPayProvider({
     options?.paymentMethodCreation,
     options?.setupFutureUsage
   ]);
+  useEffect(() => {
+    if (!flopay || !elements || renderedElements.current === elements) return;
+    renderedElements.current = elements;
+    const telemetry = getFloPayTelemetryBridge(flopay);
+    telemetry?.log({ name: "checkout.rendered", stage: "checkout_render" });
+    telemetry?.performance({
+      stage: "checkout_render",
+      durationMs: telemetry.elapsed(mountedAt.current ?? 0),
+      durationMode: "machine"
+    });
+  }, [elements, flopay]);
+  const reportInteractive = useCallback(() => {
+    if (!flopay || !elements || interactiveElements.current === elements) return;
+    interactiveElements.current = elements;
+    const telemetry = getFloPayTelemetryBridge(flopay);
+    telemetry?.log({ name: "checkout.interactive", stage: "checkout_interactive" });
+    telemetry?.performance({
+      stage: "checkout_interactive",
+      durationMs: telemetry.elapsed(mountedAt.current ?? 0),
+      durationMode: "machine"
+    });
+  }, [elements, flopay]);
   const resolvedBillingApiUrl = resolveBillingApiUrl(options?.billingApiUrl);
   const value = useMemo(
-    () => ({ flopay, paypalFlopay, elements, billingApiUrl: resolvedBillingApiUrl }),
-    [flopay, paypalFlopay, elements, resolvedBillingApiUrl]
+    () => ({
+      flopay,
+      paypalFlopay,
+      elements,
+      billingApiUrl: resolvedBillingApiUrl,
+      reportInteractive
+    }),
+    [flopay, paypalFlopay, elements, resolvedBillingApiUrl, reportInteractive]
   );
   return /* @__PURE__ */ jsx(FloPayContext.Provider, { value, children });
 }
 
 // src/flopay-checkout.tsx
-import React8, { useCallback as useCallback3, useEffect as useEffect6, useMemo as useMemo4, useRef as useRef5, useState as useState4 } from "react";
+import React9, { useCallback as useCallback4, useEffect as useEffect6, useMemo as useMemo4, useRef as useRef6, 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, resolveTheme as resolveTheme2 } from "@flopay/shared";
+import { SDK_VERSION as SDK_VERSION2, FloPayError as FloPayError5, resolveBillingApiUrl as resolveBillingApiUrl3, buildCheckoutDisplayData, resolveButtonsLayoutTheme as resolveButtonsLayoutTheme2, resolveTheme as resolveTheme2 } from "@flopay/shared";
 
 // src/card-button-content.tsx
 import "react";
@@ -172,7 +265,7 @@ function TitleContentSlot({
 }
 
 // src/elements.tsx
-import { useEffect as useEffect2, useRef, useContext } from "react";
+import { useEffect as useEffect2, useRef as useRef2, useContext } from "react";
 import { jsx as jsx3 } from "react/jsx-runtime";
 function createElementComponent(elementType, displayName) {
   function ElementComponent({
@@ -186,9 +279,9 @@ function createElementComponent(elementType, displayName) {
     onBlur,
     onEscape
   }) {
-    const containerRef = useRef(null);
-    const elementRef = useRef(null);
-    const { elements } = useContext(FloPayContext);
+    const containerRef = useRef2(null);
+    const elementRef = useRef2(null);
+    const { elements, reportInteractive } = useContext(FloPayContext);
     useEffect2(() => {
       if (!elements || !containerRef.current) return;
       let mounted = true;
@@ -203,7 +296,10 @@ function createElementComponent(elementType, displayName) {
         element.mount(containerRef.current);
         elementRef.current = element;
         if (onChange) element.on("change", onChange);
-        if (onReady) element.on("ready", onReady);
+        element.on("ready", () => {
+          reportInteractive?.();
+          onReady?.();
+        });
         if (onFocus) element.on("focus", onFocus);
         if (onBlur) element.on("blur", onBlur);
         if (onEscape) element.on("escape", onEscape);
@@ -218,7 +314,7 @@ function createElementComponent(elementType, displayName) {
           elementRef.current = null;
         }
       };
-    }, [elements]);
+    }, [elements, reportInteractive]);
     return /* @__PURE__ */ jsx3("div", { ref: containerRef, className, id, style });
   }
   ElementComponent.displayName = displayName;
@@ -262,7 +358,7 @@ import {
 import { PaymentAPI as PaymentAPI2 } from "@flopay/js";
 
 // src/vault-card-fields.tsx
-import { useEffect as useEffect3, useRef as useRef2 } from "react";
+import { useEffect as useEffect3, useRef as useRef3 } from "react";
 import { jsx as jsx4 } from "react/jsx-runtime";
 function VaultCardFields({
   capture,
@@ -275,14 +371,14 @@ function VaultCardFields({
   onError,
   onValidation
 }) {
-  const containerRef = useRef2(null);
-  const onReadyRef = useRef2(onReady);
-  const onErrorRef = useRef2(onError);
-  const onValidationRef = useRef2(onValidation);
+  const containerRef = useRef3(null);
+  const onReadyRef = useRef3(onReady);
+  const onErrorRef = useRef3(onError);
+  const onValidationRef = useRef3(onValidation);
   onReadyRef.current = onReady;
   onErrorRef.current = onError;
   onValidationRef.current = onValidation;
-  const themeRef = useRef2(theme);
+  const themeRef = useRef3(theme);
   themeRef.current = theme;
   useEffect3(() => {
     const el = containerRef.current;
@@ -332,8 +428,65 @@ function VaultCardFields({
   return /* @__PURE__ */ jsx4("div", { ref: containerRef, "data-testid": "flopay-vault-card-fields", style: containerStyle });
 }
 
+// src/error-banner.tsx
+import "react";
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+function ErrorBanner({
+  children,
+  margin,
+  icon = true,
+  styleOverride
+}) {
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      role: "alert",
+      "data-testid": "flopay-error",
+      style: {
+        margin,
+        padding: "0.625rem 0.875rem",
+        background: "#FEF2F2",
+        border: "1px solid #FECACA",
+        borderRadius: "8px",
+        color: "#991B1B",
+        fontSize: "0.85rem",
+        fontWeight: 600,
+        ...icon ? { display: "flex", alignItems: "center", gap: "0.5rem" } : {},
+        ...styleOverride ?? {}
+      },
+      children: [
+        icon && /* @__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"
+          }
+        ) }),
+        children
+      ]
+    }
+  );
+}
+
+// src/payment-logos.generated.ts
+var PAYMENT_METHOD_LOGO_URLS = {
+  "alipay": new URL("./payment-logos/alipay.svg", import.meta.url).href,
+  "bancontact": new URL("./payment-logos/bancontact.svg", import.meta.url).href,
+  "blik": new URL("./payment-logos/blik.svg", import.meta.url).href,
+  "eps": new URL("./payment-logos/eps.svg", import.meta.url).href,
+  "giropay": new URL("./payment-logos/giropay.svg", import.meta.url).href,
+  "ideal": new URL("./payment-logos/ideal.svg", import.meta.url).href,
+  "klarna": new URL("./payment-logos/klarna.svg", import.meta.url).href,
+  "p24": new URL("./payment-logos/p24.svg", import.meta.url).href,
+  "sepa_debit": new URL("./payment-logos/sepa_debit.svg", import.meta.url).href,
+  "wechat_pay": new URL("./payment-logos/wechat_pay.svg", import.meta.url).href
+};
+
 // src/split-card-form.tsx
-import React7, { forwardRef, useCallback as useCallback2, useContext as useContext3, useEffect as useEffect5, useImperativeHandle, useMemo as useMemo3, useRef as useRef4, useState as useState3 } from "react";
+import React8, { forwardRef, useCallback as useCallback3, useContext as useContext3, useEffect as useEffect5, useImperativeHandle, useMemo as useMemo3, useRef as useRef5, useState as useState3 } from "react";
 
 // src/hooks.ts
 import { useContext as useContext2 } from "react";
@@ -360,14 +513,14 @@ function useBillingApiUrl() {
 
 // src/processing-overlay.tsx
 import "react";
-import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 var PROCESSING_OVERLAY_SUCCESS_DELAY_MS = 1200;
 var PROCESSING_OVERLAY_ERROR_DELAY_MS = 1500;
 function ProcessingOverlay({
   status,
   errorMessage
 }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     "div",
     {
       "data-testid": "flopay-processing-overlay",
@@ -384,7 +537,7 @@ function ProcessingOverlay({
         zIndex: 1e3,
         backdropFilter: "blur(2px)"
       },
-      children: /* @__PURE__ */ jsxs2(
+      children: /* @__PURE__ */ jsxs3(
         "div",
         {
           style: {
@@ -400,8 +553,8 @@ function ProcessingOverlay({
             gap: 16
           },
           children: [
-            /* @__PURE__ */ jsxs2("div", { style: { width: 48, height: 48, position: "relative" }, children: [
-              status === "processing" && /* @__PURE__ */ jsxs2(
+            /* @__PURE__ */ jsxs3("div", { style: { width: 48, height: 48, position: "relative" }, children: [
+              status === "processing" && /* @__PURE__ */ jsxs3(
                 "svg",
                 {
                   width: "48",
@@ -411,14 +564,14 @@ function ProcessingOverlay({
                   xmlns: "http://www.w3.org/2000/svg",
                   style: { animation: "flopay-spin 0.8s linear infinite" },
                   children: [
-                    /* @__PURE__ */ jsx5("circle", { cx: "12", cy: "12", r: "10", stroke: "#e5e7eb", strokeWidth: "3" }),
-                    /* @__PURE__ */ jsx5("path", { d: "M4 12a8 8 0 018-8v3a5 5 0 00-5 5H4z", fill: "#4A49FF" })
+                    /* @__PURE__ */ jsx6("circle", { cx: "12", cy: "12", r: "10", stroke: "#e5e7eb", strokeWidth: "3" }),
+                    /* @__PURE__ */ jsx6("path", { d: "M4 12a8 8 0 018-8v3a5 5 0 00-5 5H4z", fill: "#4A49FF" })
                   ]
                 }
               ),
-              status === "success" && /* @__PURE__ */ jsx5("div", { style: { animation: "flopay-pop 0.4s cubic-bezier(0.34,1.56,0.64,1)" }, children: /* @__PURE__ */ jsxs2("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-                /* @__PURE__ */ jsx5("circle", { cx: "12", cy: "12", r: "11", fill: "#22c55e" }),
-                /* @__PURE__ */ jsx5(
+              status === "success" && /* @__PURE__ */ jsx6("div", { style: { animation: "flopay-pop 0.4s cubic-bezier(0.34,1.56,0.64,1)" }, children: /* @__PURE__ */ jsxs3("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+                /* @__PURE__ */ jsx6("circle", { cx: "12", cy: "12", r: "11", fill: "#22c55e" }),
+                /* @__PURE__ */ jsx6(
                   "path",
                   {
                     d: "M7 12.5l3 3 7-7",
@@ -434,9 +587,9 @@ function ProcessingOverlay({
                   }
                 )
               ] }) }),
-              status === "error" && /* @__PURE__ */ jsx5("div", { style: { animation: "flopay-shake 0.4s ease" }, children: /* @__PURE__ */ jsxs2("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-                /* @__PURE__ */ jsx5("circle", { cx: "12", cy: "12", r: "11", fill: "#ef4444" }),
-                /* @__PURE__ */ jsx5(
+              status === "error" && /* @__PURE__ */ jsx6("div", { style: { animation: "flopay-shake 0.4s ease" }, children: /* @__PURE__ */ jsxs3("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+                /* @__PURE__ */ jsx6("circle", { cx: "12", cy: "12", r: "11", fill: "#ef4444" }),
+                /* @__PURE__ */ jsx6(
                   "path",
                   {
                     d: "M8 8l8 8M16 8l-8 8",
@@ -452,7 +605,7 @@ function ProcessingOverlay({
                 )
               ] }) })
             ] }),
-            /* @__PURE__ */ jsxs2(
+            /* @__PURE__ */ jsxs3(
               "span",
               {
                 style: {
@@ -468,7 +621,7 @@ function ProcessingOverlay({
                 ]
               }
             ),
-            status === "success" && /* @__PURE__ */ jsx5(
+            status === "success" && /* @__PURE__ */ jsx6(
               "p",
               {
                 style: {
@@ -482,7 +635,7 @@ function ProcessingOverlay({
                 children: "You will be automatically redirected, do not close or navigate away from this window."
               }
             ),
-            status === "error" && errorMessage && /* @__PURE__ */ jsx5(
+            status === "error" && errorMessage && /* @__PURE__ */ jsx6(
               "p",
               {
                 style: {
@@ -496,7 +649,7 @@ function ProcessingOverlay({
                 children: errorMessage
               }
             ),
-            /* @__PURE__ */ jsx5("style", { children: `
+            /* @__PURE__ */ jsx6("style", { children: `
           @keyframes flopay-spin { to { transform: rotate(360deg); } }
           @keyframes flopay-pop { 0% { transform: scale(0); } 100% { transform: scale(1); } }
           @keyframes flopay-draw { to { stroke-dashoffset: 0; } }
@@ -658,6 +811,14 @@ async function buildFloPayApiErrorFromResponse(response, fallbackMessage) {
   const payload = await response.json().catch(() => null);
   return buildFloPayApiError(payload, fallbackMessage);
 }
+function intentRequestHeaders(nonce) {
+  const headers = { "Content-Type": "application/json" };
+  if (nonce) headers["x-checkout-session-token"] = nonce;
+  return headers;
+}
+function isSuccessfulPaymentIntentStatus(status) {
+  return status === "succeeded" || status === "requires_capture" || status === "processing";
+}
 function mapPayPalIntentStatusToPaymentResult(status) {
   if (status === "succeeded") {
     return "succeeded";
@@ -770,10 +931,23 @@ function isInAppBrowser(userAgent) {
 }
 
 // src/direct-paypal-button.tsx
-import { useCallback, useEffect as useEffect4, useMemo as useMemo2, useRef as useRef3, useState as useState2 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect4, useMemo as useMemo2, useRef as useRef4, 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 { FloPayError as FloPayError2, SDK_VERSION, normalizeGatewayEnvironment } from "@flopay/shared";
+
+// src/merchant-callback.ts
+function invokeMerchantCallback(callback) {
+  if (!callback) return;
+  const reportFailure = (error) => {
+    console.error("[FloPay] Merchant callback failed; checkout continued.", error);
+  };
+  try {
+    void Promise.resolve(callback()).catch(reportFailure);
+  } catch (error) {
+    reportFailure(error);
+  }
+}
 
 // src/external-method-recovery.ts
 var EXTERNAL_METHOD_CALLBACK_GRACE_MS = 600;
@@ -812,7 +986,7 @@ function isPopupBlockedError(err) {
 }
 
 // src/direct-paypal-button.tsx
-import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 var DEFAULT_BUTTON_HEIGHT = 45;
 var DIRECT_PAYPAL_RECOVERY_MESSAGE = "We couldn't open PayPal. Try again or choose another payment method.";
 var DIRECT_PAYPAL_RECOVERY_ACTION_STYLE = {
@@ -831,7 +1005,7 @@ var DIRECT_PAYPAL_RECOVERY_ACTION_STYLE = {
 function buildDirectPayPalRecoveryMessage(popupBlocked) {
   return popupBlocked ? `${DIRECT_PAYPAL_RECOVERY_MESSAGE} Allow pop-ups for this site, then try again.` : DIRECT_PAYPAL_RECOVERY_MESSAGE;
 }
-function DirectPayPalButton({
+function DirectPayPalButtonImplementation({
   sessionId,
   nonce,
   billingApiUrl,
@@ -851,14 +1025,62 @@ function DirectPayPalButton({
   runBeforeButtonClick,
   session,
   existingOrderId,
+  telemetry,
+  telemetryContext,
   debug = false
 }) {
-  const containerRef = useRef3(null);
-  const focusTargetRef = useRef3(null);
-  const pendingProviderFocusRef = useRef3(false);
+  const flopay = useFloPay();
+  const standaloneTelemetry = useMemo2(() => {
+    if (flopay) return null;
+    const reporter = createTelemetryBridge({
+      billingApiUrl,
+      sdkPackage: "@flopay/react",
+      sdkVersion: SDK_VERSION,
+      enabled: telemetry !== false
+    });
+    reporter.setCheckoutContext(telemetryContext ?? {});
+    reporter.beginCheckout(telemetryContext ?? {});
+    return reporter;
+  }, [
+    billingApiUrl,
+    flopay,
+    telemetry,
+    telemetryContext?.checkoutMode,
+    telemetryContext?.layout
+  ]);
+  const floPayTelemetry = useMemo2(() => getFloPayTelemetryBridge(flopay), [flopay]);
+  useEffect4(() => () => {
+    if (!standaloneTelemetry) return;
+    void standaloneTelemetry.flush().catch(() => {
+    }).finally(() => standaloneTelemetry.destroy());
+  }, [standaloneTelemetry]);
+  const telemetrySource = useMemo2(() => ({
+    error: (input) => {
+      if (floPayTelemetry) floPayTelemetry.error(input);
+      else standaloneTelemetry?.error(input);
+    },
+    log: (input) => {
+      if (floPayTelemetry) floPayTelemetry.log(input);
+      else standaloneTelemetry?.log(input);
+    },
+    performance: (input) => {
+      if (floPayTelemetry) floPayTelemetry.performance(input);
+      else standaloneTelemetry?.performance(input);
+    },
+    terminal: (input) => {
+      if (floPayTelemetry) floPayTelemetry.terminal(input);
+      else standaloneTelemetry?.terminal(input);
+    },
+    startTiming: () => floPayTelemetry?.now() ?? standaloneTelemetry?.now() ?? 0,
+    elapsed: (startedAt) => floPayTelemetry?.elapsed(startedAt) ?? Math.max(0, (standaloneTelemetry?.now() ?? startedAt) - startedAt)
+  }), [floPayTelemetry, standaloneTelemetry]);
+  const containerRef = useRef4(null);
+  const providerStartedAt = useRef4(0);
+  const focusTargetRef = useRef4(null);
+  const pendingProviderFocusRef = useRef4(false);
   const [ready, setReady] = useState2(false);
   const [renderGeneration, setRenderGeneration] = useState2(0);
-  const activeRenderGenerationRef = useRef3(0);
+  const activeRenderGenerationRef = useRef4(0);
   const [showRetryFocusTarget, setShowRetryFocusTarget] = useState2(false);
   const [failed, setFailed] = useState2(false);
   const [submitting, setSubmitting] = useState2(false);
@@ -868,23 +1090,23 @@ function DirectPayPalButton({
     if (!debug) return;
     setDebugLines((prev) => [...prev, `${(/* @__PURE__ */ new Date()).toISOString().slice(11, 23)} ${line}`]);
   };
-  const onTokenizedBodyRef = useRef3(onTokenizedBody);
-  const onCompleteRef = useRef3(onComplete);
-  const onErrorChangeRef = useRef3(onErrorChange);
-  const onDeclineRef = useRef3(onDecline);
-  const onTechnicalFailureRef = useRef3(onTechnicalFailure);
-  const onButtonClickRef = useRef3(onButtonClick);
-  const onLoadStateChangeRef = useRef3(onLoadStateChange);
-  const runBeforeButtonClickRef = useRef3(runBeforeButtonClick);
-  const sessionRef = useRef3(session);
-  const emailRef = useRef3(email);
-  const nonceRef = useRef3(nonce);
-  const beforeClickRef = useRef3(null);
-  const attemptGenerationRef = useRef3(0);
-  const attemptRef = useRef3(null);
-  const invalidatedAttemptGenerationRef = useRef3(null);
-  const attemptContextBySurfaceRef = useRef3(/* @__PURE__ */ new Map());
-  const approvalContextByTokenRef = useRef3(/* @__PURE__ */ new Map());
+  const onTokenizedBodyRef = useRef4(onTokenizedBody);
+  const onCompleteRef = useRef4(onComplete);
+  const onErrorChangeRef = useRef4(onErrorChange);
+  const onDeclineRef = useRef4(onDecline);
+  const onTechnicalFailureRef = useRef4(onTechnicalFailure);
+  const onButtonClickRef = useRef4(onButtonClick);
+  const onLoadStateChangeRef = useRef4(onLoadStateChange);
+  const runBeforeButtonClickRef = useRef4(runBeforeButtonClick);
+  const sessionRef = useRef4(session);
+  const emailRef = useRef4(email);
+  const nonceRef = useRef4(nonce);
+  const beforeClickRef = useRef4(null);
+  const attemptGenerationRef = useRef4(0);
+  const attemptRef = useRef4(null);
+  const invalidatedAttemptGenerationRef = useRef4(null);
+  const attemptContextBySurfaceRef = useRef4(/* @__PURE__ */ new Map());
+  const approvalContextByTokenRef = useRef4(/* @__PURE__ */ new Map());
   useEffect4(() => {
     onTokenizedBodyRef.current = onTokenizedBody;
   }, [onTokenizedBody]);
@@ -924,16 +1146,16 @@ function DirectPayPalButton({
   useEffect4(() => {
     if (showRetryFocusTarget) focusTargetRef.current?.focus();
   }, [showRetryFocusTarget, renderGeneration]);
-  const focusRetryTarget = useCallback(() => {
+  const focusRetryTarget = useCallback2(() => {
     window.setTimeout(() => {
       focusTargetRef.current?.focus();
     }, 0);
   }, []);
-  const remountPayPalButtons = useCallback(() => {
+  const remountPayPalButtons = useCallback2(() => {
     setReady(false);
     setRenderGeneration((current) => current + 1);
   }, []);
-  const focusPayPalSurface = useCallback(() => {
+  const focusPayPalSurface = useCallback2(() => {
     setShowRetryFocusTarget(false);
     const target = containerRef.current?.querySelector(
       'iframe, button, [tabindex]:not([tabindex="-1"])'
@@ -945,7 +1167,7 @@ function DirectPayPalButton({
     pendingProviderFocusRef.current = false;
     focusPayPalSurface();
   }, [focusPayPalSurface, ready, renderGeneration]);
-  const notifyTechnicalFailure = useCallback((err, options) => {
+  const notifyTechnicalFailure = useCallback2((err, options) => {
     const handler = onTechnicalFailureRef.current;
     if (handler) {
       handler("paypal", err, options);
@@ -1042,7 +1264,7 @@ function DirectPayPalButton({
     };
   }, []);
   useEffect4(() => {
-    onLoadStateChangeRef.current?.(ready && !failed);
+    invokeMerchantCallback(() => onLoadStateChangeRef.current?.(ready && !failed));
   }, [ready, failed]);
   const normalizedEnv = normalizeGatewayEnvironment(environment);
   useEffect4(() => {
@@ -1053,6 +1275,13 @@ function DirectPayPalButton({
     if (!clientId) {
       appendDebug("FAIL: clientId empty \u2014 gateway misconfigured");
       setFailed(true);
+      telemetrySource.error({
+        errorCode: "CONFIGURATION_INVALID",
+        stage: "provider_load",
+        provider: "paypal",
+        paymentMethodCategory: "paypal",
+        requestCategory: "provider_sdk"
+      });
       console.error("[FloPay] DirectPayPal: clientId empty \u2014 gateway misconfigured");
       return;
     }
@@ -1060,8 +1289,33 @@ function DirectPayPalButton({
       appendDebug("FAIL: containerRef not attached");
       return;
     }
+    providerStartedAt.current = telemetrySource.startTiming();
+    telemetrySource.log({
+      name: "provider.load.started",
+      stage: "provider_load",
+      provider: "paypal",
+      paymentMethodCategory: "paypal"
+    });
     let cancelled = false;
     let activeButtons = null;
+    let overlayStartedAt = null;
+    const finishOverlay = () => {
+      if (overlayStartedAt === null) return;
+      telemetrySource.log({
+        name: "provider.overlay.returned",
+        stage: "overlay_return",
+        provider: "paypal",
+        paymentMethodCategory: "paypal"
+      });
+      telemetrySource.performance({
+        stage: "overlay_return",
+        durationMs: telemetrySource.elapsed(overlayStartedAt),
+        durationMode: "buyer",
+        provider: "paypal",
+        paymentMethodCategory: "paypal"
+      });
+      overlayStartedAt = null;
+    };
     let rendered = false;
     const container = containerRef.current;
     let containerObserver = null;
@@ -1165,7 +1419,7 @@ function DirectPayPalButton({
       if (cancelled) return;
       if (isZoidLifecycleMessage(message)) return;
       const friendly = applyFriendlyMessageOverride(message) ?? message;
-      onErrorChangeRef.current?.(friendly);
+      invokeMerchantCallback(() => onErrorChangeRef.current?.(friendly));
     };
     const markRenderFailed = (message) => {
       if (cancelled) return;
@@ -1174,24 +1428,55 @@ function DirectPayPalButton({
         return;
       }
       setFailed(true);
+      if (!message.includes("paypal_ineligible")) {
+        telemetrySource.error({
+          errorCode: "PROVIDER_LOAD_FAILED",
+          stage: "provider_load",
+          provider: "paypal",
+          paymentMethodCategory: "paypal",
+          requestCategory: "provider_sdk"
+        });
+      }
       console.error("[FloPay] DirectPayPal load/render failure:", message);
     };
     setFailed(false);
     const dispatchTokenizedBody = async (body, prepared = beforeClickRef.current) => {
       const effectiveSessionId = prepared?.sessionId ?? sessionId;
       if (onTokenizedBodyRef.current) {
-        onTokenizedBodyRef.current(body, {
+        await onTokenizedBodyRef.current(body, {
           sessionId: effectiveSessionId,
           accountPatch: prepared?.accountPatch,
           nonce: prepared?.nonce
         });
         return;
       }
+      const processingStartedAt = telemetrySource.startTiming();
+      telemetrySource.log({
+        name: "payment.processing.started",
+        stage: "processing",
+        provider: "paypal",
+        paymentMethodCategory: "paypal"
+      });
+      const finishProcessing = () => {
+        telemetrySource.log({
+          name: "payment.processing.completed",
+          stage: "processing",
+          provider: "paypal",
+          paymentMethodCategory: "paypal"
+        });
+        telemetrySource.performance({
+          stage: "processing",
+          durationMs: telemetrySource.elapsed(processingStartedAt),
+          durationMode: "machine",
+          provider: "paypal",
+          paymentMethodCategory: "paypal"
+        });
+      };
       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 api = new PaymentAPI(baseUrl, { telemetry: false });
         const response = await api.processPayment(
           effectiveUserId,
           {
@@ -1209,31 +1494,71 @@ function DirectPayPalButton({
           }
         );
         if (response.ok) {
-          onCompleteRef.current?.({ status: "succeeded", checkoutMethod: "paypal" });
+          finishProcessing();
+          telemetrySource.terminal({
+            outcome: "payment_succeeded",
+            provider: "paypal",
+            paymentMethodCategory: "paypal"
+          });
+        } else {
+          const json = await response.json().catch(() => null);
+          const rawMessage = json?.["message"] ?? "PayPal payment failed.";
+          const message = applyFriendlyMessageOverride(rawMessage) ?? rawMessage;
+          finishProcessing();
+          if (typeof json?.["declineCode"] === "string") {
+            telemetrySource.terminal({
+              outcome: "payment_declined",
+              provider: "paypal",
+              paymentMethodCategory: "paypal"
+            });
+          } else {
+            telemetrySource.error({
+              errorCode: "PAYMENT_PROCESSING_FAILED",
+              stage: "processing",
+              provider: "paypal",
+              paymentMethodCategory: "paypal",
+              requestCategory: "process_payment",
+              statusClass: response.status >= 500 ? "5xx" : response.status >= 400 ? "4xx" : response.status >= 300 ? "3xx" : "unknown"
+            });
+          }
+          forwardError(message);
+          invokeMerchantCallback(() => onDeclineRef.current?.(buildDeclineEvent("paypal", message, {
+            code: json?.["code"],
+            declineCode: json?.["declineCode"]
+          })));
           return;
         }
-        const json = await response.json().catch(() => null);
-        const rawMessage = json?.["message"] ?? "PayPal payment failed.";
-        const message = applyFriendlyMessageOverride(rawMessage) ?? rawMessage;
-        forwardError(message);
-        onDeclineRef.current?.(buildDeclineEvent("paypal", message, {
-          code: json?.["code"],
-          declineCode: json?.["declineCode"]
-        }));
       } catch (err) {
+        finishProcessing();
+        telemetrySource.error({
+          errorCode: "NETWORK_REQUEST_FAILED",
+          stage: "processing",
+          provider: "paypal",
+          paymentMethodCategory: "paypal",
+          requestCategory: "process_payment",
+          statusClass: "network_error"
+        });
         const rawMessage = err instanceof Error ? err.message : "PayPal payment failed.";
         const message = applyFriendlyMessageOverride(rawMessage) ?? rawMessage;
         forwardError(message);
-        onDeclineRef.current?.(buildDeclineEvent("paypal", message));
+        invokeMerchantCallback(() => onDeclineRef.current?.(buildDeclineEvent("paypal", message)));
+        return;
       }
+      invokeMerchantCallback(() => onCompleteRef.current?.({ status: "succeeded", checkoutMethod: "paypal" }));
     };
     const createPaypalIntent = async (fallbackMessage) => {
       const prepared = beforeClickRef.current;
       const effectiveSessionId = prepared?.sessionId ?? sessionId;
       const effectiveEmail = prepared?.accountPatch?.email ?? emailRef.current;
-      const intentHeaders = { "Content-Type": "application/json" };
       const currentNonce = prepared?.nonce ?? nonceRef.current;
-      if (currentNonce) intentHeaders["x-checkout-session-token"] = currentNonce;
+      const intentHeaders = intentRequestHeaders(currentNonce);
+      telemetrySource.log({
+        name: "payment.intent.started",
+        stage: "processing",
+        provider: "paypal",
+        paymentMethodCategory: "paypal",
+        requestCategory: "intent_create"
+      });
       const response = await fetch(`${baseUrl}/v1/checkouts/payments/intents`, {
         method: "POST",
         headers: intentHeaders,
@@ -1252,6 +1577,14 @@ function DirectPayPalButton({
       if (!id) {
         throw new Error(fallbackMessage);
       }
+      telemetrySource.log({
+        name: "payment.intent.completed",
+        stage: "processing",
+        provider: "paypal",
+        paymentMethodCategory: "paypal",
+        requestCategory: "intent_create",
+        statusClass: "2xx"
+      });
       return id;
     };
     const effectRenderGeneration = renderGeneration;
@@ -1286,6 +1619,12 @@ function DirectPayPalButton({
           if (!cancelled && !paypal?.Buttons) appendDebug("FAIL: namespace missing Buttons factory");
           return;
         }
+        telemetrySource.log({
+          name: "provider.availability.checked",
+          stage: "provider_ready",
+          provider: "paypal",
+          paymentMethodCategory: "paypal"
+        });
         const handleApprove = async (data) => {
           if (cancelled || activeRenderGenerationRef.current !== effectRenderGeneration) return;
           const token = data.subscriptionID ?? data.orderID ?? "";
@@ -1294,9 +1633,10 @@ function DirectPayPalButton({
           if (!finishAttempt(context.generation)) return;
           approvalContextByTokenRef.current.delete(token);
           attemptContextBySurfaceRef.current.delete(context.surfaceKey);
+          finishOverlay();
           try {
             setSubmitting(true);
-            onErrorChangeRef.current?.(null);
+            invokeMerchantCallback(() => onErrorChangeRef.current?.(null));
             if (!token) {
               throw new FloPayError2(
                 "PayPal did not return an approval token.",
@@ -1346,7 +1686,7 @@ function DirectPayPalButton({
                 return;
               }
             }
-            onButtonClickRef.current?.("paypal");
+            invokeMerchantCallback(() => onButtonClickRef.current?.("paypal"));
             const generation = startAttempt();
             const context = {
               generation,
@@ -1356,6 +1696,25 @@ function DirectPayPalButton({
             beforeClickRef.current = context;
             attemptContextBySurfaceRef.current.set(effectRenderGeneration, context);
             await actions.resolve();
+            telemetrySource.log({
+              name: "payment.method.selected",
+              stage: "processing",
+              provider: "paypal",
+              paymentMethodCategory: "paypal"
+            });
+            telemetrySource.log({
+              name: "provider.popup.opened",
+              stage: "overlay_open",
+              provider: "paypal",
+              paymentMethodCategory: "paypal"
+            });
+            telemetrySource.log({
+              name: "provider.overlay.opened",
+              stage: "overlay_open",
+              provider: "paypal",
+              paymentMethodCategory: "paypal"
+            });
+            overlayStartedAt = telemetrySource.startTiming();
           },
           // When the SDK is already holding an order/subscription id from a
           // prior backend round-trip (the `paypal_direct_required` retry
@@ -1368,6 +1727,12 @@ function DirectPayPalButton({
             const context = attemptContextBySurfaceRef.current.get(effectRenderGeneration) ?? beforeClickRef.current;
             if (context) attemptContextBySurfaceRef.current.delete(context.surfaceKey);
             beforeClickRef.current = null;
+            finishOverlay();
+            telemetrySource.terminal({
+              outcome: "payment_cancelled",
+              provider: "paypal",
+              paymentMethodCategory: "paypal"
+            });
             pendingProviderFocusRef.current = true;
             invalidateAttempt({ generation: context?.generation, remount: true, focus: false });
           },
@@ -1383,6 +1748,15 @@ function DirectPayPalButton({
                 finishAttempt(context?.generation);
                 return;
               }
+              finishOverlay();
+              const lower = message.toLowerCase();
+              telemetrySource.error({
+                errorCode: lower.includes("popup") && lower.includes("block") ? "POPUP_BLOCKED" : "PROVIDER_RUNTIME_FAILED",
+                stage: "provider_ready",
+                provider: "paypal",
+                paymentMethodCategory: "paypal",
+                requestCategory: "provider_sdk"
+              });
               if (context) attemptContextBySurfaceRef.current.delete(context.surfaceKey);
               beforeClickRef.current = null;
               invalidateAttempt({ generation: context?.generation, remount: true, showRetry: true, focus: true });
@@ -1394,6 +1768,12 @@ function DirectPayPalButton({
         });
         const eligible = buttons.isEligible();
         appendDebug(`isEligible=${eligible}`);
+        telemetrySource.log({
+          name: "provider.eligibility.checked",
+          stage: "provider_ready",
+          provider: "paypal",
+          paymentMethodCategory: "paypal"
+        });
         if (!eligible) {
           setReady(false);
           markRenderFailed(
@@ -1465,6 +1845,19 @@ function DirectPayPalButton({
           activeButtons = typedButtons;
           rendered = true;
           setReady(true);
+          telemetrySource.log({
+            name: "provider.ready",
+            stage: "provider_ready",
+            provider: "paypal",
+            paymentMethodCategory: "paypal"
+          });
+          telemetrySource.performance({
+            stage: "provider_ready",
+            durationMs: telemetrySource.elapsed(providerStartedAt.current),
+            durationMode: "machine",
+            provider: "paypal",
+            paymentMethodCategory: "paypal"
+          });
         }).catch((err) => {
           const message = err instanceof Error ? err.message : "PayPal failed to render.";
           appendDebug(`render:rejected msg=${message.slice(0, 120)}`);
@@ -1486,8 +1879,8 @@ function DirectPayPalButton({
         });
       }
     };
-  }, [baseUrl, clientId, currency, environment, isSubscription, sessionId, existingOrderId, renderGeneration]);
-  const debugPanel = debug ? /* @__PURE__ */ jsxs3(
+  }, [baseUrl, clientId, currency, environment, isSubscription, sessionId, existingOrderId, renderGeneration, telemetrySource]);
+  const debugPanel = debug ? /* @__PURE__ */ jsxs4(
     "pre",
     {
       "data-testid": "flopay-direct-paypal-debug",
@@ -1512,17 +1905,17 @@ ${debugLines.join("\n")}`
     }
   ) : null;
   if (failed) {
-    return debug ? /* @__PURE__ */ jsx6("div", { children: debugPanel }) : null;
+    return debug ? /* @__PURE__ */ jsx7("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: [
+    /* @__PURE__ */ jsxs4("div", { children: [
       debugPanel,
-      /* @__PURE__ */ jsxs3("div", { style: { position: "relative", minHeight: DEFAULT_BUTTON_HEIGHT }, children: [
-        !ready && /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsxs4("div", { style: { position: "relative", minHeight: DEFAULT_BUTTON_HEIGHT }, children: [
+        !ready && /* @__PURE__ */ jsx7(
           "div",
           {
             "data-testid": "flopay-direct-paypal-placeholder",
@@ -1536,7 +1929,7 @@ ${debugLines.join("\n")}`
             }
           }
         ),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx7(
           "div",
           {
             ref: containerRef,
@@ -1553,7 +1946,7 @@ ${debugLines.join("\n")}`
           renderGeneration
         )
       ] }),
-      showRetryFocusTarget && /* @__PURE__ */ jsx6(
+      showRetryFocusTarget && /* @__PURE__ */ jsx7(
         "button",
         {
           ref: focusTargetRef,
@@ -1567,10 +1960,16 @@ ${debugLines.join("\n")}`
     ] })
   );
 }
+function DirectPayPalButton(props) {
+  return /* @__PURE__ */ jsx7(DirectPayPalButtonImplementation, { ...props });
+}
+function InstrumentedDirectPayPalButton(props) {
+  return /* @__PURE__ */ jsx7(DirectPayPalButtonImplementation, { ...props });
+}
 
 // src/split-card-form.tsx
 import { FloPayError as FloPayError3, isSetupIntentClientSecret as isSetupIntentClientSecret2, resolveTheme } from "@flopay/shared";
-import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 var STRIPE_RESUME_KEY = "flopay_stripe_resume";
 var LEGACY_WALLET_RESUME_KEY = "flopay_wallet_resume";
 var PAYPAL_RESUME_KEY = "flopay_paypal_resume";
@@ -1685,17 +2084,17 @@ function buildExternalMethodRecoveryMessage(method, popupBlocked) {
   return popupBlocked ? `${base} Allow pop-ups for this site, then try again.` : base;
 }
 function useExternalAttemptReconciliation(onMissingTerminal) {
-  const generationRef = useRef4(0);
-  const invalidatedGenerationRef = useRef4(null);
-  const attemptRef = useRef4(null);
-  const clearAttemptTimer = useCallback2((targetAttempt = attemptRef.current) => {
+  const generationRef = useRef5(0);
+  const invalidatedGenerationRef = useRef5(null);
+  const attemptRef = useRef5(null);
+  const clearAttemptTimer = useCallback3((targetAttempt = attemptRef.current) => {
     const attempt = targetAttempt;
     if (attempt?.timer) {
       clearTimeout(attempt.timer);
       attempt.timer = null;
     }
   }, []);
-  const armAttemptTimer = useCallback2((attempt, delayMs) => {
+  const armAttemptTimer = useCallback3((attempt, delayMs) => {
     if (typeof document !== "undefined" && document.visibilityState !== "visible") return;
     clearAttemptTimer(attempt);
     attempt.timer = setTimeout(() => {
@@ -1710,11 +2109,11 @@ function useExternalAttemptReconciliation(onMissingTerminal) {
       );
     }, delayMs);
   }, [clearAttemptTimer, onMissingTerminal]);
-  const armRecoveryTimer = useCallback2((attempt) => {
+  const armRecoveryTimer = useCallback3((attempt) => {
     if (!attempt.yieldedControl) return;
     armAttemptTimer(attempt, EXTERNAL_METHOD_CALLBACK_GRACE_MS);
   }, [armAttemptTimer]);
-  const startAttempt = useCallback2((method) => {
+  const startAttempt = useCallback3((method) => {
     clearAttemptTimer();
     const generation = generationRef.current + 1;
     generationRef.current = generation;
@@ -1723,7 +2122,7 @@ function useExternalAttemptReconciliation(onMissingTerminal) {
     attemptRef.current = attempt;
     return generation;
   }, [clearAttemptTimer]);
-  const finishAttempt = useCallback2((generation) => {
+  const finishAttempt = useCallback3((generation) => {
     const attempt = attemptRef.current;
     if (typeof generation === "number" && attempt?.generation !== generation) return false;
     clearAttemptTimer(attempt);
@@ -1733,7 +2132,7 @@ function useExternalAttemptReconciliation(onMissingTerminal) {
     }
     return true;
   }, [clearAttemptTimer]);
-  const invalidateAttempt = useCallback2((generation) => {
+  const invalidateAttempt = useCallback3((generation) => {
     const attempt = attemptRef.current;
     const targetGeneration = generation ?? attempt?.generation ?? generationRef.current;
     if (!generation || attempt?.generation === generation) {
@@ -1742,20 +2141,20 @@ function useExternalAttemptReconciliation(onMissingTerminal) {
     }
     invalidatedGenerationRef.current = targetGeneration;
   }, [clearAttemptTimer]);
-  const isAttemptInvalidated = useCallback2(
+  const isAttemptInvalidated = useCallback3(
     (generation) => invalidatedGenerationRef.current === (generation ?? generationRef.current),
     []
   );
-  const isAttemptCurrent = useCallback2(
+  const isAttemptCurrent = useCallback3(
     (generation) => attemptRef.current?.generation === generation && invalidatedGenerationRef.current !== generation,
     []
   );
-  const scheduleRecoveryIfReturned = useCallback2(() => {
+  const scheduleRecoveryIfReturned = useCallback3(() => {
     const attempt = attemptRef.current;
     if (!attempt) return;
     armRecoveryTimer(attempt);
   }, [armRecoveryTimer]);
-  const markAttemptYieldedControl = useCallback2(() => {
+  const markAttemptYieldedControl = useCallback3(() => {
     const attempt = attemptRef.current;
     if (!attempt) return;
     attempt.yieldedControl = true;
@@ -1803,7 +2202,7 @@ function normalizeBeforeButtonClickError(method, err) {
   );
 }
 function FloPayKeyframes() {
-  return /* @__PURE__ */ jsx7("style", { children: FLOPAY_KEYFRAMES });
+  return /* @__PURE__ */ jsx8("style", { children: FLOPAY_KEYFRAMES });
 }
 function toCssSize(value) {
   if (typeof value === "number") return `${value}px`;
@@ -1825,8 +2224,8 @@ function ExpressCheckoutReadySwap({
   children
 }) {
   if (state === "unavailable" || state === "load_error") return null;
-  return /* @__PURE__ */ jsxs4("div", { style: { position: "relative", minHeight: 44 }, children: [
-    /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsxs5("div", { style: { position: "relative", minHeight: 44 }, children: [
+    /* @__PURE__ */ jsx8(
       "div",
       {
         "data-testid": placeholderTestId,
@@ -1845,7 +2244,7 @@ function ExpressCheckoutReadySwap({
         }
       }
     ),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(
       "div",
       {
         style: {
@@ -1865,7 +2264,7 @@ function isExpressCheckoutRowVisible(state) {
 }
 var SplitCardForm = forwardRef(
   function SplitCardForm2(props, ref) {
-    return /* @__PURE__ */ jsx7(SplitCardFormInner, { ...props, innerRef: ref });
+    return /* @__PURE__ */ jsx8(SplitCardFormInner, { ...props, innerRef: ref });
   }
 );
 function PayPalButtonInner({
@@ -1883,6 +2282,7 @@ function PayPalButtonInner({
   onLoadStateChange,
   placeholderBorderRadius
 }) {
+  const flopay = useFloPay();
   const stripe = useStripeRaw();
   const elements = useStripeElements();
   const [loadState, setLoadState] = useState3("loading");
@@ -1890,13 +2290,13 @@ function PayPalButtonInner({
     onLoadStateChange?.(loadState);
   }, [loadState, onLoadStateChange]);
   const [submitting, setSubmitting] = useState3(false);
-  const paypalResumeAttempted = useRef4(false);
-  const focusTargetRef = useRef4(null);
-  const recoveryActionRef = useRef4(null);
+  const paypalResumeAttempted = useRef5(false);
+  const focusTargetRef = useRef5(null);
+  const recoveryActionRef = useRef5(null);
   const [surfaceKey, setSurfaceKey] = useState3(0);
   const [showRecoveryAction, setShowRecoveryAction] = useState3(false);
-  const pendingProviderFocusRef = useRef4(false);
-  const attemptContextBySurfaceRef = useRef4(/* @__PURE__ */ new Map());
+  const pendingProviderFocusRef = useRef5(false);
+  const attemptContextBySurfaceRef = useRef5(/* @__PURE__ */ new Map());
   const baseUrl = billingApiUrl.replace(/\/+$/, "");
   const {
     startAttempt,
@@ -1915,16 +2315,16 @@ function PayPalButtonInner({
   useEffect5(() => {
     if (showRecoveryAction) recoveryActionRef.current?.focus();
   }, [showRecoveryAction, surfaceKey]);
-  const resetSurface = useCallback2(() => {
+  const resetSurface = useCallback3(() => {
     setSurfaceKey((key) => key + 1);
   }, []);
-  const recoverTechnicalFailure = useCallback2((err, code, generation) => {
+  const recoverTechnicalFailure = useCallback3((err, code, generation) => {
     invalidateAttempt(generation);
     onTechnicalFailure?.("paypal", err, { code, popupBlocked: isPopupBlockedError(err) });
     setShowRecoveryAction(true);
     resetSurface();
   }, [invalidateAttempt, onTechnicalFailure, resetSurface]);
-  const focusProviderSurface = useCallback2(() => {
+  const focusProviderSurface = useCallback3(() => {
     window.setTimeout(() => {
       const target = focusTargetRef.current?.querySelector("iframe");
       (target ?? focusTargetRef.current)?.focus();
@@ -1935,7 +2335,7 @@ function PayPalButtonInner({
     pendingProviderFocusRef.current = false;
     focusProviderSurface();
   }, [focusProviderSurface, surfaceKey]);
-  const handleRecoveryActionClick = useCallback2(() => {
+  const handleRecoveryActionClick = useCallback3(() => {
     setShowRecoveryAction(false);
     onErrorChange?.(null);
     focusProviderSurface();
@@ -2006,7 +2406,7 @@ function PayPalButtonInner({
       }
     })();
   }, [stripe, onTokenizedBody, onErrorChange, onDecline]);
-  const handlePayPalClick = useCallback2(async (event) => {
+  const handlePayPalClick = useCallback3(async (event) => {
     if (isProcessing || submitting) {
       event.reject();
       return;
@@ -2028,7 +2428,7 @@ function PayPalButtonInner({
     onButtonClick?.("paypal");
     event.resolve();
   }, [attemptContextBySurfaceRef, isProcessing, onButtonClick, runBeforeButtonClick, startAttempt, submitting, surfaceKey]);
-  const handlePayPalConfirm = useCallback2(async (event) => {
+  const handlePayPalConfirm = useCallback3(async (event) => {
     if (!stripe || !elements) return;
     const attemptContext = attemptContextBySurfaceRef.current.get(surfaceKey);
     if (attemptContext && !isAttemptCurrent(attemptContext.generation)) {
@@ -2068,8 +2468,7 @@ function PayPalButtonInner({
         event.paymentFailed({ reason: "fail" });
         return;
       }
-      const intentHeaders = { "Content-Type": "application/json" };
-      if (effectiveNonce) intentHeaders["x-checkout-session-token"] = effectiveNonce;
+      const intentHeaders = intentRequestHeaders(effectiveNonce);
       const intentResponse = await fetch(`${baseUrl}/v1/checkouts/payments/intents`, {
         method: "POST",
         headers: intentHeaders,
@@ -2160,14 +2559,14 @@ function PayPalButtonInner({
       setSubmitting(false);
     }
   }, [stripe, elements, sessionId, nonce, email, baseUrl, onTokenizedBody, onErrorChange, onDecline, runBeforeButtonClick, recoverTechnicalFailure, finishAttempt, isAttemptCurrent, isAttemptInvalidated, surfaceKey]);
-  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
-    /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    /* @__PURE__ */ jsx8(
       ExpressCheckoutReadySwap,
       {
         state: loadState,
         placeholderTestId: "flopay-paypal-placeholder",
         borderRadius: placeholderBorderRadius,
-        children: /* @__PURE__ */ jsxs4(
+        children: /* @__PURE__ */ jsxs5(
           "div",
           {
             ref: focusTargetRef,
@@ -2176,7 +2575,7 @@ function PayPalButtonInner({
             "aria-label": "PayPal payment method",
             style: { borderRadius: 8, outlineOffset: 4 },
             children: [
-              showRecoveryAction && /* @__PURE__ */ jsx7(
+              showRecoveryAction && /* @__PURE__ */ jsx8(
                 "button",
                 {
                   ref: recoveryActionRef,
@@ -2187,7 +2586,7 @@ function PayPalButtonInner({
                   children: "Try PayPal again"
                 }
               ),
-              /* @__PURE__ */ jsx7(
+              /* @__PURE__ */ jsx8(
                 ExpressCheckoutElement,
                 {
                   onReady: (event) => setLoadState(resolveExpressCheckoutLoadState(event, ["paypal"])),
@@ -2197,6 +2596,11 @@ function PayPalButtonInner({
                   onCancel: () => {
                     const attemptContext = attemptContextBySurfaceRef.current.get(surfaceKey);
                     attemptContextBySurfaceRef.current.delete(surfaceKey);
+                    getFloPayTelemetryBridge(flopay)?.terminal({
+                      outcome: "payment_cancelled",
+                      provider: "paypal",
+                      paymentMethodCategory: "paypal"
+                    });
                     invalidateAttempt(attemptContext?.generation);
                     setShowRecoveryAction(false);
                     pendingProviderFocusRef.current = true;
@@ -2222,7 +2626,7 @@ function PayPalButtonInner({
         )
       }
     ),
-    submitting && /* @__PURE__ */ jsx7(ProcessingOverlay, { status: "processing" })
+    submitting && /* @__PURE__ */ jsx8(ProcessingOverlay, { status: "processing" })
   ] });
 }
 function WalletButtonInner({
@@ -2240,6 +2644,7 @@ function WalletButtonInner({
   onLoadStateChange,
   placeholderBorderRadius
 }) {
+  const flopay = useFloPay();
   const stripe = useStripeRaw();
   const elements = useStripeElements();
   const [loadState, setLoadState] = useState3("loading");
@@ -2248,15 +2653,15 @@ function WalletButtonInner({
   }, [loadState, onLoadStateChange]);
   const [submitting, setSubmitting] = useState3(false);
   const baseUrl = billingApiUrl.replace(/\/+$/, "");
-  const focusTargetRef = useRef4(null);
-  const recoveryActionRef = useRef4(null);
+  const focusTargetRef = useRef5(null);
+  const recoveryActionRef = useRef5(null);
   const [surfaceKey, setSurfaceKey] = useState3(0);
   const [showRecoveryAction, setShowRecoveryAction] = useState3(false);
   const [recoveryActionMethod, setRecoveryActionMethod] = useState3("google_pay");
-  const pendingProviderFocusRef = useRef4(false);
-  const lastWalletProviderMethodRef = useRef4("google_pay");
-  const lastWalletMethodRef = useRef4("google_pay");
-  const attemptContextBySurfaceRef = useRef4(/* @__PURE__ */ new Map());
+  const pendingProviderFocusRef = useRef5(false);
+  const lastWalletProviderMethodRef = useRef5("google_pay");
+  const lastWalletMethodRef = useRef5("google_pay");
+  const attemptContextBySurfaceRef = useRef5(/* @__PURE__ */ new Map());
   const {
     startAttempt,
     finishAttempt,
@@ -2275,17 +2680,17 @@ function WalletButtonInner({
   useEffect5(() => {
     if (showRecoveryAction) recoveryActionRef.current?.focus();
   }, [showRecoveryAction, surfaceKey]);
-  const resetSurface = useCallback2(() => {
+  const resetSurface = useCallback3(() => {
     setSurfaceKey((key) => key + 1);
   }, []);
-  const recoverTechnicalFailure = useCallback2((method, err, code, generation) => {
+  const recoverTechnicalFailure = useCallback3((method, err, code, generation) => {
     invalidateAttempt(generation);
     onTechnicalFailure?.(method, err, { code, popupBlocked: isPopupBlockedError(err) });
     setRecoveryActionMethod(method);
     setShowRecoveryAction(true);
     resetSurface();
   }, [invalidateAttempt, onTechnicalFailure, resetSurface]);
-  const focusProviderSurface = useCallback2(() => {
+  const focusProviderSurface = useCallback3(() => {
     window.setTimeout(() => {
       const target = focusTargetRef.current?.querySelector("iframe");
       (target ?? focusTargetRef.current)?.focus();
@@ -2296,12 +2701,12 @@ function WalletButtonInner({
     pendingProviderFocusRef.current = false;
     focusProviderSurface();
   }, [focusProviderSurface, surfaceKey]);
-  const handleRecoveryActionClick = useCallback2(() => {
+  const handleRecoveryActionClick = useCallback3(() => {
     setShowRecoveryAction(false);
     onErrorChange?.(null);
     focusProviderSurface();
   }, [focusProviderSurface, onErrorChange]);
-  const handleWalletConfirm = useCallback2(
+  const handleWalletConfirm = useCallback3(
     async (event) => {
       if (!stripe || !elements) return;
       const attemptContext = attemptContextBySurfaceRef.current.get(surfaceKey);
@@ -2348,8 +2753,7 @@ function WalletButtonInner({
         if (!effectiveSessionId || !effectiveEmail) {
           throw new Error("Missing sessionId or email for wallet payment");
         }
-        const intentHeaders = { "Content-Type": "application/json" };
-        if (effectiveNonce) intentHeaders["x-checkout-session-token"] = effectiveNonce;
+        const intentHeaders = intentRequestHeaders(effectiveNonce);
         const intentResponse = await fetch(`${baseUrl}/v1/checkouts/payments/intents`, {
           method: "POST",
           headers: intentHeaders,
@@ -2422,14 +2826,14 @@ function WalletButtonInner({
     () => expressMethods.map(stripeExpressMethodToOptionKey),
     [expressMethods]
   );
-  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
-    /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    /* @__PURE__ */ jsx8(
       ExpressCheckoutReadySwap,
       {
         state: loadState,
         placeholderTestId: "flopay-wallet-placeholder",
         borderRadius: placeholderBorderRadius,
-        children: /* @__PURE__ */ jsxs4(
+        children: /* @__PURE__ */ jsxs5(
           "div",
           {
             ref: focusTargetRef,
@@ -2438,7 +2842,7 @@ function WalletButtonInner({
             "aria-label": "Wallet payment methods",
             style: { borderRadius: 8, outlineOffset: 4 },
             children: [
-              showRecoveryAction && /* @__PURE__ */ jsxs4(
+              showRecoveryAction && /* @__PURE__ */ jsxs5(
                 "button",
                 {
                   ref: recoveryActionRef,
@@ -2453,7 +2857,7 @@ function WalletButtonInner({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx7(
+              /* @__PURE__ */ jsx8(
                 ExpressCheckoutElement,
                 {
                   onReady: (event) => {
@@ -2461,6 +2865,13 @@ function WalletButtonInner({
                   },
                   onLoadError: (_event) => {
                     setLoadState("load_error");
+                    getFloPayTelemetryBridge(flopay)?.error({
+                      errorCode: "PROVIDER_LOAD_FAILED",
+                      stage: "provider_load",
+                      provider: "stripe",
+                      paymentMethodCategory: "wallet",
+                      requestCategory: "provider_sdk"
+                    });
                   },
                   onClick: async (event) => {
                     lastWalletProviderMethodRef.current = event.expressPaymentType;
@@ -2487,6 +2898,11 @@ function WalletButtonInner({
                   onCancel: () => {
                     const attemptContext = attemptContextBySurfaceRef.current.get(surfaceKey);
                     attemptContextBySurfaceRef.current.delete(surfaceKey);
+                    getFloPayTelemetryBridge(flopay)?.terminal({
+                      outcome: "payment_cancelled",
+                      provider: "stripe",
+                      paymentMethodCategory: "wallet"
+                    });
                     invalidateAttempt(attemptContext?.generation);
                     setShowRecoveryAction(false);
                     pendingProviderFocusRef.current = true;
@@ -2505,7 +2921,7 @@ function WalletButtonInner({
         )
       }
     ),
-    submitting && /* @__PURE__ */ jsx7(ProcessingOverlay, { status: "processing" })
+    submitting && /* @__PURE__ */ jsx8(ProcessingOverlay, { status: "processing" })
   ] });
 }
 function StripeMethodButton({
@@ -2523,10 +2939,11 @@ function StripeMethodButton({
   fontFamily
 }) {
   const brand = resolveStripeMethodBrandVariant(method, themeId);
+  const vendoredLogoUrl = PAYMENT_METHOD_LOGO_URLS[method];
   const resolvedBackground = brand?.backgroundColor ?? backgroundColor ?? "#ffffff";
   const resolvedBorder = brand?.borderColor ?? borderColor ?? "#d1d5db";
   const resolvedTextColor = brand?.textColor ?? textColor ?? "#262833";
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     "button",
     {
       type: "button",
@@ -2573,9 +2990,9 @@ function StripeMethodButton({
         // Pulse-skeleton parity with the wallet ECE: no spinner, just the
         // status text on top of the pulsing background. Keeps the loading
         // affordance shape-equivalent across both kinds of tile.
-        /* @__PURE__ */ jsx7("span", { style: { margin: "0 auto" }, children: `Connecting to ${getStripeMethodDisplayName(method)}\u2026` })
-      ) : /* @__PURE__ */ jsxs4(Fragment2, { children: [
-        /* @__PURE__ */ jsxs4(
+        /* @__PURE__ */ jsx8("span", { style: { margin: "0 auto" }, children: `Connecting to ${getStripeMethodDisplayName(method)}\u2026` })
+      ) : /* @__PURE__ */ jsxs5(Fragment2, { children: [
+        /* @__PURE__ */ jsxs5(
           "span",
           {
             style: {
@@ -2588,15 +3005,36 @@ function StripeMethodButton({
               gap: hasVendoredStripeMethodLogo(method) ? 8 : 0
             },
             children: [
-              brand?.logoSvg && /* @__PURE__ */ jsx7(
+              vendoredLogoUrl ? (
+                // Vendored brand logo — an <img> asset (not inline SVG) so its
+                // bytes ship as a sibling file, out of the JS bundle. 3:2 box
+                // matching the datatrans logos' 120×80 viewBox; each ships its own
+                // white rounded-rect background so it stays legible on any tile.
+                /* @__PURE__ */ jsx8(
+                  "img",
+                  {
+                    src: vendoredLogoUrl,
+                    alt: "",
+                    "aria-hidden": "true",
+                    loading: "lazy",
+                    decoding: "async",
+                    width: 30,
+                    height: 20,
+                    style: {
+                      width: 30,
+                      height: 20,
+                      flexShrink: 0,
+                      borderRadius: 3,
+                      objectFit: "contain",
+                      display: "inline-flex"
+                    }
+                  }
+                )
+              ) : brand?.logoSvg ? /* @__PURE__ */ jsx8(
                 "span",
                 {
                   "aria-hidden": "true",
                   style: {
-                    // 3:2 box matching the vendored datatrans logos' 120×80
-                    // viewBox. Each logo ships with its own white rounded-rect
-                    // background baked in, so the mark stays legible on any
-                    // brand-coloured tile without an extra chip wrapper here.
                     width: 30,
                     height: 20,
                     flexShrink: 0,
@@ -2606,12 +3044,12 @@ function StripeMethodButton({
                   },
                   dangerouslySetInnerHTML: { __html: brand.logoSvg }
                 }
-              ),
-              /* @__PURE__ */ jsx7("span", { children: getStripeMethodDisplayName(method) })
+              ) : null,
+              /* @__PURE__ */ jsx8("span", { children: getStripeMethodDisplayName(method) })
             ]
           }
         ),
-        hasNextStep && /* @__PURE__ */ jsx7(
+        hasNextStep && /* @__PURE__ */ jsx8(
           "svg",
           {
             width: "14",
@@ -2631,7 +3069,7 @@ function StripeMethodButton({
               opacity: 0.7
             },
             "aria-hidden": "true",
-            children: /* @__PURE__ */ jsx7("path", { d: "M9 18l6-6-6-6" })
+            children: /* @__PURE__ */ jsx8("path", { d: "M9 18l6-6-6-6" })
           }
         )
       ] })
@@ -2657,14 +3095,15 @@ function StripeMethodInlineForm({
   submitButtonStyle,
   errorText
 }) {
+  const flopay = useFloPay();
   const stripe = useStripeRaw();
   const elements = useStripeElements();
   const [submitting, setSubmitting] = useState3(false);
-  const submittingRef = useRef4(false);
+  const submittingRef = useRef5(false);
   const [isMethodComplete, setIsMethodComplete] = useState3(false);
   const [loadState, setLoadState] = useState3("loading");
   const baseUrl = billingApiUrl.replace(/\/+$/, "");
-  const handlePay = useCallback2(async () => {
+  const handlePay = useCallback3(async () => {
     if (!stripe || !elements || isProcessing || submittingRef.current || !isMethodComplete) return;
     submittingRef.current = true;
     setSubmitting(true);
@@ -2694,8 +3133,7 @@ function StripeMethodInlineForm({
       if (!effectiveSessionId || !effectiveEmail) {
         throw new Error("Missing sessionId or email for payment.");
       }
-      const intentHeaders = { "Content-Type": "application/json" };
-      if (effectiveNonce) intentHeaders["x-checkout-session-token"] = effectiveNonce;
+      const intentHeaders = intentRequestHeaders(effectiveNonce);
       const intentResponse = await fetch(`${baseUrl}/v1/checkouts/payments/intents`, {
         method: "POST",
         headers: intentHeaders,
@@ -2749,9 +3187,8 @@ function StripeMethodInlineForm({
         onDecline?.(buildDeclineEvent("card", message, { code: confirmError.code }));
         return;
       }
-      const SUCCESSFUL_PI_STATUSES = /* @__PURE__ */ new Set(["succeeded", "requires_capture", "processing"]);
       const piStatus = paymentIntent?.status;
-      if (!piStatus || !SUCCESSFUL_PI_STATUSES.has(piStatus)) {
+      if (!isSuccessfulPaymentIntentStatus(piStatus)) {
         if (typeof window !== "undefined") {
           try {
             localStorage.removeItem(STRIPE_RESUME_KEY);
@@ -2804,12 +3241,21 @@ function StripeMethodInlineForm({
     onDecline
   ]);
   void onCancel;
-  return /* @__PURE__ */ jsxs4("div", { "data-testid": `flopay-stripe-method-form-${method}`, style: { display: "flex", flexDirection: "column" }, children: [
-    /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsxs5("div", { "data-testid": `flopay-stripe-method-form-${method}`, style: { display: "flex", flexDirection: "column" }, children: [
+    /* @__PURE__ */ jsx8(
       PaymentElement2,
       {
         onReady: () => setLoadState("ready"),
-        onLoadError: () => setLoadState("load_error"),
+        onLoadError: () => {
+          setLoadState("load_error");
+          getFloPayTelemetryBridge(flopay)?.error({
+            errorCode: "PROVIDER_LOAD_FAILED",
+            stage: "provider_load",
+            provider: "stripe",
+            paymentMethodCategory: "apm",
+            requestCategory: "provider_sdk"
+          });
+        },
         onChange: (event) => {
           const evRecord = event;
           setIsMethodComplete(!!evRecord.complete);
@@ -2825,7 +3271,7 @@ function StripeMethodInlineForm({
         }
       }
     ),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(
       "button",
       {
         type: "button",
@@ -2852,22 +3298,7 @@ function StripeMethodInlineForm({
         children: submitting ? "Processing\u2026" : `Pay with ${getStripeMethodDisplayName(method)}`
       }
     ),
-    errorText && /* @__PURE__ */ jsxs4("div", { role: "alert", "data-testid": "flopay-error", style: {
-      margin: "0.75rem 0 0",
-      padding: "0.625rem 0.875rem",
-      background: "#FEF2F2",
-      border: "1px solid #FECACA",
-      borderRadius: "8px",
-      color: "#991B1B",
-      fontSize: "0.85rem",
-      fontWeight: 600,
-      display: "flex",
-      alignItems: "center",
-      gap: "0.5rem"
-    }, children: [
-      /* @__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" }) }),
-      errorText
-    ] })
+    errorText && /* @__PURE__ */ jsx8(ErrorBanner, { margin: "0.75rem 0 0", children: errorText })
   ] });
 }
 function StripePaymentElementInner({
@@ -2897,7 +3328,7 @@ function StripePaymentElementInner({
   const baseUrl = billingApiUrl.replace(/\/+$/, "");
   const [expandedMethod, setExpandedMethod] = useState3(null);
   const [submittingMethod, setSubmittingMethod] = useState3(null);
-  const submittingRef = useRef4(false);
+  const submittingRef = useRef5(false);
   useEffect5(() => {
     if (paymentElementMethods.length > 0 && stripeInstance) {
       onLoadStateChange?.("ready");
@@ -2905,7 +3336,7 @@ function StripePaymentElementInner({
       onLoadStateChange?.("loading");
     }
   }, [paymentElementMethods.length, stripeInstance, onLoadStateChange]);
-  const handleAutoConfirm = useCallback2(async (method) => {
+  const handleAutoConfirm = useCallback3(async (method) => {
     if (!stripeInstance) return;
     if (submittingRef.current || isProcessing) return;
     submittingRef.current = true;
@@ -2925,8 +3356,7 @@ function StripePaymentElementInner({
       if (!effectiveSessionId || !effectiveEmail) {
         throw new Error("Missing sessionId or email for payment.");
       }
-      const intentHeaders = { "Content-Type": "application/json" };
-      if (effectiveNonce) intentHeaders["x-checkout-session-token"] = effectiveNonce;
+      const intentHeaders = intentRequestHeaders(effectiveNonce);
       const intentResponse = await fetch(`${baseUrl}/v1/checkouts/payments/intents`, {
         method: "POST",
         headers: intentHeaders,
@@ -2992,9 +3422,8 @@ function StripePaymentElementInner({
         onDecline?.(buildDeclineEvent("card", message, { code: confirmError.code }));
         return;
       }
-      const SUCCESSFUL_PI_STATUSES = /* @__PURE__ */ new Set(["succeeded", "requires_capture", "processing"]);
       const piStatus = paymentIntent?.status;
-      if (!piStatus || !SUCCESSFUL_PI_STATUSES.has(piStatus)) {
+      if (!isSuccessfulPaymentIntentStatus(piStatus)) {
         if (typeof window !== "undefined") {
           try {
             localStorage.removeItem(STRIPE_RESUME_KEY);
@@ -3046,7 +3475,7 @@ function StripePaymentElementInner({
   ]);
   const [localExpandedMethod, setLocalExpandedMethod] = useState3(null);
   const activeExpandedMethod = onExpandApm ? expandedApmMethod ?? null : localExpandedMethod;
-  const handleMethodClick = useCallback2((method) => {
+  const handleMethodClick = useCallback3((method) => {
     if (submittingRef.current || isProcessing) return;
     if (activeExpandedMethod && activeExpandedMethod !== method) return;
     if (needsStripeMethodExplicitConfirm(method)) {
@@ -3066,7 +3495,7 @@ function StripePaymentElementInner({
       paymentMethodTypes: [localExpandedMethod]
     };
   }, [localExpandedMethod, paymentElementBaseOptions]);
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     "div",
     {
       "data-testid": "flopay-stripe-payment-element-region",
@@ -3075,8 +3504,8 @@ function StripePaymentElementInner({
         const isExpanded = expandedApmMethod === method;
         const isSubmittingThis = submittingMethod === method;
         const otherInProgress = submittingMethod !== null && submittingMethod !== method || expandedApmMethod !== null && expandedApmMethod !== void 0 && expandedApmMethod !== method;
-        return /* @__PURE__ */ jsxs4(React7.Fragment, { children: [
-          /* @__PURE__ */ jsx7(
+        return /* @__PURE__ */ jsxs5(React8.Fragment, { children: [
+          /* @__PURE__ */ jsx8(
             StripeMethodButton,
             {
               method,
@@ -3093,12 +3522,12 @@ function StripePaymentElementInner({
               fontFamily: buttonAppearance?.fontFamily
             }
           ),
-          !onExpandApm && localExpandedMethod === method && localInlineElementsOptions && stripeInstance && /* @__PURE__ */ jsx7(
+          !onExpandApm && localExpandedMethod === method && localInlineElementsOptions && stripeInstance && /* @__PURE__ */ jsx8(
             StripeElements,
             {
               stripe: stripeInstance,
               options: localInlineElementsOptions,
-              children: /* @__PURE__ */ jsx7(
+              children: /* @__PURE__ */ jsx8(
                 StripeMethodInlineForm,
                 {
                   method,
@@ -3204,12 +3633,12 @@ function SplitCardFormInner({
   const [city, setCity] = useState3(cityProp ?? "");
   const [stateValue, setStateValue] = useState3(stateProp ?? "");
   const [accountPatch, setAccountPatch] = useState3({});
-  const zipCodeRef = useRef4(zipProp ?? "");
-  const selectedCountryRef = useRef4(countryProp ?? "US");
-  const addressLine1Ref = useRef4(addressLine1Prop ?? "");
-  const addressLine2Ref = useRef4(addressLine2Prop ?? "");
-  const cityRef = useRef4(cityProp ?? "");
-  const stateRef = useRef4(stateProp ?? "");
+  const zipCodeRef = useRef5(zipProp ?? "");
+  const selectedCountryRef = useRef5(countryProp ?? "US");
+  const addressLine1Ref = useRef5(addressLine1Prop ?? "");
+  const addressLine2Ref = useRef5(addressLine2Prop ?? "");
+  const cityRef = useRef5(cityProp ?? "");
+  const stateRef = useRef5(stateProp ?? "");
   const avsConfig = useMemo3(() => resolveAVSConfig(enableAVSProp), [enableAVSProp]);
   const enableAVS = avsConfig !== null;
   const vaultBlockReady = Boolean(session?.vault?.html);
@@ -3251,20 +3680,20 @@ function SplitCardFormInner({
   const [expandedApmMethod, setExpandedApmMethod] = useState3(null);
   const showCardForm = viewState === "expanding" || viewState === "card";
   const TRANSITION_MS = 280;
-  const expandToCard = useCallback2(() => {
+  const expandToCard = useCallback3(() => {
     setViewState("expanding");
     setTimeout(() => setViewState("card"), TRANSITION_MS);
   }, []);
-  const collapseToButtons = useCallback2(() => {
+  const collapseToButtons = useCallback3(() => {
     setViewState("collapsing");
     setTimeout(() => setViewState("buttons"), TRANSITION_MS);
   }, []);
-  const expandToApm = useCallback2((method) => {
+  const expandToApm = useCallback3((method) => {
     setExpandedApmMethod(method);
     setViewState("apm-expanding");
     setTimeout(() => setViewState("apm-form"), TRANSITION_MS);
   }, []);
-  const collapseFromApm = useCallback2(() => {
+  const collapseFromApm = useCallback3(() => {
     setViewState("apm-collapsing");
     setTimeout(() => {
       setViewState("buttons");
@@ -3279,9 +3708,9 @@ function SplitCardFormInner({
   const [fullName, setFullName] = useState3("");
   const [formReady, setFormReady] = useState3(false);
   const [overlayStatus, setOverlayStatus] = useState3(null);
-  const processingRef = useRef4(false);
+  const processingRef = useRef5(false);
   const [paypalDirectRetry, setPaypalDirectRetry] = useState3(null);
-  const paypalDirectRetryRef = useRef4(paypalDirectRetry);
+  const paypalDirectRetryRef = useRef5(paypalDirectRetry);
   useEffect5(() => {
     paypalDirectRetryRef.current = paypalDirectRetry;
   }, [paypalDirectRetry]);
@@ -3389,7 +3818,7 @@ function SplitCardFormInner({
     setupFutureUsage: "off_session",
     ...stripeAppearanceProp
   }), [amountInCents, currency, stripeAppearanceProp]);
-  const updateError = useCallback2(
+  const updateError = useCallback3(
     (err) => {
       setError(err);
       onErrorChange?.(err);
@@ -3405,13 +3834,13 @@ function SplitCardFormInner({
       updateError(null);
     }
   }, [viewState, updateError]);
-  const emitDecline = useCallback2(
+  const emitDecline = useCallback3(
     (method, input, overrides) => {
       onDecline?.(buildDeclineEvent(method, input, overrides));
     },
     [onDecline]
   );
-  const recoverExternalMethodTechnicalFailure = useCallback2(
+  const recoverExternalMethodTechnicalFailure = useCallback3(
     (method, err, options) => {
       const popupBlocked = options?.popupBlocked ?? isPopupBlockedError(err);
       const message = buildExternalMethodRecoveryMessage(method, popupBlocked);
@@ -3473,7 +3902,7 @@ function SplitCardFormInner({
     nonce,
     updateError
   ]);
-  const vaultOutcomeRef = useRef4({
+  const vaultOutcomeRef = useRef5({
     onComplete,
     onError,
     updateError,
@@ -3499,8 +3928,8 @@ function SplitCardFormInner({
     nonce,
     baseUrl
   };
-  const vaultCompletedRef = useRef4(false);
-  const buildVaultAccountSnapshot = useCallback2(() => {
+  const vaultCompletedRef = useRef5(false);
+  const buildVaultAccountSnapshot = useCallback3(() => {
     const { resolvedAccount: resolvedAccount2, avsConfig: avsConfig2, fullName: fullName2, avsCheckProp: avsCheckProp2 } = vaultOutcomeRef.current;
     const cc = selectedCountryRef.current || resolvedAccount2.country || "US";
     const stateVisible = avsConfig2 ? isAVSFieldVisible(avsConfig2.state, cc) : false;
@@ -3656,7 +4085,7 @@ function SplitCardFormInner({
   const shouldDisplayPayPalRow = shouldRenderDirectPayPal ? directPaypalReady : shouldRenderStripePayPal && isExpressCheckoutRowVisible(paypalLoadState);
   const shouldDisplayWalletRow = shouldRenderWallets && isExpressCheckoutRowVisible(walletLoadState);
   const shouldDisplayPaymentElementRow = shouldRenderPaymentElement && paymentElementLoadState !== "load_error";
-  const validationFiredRef = useRef4(false);
+  const validationFiredRef = useRef5(false);
   useEffect5(() => {
     if (validationFiredRef.current) return;
     if (!showStripe && !showPayPal) {
@@ -3677,7 +4106,7 @@ function SplitCardFormInner({
       updateError(err.message);
     }
   }, [showStripe, showPayPal, directPaypalConfigured, paypalStripeInstance, onError, updateError]);
-  const deprecationLoggedRef = useRef4(false);
+  const deprecationLoggedRef = useRef5(false);
   useEffect5(() => {
     if (deprecationLoggedRef.current) return;
     if (!hasEnabledMethods) return;
@@ -3690,14 +4119,14 @@ function SplitCardFormInner({
       `[FloPay] ${stale.join(" / ")} ${stale.length === 1 ? "is" : "are"} deprecated: the Apple Pay / Google Pay surface is now driven by \`gateways.stripe.enabledPaymentMethods\` on the session response. Remove the legacy prop(s) to silence this warning.`
     );
   }, [hasEnabledMethods, showApplePay, showGooglePay]);
-  const handleNameChange = useCallback2((value) => {
+  const handleNameChange = useCallback3((value) => {
     setFullName(value);
     onFullNameChange?.(value);
     const parts = value.trim().split(/\s+/);
     onFirstNameChange?.(parts[0] ?? "");
     onLastNameChange?.(parts.length > 1 ? parts.slice(1).join(" ") : "");
   }, [onFullNameChange, onFirstNameChange, onLastNameChange]);
-  const applyInlineSessionPatch = useCallback2(
+  const applyInlineSessionPatch = useCallback3(
     (patch, method) => {
       if (!checkout.applyInlineSessionPatch) {
         return Promise.resolve({ error: null, sessionId, nonce });
@@ -3719,7 +4148,7 @@ function SplitCardFormInner({
     },
     [checkout.applyInlineSessionPatch, nonce, onError, sessionId, updateError]
   );
-  const runBeforeButtonClick = useCallback2(async (method) => {
+  const runBeforeButtonClick = useCallback3(async (method) => {
     if (!onBeforeButtonClick) return { proceed: true };
     try {
       const result = await onBeforeButtonClick({
@@ -3756,7 +4185,7 @@ function SplitCardFormInner({
       return { proceed: false };
     }
   }, [applyInlineSessionPatch, checkout.inlineSessionDraft, onBeforeButtonClick, onError, sessionId, updateError]);
-  const processPaymentInternal = useCallback2(
+  const processPaymentInternal = useCallback3(
     async (tokenizedBody, overrides) => {
       if (processingRef.current) return;
       processingRef.current = true;
@@ -3967,7 +4396,7 @@ function SplitCardFormInner({
     },
     [baseUrl, sessionId, nonce, resolvedAccount, fullName, chv, flopay, paypalFlopay, onComplete, onError, updateError, emitDecline]
   );
-  const dispatchTokenizedBody = useCallback2(
+  const dispatchTokenizedBody = useCallback3(
     (tokenizedBody, overrides) => {
       if (onTokenizedBody) {
         onTokenizedBody(tokenizedBody);
@@ -4004,7 +4433,7 @@ function SplitCardFormInner({
       }
     }
   }), [flopay, dispatchTokenizedBody, onError, updateError, emitDecline]);
-  const stripeResumeAttemptedRef = useRef4(false);
+  const stripeResumeAttemptedRef = useRef5(false);
   useEffect5(() => {
     if (typeof window === "undefined" || stripeResumeAttemptedRef.current) return;
     const params = new URLSearchParams(window.location.search);
@@ -4066,7 +4495,7 @@ function SplitCardFormInner({
         return;
       }
       const piStatus = paymentIntent?.status;
-      const successful = piStatus === "succeeded" || piStatus === "requires_capture" || piStatus === "processing";
+      const successful = isSuccessfulPaymentIntentStatus(piStatus);
       if (!paymentIntent || !successful) {
         const message = piStatus === "canceled" ? "Payment was canceled." : "Payment was not completed. Please try again.";
         updateError(message);
@@ -4083,7 +4512,7 @@ function SplitCardFormInner({
       }, persistedOverrides);
     })();
   }, [sessionId, dispatchTokenizedBody, flopay, updateError, emitDecline]);
-  const handleSubmit = useCallback2(
+  const handleSubmit = useCallback3(
     async (e) => {
       e.preventDefault();
       if (!flopay || !elements || isSubmitting || processingRef.current) return;
@@ -4166,8 +4595,7 @@ function SplitCardFormInner({
             updateError(pmResult.error?.message ?? "Failed to create payment method.");
             return;
           }
-          const intentHeaders = { "Content-Type": "application/json" };
-          if (nonce) intentHeaders["x-checkout-session-token"] = nonce;
+          const intentHeaders = intentRequestHeaders(nonce);
           const intentResponse = await fetch(`${baseUrl}/v1/checkouts/payments/intents`, {
             method: "POST",
             headers: intentHeaders,
@@ -4243,7 +4671,7 @@ function SplitCardFormInner({
   );
   const isReady = flopay !== null && (vaultActive || elements !== null);
   if (!isReady) {
-    return /* @__PURE__ */ jsx7("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." });
+    return /* @__PURE__ */ jsx8("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." });
   }
   const isButtons = layout === "buttons";
   const appearanceVars = appearance?.variables;
@@ -4302,7 +4730,7 @@ function SplitCardFormInner({
   const containerOverrides = bStyles.cardFormContainer ?? {};
   const containerPadding = containerOverrides.padding ?? (isButtons ? "0" : "1rem");
   const containerRadius = containerOverrides.borderRadius ?? resolvedBorderRadius;
-  const vaultCardFieldsNode = cardCapture && vaultMount ? /* @__PURE__ */ jsx7(
+  const vaultCardFieldsNode = cardCapture && vaultMount ? /* @__PURE__ */ jsx8(
     VaultCardFields,
     {
       capture: cardCapture,
@@ -4340,7 +4768,7 @@ function SplitCardFormInner({
         if (message) setOverlayStatus(null);
       }
     }
-  ) : /* @__PURE__ */ jsx7(
+  ) : /* @__PURE__ */ jsx8(
     "div",
     {
       "data-testid": "flopay-vault-loading",
@@ -4355,7 +4783,7 @@ function SplitCardFormInner({
       children: "Loading secure card form\u2026"
     }
   );
-  const cardFormBlock = /* @__PURE__ */ jsxs4("div", { style: {
+  const cardFormBlock = /* @__PURE__ */ jsxs5("div", { style: {
     backgroundColor: cardBg,
     borderRadius: containerRadius,
     ...containerOverrides,
@@ -4368,7 +4796,7 @@ function SplitCardFormInner({
     display: "flex",
     flexDirection: "column"
   }, children: [
-    /* @__PURE__ */ jsx7("style", { children: `
+    /* @__PURE__ */ jsx8("style", { children: `
         .flopay-shared-input::placeholder {
           color: var(--flopay-input-placeholder-color);
           opacity: 1;
@@ -4377,14 +4805,14 @@ function SplitCardFormInner({
           font-weight: var(--flopay-input-font-weight);
         }
       ` }),
-    isButtons && showCardForm && /* @__PURE__ */ jsxs4("div", { style: {
+    isButtons && showCardForm && /* @__PURE__ */ jsxs5("div", { style: {
       display: "flex",
       alignItems: "center",
       padding: "0.75rem 0 0.625rem",
       // Keep the header on top when AVS is ordered above the card on vault.
       order: vaultActive ? -2 : 0
     }, children: [
-      /* @__PURE__ */ jsxs4(
+      /* @__PURE__ */ jsxs5(
         "button",
         {
           type: "button",
@@ -4406,7 +4834,7 @@ function SplitCardFormInner({
           },
           "aria-label": "Back to payment methods",
           children: [
-            /* @__PURE__ */ jsx7("span", { style: {
+            /* @__PURE__ */ jsx8("span", { style: {
               display: "inline-flex",
               alignItems: "center",
               justifyContent: "center",
@@ -4416,12 +4844,12 @@ function SplitCardFormInner({
               backgroundColor: "#f3f4f6",
               transition: "background-color 0.15s",
               ...bStyles.backButtonIcon
-            }, 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 })
+            }, children: /* @__PURE__ */ jsx8("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx8("path", { d: "M15 18l-6-6 6-6" }) }) }),
+            /* @__PURE__ */ jsx8(BackButtonContentSlot, { content: cardBackButtonContent })
           ]
         }
       ),
-      hideTitle ? /* @__PURE__ */ jsx7("div", { style: { flex: 1 } }) : /* @__PURE__ */ jsx7("div", { style: {
+      hideTitle ? /* @__PURE__ */ jsx8("div", { style: { flex: 1 } }) : /* @__PURE__ */ jsx8("div", { style: {
         flex: 1,
         textAlign: "center",
         fontWeight: 600,
@@ -4429,9 +4857,9 @@ function SplitCardFormInner({
         color: "#262833",
         paddingRight: 80,
         ...bStyles.title
-      }, children: /* @__PURE__ */ jsx7(TitleContentSlot, { content: cardTitleContent }) })
+      }, children: /* @__PURE__ */ jsx8(TitleContentSlot, { content: cardTitleContent }) })
     ] }),
-    !isButtons && !hideTitle && /* @__PURE__ */ jsx7("div", { style: {
+    !isButtons && !hideTitle && /* @__PURE__ */ jsx8("div", { style: {
       textAlign: "center",
       fontWeight: 600,
       fontSize: "1.1rem",
@@ -4441,17 +4869,17 @@ function SplitCardFormInner({
       // (-2) and AVS block (-1) are ordered below it but above the card form.
       order: vaultActive ? -3 : 0,
       ...bStyles.title
-    }, children: /* @__PURE__ */ jsx7(TitleContentSlot, { content: cardTitleContent }) }),
-    !vaultActive && /* @__PURE__ */ jsxs4(Fragment2, { children: [
-      /* @__PURE__ */ jsx7("div", { style: {
+    }, children: /* @__PURE__ */ jsx8(TitleContentSlot, { content: cardTitleContent }) }),
+    !vaultActive && /* @__PURE__ */ jsxs5(Fragment2, { children: [
+      /* @__PURE__ */ jsx8("div", { style: {
         backgroundColor: cardInputBg,
         border: `1px solid ${resolvedBorder}`,
         borderTopLeftRadius: resolvedBorderRadius,
         borderTopRightRadius: resolvedBorderRadius,
         padding: "10px"
-      }, children: /* @__PURE__ */ jsx7(CardNumberElement, { onReady: () => setFormReady(true), options: stripeElementStyle }) }),
-      /* @__PURE__ */ jsxs4("div", { style: { display: "flex" }, children: [
-        /* @__PURE__ */ jsx7("div", { style: {
+      }, children: /* @__PURE__ */ jsx8(CardNumberElement, { onReady: () => setFormReady(true), options: stripeElementStyle }) }),
+      /* @__PURE__ */ jsxs5("div", { style: { display: "flex" }, children: [
+        /* @__PURE__ */ jsx8("div", { style: {
           flex: 1,
           backgroundColor: cardInputBg,
           // Longhand only — mixing `border` shorthand with per-side
@@ -4463,8 +4891,8 @@ function SplitCardFormInner({
           borderLeft: `1px solid ${resolvedBorder}`,
           borderBottomLeftRadius: resolvedBorderRadius,
           padding: "10px"
-        }, children: /* @__PURE__ */ jsx7(CardExpiryElement, { options: stripeElementStyle }) }),
-        /* @__PURE__ */ jsx7("div", { style: {
+        }, children: /* @__PURE__ */ jsx8(CardExpiryElement, { options: stripeElementStyle }) }),
+        /* @__PURE__ */ jsx8("div", { style: {
           flex: 1,
           backgroundColor: cardInputBg,
           borderTop: "none",
@@ -4473,16 +4901,16 @@ function SplitCardFormInner({
           borderLeft: `1px solid ${resolvedBorder}`,
           borderBottomRightRadius: resolvedBorderRadius,
           padding: "10px"
-        }, children: /* @__PURE__ */ jsx7(CardCvcElement, { options: stripeElementStyle }) })
+        }, children: /* @__PURE__ */ jsx8(CardCvcElement, { options: stripeElementStyle }) })
       ] })
     ] }),
-    !vaultActive && /* @__PURE__ */ jsx7("div", { style: {
+    !vaultActive && /* @__PURE__ */ jsx8("div", { style: {
       backgroundColor: cardInputBg,
       border: `1px solid ${resolvedBorder}`,
       borderRadius: resolvedBorderRadius,
       marginTop: "0.5rem",
       padding: "10px"
-    }, children: /* @__PURE__ */ jsx7(
+    }, children: /* @__PURE__ */ jsx8(
       "input",
       {
         className: "flopay-shared-input",
@@ -4504,7 +4932,7 @@ function SplitCardFormInner({
         }
       }
     ) }),
-    avsConfig && /* @__PURE__ */ jsx7("div", { style: { order: vaultActive ? -1 : 0 }, "data-testid": "flopay-avs-fields", children: (() => {
+    avsConfig && /* @__PURE__ */ jsx8("div", { style: { order: vaultActive ? -1 : 0 }, "data-testid": "flopay-avs-fields", children: (() => {
       const cc = selectedCountry;
       const inputWrapStyle = (invalid = false) => ({
         backgroundColor: cardInputBg,
@@ -4521,8 +4949,8 @@ function SplitCardFormInner({
         ...sharedInputTypography
       });
       const stateOpts = getStateOptions(cc);
-      return /* @__PURE__ */ jsxs4(Fragment2, { children: [
-        isAVSFieldVisible(avsConfig.address_line_1, cc) && /* @__PURE__ */ jsx7("div", { style: inputWrapStyle(invalidAvsFields.line1), children: /* @__PURE__ */ jsx7(
+      return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+        isAVSFieldVisible(avsConfig.address_line_1, cc) && /* @__PURE__ */ jsx8("div", { style: inputWrapStyle(invalidAvsFields.line1), children: /* @__PURE__ */ jsx8(
           "input",
           {
             className: "flopay-shared-input",
@@ -4541,7 +4969,7 @@ function SplitCardFormInner({
             style: inputFieldStyle()
           }
         ) }),
-        isAVSFieldVisible(avsConfig.address_line_2, cc) && /* @__PURE__ */ jsx7("div", { style: inputWrapStyle(), children: /* @__PURE__ */ jsx7(
+        isAVSFieldVisible(avsConfig.address_line_2, cc) && /* @__PURE__ */ jsx8("div", { style: inputWrapStyle(), children: /* @__PURE__ */ jsx8(
           "input",
           {
             className: "flopay-shared-input",
@@ -4559,12 +4987,12 @@ function SplitCardFormInner({
             style: inputFieldStyle()
           }
         ) }),
-        (isAVSFieldVisible(avsConfig.city, cc) || isAVSFieldVisible(avsConfig.state, cc)) && /* @__PURE__ */ jsxs4("div", { style: {
+        (isAVSFieldVisible(avsConfig.city, cc) || isAVSFieldVisible(avsConfig.state, cc)) && /* @__PURE__ */ jsxs5("div", { style: {
           display: "flex",
           gap: "0",
           marginTop: "0.5rem"
         }, children: [
-          isAVSFieldVisible(avsConfig.city, cc) && /* @__PURE__ */ jsx7("div", { style: {
+          isAVSFieldVisible(avsConfig.city, cc) && /* @__PURE__ */ jsx8("div", { style: {
             flex: 1,
             backgroundColor: cardInputBg,
             borderTop: `1px solid ${avsBorderColor(invalidAvsFields.city)}`,
@@ -4575,7 +5003,7 @@ function SplitCardFormInner({
             borderTopLeftRadius: resolvedBorderRadius,
             borderBottomLeftRadius: resolvedBorderRadius,
             ...isAVSFieldVisible(avsConfig.state, cc) ? { borderRight: "none", borderTopRightRadius: 0, borderBottomRightRadius: 0 } : { borderRadius: resolvedBorderRadius }
-          }, children: /* @__PURE__ */ jsx7(
+          }, children: /* @__PURE__ */ jsx8(
             "input",
             {
               className: "flopay-shared-input",
@@ -4594,7 +5022,7 @@ function SplitCardFormInner({
               style: inputFieldStyle()
             }
           ) }),
-          isAVSFieldVisible(avsConfig.state, cc) && /* @__PURE__ */ jsx7("div", { style: {
+          isAVSFieldVisible(avsConfig.state, cc) && /* @__PURE__ */ jsx8("div", { style: {
             flex: 1,
             backgroundColor: cardInputBg,
             border: `1px solid ${avsBorderColor(invalidAvsFields.state)}`,
@@ -4602,7 +5030,7 @@ function SplitCardFormInner({
             borderTopRightRadius: resolvedBorderRadius,
             borderBottomRightRadius: resolvedBorderRadius,
             ...isAVSFieldVisible(avsConfig.city, cc) ? { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 } : { borderRadius: resolvedBorderRadius }
-          }, children: stateOpts ? /* @__PURE__ */ jsxs4(
+          }, children: stateOpts ? /* @__PURE__ */ jsxs5(
             "select",
             {
               id: "flopay-billing-state",
@@ -4618,11 +5046,11 @@ function SplitCardFormInner({
               "data-testid": "flopay-state",
               style: { ...inputFieldStyle(), cursor: "pointer" },
               children: [
-                /* @__PURE__ */ jsx7("option", { value: "", children: getStateLabel(cc) }),
-                stateOpts.map((s) => /* @__PURE__ */ jsx7("option", { value: s.code, children: s.name }, s.code))
+                /* @__PURE__ */ jsx8("option", { value: "", children: getStateLabel(cc) }),
+                stateOpts.map((s) => /* @__PURE__ */ jsx8("option", { value: s.code, children: s.name }, s.code))
               ]
             }
-          ) : /* @__PURE__ */ jsx7(
+          ) : /* @__PURE__ */ jsx8(
             "input",
             {
               className: "flopay-shared-input",
@@ -4642,13 +5070,13 @@ function SplitCardFormInner({
             }
           ) })
         ] }),
-        (isAVSFieldVisible(avsConfig.country, cc) || isAVSFieldVisible(avsConfig.postal_code, cc)) && /* @__PURE__ */ jsxs4("div", { style: {
+        (isAVSFieldVisible(avsConfig.country, cc) || isAVSFieldVisible(avsConfig.postal_code, cc)) && /* @__PURE__ */ jsxs5("div", { style: {
           display: "flex",
           flexDirection: avsLayoutProp === "column" ? "column" : "row",
           gap: avsLayoutProp === "column" ? "0.5rem" : "0",
           marginTop: "0.5rem"
         }, children: [
-          isAVSFieldVisible(avsConfig.country, cc) && /* @__PURE__ */ jsx7("div", { style: {
+          isAVSFieldVisible(avsConfig.country, cc) && /* @__PURE__ */ jsx8("div", { style: {
             flex: avsLayoutProp === "row" ? 1 : void 0,
             backgroundColor: cardInputBg,
             borderTop: `1px solid ${resolvedBorder}`,
@@ -4657,7 +5085,7 @@ function SplitCardFormInner({
             borderLeft: `1px solid ${resolvedBorder}`,
             padding: "10px",
             ...avsLayoutProp === "row" && isAVSFieldVisible(avsConfig.postal_code, cc) ? { borderRadius: "0", borderTopLeftRadius: resolvedBorderRadius, borderBottomLeftRadius: resolvedBorderRadius, borderRight: "none" } : { borderRadius: resolvedBorderRadius }
-          }, children: /* @__PURE__ */ jsx7(
+          }, children: /* @__PURE__ */ jsx8(
             "select",
             {
               id: "flopay-billing-country",
@@ -4674,20 +5102,20 @@ function SplitCardFormInner({
               autoComplete: "billing country",
               "data-testid": "flopay-country",
               style: { ...inputFieldStyle(), cursor: "pointer" },
-              children: COUNTRY_OPTIONS.map((c) => /* @__PURE__ */ jsxs4("option", { value: c.code, children: [
+              children: COUNTRY_OPTIONS.map((c) => /* @__PURE__ */ jsxs5("option", { value: c.code, children: [
                 c.flag,
                 " ",
                 c.name
               ] }, c.code))
             }
           ) }),
-          isAVSFieldVisible(avsConfig.postal_code, cc) && /* @__PURE__ */ jsx7("div", { style: {
+          isAVSFieldVisible(avsConfig.postal_code, cc) && /* @__PURE__ */ jsx8("div", { style: {
             flex: avsLayoutProp === "row" ? 1 : void 0,
             backgroundColor: cardInputBg,
             border: `1px solid ${zipBorderColor}`,
             padding: "10px",
             ...avsLayoutProp === "row" && isAVSFieldVisible(avsConfig.country, cc) ? { borderRadius: "0", borderTopRightRadius: resolvedBorderRadius, borderBottomRightRadius: resolvedBorderRadius } : { borderRadius: resolvedBorderRadius }
-          }, children: /* @__PURE__ */ jsx7(
+          }, children: /* @__PURE__ */ jsx8(
             "input",
             {
               className: "flopay-shared-input",
@@ -4711,7 +5139,7 @@ function SplitCardFormInner({
             }
           ) })
         ] }),
-        showPostcodeError && /* @__PURE__ */ jsx7(
+        showPostcodeError && /* @__PURE__ */ jsx8(
           "div",
           {
             id: "flopay-billing-postal-code-error",
@@ -4728,26 +5156,10 @@ function SplitCardFormInner({
         )
       ] });
     })() }),
-    vaultActive && cardPreFormSlot && /* @__PURE__ */ jsx7("div", { style: { order: -2, width: "100%" }, children: cardPreFormSlot }),
+    vaultActive && cardPreFormSlot && /* @__PURE__ */ jsx8("div", { style: { order: -2, width: "100%" }, children: cardPreFormSlot }),
     vaultActive && vaultCardFieldsNode,
-    displayError && /* @__PURE__ */ jsxs4("div", { role: "alert", "data-testid": "flopay-error", style: {
-      margin: "0.75rem 0",
-      padding: "0.625rem 0.875rem",
-      background: "#FEF2F2",
-      border: "1px solid #FECACA",
-      borderRadius: "8px",
-      color: "#991B1B",
-      fontSize: "0.85rem",
-      fontWeight: 600,
-      display: "flex",
-      alignItems: "center",
-      gap: "0.5rem",
-      ...bStyles.errorBanner ? bStyles.errorBanner : {}
-    }, children: [
-      /* @__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" }) }),
-      displayError
-    ] }),
-    !vaultActive && (children ?? /* @__PURE__ */ jsx7(
+    displayError && /* @__PURE__ */ jsx8(ErrorBanner, { margin: "0.75rem 0", styleOverride: bStyles.errorBanner, children: displayError }),
+    !vaultActive && (children ?? /* @__PURE__ */ jsx8(
       "button",
       {
         type: "submit",
@@ -4792,9 +5204,9 @@ function SplitCardFormInner({
   const renderDirectPaypalGateDebug = (testId) => {
     if (!debug) return null;
     if (!showPayPal || !directPaypalConfigured) {
-      return /* @__PURE__ */ jsx7("pre", { "data-testid": testId, style: gateDebugStyle, children: "FloPay/DirectPayPal-debug - not enabled" });
+      return /* @__PURE__ */ jsx8("pre", { "data-testid": testId, style: gateDebugStyle, children: "FloPay/DirectPayPal-debug - not enabled" });
     }
-    return /* @__PURE__ */ jsx7("pre", { "data-testid": testId, style: gateDebugStyle, children: [
+    return /* @__PURE__ */ jsx8("pre", { "data-testid": testId, style: gateDebugStyle, children: [
       "FloPay/DirectPayPal-debug (parent gate)",
       `  showPayPal=${showPayPal}`,
       `  directPaypalConfigured=${directPaypalConfigured}`,
@@ -4807,9 +5219,9 @@ function SplitCardFormInner({
   const renderStripeGateDebug = (testId) => {
     if (!debug) return null;
     if (!showStripe || !stripeInstance) {
-      return /* @__PURE__ */ jsx7("pre", { "data-testid": testId, style: gateDebugStyle, children: "FloPay/Stripe-debug - not enabled" });
+      return /* @__PURE__ */ jsx8("pre", { "data-testid": testId, style: gateDebugStyle, children: "FloPay/Stripe-debug - not enabled" });
     }
-    return /* @__PURE__ */ jsx7("pre", { "data-testid": testId, style: gateDebugStyle, children: [
+    return /* @__PURE__ */ jsx8("pre", { "data-testid": testId, style: gateDebugStyle, children: [
       "FloPay/Stripe-debug (parent gate)",
       `  showStripe=${showStripe}`,
       `  currency=${currency}`,
@@ -4838,11 +5250,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" || viewState === "apm-expanding" ? `flopay-buttons-exit ${TRANSITION_MS}ms cubic-bezier(0.4, 0, 0.2, 1) both` : viewState === "collapsing" || viewState === "apm-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__ */ jsxs4("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
-      /* @__PURE__ */ jsx7(FloPayKeyframes, {}),
-      overlayStatus && /* @__PURE__ */ jsx7(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
-      /* @__PURE__ */ jsxs4("div", { style: { display: "grid" }, children: [
-        /* @__PURE__ */ jsxs4(
+    return /* @__PURE__ */ jsxs5("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
+      /* @__PURE__ */ jsx8(FloPayKeyframes, {}),
+      overlayStatus && /* @__PURE__ */ jsx8(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
+      /* @__PURE__ */ jsxs5("div", { style: { display: "grid" }, children: [
+        /* @__PURE__ */ jsxs5(
           "div",
           {
             "data-testid": "flopay-buttons-panel",
@@ -4859,8 +5271,8 @@ function SplitCardFormInner({
             children: [
               renderDirectPaypalGateDebug("flopay-direct-paypal-gate-debug"),
               renderStripeGateDebug("flopay-stripe-gate-debug"),
-              shouldRenderDirectPayPal && directPaypal && /* @__PURE__ */ jsxs4(Fragment2, { children: [
-                paypalDirectRetry && /* @__PURE__ */ jsx7(
+              shouldRenderDirectPayPal && directPaypal && /* @__PURE__ */ jsxs5(Fragment2, { children: [
+                paypalDirectRetry && /* @__PURE__ */ jsx8(
                   "div",
                   {
                     "data-testid": "flopay-paypal-direct-retry-notice",
@@ -4876,7 +5288,7 @@ function SplitCardFormInner({
                     children: "Please confirm your PayPal payment to complete checkout."
                   }
                 ),
-                /* @__PURE__ */ jsx7(
+                /* @__PURE__ */ jsx8(
                   DirectPayPalButton,
                   {
                     sessionId,
@@ -4903,7 +5315,7 @@ function SplitCardFormInner({
                   paypalDirectRetry?.orderId ?? "fresh"
                 )
               ] }),
-              shouldRenderStripePayPal && /* @__PURE__ */ jsx7(StripeElements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ jsx7(
+              shouldRenderStripePayPal && /* @__PURE__ */ jsx8(StripeElements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ jsx8(
                 PayPalButtonInner,
                 {
                   sessionId,
@@ -4921,7 +5333,7 @@ function SplitCardFormInner({
                   placeholderBorderRadius: buttonBorderRadius
                 }
               ) }),
-              shouldRenderWallets ? /* @__PURE__ */ jsx7(StripeElements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ jsx7(
+              shouldRenderWallets ? /* @__PURE__ */ jsx8(StripeElements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ jsx8(
                 WalletButtonInner,
                 {
                   sessionId,
@@ -4938,8 +5350,8 @@ function SplitCardFormInner({
                   onLoadStateChange: setWalletLoadState,
                   placeholderBorderRadius: buttonBorderRadius
                 }
-              ) }) : shouldShowWallets ? /* @__PURE__ */ jsx7("div", { style: { height: DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT, borderRadius: buttonBorderRadius, background: "#e5e7eb", animation: "flopay-pulse 1.5s ease-in-out infinite" } }) : null,
-              shouldRenderPaymentElement && /* @__PURE__ */ jsx7(
+              ) }) : shouldShowWallets ? /* @__PURE__ */ jsx8("div", { style: { height: DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT, borderRadius: buttonBorderRadius, background: "#e5e7eb", animation: "flopay-pulse 1.5s ease-in-out infinite" } }) : null,
+              shouldRenderPaymentElement && /* @__PURE__ */ jsx8(
                 StripePaymentElementInner,
                 {
                   sessionId,
@@ -4971,7 +5383,7 @@ function SplitCardFormInner({
                   }
                 }
               ),
-              showStripe && /* @__PURE__ */ jsx7(
+              showStripe && /* @__PURE__ */ jsx8(
                 "button",
                 {
                   type: "button",
@@ -5027,50 +5439,34 @@ function SplitCardFormInner({
                   onMouseUp: (e) => {
                     e.currentTarget.style.transform = "scale(1)";
                   },
-                  children: /* @__PURE__ */ jsx7(CardButtonContentSlot, { content: cardButtonContent })
+                  children: /* @__PURE__ */ jsx8(CardButtonContentSlot, { content: cardButtonContent })
                 }
               ),
-              displayError && viewState === "buttons" && /* @__PURE__ */ jsxs4("div", { role: "alert", "data-testid": "flopay-error", style: {
-                margin: "0.25rem 0",
-                padding: "0.625rem 0.875rem",
-                background: "#FEF2F2",
-                border: "1px solid #FECACA",
-                borderRadius: "8px",
-                color: "#991B1B",
-                fontSize: "0.85rem",
-                fontWeight: 600,
-                display: "flex",
-                alignItems: "center",
-                gap: "0.5rem",
-                ...bStyles.errorBanner ? bStyles.errorBanner : {}
-              }, children: [
-                /* @__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" }) }),
-                displayError
-              ] })
+              displayError && viewState === "buttons" && /* @__PURE__ */ jsx8(ErrorBanner, { margin: "0.25rem 0", styleOverride: bStyles.errorBanner, children: displayError })
             ]
           }
         ),
-        showStripe && isCardView && /* @__PURE__ */ jsx7("div", { style: {
+        showStripe && isCardView && /* @__PURE__ */ jsx8("div", { style: {
           gridArea: "1 / 1",
           ...cardAnim ? { animation: cardAnim } : {},
           ...viewState === "collapsing" ? { pointerEvents: "none" } : {}
         }, children: cardFormBlock }),
-        showStripe && isApmView && expandedApmMethod && apmInlineOptions && stripeInstance && /* @__PURE__ */ jsx7("div", { style: {
+        showStripe && isApmView && expandedApmMethod && apmInlineOptions && stripeInstance && /* @__PURE__ */ jsx8("div", { style: {
           gridArea: "1 / 1",
           ...apmAnim ? { animation: apmAnim } : {},
           ...viewState === "apm-collapsing" ? { pointerEvents: "none" } : {}
-        }, children: /* @__PURE__ */ jsxs4("div", { style: {
+        }, children: /* @__PURE__ */ jsxs5("div", { style: {
           backgroundColor: cardBg,
           borderRadius: containerRadius,
           ...containerOverrides,
           padding: containerPadding
         }, children: [
-          /* @__PURE__ */ jsxs4("div", { style: {
+          /* @__PURE__ */ jsxs5("div", { style: {
             display: "flex",
             alignItems: "center",
             padding: "0.75rem 0 0.625rem"
           }, children: [
-            /* @__PURE__ */ jsxs4(
+            /* @__PURE__ */ jsxs5(
               "button",
               {
                 type: "button",
@@ -5093,7 +5489,7 @@ function SplitCardFormInner({
                 },
                 "aria-label": "Back to payment methods",
                 children: [
-                  /* @__PURE__ */ jsx7("span", { style: {
+                  /* @__PURE__ */ jsx8("span", { style: {
                     display: "inline-flex",
                     alignItems: "center",
                     justifyContent: "center",
@@ -5103,12 +5499,12 @@ function SplitCardFormInner({
                     backgroundColor: "#f3f4f6",
                     transition: "background-color 0.15s",
                     ...bStyles.backButtonIcon
-                  }, 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 })
+                  }, children: /* @__PURE__ */ jsx8("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx8("path", { d: "M15 18l-6-6 6-6" }) }) }),
+                  /* @__PURE__ */ jsx8(BackButtonContentSlot, { content: cardBackButtonContent })
                 ]
               }
             ),
-            /* @__PURE__ */ jsx7("div", { style: {
+            /* @__PURE__ */ jsx8("div", { style: {
               flex: 1,
               textAlign: "center",
               fontWeight: 600,
@@ -5118,12 +5514,12 @@ function SplitCardFormInner({
               ...bStyles.title
             }, children: `Pay with ${getStripeMethodDisplayName(expandedApmMethod)}` })
           ] }),
-          /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx8(
             StripeElements,
             {
               stripe: stripeInstance,
               options: apmInlineOptions,
-              children: /* @__PURE__ */ jsx7(
+              children: /* @__PURE__ */ jsx8(
                 StripeMethodInlineForm,
                 {
                   method: expandedApmMethod,
@@ -5153,24 +5549,24 @@ function SplitCardFormInner({
     ] });
   }
   if (isApmView && expandedApmMethod && apmInlineOptions && stripeInstance && showStripe) {
-    return /* @__PURE__ */ jsxs4("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
-      /* @__PURE__ */ jsx7(FloPayKeyframes, {}),
-      overlayStatus && /* @__PURE__ */ jsx7(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
-      /* @__PURE__ */ jsx7("div", { style: {
+    return /* @__PURE__ */ jsxs5("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
+      /* @__PURE__ */ jsx8(FloPayKeyframes, {}),
+      overlayStatus && /* @__PURE__ */ jsx8(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
+      /* @__PURE__ */ jsx8("div", { style: {
         ...apmAnim ? { animation: apmAnim } : {},
         ...viewState === "apm-collapsing" ? { pointerEvents: "none" } : {}
-      }, children: /* @__PURE__ */ jsxs4("div", { style: {
+      }, children: /* @__PURE__ */ jsxs5("div", { style: {
         backgroundColor: cardBg,
         borderRadius: containerRadius,
         ...containerOverrides,
         padding: containerPadding
       }, children: [
-        /* @__PURE__ */ jsxs4("div", { style: {
+        /* @__PURE__ */ jsxs5("div", { style: {
           display: "flex",
           alignItems: "center",
           padding: "0.75rem 0 0.625rem"
         }, children: [
-          /* @__PURE__ */ jsxs4(
+          /* @__PURE__ */ jsxs5(
             "button",
             {
               type: "button",
@@ -5193,7 +5589,7 @@ function SplitCardFormInner({
               },
               "aria-label": "Back to payment methods",
               children: [
-                /* @__PURE__ */ jsx7("span", { style: {
+                /* @__PURE__ */ jsx8("span", { style: {
                   display: "inline-flex",
                   alignItems: "center",
                   justifyContent: "center",
@@ -5203,12 +5599,12 @@ function SplitCardFormInner({
                   backgroundColor: "#f3f4f6",
                   transition: "background-color 0.15s",
                   ...bStyles.backButtonIcon
-                }, 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 })
+                }, children: /* @__PURE__ */ jsx8("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx8("path", { d: "M15 18l-6-6 6-6" }) }) }),
+                /* @__PURE__ */ jsx8(BackButtonContentSlot, { content: cardBackButtonContent })
               ]
             }
           ),
-          /* @__PURE__ */ jsx7("div", { style: {
+          /* @__PURE__ */ jsx8("div", { style: {
             flex: 1,
             textAlign: "center",
             fontWeight: 600,
@@ -5218,12 +5614,12 @@ function SplitCardFormInner({
             ...bStyles.title
           }, children: `Pay with ${getStripeMethodDisplayName(expandedApmMethod)}` })
         ] }),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           StripeElements,
           {
             stripe: stripeInstance,
             options: apmInlineOptions,
-            children: /* @__PURE__ */ jsx7(
+            children: /* @__PURE__ */ jsx8(
               StripeMethodInlineForm,
               {
                 method: expandedApmMethod,
@@ -5251,14 +5647,14 @@ function SplitCardFormInner({
       ] }) })
     ] });
   }
-  return /* @__PURE__ */ jsxs4("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
-    /* @__PURE__ */ jsx7(FloPayKeyframes, {}),
-    overlayStatus && /* @__PURE__ */ jsx7(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
-    /* @__PURE__ */ jsxs4("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
+  return /* @__PURE__ */ jsxs5("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsx8(FloPayKeyframes, {}),
+    overlayStatus && /* @__PURE__ */ jsx8(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
+    /* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
       renderDirectPaypalGateDebug("flopay-direct-paypal-gate-debug-default"),
       renderStripeGateDebug("flopay-stripe-gate-debug-default"),
-      shouldRenderDirectPayPal && directPaypal && /* @__PURE__ */ jsxs4(Fragment2, { children: [
-        paypalDirectRetry && /* @__PURE__ */ jsx7(
+      shouldRenderDirectPayPal && directPaypal && /* @__PURE__ */ jsxs5(Fragment2, { children: [
+        paypalDirectRetry && /* @__PURE__ */ jsx8(
           "div",
           {
             "data-testid": "flopay-paypal-direct-retry-notice-default",
@@ -5274,7 +5670,7 @@ function SplitCardFormInner({
             children: "Please confirm your PayPal payment to complete checkout."
           }
         ),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           DirectPayPalButton,
           {
             sessionId,
@@ -5301,7 +5697,7 @@ function SplitCardFormInner({
           paypalDirectRetry?.orderId ?? "fresh"
         )
       ] }),
-      shouldRenderStripePayPal && /* @__PURE__ */ jsx7(StripeElements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ jsx7(
+      shouldRenderStripePayPal && /* @__PURE__ */ jsx8(StripeElements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ jsx8(
         PayPalButtonInner,
         {
           sessionId,
@@ -5319,7 +5715,7 @@ function SplitCardFormInner({
           placeholderBorderRadius: buttonBorderRadius
         }
       ) }),
-      shouldRenderWallets && /* @__PURE__ */ jsx7(StripeElements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ jsx7(
+      shouldRenderWallets && /* @__PURE__ */ jsx8(StripeElements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ jsx8(
         WalletButtonInner,
         {
           sessionId,
@@ -5337,7 +5733,7 @@ function SplitCardFormInner({
           placeholderBorderRadius: buttonBorderRadius
         }
       ) }),
-      shouldRenderPaymentElement && /* @__PURE__ */ jsx7(
+      shouldRenderPaymentElement && /* @__PURE__ */ jsx8(
         StripePaymentElementInner,
         {
           sessionId,
@@ -5370,7 +5766,7 @@ function SplitCardFormInner({
         }
       )
     ] }),
-    showStripe && (shouldDisplayWalletRow || shouldDisplayPayPalRow || shouldDisplayPaymentElementRow) && /* @__PURE__ */ jsxs4("div", { style: {
+    showStripe && (shouldDisplayWalletRow || shouldDisplayPayPalRow || shouldDisplayPaymentElementRow) && /* @__PURE__ */ jsxs5("div", { style: {
       display: "flex",
       alignItems: "center",
       gap: "0.75rem",
@@ -5378,9 +5774,9 @@ function SplitCardFormInner({
       color: "#999",
       fontSize: "0.85rem"
     }, children: [
-      /* @__PURE__ */ jsx7("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } }),
-      /* @__PURE__ */ jsx7("span", { children: "or pay with card" }),
-      /* @__PURE__ */ jsx7("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } })
+      /* @__PURE__ */ jsx8("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } }),
+      /* @__PURE__ */ jsx8("span", { children: "or pay with card" }),
+      /* @__PURE__ */ jsx8("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } })
     ] }),
     showStripe && cardFormBlock
   ] });
@@ -5410,6 +5806,9 @@ async function confirmResumeIntent(stripe, clientSecret, data, isSetupIntent) {
   const { paymentIntent, error } = await stripe.confirmCardPayment(clientSecret, data);
   return { error, intent: paymentIntent ?? null };
 }
+function withCheckoutMethod(error, checkoutMethod) {
+  return Object.assign(error, { checkoutMethod });
+}
 function getRedirectResultFromCheckoutProcessError(error) {
   if (!error?.type || !error.threeDSecureToken) {
     return null;
@@ -5631,7 +6030,7 @@ function checkoutProcessErrorToFloPayError(error, fallbackMessage = "Payment fai
   const checkoutMethod = options?.checkoutMethod ?? error?.checkoutMethod ?? (error?.type === "paypal_redirect_required" ? "paypal" : "card");
   const rawMessage = error?.message ?? fallbackMessage;
   const message = applyFriendlyMessageOverride(rawMessage) ?? rawMessage;
-  return Object.assign(
+  return withCheckoutMethod(
     new FloPayError4(
       message,
       "api_error",
@@ -5639,7 +6038,7 @@ function checkoutProcessErrorToFloPayError(error, fallbackMessage = "Payment fai
         code: error?.gatewayErrorCode
       }
     ),
-    { checkoutMethod }
+    checkoutMethod
   );
 }
 function resolveSavedPaymentReturnUrl(session) {
@@ -5725,7 +6124,7 @@ async function recover3DSRedirectResult({
     return null;
   }
   try {
-    const api = new PaymentAPI3(billingApiUrl);
+    const api = new PaymentAPI3(billingApiUrl, { telemetry: false });
     const unified = await api.getUnifiedCheckoutSession(sessionId, nonce);
     const refreshedToken = unified.data.stripe?.clientSecret;
     if (isStripePaymentIntentClientSecret(refreshedToken)) {
@@ -5744,7 +6143,8 @@ async function processSavedPaymentForMode({
   session,
   nonce,
   tokenizedData,
-  returnUrl
+  returnUrl,
+  telemetry
 }) {
   const baseUrl = billingApiUrl.replace(/\/+$/, "");
   const resolvedSessionId = sessionId ?? session.id;
@@ -5755,7 +6155,10 @@ 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 PaymentAPI3(baseUrl);
+  const api = new PaymentAPI3(
+    baseUrl,
+    telemetry === false ? { telemetry: false } : void 0
+  );
   const response = await retryOnceOnFetchFailure(() => api.processPayment(customerId, {
     sessionId: resolvedSessionId,
     nonce: resolvedNonce,
@@ -5807,13 +6210,13 @@ async function processSavedPaymentForMode({
     if (recoveredRedirect) {
       return recoveredRedirect;
     }
-    throw Object.assign(
+    throw withCheckoutMethod(
       new FloPayError4(
         "Your card requires authentication. Please enter your payment details below.",
         "api_error",
         { code: "authentication_required" }
       ),
-      { checkoutMethod: "card" }
+      "card"
     );
   }
   throw new FloPayError4(
@@ -5832,7 +6235,8 @@ async function handleSavedPaymentRedirectResult(redirectResult, {
   billingApiUrl,
   sessionId,
   session,
-  returnUrl
+  returnUrl,
+  telemetry
 }) {
   const stripe = flopay?.getRawProvider();
   if (!stripe) {
@@ -5840,13 +6244,13 @@ async function handleSavedPaymentRedirectResult(redirectResult, {
   }
   if (redirectResult.type === "3ds_required") {
     if (!attempt3DS || !redirectResult.threeDSecureToken) {
-      throw Object.assign(
+      throw withCheckoutMethod(
         new FloPayError4(
           "Your card requires authentication. Please enter your payment details below.",
           "api_error",
           { code: "authentication_required" }
         ),
-        { checkoutMethod: "card" }
+        "card"
       );
     }
     const isSetupIntent = isSetupIntentClientSecret3(redirectResult.threeDSecureToken);
@@ -5855,13 +6259,13 @@ async function handleSavedPaymentRedirectResult(redirectResult, {
     const retrieved = await retrieveResumeIntent(stripe, redirectResult.threeDSecureToken, isSetupIntent);
     if (retrieved) {
       if (retrieved.error) {
-        throw Object.assign(
+        throw withCheckoutMethod(
           new FloPayError4(
             retrieved.error.message ?? `Failed to retrieve 3DS ${isSetupIntent ? "setup" : "payment"} status.`,
             "api_error",
             { code: retrieved.error.code }
           ),
-          { checkoutMethod: "card" }
+          "card"
         );
       }
       const existingIntent = retrieved.intent;
@@ -5884,13 +6288,13 @@ async function handleSavedPaymentRedirectResult(redirectResult, {
     ) : null;
     if (confirmed) {
       if (confirmed.error) {
-        throw Object.assign(
+        throw withCheckoutMethod(
           new FloPayError4(
             confirmed.error.message ?? "3DS authentication failed.",
             "api_error",
             { code: confirmed.error.code }
           ),
-          { checkoutMethod: "card" }
+          "card"
         );
       }
       paymentIntent = confirmed.intent;
@@ -5899,13 +6303,13 @@ async function handleSavedPaymentRedirectResult(redirectResult, {
         clientSecret: redirectResult.threeDSecureToken
       });
       if (nextAction.error) {
-        throw Object.assign(
+        throw withCheckoutMethod(
           new FloPayError4(
             nextAction.error.message ?? "3DS authentication failed.",
             "api_error",
             { code: nextAction.error.code }
           ),
-          { checkoutMethod: "card" }
+          "card"
         );
       }
       paymentIntent = (isSetupIntent ? nextAction.setupIntent : nextAction.paymentIntent) ?? null;
@@ -5915,6 +6319,7 @@ async function handleSavedPaymentRedirectResult(redirectResult, {
         billingApiUrl,
         sessionId,
         session,
+        telemetry,
         tokenizedData: {
           id: paymentIntent.id,
           type: "card",
@@ -5936,20 +6341,21 @@ async function handleSavedPaymentRedirectResult(redirectResult, {
         billingApiUrl,
         sessionId,
         session,
-        returnUrl
+        returnUrl,
+        telemetry
       });
     }
-    throw Object.assign(
+    throw withCheckoutMethod(
       new FloPayError4("3DS authentication did not complete successfully.", "api_error"),
-      { checkoutMethod: "card" }
+      "card"
     );
   }
   if (redirectResult.type === "paypal_redirect_required") {
     const paypalStripe = (paypalFlopay ?? flopay)?.getRawProvider();
     if (!paypalStripe) {
-      throw Object.assign(
+      throw withCheckoutMethod(
         new FloPayError4("PayPal is not available.", "api_error"),
-        { checkoutMethod: "paypal" }
+        "paypal"
       );
     }
     if (redirectResult.paymentMethodId) {
@@ -5957,13 +6363,13 @@ async function handleSavedPaymentRedirectResult(redirectResult, {
         clientSecret: redirectResult.threeDSecureToken
       });
       if (error2) {
-        throw Object.assign(
+        throw withCheckoutMethod(
           new FloPayError4(
             error2.message ?? "PayPal authorization failed.",
             "api_error",
             { code: error2.code }
           ),
-          { checkoutMethod: "paypal" }
+          "paypal"
         );
       }
       return {
@@ -5980,13 +6386,13 @@ async function handleSavedPaymentRedirectResult(redirectResult, {
       redirect: "if_required"
     });
     if (error) {
-      throw Object.assign(
+      throw withCheckoutMethod(
         new FloPayError4(
           error.message ?? "PayPal authorization failed.",
           "api_error",
           { code: error.code }
         ),
-        { checkoutMethod: "paypal" }
+        "paypal"
       );
     }
     return {
@@ -6042,7 +6448,8 @@ async function loadSavedPaymentProviders({
   publishableKey,
   paypalPublishableKey,
   billingApiUrl,
-  locale
+  locale,
+  telemetry
 }) {
   if (!publishableKey) {
     return { flopay: null, paypalFlopay: null };
@@ -6051,11 +6458,13 @@ async function loadSavedPaymentProviders({
   const [instance, paypalInstanceOrError] = await Promise.all([
     loadFloPay(publishableKey, {
       billingApiUrl,
-      locale
+      locale,
+      telemetry
     }),
     needsSeparatePaypal ? loadFloPay(paypalPublishableKey, {
       billingApiUrl,
-      locale
+      locale,
+      telemetry
     }).catch((err) => {
       console.warn("[FloPay] Failed to load PayPal Stripe instance:", err);
       return null;
@@ -6068,13 +6477,40 @@ async function loadSavedPaymentProviders({
 }
 
 // src/flopay-checkout.tsx
-import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs6 } 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 createStandaloneTelemetryReporter(billingApiUrl, enabled, context) {
+  const reporter = createTelemetryBridge({
+    billingApiUrl,
+    sdkPackage: "@flopay/react",
+    sdkVersion: SDK_VERSION2,
+    enabled: enabled !== false
+  });
+  reporter.beginCheckout(context);
+  return reporter;
+}
+function finishStandaloneTelemetry(reporter) {
+  void reporter.flush().catch(() => {
+  }).finally(() => reporter.destroy());
+}
+function reportStandaloneTelemetryError(billingApiUrl, enabled, context, errorCode, stage) {
+  const reporter = createStandaloneTelemetryReporter(billingApiUrl, enabled, context);
+  reporter.error({
+    errorCode,
+    stage,
+    paymentMethodCategory: "unknown",
+    ...stage === "session_read" ? { requestCategory: "session_read" } : {}
+  });
+  finishStandaloneTelemetry(reporter);
+}
+function isExpectedExistingSessionError(error) {
+  return error.type === "validation_error" || error.code === "checkout_session_not_found" || error.code === "checkout_session_expired" || error.code === "checkout_session_completed" || error.code === "session_auto_completed";
+}
 function resolveDirectPaypalConfig(unified) {
   const clientId = unified?.data.paypal?.publishableKey;
   if (!clientId) return void 0;
@@ -6179,6 +6615,7 @@ function FloPayCheckout({
   nonce: nonceProp,
   createSession: createSessionParams,
   billingApiUrl,
+  telemetry,
   appearance: appearanceOverride,
   locale,
   loading: loadingNode,
@@ -6224,9 +6661,9 @@ function FloPayCheckout({
   const checkoutLayout = children ? "custom_layout" : layout === "buttons" ? "buttons_layout" : "default_layout";
   const [unified, setUnified] = useState4(null);
   const [flopay, setFloPay] = useState4(null);
-  const flopayRef = useRef5(null);
+  const flopayRef = useRef6(null);
   const [paypalFlopay, setPaypalFloPay] = useState4(null);
-  const paypalFlopayRef = useRef5(null);
+  const paypalFlopayRef = useRef6(null);
   const [session, setSession] = useState4(null);
   const [resolvedSessionId, setResolvedSessionId] = useState4(sessionIdProp ?? "");
   const activeSessionId = sessionIdProp ?? resolvedSessionId;
@@ -6241,20 +6678,30 @@ function FloPayCheckout({
   const [createSessionPatch, setCreateSessionPatch] = useState4(void 0);
   const [createSessionPatchBaseHash, setCreateSessionPatchBaseHash] = useState4("");
   const [cardBootstrapPending, setCardBootstrapPending] = useState4(false);
-  const autoCheckoutAttempted = useRef5(false);
-  const paypalResumeAttempted = useRef5(false);
-  const savedPaymentKeysRef = useRef5(null);
-  const onCompleteRef = useRef5(onComplete);
+  const autoCheckoutAttempted = useRef6(false);
+  const paypalResumeAttempted = useRef6(false);
+  const savedPaymentKeysRef = useRef6(null);
+  const telemetryCheckoutContext = useMemo4(() => ({
+    checkoutMode: checkoutModeProp ?? currentMode,
+    layout: children ? "unknown" : layout === "buttons" ? "buttons" : "embedded"
+  }), [checkoutModeProp, children, currentMode, layout]);
+  const onCompleteRef = useRef6(onComplete);
   onCompleteRef.current = onComplete;
-  const onErrorRef = useRef5(onError);
+  const onErrorRef = useRef6(onError);
   onErrorRef.current = onError;
-  const onDeclineRef = useRef5(onDecline);
+  const onDeclineRef = useRef6(onDecline);
   onDeclineRef.current = onDecline;
-  const onSessionCompletedRef = useRef5(onSessionCompleted);
+  useEffect6(() => {
+    getFloPayTelemetryBridge(flopay)?.setCheckoutContext(telemetryCheckoutContext);
+    if (paypalFlopay && paypalFlopay !== flopay) {
+      getFloPayTelemetryBridge(paypalFlopay)?.setCheckoutContext(telemetryCheckoutContext);
+    }
+  }, [flopay, paypalFlopay, telemetryCheckoutContext]);
+  const onSessionCompletedRef = useRef6(onSessionCompleted);
   onSessionCompletedRef.current = onSessionCompleted;
   useEffect6(() => {
     console.info("[FloPay] Checkout initialized", {
-      sdk_version: SDK_VERSION,
+      sdk_version: SDK_VERSION2,
       checkout_type: checkoutType,
       checkout_layout: checkoutLayout,
       billing_api_url: resolvedBillingUrl
@@ -6287,22 +6734,112 @@ function FloPayCheckout({
   useEffect6(() => {
     setModeError(initialErrorMessage);
   }, [initialErrorMessage]);
-  const emitDecline = useCallback3(
+  const emitDecline = useCallback4(
     (method, input, overrides) => {
-      onDeclineRef.current?.(buildDeclineEvent(method, input, overrides));
+      invokeMerchantCallback(() => {
+        onDeclineRef.current?.(buildDeclineEvent(method, input, overrides));
+      });
     },
-    []
+    [invokeMerchantCallback]
   );
-  const runSavedPaymentFlow = useCallback3(
+  const runSavedPaymentFlow = useCallback4(
     async (sess, options) => {
       setModeError(null);
       setModeOverlayError(null);
       setModeOverlayStatus("processing");
       const activeSessionId2 = options?.sessionId ?? sess.id;
+      const activeFloPay = flopayRef.current ?? paypalFlopayRef.current;
+      const activeTelemetry = getFloPayTelemetryBridge(activeFloPay);
+      const standaloneTelemetry = activeFloPay ? null : createStandaloneTelemetryReporter(
+        resolvedBillingUrl,
+        telemetry,
+        telemetryCheckoutContext
+      );
+      const telemetrySource = {
+        log: (input) => {
+          if (activeTelemetry) activeTelemetry.log(input);
+          else standaloneTelemetry?.log(input);
+        },
+        error: (input) => {
+          if (activeTelemetry) activeTelemetry.error(input);
+          else standaloneTelemetry?.error(input);
+        },
+        terminal: (input) => {
+          if (activeTelemetry) activeTelemetry.terminal(input);
+          else standaloneTelemetry?.terminal(input);
+        },
+        performance: (input) => {
+          if (activeTelemetry) activeTelemetry.performance(input);
+          else standaloneTelemetry?.performance(input);
+        },
+        now: () => activeTelemetry?.now() ?? standaloneTelemetry?.now() ?? 0,
+        elapsed: (startedAt) => activeTelemetry?.elapsed(startedAt) ?? Math.max(0, (standaloneTelemetry?.now() ?? startedAt) - startedAt)
+      };
+      const processingStartedAt = telemetrySource.now();
+      let recoveryFlow = Boolean(
+        options?.initialAutoProcessingError || options?.initialAutoProcessingPending
+      );
+      let recoveryStarted = false;
+      let recoveryStartedAt;
+      const startRecovery = () => {
+        if (recoveryStarted) return;
+        recoveryStarted = true;
+        recoveryFlow = true;
+        recoveryStartedAt = telemetrySource.now();
+        telemetrySource.log({
+          name: "checkout.recovery.started",
+          stage: "recovery",
+          paymentMethodCategory: "saved"
+        });
+        telemetrySource.log({
+          name: "operation.recovery.started",
+          stage: "recovery",
+          paymentMethodCategory: "saved"
+        });
+      };
+      let processingFinished = false;
+      const finishProcessing = () => {
+        if (processingFinished) return;
+        processingFinished = true;
+        telemetrySource.log({
+          name: "payment.processing.completed",
+          stage: "processing",
+          paymentMethodCategory: "saved"
+        });
+        telemetrySource.performance({
+          stage: "processing",
+          durationMs: telemetrySource.elapsed(processingStartedAt),
+          durationMode: "machine",
+          paymentMethodCategory: "saved"
+        });
+        if (recoveryStartedAt !== void 0) {
+          telemetrySource.performance({
+            stage: "recovery",
+            durationMs: telemetrySource.elapsed(recoveryStartedAt),
+            durationMode: "machine",
+            paymentMethodCategory: "saved"
+          });
+        }
+      };
+      telemetrySource.log({
+        name: "payment.method.selected",
+        stage: "processing",
+        paymentMethodCategory: "saved"
+      });
+      telemetrySource.log({
+        name: "payment.processing.started",
+        stage: "processing",
+        paymentMethodCategory: "saved"
+      });
+      if (recoveryFlow) {
+        startRecovery();
+      }
+      let completionCallback;
       try {
         const redirectResult = getRedirectResultFromCheckoutProcessError(options?.initialAutoProcessingError);
         let paymentResult;
         if (redirectResult) {
+          startRecovery();
           if (redirectResult.type === "paypal_redirect_required" && savedPaymentKeysRef.current?.publishableKey) {
             persistPayPalResumeState({
               sessionId: activeSessionId2,
@@ -6316,13 +6853,14 @@ function FloPayCheckout({
             attempt3DS: options?.attempt3DS,
             billingApiUrl: resolvedBillingUrl,
             sessionId: activeSessionId2,
-            session: sess
+            session: sess,
+            telemetry: false
           });
           if (redirectResult.type === "paypal_redirect_required") {
             clearPayPalResumeState();
           }
         } else if (options?.initialAutoProcessingPending) {
-          const api = new PaymentAPI4(resolvedBillingUrl);
+          const api = new PaymentAPI4(resolvedBillingUrl, { telemetry: false });
           const completed = await api.waitForCheckoutSessionCompletion(options.initialAutoProcessingPending.sessionId, {
             initialDelayMs: options.initialAutoProcessingPending.retryAfterMs
           });
@@ -6350,11 +6888,13 @@ function FloPayCheckout({
           const result = await processSavedPaymentForMode({
             billingApiUrl: resolvedBillingUrl,
             sessionId: activeSessionId2,
-            session: sess
+            session: sess,
+            telemetry: false
           });
           if (result.type === "success") {
             paymentResult = result.result;
           } else {
+            startRecovery();
             if (result.type === "paypal_redirect_required" && savedPaymentKeysRef.current?.publishableKey) {
               persistPayPalResumeState({
                 sessionId: activeSessionId2,
@@ -6368,7 +6908,8 @@ function FloPayCheckout({
               attempt3DS: options?.attempt3DS,
               billingApiUrl: resolvedBillingUrl,
               sessionId: activeSessionId2,
-              session: sess
+              session: sess,
+              telemetry: false
             });
             if (result.type === "paypal_redirect_required") {
               clearPayPalResumeState();
@@ -6376,20 +6917,57 @@ function FloPayCheckout({
           }
         }
         if (activeSessionId2) markSessionRecentlyCompleted(activeSessionId2);
+        finishProcessing();
+        if (recoveryFlow) {
+          telemetrySource.log({
+            name: "checkout.recovery.completed",
+            stage: "recovery",
+            paymentMethodCategory: "saved"
+          });
+          telemetrySource.log({
+            name: "operation.recovery.completed",
+            stage: "recovery",
+            paymentMethodCategory: "saved"
+          });
+        }
+        telemetrySource.terminal({
+          outcome: "payment_succeeded",
+          paymentMethodCategory: "saved"
+        });
         setModeOverlayStatus("success");
         await sleep(PROCESSING_OVERLAY_SUCCESS_DELAY_MS);
-        onCompleteRef.current?.(paymentResult);
-        return true;
+        completionCallback = () => onCompleteRef.current?.(paymentResult);
       } catch (err) {
         const floPayErr = normalizeSavedPaymentError(err);
         const method = floPayErr.checkoutMethod ?? DEFAULT_SAVED_PAYMENT_DECLINE_METHOD;
         setModeError(floPayErr.message);
         setModeOverlayError(floPayErr.message);
         if (options?.fallbackToFull) {
+          telemetrySource.log({
+            name: "operation.fallback",
+            stage: "recovery",
+            paymentMethodCategory: "saved"
+          });
           setCurrentMode("full");
           replaceCheckoutModeQueryParam("full");
         }
-        onErrorRef.current?.(floPayErr);
+        finishProcessing();
+        const expectedDecline = Boolean(
+          floPayErr.declineCode || floPayErr.code?.toLowerCase().includes("declin")
+        );
+        if (expectedDecline) {
+          telemetrySource.terminal({
+            outcome: "payment_declined",
+            paymentMethodCategory: "saved"
+          });
+        } else {
+          telemetrySource.error({
+            errorCode: recoveryFlow ? "RECOVERY_FAILED" : "PAYMENT_PROCESSING_FAILED",
+            stage: recoveryFlow ? "recovery" : "processing",
+            paymentMethodCategory: "saved"
+          });
+        }
+        invokeMerchantCallback(() => onErrorRef.current?.(floPayErr));
         emitDecline(method, floPayErr, {
           code: floPayErr.code,
           declineCode: floPayErr.declineCode
@@ -6399,16 +6977,35 @@ function FloPayCheckout({
           sleep(PROCESSING_OVERLAY_ERROR_DELAY_MS),
           options?.ensureProvidersReady ? options.ensureProvidersReady() : Promise.resolve()
         ]);
+        if (recoveryFlow) {
+          telemetrySource.log({
+            name: "checkout.recovery.completed",
+            stage: "recovery",
+            paymentMethodCategory: "saved"
+          });
+          telemetrySource.log({
+            name: "operation.recovery.completed",
+            stage: "recovery",
+            paymentMethodCategory: "saved"
+          });
+        }
         return false;
       } finally {
+        finishProcessing();
+        if (standaloneTelemetry) finishStandaloneTelemetry(standaloneTelemetry);
         setModeOverlayStatus(null);
         setModeOverlayError(null);
       }
+      invokeMerchantCallback(completionCallback);
+      return true;
     },
     [
       emitDecline,
+      invokeMerchantCallback,
       normalizeSavedPaymentError,
-      resolvedBillingUrl
+      resolvedBillingUrl,
+      telemetry,
+      telemetryCheckoutContext
     ]
   );
   useEffect6(() => {
@@ -6426,6 +7023,8 @@ function FloPayCheckout({
     }
     paypalResumeAttempted.current = true;
     void (async () => {
+      let resumeTelemetry;
+      let redirectResumeStartedAt = 0;
       setModeError(null);
       setModeOverlayError(null);
       setModeOverlayStatus("processing");
@@ -6433,7 +7032,11 @@ function FloPayCheckout({
       try {
         if (params.get("redirect_status") === "failed") {
           throw Object.assign(
-            new FloPayError5("PayPal payment was declined. Please try again.", "api_error"),
+            new FloPayError5(
+              "PayPal payment was declined. Please try again.",
+              "api_error",
+              { declineCode: "paypal_redirect_failed" }
+            ),
             { checkoutMethod: "paypal" }
           );
         }
@@ -6444,7 +7047,22 @@ function FloPayCheckout({
           publishableKey: resumeState.publishableKey,
           paypalPublishableKey: resumeState.paypalPublishableKey,
           billingApiUrl: resolvedBillingUrl,
-          locale
+          locale,
+          telemetry
+        });
+        resumeTelemetry = getFloPayTelemetryBridge(resumePaypalFlopay ?? resumeFlopay);
+        redirectResumeStartedAt = resumeTelemetry?.now() ?? 0;
+        resumeTelemetry?.log({
+          name: "provider.redirect.resumed",
+          stage: "redirect_resume",
+          provider: "paypal",
+          paymentMethodCategory: "paypal"
+        });
+        resumeTelemetry?.log({
+          name: "operation.recovery.started",
+          stage: "recovery",
+          provider: "paypal",
+          paymentMethodCategory: "paypal"
         });
         const paypalStripe = (resumePaypalFlopay ?? resumeFlopay)?.getRawProvider();
         if (!paypalStripe) {
@@ -6474,7 +7092,7 @@ function FloPayCheckout({
         const paymentMethodId = typeof paymentIntent.payment_method === "string" ? paymentIntent.payment_method : paymentIntent.payment_method?.id;
         let finalResultStatus = resultStatus;
         if (resumeState.sessionId) {
-          const resumeApi = new PaymentAPI4(resolvedBillingUrl);
+          const resumeApi = new PaymentAPI4(resolvedBillingUrl, { telemetry: false });
           const resumeSessionResult = await resumeApi.getUnifiedCheckoutSession(resumeState.sessionId);
           const resumeSession = resumeSessionResult.data.session;
           if (resumeSession && resumeSession.status !== "complete") {
@@ -6482,6 +7100,7 @@ function FloPayCheckout({
               billingApiUrl: resolvedBillingUrl,
               sessionId: resumeState.sessionId,
               session: resumeSession,
+              telemetry: false,
               tokenizedData: {
                 id: paymentMethodId ?? paymentIntent.id,
                 type: "card",
@@ -6499,20 +7118,84 @@ function FloPayCheckout({
           }
         }
         if (resumeState.sessionId) markSessionRecentlyCompleted(resumeState.sessionId);
+        resumeTelemetry?.log({
+          name: "operation.recovery.completed",
+          stage: "recovery",
+          provider: "paypal",
+          paymentMethodCategory: "paypal"
+        });
+        resumeTelemetry?.performance({
+          stage: "redirect_resume",
+          durationMs: resumeTelemetry.elapsed(redirectResumeStartedAt),
+          durationMode: "machine",
+          provider: "paypal",
+          paymentMethodCategory: "paypal"
+        });
+        resumeTelemetry?.terminal({
+          outcome: "payment_succeeded",
+          provider: "paypal",
+          paymentMethodCategory: "paypal"
+        });
         setModeOverlayStatus("success");
         await sleep(PROCESSING_OVERLAY_SUCCESS_DELAY_MS);
-        onCompleteRef.current?.({
+        invokeMerchantCallback(() => onCompleteRef.current?.({
           status: finalResultStatus,
           paymentIntentId: paymentIntent.id,
           paymentMethodId,
           checkoutMethod: "paypal"
-        });
+        }));
       } catch (err) {
         const floPayErr = normalizeSavedPaymentError(err);
         const method = floPayErr.checkoutMethod ?? "paypal";
+        const expectedDecline = Boolean(
+          floPayErr.declineCode || floPayErr.code?.toLowerCase().includes("declin")
+        );
+        if (resumeTelemetry) {
+          resumeTelemetry.performance({
+            stage: "redirect_resume",
+            durationMs: resumeTelemetry.elapsed(redirectResumeStartedAt),
+            durationMode: "machine",
+            provider: "paypal",
+            paymentMethodCategory: "paypal"
+          });
+          if (expectedDecline) {
+            resumeTelemetry.terminal({
+              outcome: "payment_declined",
+              provider: "paypal",
+              paymentMethodCategory: "paypal"
+            });
+          } else {
+            resumeTelemetry.error({
+              errorCode: "REDIRECT_RESUME_FAILED",
+              stage: "redirect_resume",
+              provider: "paypal",
+              paymentMethodCategory: "paypal"
+            });
+          }
+        } else if (expectedDecline) {
+          const reporter = createStandaloneTelemetryReporter(
+            resolvedBillingUrl,
+            telemetry,
+            telemetryCheckoutContext
+          );
+          reporter.terminal({
+            outcome: "payment_declined",
+            provider: "paypal",
+            paymentMethodCategory: "paypal"
+          });
+          finishStandaloneTelemetry(reporter);
+        } else {
+          reportStandaloneTelemetryError(
+            resolvedBillingUrl,
+            telemetry,
+            telemetryCheckoutContext,
+            "REDIRECT_RESUME_FAILED",
+            "redirect_resume"
+          );
+        }
         setModeError(floPayErr.message);
         setModeOverlayError(floPayErr.message);
-        onErrorRef.current?.(floPayErr);
+        invokeMerchantCallback(() => onErrorRef.current?.(floPayErr));
         emitDecline(method, floPayErr, {
           code: floPayErr.code,
           declineCode: floPayErr.declineCode
@@ -6527,8 +7210,8 @@ function FloPayCheckout({
         setConfirmProcessing(false);
       }
     })();
-  }, [emitDecline, locale, normalizeSavedPaymentError, resolvedBillingUrl]);
-  const initializedHashRef = useRef5(null);
+  }, [emitDecline, invokeMerchantCallback, locale, normalizeSavedPaymentError, resolvedBillingUrl, telemetry]);
+  const initializedHashRef = useRef6(null);
   function hashCreateParams(params) {
     const key = JSON.stringify({
       c: params?.clientId,
@@ -6565,7 +7248,7 @@ function FloPayCheckout({
     () => effectiveCreateSession ? hashCreateParams(effectiveCreateSession) : "",
     [effectiveCreateSession]
   );
-  const createSessionParamsRef = useRef5(effectiveCreateSession);
+  const createSessionParamsRef = useRef6(effectiveCreateSession);
   createSessionParamsRef.current = effectiveCreateSession;
   useEffect6(() => {
     setResolvedSessionId(sessionIdProp ?? "");
@@ -6577,44 +7260,107 @@ function FloPayCheckout({
     setModeOverlayStatus(null);
   }, [createSessionHash, initialErrorMessage, sessionIdProp]);
   async function resolveInlineSession(params, cacheKey) {
-    const api = new PaymentAPI4(resolvedBillingUrl);
-    const cached = readCachedInlineSession(cacheKey);
-    let sid = cached?.sid ?? null;
-    let realResult = null;
-    if (sid) {
-      try {
-        realResult = await api.getUnifiedCheckoutSession(sid, cached?.nonce);
-        const status = realResult.data.session?.status;
-        if (status === "complete") {
-          if (wasSessionRecentlyCompleted(sid)) {
-            return { sid, result: realResult };
+    const reporter = createStandaloneTelemetryReporter(
+      resolvedBillingUrl,
+      telemetry,
+      telemetryCheckoutContext
+    );
+    const api = new PaymentAPI4(resolvedBillingUrl, { telemetry: false });
+    try {
+      const cached = readCachedInlineSession(cacheKey);
+      reporter.log({
+        name: cached ? "operation.cache.hit" : "operation.cache.miss",
+        stage: "session_create",
+        requestCategory: "session_create"
+      });
+      let sid = cached?.sid ?? null;
+      let realResult = null;
+      if (sid) {
+        try {
+          realResult = await api.getUnifiedCheckoutSession(sid, cached?.nonce);
+          const status = realResult.data.session?.status;
+          if (status === "complete") {
+            if (wasSessionRecentlyCompleted(sid)) {
+              return { sid, result: realResult };
+            }
+            clearCachedInlineSession(cacheKey);
+            sid = null;
+            realResult = null;
           }
+        } catch {
+          reporter.log({
+            name: "operation.fallback",
+            stage: "session_read",
+            requestCategory: "session_read"
+          });
           clearCachedInlineSession(cacheKey);
           sid = null;
-          realResult = null;
         }
-      } catch {
-        clearCachedInlineSession(cacheKey);
-        sid = null;
       }
-    }
-    if (!sid) {
-      const paramsWithAnalytics = {
-        ...params,
-        avsCheck: !!enableAVS,
-        avsConfig: typeof enableAVS === "object" ? enableAVS : void 0,
-        checkoutType: "embedded_checkout",
-        checkoutLayout: children ? "custom_layout" : layout === "buttons" ? "buttons_layout" : "default_layout"
-      };
-      realResult = await api.createAndFetchSession(paramsWithAnalytics);
-      sid = realResult.data.session?.id ?? "";
-      if (sid) {
-        persistCachedInlineSession(cacheKey, sid, realResult.data.session?.clientSecret);
+      if (!sid) {
+        const sessionCreateStartedAt = reporter.now();
+        reporter.log({
+          name: "session.create.started",
+          stage: "session_create",
+          requestCategory: "session_create"
+        });
+        const paramsWithAnalytics = {
+          ...params,
+          avsCheck: !!enableAVS,
+          avsConfig: typeof enableAVS === "object" ? enableAVS : void 0,
+          checkoutType: "embedded_checkout",
+          checkoutLayout: children ? "custom_layout" : layout === "buttons" ? "buttons_layout" : "default_layout"
+        };
+        try {
+          realResult = await api.createAndFetchSession(paramsWithAnalytics);
+          reporter.log({
+            name: "session.request.completed",
+            stage: "session_complete",
+            requestCategory: "session_create",
+            statusClass: "2xx"
+          });
+          reporter.performance({
+            stage: "session_create",
+            durationMs: reporter.now() - sessionCreateStartedAt,
+            durationMode: "machine",
+            requestCategory: "session_create",
+            statusClass: "2xx"
+          });
+        } catch (error) {
+          reporter.performance({
+            stage: "session_create",
+            durationMs: reporter.now() - sessionCreateStartedAt,
+            durationMode: "machine",
+            requestCategory: "session_create",
+            statusClass: "network_error"
+          });
+          if (error instanceof FloPayError5 && error.type === "validation_error") {
+            reporter.terminal({
+              outcome: "validation_rejected",
+              stage: "session_create",
+              paymentMethodCategory: "unknown"
+            });
+          } else {
+            reporter.error({
+              errorCode: "CHECKOUT_SESSION_CREATE_FAILED",
+              stage: "session_create",
+              paymentMethodCategory: "unknown",
+              requestCategory: "session_create"
+            });
+          }
+          throw error;
+        }
+        sid = realResult.data.session?.id ?? "";
+        if (sid) {
+          persistCachedInlineSession(cacheKey, sid, realResult.data.session?.clientSecret);
+        }
       }
+      return { sid: sid ?? "", result: realResult };
+    } finally {
+      finishStandaloneTelemetry(reporter);
     }
-    return { sid: sid ?? "", result: realResult };
   }
-  const bootstrapInlineSession = useCallback3(
+  const bootstrapInlineSession = useCallback4(
     async (patch) => {
       const baseParams = createSessionParamsRef.current;
       if (!baseParams) {
@@ -6658,7 +7404,8 @@ function FloPayCheckout({
           publishableKey,
           paypalPublishableKey,
           billingApiUrl: resolvedBillingUrl,
-          locale
+          locale,
+          telemetry
         });
         flopayRef.current = instance;
         setFloPay(instance);
@@ -6673,9 +7420,9 @@ function FloPayCheckout({
       }
       return resolved;
     },
-    [locale, resolvedBillingUrl]
+    [locale, resolvedBillingUrl, telemetry, telemetryCheckoutContext]
   );
-  const handleInlineSessionPatch = useCallback3(async (patch) => {
+  const handleInlineSessionPatch = useCallback4(async (patch) => {
     if (!hasInlineSessionPatchData(patch) || cardBootstrapPending) {
       return {
         sessionId: resolvedSessionId,
@@ -6752,7 +7499,9 @@ function FloPayCheckout({
             setModeOverlayStatus("success");
             await sleep(PROCESSING_OVERLAY_SUCCESS_DELAY_MS);
             if (!cancelled) {
-              onCompleteRef.current?.({ status: "succeeded" });
+              invokeMerchantCallback(() => {
+                onCompleteRef.current?.({ status: "succeeded" });
+              });
               setModeOverlayStatus(null);
               setModeOverlayError(null);
             }
@@ -6772,8 +7521,9 @@ function FloPayCheckout({
     }
     setIsLoading(true);
     async function init() {
+      let sessionReadCompleted = false;
       try {
-        const api = new PaymentAPI4(resolvedBillingUrl);
+        const api = new PaymentAPI4(resolvedBillingUrl, { telemetry: false });
         const result = await api.getUnifiedCheckoutSession(activeSessionId, nonceProp);
         if (cancelled) return;
         setUnified(result);
@@ -6784,7 +7534,9 @@ function FloPayCheckout({
         }
         if (sess.status === "complete") {
           setIsLoading(false);
-          onSessionCompletedRef.current?.(sess.successUrl ?? "");
+          invokeMerchantCallback(() => {
+            onSessionCompletedRef.current?.(sess.successUrl ?? "");
+          });
           return;
         }
         if (sess.status === "expired") {
@@ -6792,6 +7544,7 @@ function FloPayCheckout({
             code: "checkout_session_expired"
           });
         }
+        sessionReadCompleted = true;
         const effectiveMode = checkoutModeProp ?? sess.checkoutMode ?? "full";
         setCurrentMode(effectiveMode);
         const hasPayPalRedirectParams = typeof window !== "undefined" && new URLSearchParams(window.location.search).has("payment_intent");
@@ -6823,6 +7576,23 @@ function FloPayCheckout({
         if (!cancelled) setIsLoading(false);
       } catch (err) {
         if (cancelled) return;
+        if (!(err instanceof FloPayError5)) {
+          reportStandaloneTelemetryError(
+            resolvedBillingUrl,
+            telemetry,
+            telemetryCheckoutContext,
+            "INTERNAL_SDK_ERROR",
+            "checkout_mount"
+          );
+        } else if (!sessionReadCompleted && !isExpectedExistingSessionError(err)) {
+          reportStandaloneTelemetryError(
+            resolvedBillingUrl,
+            telemetry,
+            telemetryCheckoutContext,
+            "NETWORK_REQUEST_FAILED",
+            "session_read"
+          );
+        }
         const floPayErr = err instanceof FloPayError5 ? err : new FloPayError5(err instanceof Error ? err.message : "Failed to initialize checkout", "api_error");
         setLoadError(floPayErr);
         setIsLoading(false);
@@ -6844,7 +7614,8 @@ function FloPayCheckout({
         publishableKey,
         paypalPublishableKey,
         billingApiUrl: resolvedBillingUrl,
-        locale
+        locale,
+        telemetry
       });
       flopayRef.current = instance;
       setFloPay(instance);
@@ -6861,10 +7632,11 @@ function FloPayCheckout({
     createSessionHash,
     effectiveCreateSessionMode,
     initSessionDependency,
+    invokeMerchantCallback,
     nonceProp,
     runSavedPaymentFlow
   ]);
-  const handleConfirmCheckout = useCallback3(async () => {
+  const handleConfirmCheckout = useCallback4(async () => {
     if (confirmProcessing || !session) return;
     setConfirmProcessing(true);
     setModeError(null);
@@ -6920,7 +7692,7 @@ function FloPayCheckout({
     ]
   );
   const shouldShowInterimButtons = Boolean(createSessionParams) && layout === "buttons" && !isPaypalOnlySession && (!flopay || !providerOptions);
-  const modeOverlay = modeOverlayStatus ? /* @__PURE__ */ jsx8(
+  const modeOverlay = modeOverlayStatus ? /* @__PURE__ */ jsx9(
     ProcessingOverlay,
     {
       status: modeOverlayStatus,
@@ -6929,32 +7701,32 @@ function FloPayCheckout({
   ) : null;
   if (isLoading) {
     if (loadingNode) {
-      return /* @__PURE__ */ jsxs5(Fragment3, { children: [
+      return /* @__PURE__ */ jsxs6(Fragment3, { children: [
         loadingNode,
         modeOverlay
       ] });
     }
     if (layout === "buttons") {
       const bundleRadius = themeBundle?.buttonsLayout?.cardButton?.borderRadius ?? themeBundle?.appearance.variables?.borderRadius ?? 8;
-      const skeletonBar = (h) => /* @__PURE__ */ jsx8("div", { style: {
+      const skeletonBar = (h) => /* @__PURE__ */ jsx9("div", { style: {
         height: h,
         borderRadius: bundleRadius,
         background: "#e5e7eb",
         animation: "flopay-loading-pulse 1.5s ease-in-out infinite"
       } });
-      return /* @__PURE__ */ jsxs5(Fragment3, { children: [
-        /* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
+      return /* @__PURE__ */ jsxs6(Fragment3, { children: [
+        /* @__PURE__ */ jsxs6("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
           showPayPal && skeletonBar(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
           showStripe && (showApplePay || showGooglePay) && skeletonBar(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
           showStripe && skeletonBar(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
-          /* @__PURE__ */ jsx8("style", { children: `@keyframes flopay-loading-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
+          /* @__PURE__ */ jsx9("style", { children: `@keyframes flopay-loading-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
         ] }),
         modeOverlay
       ] });
     }
-    return /* @__PURE__ */ jsxs5(Fragment3, { children: [
-      /* @__PURE__ */ jsxs5("div", { style: { display: "flex", justifyContent: "center", padding: 32 }, children: [
-        /* @__PURE__ */ jsx8("div", { style: {
+    return /* @__PURE__ */ jsxs6(Fragment3, { children: [
+      /* @__PURE__ */ jsxs6("div", { style: { display: "flex", justifyContent: "center", padding: 32 }, children: [
+        /* @__PURE__ */ jsx9("div", { style: {
           width: 24,
           height: 24,
           border: "2px solid #e5e7eb",
@@ -6962,16 +7734,16 @@ function FloPayCheckout({
           borderRadius: "50%",
           animation: "spin 0.6s linear infinite"
         } }),
-        /* @__PURE__ */ jsx8("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` })
+        /* @__PURE__ */ jsx9("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` })
       ] }),
       modeOverlay
     ] });
   }
   if (loadError) {
     if (errorNode) {
-      return /* @__PURE__ */ jsx8(CheckoutContext.Provider, { value: checkoutValue, children: errorNode(loadError) });
+      return /* @__PURE__ */ jsx9(CheckoutContext.Provider, { value: checkoutValue, children: errorNode(loadError) });
     }
-    return /* @__PURE__ */ jsx8(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsx9(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx9(
       "div",
       {
         role: "alert",
@@ -6987,8 +7759,8 @@ function FloPayCheckout({
     ) });
   }
   if (shouldShowInterimButtons) {
-    return /* @__PURE__ */ jsxs5(Fragment3, { children: [
-      /* @__PURE__ */ jsx8(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsxs6(Fragment3, { children: [
+      /* @__PURE__ */ jsx9(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx9(
         InterimButtonsView,
         {
           onButtonClick,
@@ -7008,27 +7780,11 @@ function FloPayCheckout({
     ] });
   }
   if (isPaypalOnlySession && session && directPaypalConfig) {
-    return /* @__PURE__ */ jsxs5(Fragment3, { children: [
-      /* @__PURE__ */ jsx8(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsxs5("div", { className, style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
-        modeError && /* @__PURE__ */ jsx8(
-          "div",
-          {
-            role: "alert",
-            "data-testid": "flopay-error",
-            style: {
-              padding: "0.625rem 0.875rem",
-              background: "#FEF2F2",
-              border: "1px solid #FECACA",
-              borderRadius: "8px",
-              color: "#991B1B",
-              fontSize: "0.85rem",
-              fontWeight: 600
-            },
-            children: modeError
-          }
-        ),
-        /* @__PURE__ */ jsx8(
-          DirectPayPalButton,
+    return /* @__PURE__ */ jsxs6(Fragment3, { children: [
+      /* @__PURE__ */ jsx9(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsxs6("div", { className, style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
+        modeError && /* @__PURE__ */ jsx9(ErrorBanner, { icon: false, children: modeError }),
+        /* @__PURE__ */ jsx9(
+          InstrumentedDirectPayPalButton,
           {
             sessionId: activeSessionId,
             nonce: session.clientSecret || void 0,
@@ -7043,6 +7799,8 @@ function FloPayCheckout({
             onDecline,
             onButtonClick,
             session,
+            telemetry,
+            telemetryContext: telemetryCheckoutContext,
             debug
           }
         )
@@ -7051,12 +7809,12 @@ function FloPayCheckout({
     ] });
   }
   if (!flopay || !providerOptions) {
-    return /* @__PURE__ */ jsx8(Fragment3, { children: modeOverlay });
+    return /* @__PURE__ */ jsx9(Fragment3, { children: modeOverlay });
   }
   if (currentMode === "confirm") {
-    return /* @__PURE__ */ jsxs5(Fragment3, { children: [
-      /* @__PURE__ */ jsx8(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx8(FloPayProvider, { flopay, paypalFlopay, options: providerOptions, children: /* @__PURE__ */ jsxs5("div", { className, children: [
-        modeError && /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsxs6(Fragment3, { children: [
+      /* @__PURE__ */ jsx9(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx9(FloPayProvider, { flopay, paypalFlopay, options: providerOptions, children: /* @__PURE__ */ jsxs6("div", { className, children: [
+        modeError && /* @__PURE__ */ jsx9(
           "div",
           {
             style: {
@@ -7071,7 +7829,7 @@ function FloPayCheckout({
         renderConfirmButton ? renderConfirmButton({
           onConfirm: handleConfirmCheckout,
           isProcessing: confirmProcessing
-        }) : /* @__PURE__ */ jsx8(
+        }) : /* @__PURE__ */ jsx9(
           "button",
           {
             type: "button",
@@ -7096,9 +7854,9 @@ function FloPayCheckout({
       modeOverlay
     ] });
   }
-  return /* @__PURE__ */ jsxs5(Fragment3, { children: [
-    /* @__PURE__ */ jsx8(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx8(FloPayProvider, { flopay, paypalFlopay, options: providerOptions, children: children ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
-      modeError && /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
+    /* @__PURE__ */ jsx9(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx9(FloPayProvider, { flopay, paypalFlopay, options: providerOptions, children: children ? /* @__PURE__ */ jsxs6(Fragment3, { children: [
+      modeError && /* @__PURE__ */ jsx9(
         "div",
         {
           style: {
@@ -7113,7 +7871,7 @@ function FloPayCheckout({
           children: modeError
         }
       ),
-      /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx9(
         SessionInjector,
         {
           sessionId: activeSessionId,
@@ -7123,7 +7881,7 @@ function FloPayCheckout({
           children
         }
       )
-    ] }) : /* @__PURE__ */ jsx8(
+    ] }) : /* @__PURE__ */ jsx9(
       SplitCardForm,
       {
         sessionId: activeSessionId,
@@ -7186,8 +7944,8 @@ function SessionInjector({
   session,
   children
 }) {
-  return /* @__PURE__ */ jsx8(Fragment3, { children: React8.Children.map(children, (child) => {
-    if (!React8.isValidElement(child)) return child;
+  return /* @__PURE__ */ jsx9(Fragment3, { children: React9.Children.map(children, (child) => {
+    if (!React9.isValidElement(child)) return child;
     const existing = child.props;
     const injected = {};
     if (!existing.sessionId) injected.sessionId = sessionId;
@@ -7202,15 +7960,11 @@ function SessionInjector({
         injected.lastName = session.customer.lastName;
     }
     if (Object.keys(injected).length === 0) return child;
-    return React8.cloneElement(child, injected);
+    return React9.cloneElement(child, injected);
   }) });
 }
 function InterimButtonsView({
   onButtonClick,
-  onCardButtonClick,
-  cardLoading = false,
-  cardOpen,
-  errorMessage,
   showPayPal,
   showStripe = true,
   showApplePay,
@@ -7223,12 +7977,6 @@ function InterimButtonsView({
   cardTitleContent
 }) {
   const [showCardForm, setShowCardForm] = useState4(false);
-  const isCardOpenControlled = typeof cardOpen === "boolean";
-  useEffect6(() => {
-    if (isCardOpenControlled) {
-      setShowCardForm(cardOpen);
-    }
-  }, [cardOpen, isCardOpenControlled]);
   const themeBundle = useMemo4(() => resolveTheme2(theme), [theme]);
   const bStyles = useMemo4(() => {
     const base = themeBundle?.buttonsLayout ?? resolveButtonsLayoutTheme2(buttonsTheme);
@@ -7245,7 +7993,7 @@ function InterimButtonsView({
     };
   }, [themeBundle, buttonsTheme, stylesOverride]);
   const skeletonRadius = themeBundle?.buttonsLayout?.cardButton?.borderRadius ?? themeBundle?.appearance.variables?.borderRadius ?? 8;
-  const skeleton = (h) => /* @__PURE__ */ jsx8("div", { style: {
+  const skeleton = (h) => /* @__PURE__ */ jsx9("div", { style: {
     height: h,
     borderRadius: skeletonRadius,
     background: "#e5e7eb",
@@ -7257,25 +8005,20 @@ function InterimButtonsView({
     const inputBg = bStyles.cardInputBackground ?? "white";
     const hideBackButtonLabel = isEmptySlotContent(cardBackButtonContent);
     const hideTitle = isEmptySlotContent(cardTitleContent);
-    return /* @__PURE__ */ jsxs5("div", { style: {
+    return /* @__PURE__ */ jsxs6("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__ */ jsxs5("div", { style: { display: "flex", alignItems: "center", padding: "0.75rem 0 0.625rem" }, children: [
-        /* @__PURE__ */ jsxs5(
+      /* @__PURE__ */ jsxs6("div", { style: { display: "flex", alignItems: "center", padding: "0.75rem 0 0.625rem" }, children: [
+        /* @__PURE__ */ jsxs6(
           "button",
           {
             type: "button",
-            onClick: () => {
-              if (!isCardOpenControlled) {
-                setShowCardForm(false);
-              }
-            },
+            onClick: () => setShowCardForm(false),
             "aria-label": "Back to payment methods",
-            disabled: isCardOpenControlled || cardLoading,
             style: {
               display: "inline-flex",
               alignItems: "center",
@@ -7287,12 +8030,12 @@ function InterimButtonsView({
               fontWeight: 500,
               padding: 0,
               flexShrink: 0,
-              opacity: isCardOpenControlled || cardLoading ? 0.6 : 1,
-              cursor: isCardOpenControlled || cardLoading ? "not-allowed" : "pointer",
+              opacity: 1,
+              cursor: "pointer",
               ...bStyles.backButton
             },
             children: [
-              /* @__PURE__ */ jsx8("span", { style: {
+              /* @__PURE__ */ jsx9("span", { style: {
                 display: "inline-flex",
                 alignItems: "center",
                 justifyContent: "center",
@@ -7301,12 +8044,12 @@ function InterimButtonsView({
                 borderRadius: "50%",
                 backgroundColor: "#f3f4f6",
                 ...bStyles.backButtonIcon
-              }, children: /* @__PURE__ */ jsx8("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx8("path", { d: "M15 18l-6-6 6-6" }) }) }),
-              /* @__PURE__ */ jsx8(BackButtonContentSlot, { content: cardBackButtonContent })
+              }, children: /* @__PURE__ */ jsx9("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx9("path", { d: "M15 18l-6-6 6-6" }) }) }),
+              /* @__PURE__ */ jsx9(BackButtonContentSlot, { content: cardBackButtonContent })
             ]
           }
         ),
-        hideTitle ? /* @__PURE__ */ jsx8("div", { style: { flex: 1 } }) : /* @__PURE__ */ jsx8("div", { style: {
+        hideTitle ? /* @__PURE__ */ jsx9("div", { style: { flex: 1 } }) : /* @__PURE__ */ jsx9("div", { style: {
           flex: 1,
           textAlign: "center",
           fontWeight: 600,
@@ -7314,11 +8057,11 @@ function InterimButtonsView({
           color: "#262833",
           paddingRight: 80,
           ...bStyles.title
-        }, children: /* @__PURE__ */ jsx8(TitleContentSlot, { content: cardTitleContent }) })
+        }, children: /* @__PURE__ */ jsx9(TitleContentSlot, { content: cardTitleContent }) })
       ] }),
-      /* @__PURE__ */ jsx8("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTopLeftRadius: 8, borderTopRightRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx8("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__ */ jsx8("div", { style: {
+      /* @__PURE__ */ jsx9("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTopLeftRadius: 8, borderTopRightRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx9("div", { style: { width: "60%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
+      /* @__PURE__ */ jsxs6("div", { style: { display: "flex" }, children: [
+        /* @__PURE__ */ jsx9("div", { style: {
           flex: 1,
           backgroundColor: inputBg,
           borderTop: "none",
@@ -7328,8 +8071,8 @@ function InterimButtonsView({
           borderBottomLeftRadius: 8,
           padding: 12,
           height: 45
-        }, children: /* @__PURE__ */ jsx8("div", { style: { width: "50%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
-        /* @__PURE__ */ jsx8("div", { style: {
+        }, children: /* @__PURE__ */ jsx9("div", { style: { width: "50%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
+        /* @__PURE__ */ jsx9("div", { style: {
           flex: 1,
           backgroundColor: inputBg,
           borderTop: "none",
@@ -7339,10 +8082,10 @@ function InterimButtonsView({
           borderBottomRightRadius: 8,
           padding: 12,
           height: 45
-        }, children: /* @__PURE__ */ jsx8("div", { style: { width: "40%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) })
+        }, children: /* @__PURE__ */ jsx9("div", { style: { width: "40%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) })
       ] }),
-      /* @__PURE__ */ jsx8("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderRadius: 8, marginTop: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx8("div", { style: { width: "45%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
-      /* @__PURE__ */ jsx8("div", { style: {
+      /* @__PURE__ */ jsx9("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderRadius: 8, marginTop: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx9("div", { style: { width: "45%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
+      /* @__PURE__ */ jsx9("div", { style: {
         height: 50,
         borderRadius: 8,
         marginTop: 16,
@@ -7351,7 +8094,7 @@ function InterimButtonsView({
         ...bStyles.submitButton,
         opacity: 0.5
       } }),
-      /* @__PURE__ */ jsx8("style", { children: `
+      /* @__PURE__ */ jsx9("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); }
@@ -7361,23 +8104,17 @@ function InterimButtonsView({
         ` })
     ] });
   }
-  return /* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
+  return /* @__PURE__ */ jsxs6("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
     showPayPal && skeleton(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
     showStripe && (showApplePay || showGooglePay) && skeleton(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
-    showStripe && /* @__PURE__ */ jsx8(
+    showStripe && /* @__PURE__ */ jsx9(
       "button",
       {
         type: "button",
-        onClick: async () => {
-          if (cardLoading) return;
-          if (onCardButtonClick) {
-            await onCardButtonClick();
-            return;
-          }
+        onClick: () => {
           onButtonClick?.("card");
           setShowCardForm(true);
         },
-        disabled: cardLoading,
         style: {
           width: "100%",
           ...cardButtonSizing,
@@ -7387,7 +8124,7 @@ function InterimButtonsView({
           borderRadius: "8px",
           fontSize: bStyles.cardButtonFontSize ?? "0.95rem",
           fontWeight: 600,
-          cursor: cardLoading ? "not-allowed" : "pointer",
+          cursor: "pointer",
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
@@ -7395,7 +8132,7 @@ function InterimButtonsView({
           boxShadow: "0 1px 2px rgba(0,0,0,0.04)",
           transition: "transform 0.1s",
           position: "relative",
-          opacity: cardLoading ? 0.6 : 1,
+          opacity: 1,
           ...bStyles.cardButton
         },
         onMouseDown: (e) => {
@@ -7404,39 +8141,22 @@ function InterimButtonsView({
         onMouseUp: (e) => {
           e.currentTarget.style.transform = "scale(1)";
         },
-        children: /* @__PURE__ */ jsx8(CardButtonContentSlot, { content: cardButtonContent })
+        children: /* @__PURE__ */ jsx9(CardButtonContentSlot, { content: cardButtonContent })
       }
     ),
-    errorMessage && /* @__PURE__ */ jsxs5("div", { style: {
-      margin: "0.25rem 0",
-      padding: "0.625rem 0.875rem",
-      background: "#FEF2F2",
-      border: "1px solid #FECACA",
-      borderRadius: "8px",
-      color: "#991B1B",
-      fontSize: "0.85rem",
-      fontWeight: 600,
-      display: "flex",
-      alignItems: "center",
-      gap: "0.5rem",
-      ...bStyles.errorBanner
-    }, children: [
-      /* @__PURE__ */ jsx8("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx8("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__ */ jsx8("style", { children: `@keyframes flopay-interim-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
+    /* @__PURE__ */ jsx9("style", { children: `@keyframes flopay-interim-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
   ] });
 }
 
 // src/checkout-form.tsx
 import { PaymentAPI as PaymentAPI5 } from "@flopay/js";
 import { FloPayError as FloPayError6 } from "@flopay/shared";
-import { forwardRef as forwardRef2, useCallback as useCallback4, useEffect as useEffect7, useImperativeHandle as useImperativeHandle2, useState as useState5 } from "react";
-import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+import { forwardRef as forwardRef2, useCallback as useCallback5, useEffect as useEffect7, useImperativeHandle as useImperativeHandle2, useState as useState5 } from "react";
+import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 var WALLET_RESUME_KEY = "flopay_wallet_resume";
 var CheckoutForm = forwardRef2(
   function CheckoutForm2(props, ref) {
-    return /* @__PURE__ */ jsx9(CheckoutFormInner, { ...props, innerRef: ref });
+    return /* @__PURE__ */ jsx10(CheckoutFormInner, { ...props, innerRef: ref });
   }
 );
 function CheckoutFormInner({
@@ -7473,20 +8193,20 @@ function CheckoutFormInner({
   const isSubmitting = externalProcessing ?? processing;
   const isSelfContained = !onTokenizedBody;
   const baseUrl = (billingApiUrl || contextBillingUrl).replace(/\/+$/, "");
-  const updateError = useCallback4(
+  const updateError = useCallback5(
     (err) => {
       setError(err);
       onErrorChange?.(err);
     },
     [onErrorChange]
   );
-  const emitDecline = useCallback4(
+  const emitDecline = useCallback5(
     (input, overrides) => {
       onDecline?.(buildDeclineEvent("card", input, overrides));
     },
     [onDecline]
   );
-  const processPaymentInternal = useCallback4(
+  const processPaymentInternal = useCallback5(
     async (tokenizedBody, completionPaymentMethodId) => {
       setProcessing(true);
       updateError(null);
@@ -7598,7 +8318,7 @@ function CheckoutFormInner({
     },
     [baseUrl, sessionId, nonce, userId, email, firstName, lastName, chv, flopay, paypalFlopay, onComplete, onError, onDecline, updateError, emitDecline]
   );
-  const dispatchTokenizedBody = useCallback4(
+  const dispatchTokenizedBody = useCallback5(
     (tokenizedBody) => {
       if (onTokenizedBody) {
         onTokenizedBody(tokenizedBody);
@@ -7653,7 +8373,7 @@ function CheckoutFormInner({
       localStorage.removeItem(WALLET_RESUME_KEY);
     }
   }, [sessionId, dispatchTokenizedBody]);
-  const handleSubmit = useCallback4(
+  const handleSubmit = useCallback5(
     async (e) => {
       e.preventDefault();
       if (!flopay || !elements || isSubmitting) return;
@@ -7679,8 +8399,7 @@ function CheckoutFormInner({
         if (!sessionId || !email) {
           throw new FloPayError6("Missing sessionId or email", "validation_error");
         }
-        const intentHeaders = { "Content-Type": "application/json" };
-        if (nonce) intentHeaders["x-checkout-session-token"] = nonce;
+        const intentHeaders = intentRequestHeaders(nonce);
         const intentResponse = await fetch(`${baseUrl}/v1/checkouts/payments/intents`, {
           method: "POST",
           headers: intentHeaders,
@@ -7745,8 +8464,8 @@ function CheckoutFormInner({
     [flopay, elements, isSubmitting, sessionId, nonce, email, firstName, lastName, baseUrl, isSelfContained, dispatchTokenizedBody, onError, updateError, emitDecline]
   );
   const isReady = flopay !== null && elements !== null;
-  return /* @__PURE__ */ jsxs6("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
-    (is3DSActive || isSubmitting) && /* @__PURE__ */ jsx9("div", { "data-testid": "flopay-overlay", style: {
+  return /* @__PURE__ */ jsxs7("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
+    (is3DSActive || isSubmitting) && /* @__PURE__ */ jsx10("div", { "data-testid": "flopay-overlay", style: {
       position: "absolute",
       inset: 0,
       background: "rgba(255,255,255,0.7)",
@@ -7755,12 +8474,12 @@ function CheckoutFormInner({
       justifyContent: "center",
       zIndex: 10
     }, children: is3DSActive ? "Verifying payment..." : "Processing..." }),
-    !isReady && /* @__PURE__ */ jsx9("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." }),
-    isReady && /* @__PURE__ */ jsxs6(Fragment4, { children: [
-      /* @__PURE__ */ jsx9(PaymentElement, { options: { layout } }),
-      showAddress && /* @__PURE__ */ jsx9(AddressElement, { options: { mode: showAddress === true ? "billing" : showAddress } }),
-      displayError && /* @__PURE__ */ jsx9("div", { role: "alert", "data-testid": "flopay-error", style: { color: "red", margin: "0.75rem 0" }, children: displayError }),
-      children ?? /* @__PURE__ */ jsx9(
+    !isReady && /* @__PURE__ */ jsx10("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." }),
+    isReady && /* @__PURE__ */ jsxs7(Fragment4, { children: [
+      /* @__PURE__ */ jsx10(PaymentElement, { options: { layout } }),
+      showAddress && /* @__PURE__ */ jsx10(AddressElement, { options: { mode: showAddress === true ? "billing" : showAddress } }),
+      displayError && /* @__PURE__ */ jsx10("div", { role: "alert", "data-testid": "flopay-error", style: { color: "red", margin: "0.75rem 0" }, children: displayError }),
+      children ?? /* @__PURE__ */ jsx10(
         "button",
         {
           type: "submit",
@@ -7776,8 +8495,8 @@ function CheckoutFormInner({
 // src/paypal-button.tsx
 import { PaymentAPI as PaymentAPI6 } from "@flopay/js";
 import { FloPayError as FloPayError7 } from "@flopay/shared";
-import { useCallback as useCallback5, useEffect as useEffect8, useRef as useRef6, useState as useState6 } from "react";
-import { Fragment as Fragment5, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+import { useCallback as useCallback6, useEffect as useEffect8, useRef as useRef7, useState as useState6 } from "react";
+import { Fragment as Fragment5, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 function PayPalButton({
   sessionId,
   nonce,
@@ -7797,9 +8516,9 @@ function PayPalButton({
   const contextBillingUrl = useBillingApiUrl();
   const [ready, setReady] = useState6(false);
   const [submitting, setSubmitting] = useState6(false);
-  const paypalResumeAttempted = useRef6(false);
+  const paypalResumeAttempted = useRef7(false);
   const baseUrl = (billingApiUrl || contextBillingUrl).replace(/\/+$/, "");
-  const processPaymentInternal = useCallback5(
+  const processPaymentInternal = useCallback6(
     async (tokenizedBody) => {
       try {
         const api = new PaymentAPI6(baseUrl);
@@ -7827,7 +8546,7 @@ function PayPalButton({
     },
     [baseUrl, sessionId, nonce, userId, email, firstName, lastName, chv, onComplete, onErrorChange]
   );
-  const dispatchTokenizedBody = useCallback5(
+  const dispatchTokenizedBody = useCallback6(
     (body) => {
       if (onTokenizedBody) {
         onTokenizedBody(body);
@@ -7885,7 +8604,7 @@ function PayPalButton({
       }
     })();
   }, [flopay, dispatchTokenizedBody, onErrorChange]);
-  const handlePayPalConfirm = useCallback5(async () => {
+  const handlePayPalConfirm = useCallback6(async () => {
     if (!flopay || !elements) return;
     try {
       setSubmitting(true);
@@ -7919,11 +8638,11 @@ function PayPalButton({
     }
   }, [flopay, elements, sessionId, nonce, email, baseUrl, dispatchTokenizedBody, onErrorChange]);
   if (!flopay || !elements) {
-    return /* @__PURE__ */ jsx10("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6, animation: "pulse 1.5s infinite" } });
+    return /* @__PURE__ */ jsx11("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6, animation: "pulse 1.5s infinite" } });
   }
-  return /* @__PURE__ */ jsxs7(Fragment5, { children: [
-    !ready && /* @__PURE__ */ jsx10("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6 } }),
-    /* @__PURE__ */ jsx10("div", { style: ready ? {} : { display: "none" }, children: /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsxs8(Fragment5, { children: [
+    !ready && /* @__PURE__ */ jsx11("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6 } }),
+    /* @__PURE__ */ jsx11("div", { style: ready ? {} : { display: "none" }, children: /* @__PURE__ */ jsx11(
       "button",
       {
         type: "button",
@@ -7945,7 +8664,7 @@ function PayPalButton({
         children: submitting ? "Processing..." : "PayPal"
       }
     ) }),
-    (submitting || isProcessing) && /* @__PURE__ */ jsx10("div", { style: {
+    (submitting || isProcessing) && /* @__PURE__ */ jsx11("div", { style: {
       position: "fixed",
       inset: 0,
       background: "rgba(0,0,0,0.4)",
@@ -7953,7 +8672,7 @@ function PayPalButton({
       alignItems: "center",
       justifyContent: "center",
       zIndex: 1e3
-    }, children: /* @__PURE__ */ jsx10("div", { style: {
+    }, children: /* @__PURE__ */ jsx11("div", { style: {
       background: "white",
       borderRadius: 8,
       padding: "1.5rem",
@@ -7965,10 +8684,10 @@ function PayPalButton({
 }
 
 // src/automatic-payment-button.tsx
-import { useCallback as useCallback6, useEffect as useEffect9, useMemo as useMemo5, useRef as useRef7, useState as useState7 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect9, useMemo as useMemo5, useRef as useRef8, useState as useState7 } from "react";
 import { PaymentAPI as PaymentAPI7 } from "@flopay/js";
 import { FloPayError as FloPayError8, resolveBillingApiUrl as resolveBillingApiUrl4, resolveButtonsLayoutTheme as resolveButtonsLayoutTheme3, resolveTheme as resolveTheme3 } from "@flopay/shared";
-import { Fragment as Fragment6, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 var DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT3 = 44;
 function sleep2(ms) {
   return new Promise((resolve) => setTimeout(resolve, ms));
@@ -8084,12 +8803,12 @@ function FloPayAutomaticPaymentButton({
   const [overlayStatus, setOverlayStatus] = useState7(null);
   const [overlayError, setOverlayError] = useState7(null);
   const [fallbackSession, setFallbackSession] = useState7(null);
-  const isMountedRef = useRef7(true);
-  const threeDsAbortRef = useRef7(null);
-  const fallbackSessionRef = useRef7(fallbackSession);
-  const onSuccessRef = useRef7(onSuccess);
-  const onErrorRef = useRef7(onError);
-  const onDeclineRef = useRef7(onDecline);
+  const isMountedRef = useRef8(true);
+  const threeDsAbortRef = useRef8(null);
+  const fallbackSessionRef = useRef8(fallbackSession);
+  const onSuccessRef = useRef8(onSuccess);
+  const onErrorRef = useRef8(onError);
+  const onDeclineRef = useRef8(onDecline);
   useEffect9(() => {
     fallbackSessionRef.current = fallbackSession;
   }, [fallbackSession]);
@@ -8110,7 +8829,7 @@ function FloPayAutomaticPaymentButton({
     };
   }, []);
   useEffect9(() => {
-    if (!fallbackSession || typeof window === "undefined") {
+    if (typeof window === "undefined") {
       return;
     }
     const handleKeyDown = (event) => {
@@ -8122,14 +8841,14 @@ function FloPayAutomaticPaymentButton({
     return () => {
       window.removeEventListener("keydown", handleKeyDown);
     };
-  }, [fallbackSession]);
-  const emitDecline = useCallback6((error, method = DEFAULT_SAVED_PAYMENT_DECLINE_METHOD) => {
+  }, []);
+  const emitDecline = useCallback7((error, method = DEFAULT_SAVED_PAYMENT_DECLINE_METHOD) => {
     onDeclineRef.current?.(buildDeclineEvent(method, error, {
       code: error.code,
       declineCode: error.declineCode
     }));
   }, []);
-  const showSuccess = useCallback6(async (event) => {
+  const showSuccess = useCallback7(async (event) => {
     if (!isMountedRef.current) return;
     setOverlayError(null);
     setOverlayStatus("success");
@@ -8137,7 +8856,7 @@ function FloPayAutomaticPaymentButton({
     if (!isMountedRef.current) return;
     onSuccessRef.current?.(event);
   }, []);
-  const showError = useCallback6(async (error, options) => {
+  const showError = useCallback7(async (error, options) => {
     if (!isMountedRef.current) return;
     onErrorRef.current?.(error);
     if (options?.emitDecline) {
@@ -8147,7 +8866,7 @@ function FloPayAutomaticPaymentButton({
     setOverlayStatus("error");
     await sleep2(PROCESSING_OVERLAY_ERROR_DELAY_MS);
   }, [emitDecline]);
-  const processResolvedSession = useCallback6(async (apiResult, resolvedSessionId, options) => {
+  const processResolvedSession = useCallback7(async (apiResult, resolvedSessionId, options) => {
     const session = apiResult.data.session ?? null;
     if (!session) {
       throw new FloPayError8("No session data returned", "api_error");
@@ -8303,7 +9022,7 @@ function FloPayAutomaticPaymentButton({
     showError,
     showSuccess
   ]);
-  const handleButtonClick = useCallback6(async (event) => {
+  const handleButtonClick = useCallback7(async (event) => {
     buttonProps.onClick?.(event);
     if (event.defaultPrevented || disabled || isProcessing) {
       return;
@@ -8385,7 +9104,7 @@ function FloPayAutomaticPaymentButton({
     showError,
     showSuccess
   ]);
-  const handleFallbackComplete = useCallback6((result) => {
+  const handleFallbackComplete = useCallback7((result) => {
     const activeFallback = fallbackSessionRef.current;
     setFallbackSession(null);
     onSuccessRef.current?.({
@@ -8395,10 +9114,10 @@ function FloPayAutomaticPaymentButton({
       autoCompleted: false
     });
   }, []);
-  const handleFallbackError = useCallback6((error) => {
+  const handleFallbackError = useCallback7((error) => {
     onErrorRef.current?.(error);
   }, []);
-  const handleFallbackDecline = useCallback6((decline) => {
+  const handleFallbackDecline = useCallback7((decline) => {
     onDeclineRef.current?.(decline);
   }, []);
   const themeBundle = useMemo5(() => resolveTheme3(theme), [theme]);
@@ -8429,8 +9148,8 @@ function FloPayAutomaticPaymentButton({
   const resolvedPrimaryHoverColor = resolvedAppearanceVars?.colorPrimaryHover ?? darkenHex(resolvedPrimaryColor, 0.12);
   const resolvedButtonBorderRadius = resolvedAppearanceVars?.borderRadius ?? "8px";
   const cardButtonSizing = children === void 0 ? { boxSizing: "border-box", height: DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT3, padding: "0 1rem" } : { padding: "0.9rem 1rem" };
-  return /* @__PURE__ */ jsxs8(Fragment6, { children: [
-    /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsxs9(Fragment6, { children: [
+    /* @__PURE__ */ jsx12(
       "button",
       {
         ...buttonProps,
@@ -8494,17 +9213,17 @@ function FloPayAutomaticPaymentButton({
             e.currentTarget.style.transform = "scale(1)";
           }
         },
-        children: /* @__PURE__ */ jsx11(CardButtonContentSlot, { content: children })
+        children: /* @__PURE__ */ jsx12(CardButtonContentSlot, { content: children })
       }
     ),
-    overlayStatus && /* @__PURE__ */ jsx11(
+    overlayStatus && /* @__PURE__ */ jsx12(
       ProcessingOverlay,
       {
         status: overlayStatus,
         errorMessage: overlayError
       }
     ),
-    fallbackSession && /* @__PURE__ */ jsx11(
+    fallbackSession && /* @__PURE__ */ jsx12(
       "div",
       {
         "data-testid": "flopay-automatic-payment-fallback",
@@ -8525,7 +9244,7 @@ function FloPayAutomaticPaymentButton({
           padding: "1.5rem",
           zIndex: 1100
         },
-        children: /* @__PURE__ */ jsx11(
+        children: /* @__PURE__ */ jsx12(
           "div",
           {
             style: {
@@ -8541,7 +9260,7 @@ function FloPayAutomaticPaymentButton({
               flexDirection: "column",
               gap: "1rem"
             },
-            children: /* @__PURE__ */ jsx11(
+            children: /* @__PURE__ */ jsx12(
               FloPayCheckout,
               {
                 sessionId: fallbackSession.sessionId,