@flopay/react 1.1.4 → 1.1.6

package/dist/index.mjs

@@ -102,7 +102,7 @@ function FloPayProvider({
 // src/flopay-checkout.tsx
 import React7, { useCallback as useCallback2, useEffect as useEffect5, useMemo as useMemo4, useRef as useRef4, useState as useState4 } from "react";
 import { PaymentAPI as PaymentAPI4 } from "@flopay/js";
-import { SDK_VERSION, FloPayError as FloPayError5, resolveBillingApiUrl as resolveBillingApiUrl3, buildCheckoutDisplayData, resolveButtonsLayoutTheme as resolveButtonsLayoutTheme2 } from "@flopay/shared";
+import { SDK_VERSION, FloPayError as FloPayError5, resolveBillingApiUrl as resolveBillingApiUrl3, buildCheckoutDisplayData, resolveButtonsLayoutTheme as resolveButtonsLayoutTheme2, resolveTheme as resolveTheme2 } from "@flopay/shared";
 
 // src/card-button-content.tsx
 import "react";
@@ -1221,7 +1221,7 @@ ${debugLines.join("\n")}`
 }
 
 // src/split-card-form.tsx
-import { FloPayError as FloPayError3 } from "@flopay/shared";
+import { FloPayError as FloPayError3, resolveTheme } from "@flopay/shared";
 import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var WALLET_RESUME_KEY = "flopay_wallet_resume";
 var FLOPAY_KEYFRAMES = `
@@ -1246,6 +1246,14 @@ var FLOPAY_KEYFRAMES = `
 }
 `;
 var DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT = 44;
+var BUTTONS_PANEL_HIDDEN_STYLE = {
+  visibility: "hidden",
+  position: "absolute",
+  pointerEvents: "none",
+  width: "100%",
+  height: 0,
+  overflow: "hidden"
+};
 function getButtonMethodLabel(method) {
   switch (method) {
     case "paypal":
@@ -1721,12 +1729,14 @@ function SplitCardFormInner({
   showApplePay = true,
   showGooglePay = true,
   layout = "default",
+  theme,
   buttonsTheme,
   buttonsStyles: buttonsStylesOverride,
+  appearance: appearanceOverride,
   cardButtonContent,
   cardBackButtonContent,
   cardTitleContent,
-  showSecurityFooter = true,
+  showSecurityFooter: _showSecurityFooter,
   onButtonClick,
   onBeforeButtonClick,
   enableAVS: enableAVSProp,
@@ -1801,8 +1811,9 @@ function SplitCardFormInner({
   }, [paypalDirectRetry]);
   const resolvedBillingApiUrl = billingApiUrl || contextBillingUrl;
   const displayError = externalError ?? error;
+  const themeBundle = useMemo3(() => resolveTheme(theme), [theme]);
   const bStyles = useMemo3(() => {
-    const base = resolveButtonsLayoutTheme(buttonsTheme);
+    const base = themeBundle?.buttonsLayout ?? resolveButtonsLayoutTheme(buttonsTheme);
     if (!buttonsStylesOverride) return base;
     return {
       ...base,
@@ -1814,7 +1825,8 @@ function SplitCardFormInner({
       submitButton: { ...base.submitButton, ...buttonsStylesOverride.submitButton },
       title: { ...base.title, ...buttonsStylesOverride.title }
     };
-  }, [buttonsTheme, buttonsStylesOverride]);
+  }, [themeBundle, buttonsTheme, buttonsStylesOverride]);
+  const appearance = appearanceOverride ?? themeBundle?.appearance;
   const isInlineSessionPatchProcessing = checkout.inlineSessionPatchProcessing ?? false;
   const isSubmitting = (externalProcessing ?? processing) || isInlineSessionPatchProcessing;
   const isSelfContained = !onTokenizedBody;
@@ -2342,17 +2354,24 @@ function SplitCardFormInner({
     return /* @__PURE__ */ jsx6("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." });
   }
   const isButtons = layout === "buttons";
-  const resolvedBorder = isButtons ? bStyles.cardInputBorder ?? "#e5e7eb" : "#A4A4FF";
-  const cardBg = isButtons ? bStyles.cardFormContainer?.backgroundColor ?? "white" : "#EDEDFF";
-  const cardInputBg = isButtons ? bStyles.cardInputBackground ?? "white" : "white";
+  const appearanceVars = appearance?.variables;
+  const SDK_DEFAULT_WHITES = /* @__PURE__ */ new Set(["#FFFFFF", "#ffffff", "#fff", "#FFF", "white"]);
+  const appearanceColorBg = appearanceVars?.colorBackground;
+  const themedWrapperBg = appearanceColorBg && !SDK_DEFAULT_WHITES.has(appearanceColorBg) ? appearanceColorBg : void 0;
+  const resolvedBorder = bStyles.cardInputBorder ?? (isButtons ? "#e5e7eb" : "#A4A4FF");
+  const cardBg = bStyles.cardFormContainer?.backgroundColor ?? themedWrapperBg ?? (isButtons ? "white" : "#EDEDFF");
+  const cardInputBg = bStyles.cardInputBackground ?? appearanceVars?.colorBackground ?? "white";
   const hideBackButtonLabel = isEmptySlotContent(cardBackButtonContent);
   const hideTitle = isEmptySlotContent(cardTitleContent);
-  const nameInputOverrides = isButtons ? bStyles.nameInput : void 0;
-  const resolvedInputFontSize = bStyles.cardInputFontSize ?? toCssSize(nameInputOverrides?.fontSize) ?? "16px";
-  const resolvedInputFontFamily = typeof nameInputOverrides?.fontFamily === "string" ? nameInputOverrides.fontFamily : "Poppins, sans-serif";
+  const nameInputOverrides = bStyles.nameInput;
+  const resolvedInputFontSize = bStyles.cardInputFontSize ?? toCssSize(nameInputOverrides?.fontSize) ?? appearanceVars?.fontSizeBase ?? "16px";
+  const resolvedInputFontFamily = typeof nameInputOverrides?.fontFamily === "string" ? nameInputOverrides.fontFamily : appearanceVars?.fontFamily ?? "Poppins, sans-serif";
   const resolvedInputFontWeight = toCssWeight(nameInputOverrides?.fontWeight) ?? 400;
-  const resolvedInputColor = bStyles.cardInputColor ?? (typeof nameInputOverrides?.color === "string" ? nameInputOverrides.color : void 0) ?? "#262833";
+  const resolvedInputColor = bStyles.cardInputColor ?? (typeof nameInputOverrides?.color === "string" ? nameInputOverrides.color : void 0) ?? appearanceVars?.colorText ?? "#262833";
   const resolvedPlaceholderColor = bStyles.cardInputPlaceholderColor ?? "#9ca3af";
+  const resolvedBorderRadius = appearanceVars?.borderRadius ?? "8px";
+  const resolvedPrimaryColor = appearanceVars?.colorPrimary ?? "#4A49FF";
+  const resolvedTitleColor = appearanceVars?.colorText ?? "#262833";
   const sharedInputTypography = {
     fontSize: resolvedInputFontSize,
     fontFamily: resolvedInputFontFamily,
@@ -2382,12 +2401,14 @@ function SplitCardFormInner({
       invalid: { color: "#ef4444" }
     }
   };
+  const containerOverrides = bStyles.cardFormContainer ?? {};
+  const containerPadding = containerOverrides.padding ?? (isButtons ? "0" : "1rem");
+  const containerRadius = containerOverrides.borderRadius ?? resolvedBorderRadius;
   const cardFormBlock = /* @__PURE__ */ jsxs4("div", { style: {
     backgroundColor: cardBg,
-    borderRadius: "8px",
-    padding: isButtons ? "0" : "1rem",
-    ...isButtons ? bStyles.cardFormContainer : {},
-    ...isButtons ? { padding: bStyles.cardFormContainer?.padding ?? "0" } : {},
+    borderRadius: containerRadius,
+    ...containerOverrides,
+    padding: containerPadding,
     ...sharedInputPlaceholderVars
   }, children: [
     /* @__PURE__ */ jsx6("style", { children: `
@@ -2451,7 +2472,14 @@ function SplitCardFormInner({
         ...bStyles.title
       }, children: /* @__PURE__ */ jsx6(TitleContentSlot, { content: cardTitleContent }) })
     ] }),
-    !isButtons && !hideTitle && /* @__PURE__ */ jsx6("div", { style: { textAlign: "center", fontWeight: 600, fontSize: "1.1rem", padding: "0.5rem 0", color: "#262833" }, children: /* @__PURE__ */ jsx6(TitleContentSlot, { content: cardTitleContent }) }),
+    !isButtons && !hideTitle && /* @__PURE__ */ jsx6("div", { style: {
+      textAlign: "center",
+      fontWeight: 600,
+      fontSize: "1.1rem",
+      padding: "0.5rem 0",
+      color: resolvedTitleColor,
+      ...bStyles.title
+    }, children: /* @__PURE__ */ jsx6(TitleContentSlot, { content: cardTitleContent }) }),
     /* @__PURE__ */ jsx6("div", { style: {
       backgroundColor: cardInputBg,
       border: `1px solid ${resolvedBorder}`,
@@ -2708,7 +2736,7 @@ function SplitCardFormInner({
       display: "flex",
       alignItems: "center",
       gap: "0.5rem",
-      ...isButtons && bStyles.errorBanner ? bStyles.errorBanner : {}
+      ...bStyles.errorBanner ? bStyles.errorBanner : {}
     }, children: [
       /* @__PURE__ */ jsx6("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx6("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
       displayError
@@ -2723,29 +2751,19 @@ function SplitCardFormInner({
           width: "100%",
           padding: "0.875rem",
           marginTop: "1rem",
-          backgroundColor: "#4A49FF",
+          backgroundColor: resolvedPrimaryColor,
           color: "white",
           border: "none",
-          borderRadius: "8px",
-          fontSize: isButtons && bStyles.submitButtonFontSize ? bStyles.submitButtonFontSize : "1rem",
+          borderRadius: resolvedBorderRadius,
+          fontSize: bStyles.submitButtonFontSize ?? "1rem",
           fontWeight: 600,
           cursor: !formReady || isSubmitting ? "not-allowed" : "pointer",
           opacity: !formReady || isSubmitting ? 0.5 : 1,
-          ...isButtons ? bStyles.submitButton : {}
+          ...bStyles.submitButton
         },
         children: isSubmitting ? "PROCESSING..." : submitLabel
       }
-    ),
-    !isButtons && showSecurityFooter && /* @__PURE__ */ jsx6("div", { style: {
-      backgroundColor: "#EFF9F0",
-      borderRadius: "8px",
-      padding: "0.75rem",
-      marginTop: "0.75rem",
-      textAlign: "center",
-      fontSize: "0.85rem",
-      fontWeight: 600,
-      color: "#7DAD3A"
-    }, children: "Secure Card Checkout" })
+    )
   ] });
   if (layout === "buttons") {
     const isButtonsView = viewState === "buttons" || viewState === "expanding";
@@ -2757,173 +2775,181 @@ function SplitCardFormInner({
       /* @__PURE__ */ jsx6(FloPayKeyframes, {}),
       overlayStatus && /* @__PURE__ */ jsx6(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
       /* @__PURE__ */ jsxs4("div", { style: { display: "grid" }, children: [
-        /* @__PURE__ */ jsxs4("div", { style: {
-          gridArea: "1 / 1",
-          display: "flex",
-          flexDirection: "column",
-          gap: "0.5rem",
-          // When card form is showing (and not transitioning), hide but keep mounted
-          ...!isButtonsView && !buttonsAnim ? { visibility: "hidden", position: "absolute", pointerEvents: "none", width: "100%" } : {},
-          ...buttonsAnim ? { animation: buttonsAnim, pointerEvents: "none" } : {}
-        }, children: [
-          debug && showPayPal && /* @__PURE__ */ jsx6(
-            "pre",
-            {
-              "data-testid": "flopay-direct-paypal-gate-debug",
-              style: {
-                margin: 0,
-                padding: "6px 8px",
-                background: "#eef2ff",
-                border: "1px solid #c7d2fe",
-                borderRadius: 6,
-                color: "#111827",
-                font: "11px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace",
-                whiteSpace: "pre-wrap",
-                wordBreak: "break-word"
-              },
-              children: [
-                "FloPay/DirectPayPal-debug (parent gate)",
-                `  showPayPal=${showPayPal}`,
-                `  directPaypalConfigured=${directPaypalConfigured}`,
-                `  inAppBrowserDetected=${String(inAppBrowserDetected)}`,
-                `  shouldRenderDirectPayPal=${shouldRenderDirectPayPal}`,
-                `  shouldRenderStripePayPal=${shouldRenderStripePayPal}`,
-                `  hasPaypalStripeInstance=${!!paypalStripeInstance}`
-              ].join("\n")
-            }
-          ),
-          shouldRenderDirectPayPal && directPaypal && /* @__PURE__ */ jsxs4(Fragment2, { children: [
-            paypalDirectRetry && /* @__PURE__ */ jsx6(
-              "div",
-              {
-                "data-testid": "flopay-paypal-direct-retry-notice",
-                style: {
-                  padding: "8px 10px",
-                  background: "#fef3c7",
-                  border: "1px solid #fcd34d",
-                  borderRadius: 6,
-                  color: "#78350f",
-                  fontSize: 13,
-                  lineHeight: 1.4
-                },
-                children: "Please confirm your PayPal payment to complete checkout."
-              }
-            ),
-            /* @__PURE__ */ jsx6(
-              DirectPayPalButton,
-              {
-                sessionId,
-                billingApiUrl: resolvedBillingApiUrl,
-                email: resolvedAccount.email,
-                clientId: directPaypal.clientId,
-                environment: directPaypal.environment,
-                currency: currency.toUpperCase(),
-                isSubscription,
-                onTokenizedBody: dispatchTokenizedBody,
-                onComplete,
-                onErrorChange: updateError,
-                onDecline,
-                onButtonClick,
-                runBeforeButtonClick,
-                isProcessing: isSubmitting,
-                onLoadStateChange: setDirectPaypalReady,
-                session: session ?? null,
-                existingOrderId: paypalDirectRetry?.orderId,
-                debug
-              },
-              paypalDirectRetry?.orderId ?? "fresh"
-            )
-          ] }),
-          shouldRenderStripePayPal && /* @__PURE__ */ jsx6(StripeElements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ jsx6(
-            PayPalButtonInner,
-            {
-              sessionId,
-              email: resolvedAccount.email,
-              billingApiUrl: resolvedBillingApiUrl,
-              onTokenizedBody: dispatchTokenizedBody,
-              onErrorChange: updateError,
-              isProcessing: isSubmitting,
-              onButtonClick,
-              onDecline,
-              runBeforeButtonClick,
-              onLoadStateChange: setPaypalLoadState
-            }
-          ) }),
-          shouldRenderWallets ? /* @__PURE__ */ jsx6(StripeElements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ jsx6(
-            WalletButtonInner,
-            {
-              sessionId,
-              email: resolvedAccount.email,
-              billingApiUrl: resolvedBillingApiUrl,
-              showApplePay,
-              showGooglePay,
-              onTokenizedBody: dispatchTokenizedBody,
-              onErrorChange: updateError,
-              onButtonClick,
-              onDecline,
-              runBeforeButtonClick,
-              onLoadStateChange: setWalletLoadState
-            }
-          ) }) : shouldShowWallets ? /* @__PURE__ */ jsx6("div", { style: { height: DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT, borderRadius: 8, background: "#e5e7eb", animation: "flopay-pulse 1.5s ease-in-out infinite" } }) : null,
-          /* @__PURE__ */ jsx6(
-            "button",
-            {
-              type: "button",
-              onClick: async () => {
-                if (isSubmitting) return;
-                const beforeClick = await runBeforeButtonClick("card");
-                if (!beforeClick.proceed) return;
-                onButtonClick?.("card");
-                expandToCard();
-              },
-              disabled: isSubmitting,
-              style: {
-                width: "100%",
-                ...cardButtonSizing,
-                backgroundColor: "white",
-                color: "#262833",
-                border: "1px solid #d1d5db",
+        /* @__PURE__ */ jsxs4(
+          "div",
+          {
+            "data-testid": "flopay-buttons-panel",
+            "aria-hidden": !isButtonsView && !buttonsAnim ? true : void 0,
+            style: {
+              gridArea: "1 / 1",
+              display: "flex",
+              flexDirection: "column",
+              gap: "0.5rem",
+              // When card form is showing (and not transitioning), hide but keep mounted.
+              ...!isButtonsView && !buttonsAnim ? BUTTONS_PANEL_HIDDEN_STYLE : {},
+              ...buttonsAnim ? { animation: buttonsAnim, pointerEvents: "none" } : {}
+            },
+            children: [
+              debug && showPayPal && /* @__PURE__ */ jsx6(
+                "pre",
+                {
+                  "data-testid": "flopay-direct-paypal-gate-debug",
+                  style: {
+                    margin: 0,
+                    padding: "6px 8px",
+                    background: "#eef2ff",
+                    border: "1px solid #c7d2fe",
+                    borderRadius: 6,
+                    color: "#111827",
+                    font: "11px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace",
+                    whiteSpace: "pre-wrap",
+                    wordBreak: "break-word"
+                  },
+                  children: [
+                    "FloPay/DirectPayPal-debug (parent gate)",
+                    `  showPayPal=${showPayPal}`,
+                    `  directPaypalConfigured=${directPaypalConfigured}`,
+                    `  inAppBrowserDetected=${String(inAppBrowserDetected)}`,
+                    `  shouldRenderDirectPayPal=${shouldRenderDirectPayPal}`,
+                    `  shouldRenderStripePayPal=${shouldRenderStripePayPal}`,
+                    `  hasPaypalStripeInstance=${!!paypalStripeInstance}`
+                  ].join("\n")
+                }
+              ),
+              shouldRenderDirectPayPal && directPaypal && /* @__PURE__ */ jsxs4(Fragment2, { children: [
+                paypalDirectRetry && /* @__PURE__ */ jsx6(
+                  "div",
+                  {
+                    "data-testid": "flopay-paypal-direct-retry-notice",
+                    style: {
+                      padding: "8px 10px",
+                      background: "#fef3c7",
+                      border: "1px solid #fcd34d",
+                      borderRadius: 6,
+                      color: "#78350f",
+                      fontSize: 13,
+                      lineHeight: 1.4
+                    },
+                    children: "Please confirm your PayPal payment to complete checkout."
+                  }
+                ),
+                /* @__PURE__ */ jsx6(
+                  DirectPayPalButton,
+                  {
+                    sessionId,
+                    billingApiUrl: resolvedBillingApiUrl,
+                    email: resolvedAccount.email,
+                    clientId: directPaypal.clientId,
+                    environment: directPaypal.environment,
+                    currency: currency.toUpperCase(),
+                    isSubscription,
+                    onTokenizedBody: dispatchTokenizedBody,
+                    onComplete,
+                    onErrorChange: updateError,
+                    onDecline,
+                    onButtonClick,
+                    runBeforeButtonClick,
+                    isProcessing: isSubmitting,
+                    onLoadStateChange: setDirectPaypalReady,
+                    session: session ?? null,
+                    existingOrderId: paypalDirectRetry?.orderId,
+                    debug
+                  },
+                  paypalDirectRetry?.orderId ?? "fresh"
+                )
+              ] }),
+              shouldRenderStripePayPal && /* @__PURE__ */ jsx6(StripeElements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ jsx6(
+                PayPalButtonInner,
+                {
+                  sessionId,
+                  email: resolvedAccount.email,
+                  billingApiUrl: resolvedBillingApiUrl,
+                  onTokenizedBody: dispatchTokenizedBody,
+                  onErrorChange: updateError,
+                  isProcessing: isSubmitting,
+                  onButtonClick,
+                  onDecline,
+                  runBeforeButtonClick,
+                  onLoadStateChange: setPaypalLoadState
+                }
+              ) }),
+              shouldRenderWallets ? /* @__PURE__ */ jsx6(StripeElements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ jsx6(
+                WalletButtonInner,
+                {
+                  sessionId,
+                  email: resolvedAccount.email,
+                  billingApiUrl: resolvedBillingApiUrl,
+                  showApplePay,
+                  showGooglePay,
+                  onTokenizedBody: dispatchTokenizedBody,
+                  onErrorChange: updateError,
+                  onButtonClick,
+                  onDecline,
+                  runBeforeButtonClick,
+                  onLoadStateChange: setWalletLoadState
+                }
+              ) }) : shouldShowWallets ? /* @__PURE__ */ jsx6("div", { style: { height: DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT, borderRadius: 8, background: "#e5e7eb", animation: "flopay-pulse 1.5s ease-in-out infinite" } }) : null,
+              /* @__PURE__ */ jsx6(
+                "button",
+                {
+                  type: "button",
+                  onClick: async () => {
+                    if (isSubmitting) return;
+                    const beforeClick = await runBeforeButtonClick("card");
+                    if (!beforeClick.proceed) return;
+                    onButtonClick?.("card");
+                    expandToCard();
+                  },
+                  disabled: isSubmitting,
+                  style: {
+                    width: "100%",
+                    ...cardButtonSizing,
+                    backgroundColor: "white",
+                    color: "#262833",
+                    border: "1px solid #d1d5db",
+                    borderRadius: "8px",
+                    fontSize: bStyles.cardButtonFontSize ?? "0.95rem",
+                    fontWeight: 600,
+                    cursor: isSubmitting ? "not-allowed" : "pointer",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    gap: "0.625rem",
+                    transition: "border-color 0.2s, box-shadow 0.2s, transform 0.1s",
+                    boxShadow: "0 1px 2px rgba(0,0,0,0.04)",
+                    position: "relative",
+                    opacity: isSubmitting ? 0.6 : 1,
+                    ...bStyles.cardButton
+                  },
+                  onMouseDown: (e) => {
+                    e.currentTarget.style.transform = "scale(0.985)";
+                  },
+                  onMouseUp: (e) => {
+                    e.currentTarget.style.transform = "scale(1)";
+                  },
+                  children: /* @__PURE__ */ jsx6(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",
-                fontSize: bStyles.cardButtonFontSize ?? "0.95rem",
+                color: "#991B1B",
+                fontSize: "0.85rem",
                 fontWeight: 600,
-                cursor: isSubmitting ? "not-allowed" : "pointer",
                 display: "flex",
                 alignItems: "center",
-                justifyContent: "center",
-                gap: "0.625rem",
-                transition: "border-color 0.2s, box-shadow 0.2s, transform 0.1s",
-                boxShadow: "0 1px 2px rgba(0,0,0,0.04)",
-                position: "relative",
-                opacity: isSubmitting ? 0.6 : 1,
-                ...bStyles.cardButton
-              },
-              onMouseDown: (e) => {
-                e.currentTarget.style.transform = "scale(0.985)";
-              },
-              onMouseUp: (e) => {
-                e.currentTarget.style.transform = "scale(1)";
-              },
-              children: /* @__PURE__ */ jsx6(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__ */ jsx6("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx6("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
-            displayError
-          ] })
-        ] }),
+                gap: "0.5rem",
+                ...bStyles.errorBanner ? bStyles.errorBanner : {}
+              }, children: [
+                /* @__PURE__ */ jsx6("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx6("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+                displayError
+              ] })
+            ]
+          }
+        ),
         isCardView && /* @__PURE__ */ jsx6("div", { style: {
           gridArea: "1 / 1",
           ...cardAnim ? { animation: cardAnim } : {},
@@ -3262,105 +3288,6 @@ async function processSavedPaymentForMode({
     }
   );
 }
-async function processSavedPaymentWithIntent({
-  billingApiUrl,
-  sessionId,
-  session,
-  paymentMethodId,
-  flopay,
-  returnUrl
-}) {
-  const customerEmail = session.customer?.email ?? session.accountData?.email ?? "";
-  if (!customerEmail) {
-    throw Object.assign(
-      new FloPayError4("Customer email is required to create a payment intent.", "validation_error", {
-        param: "email"
-      }),
-      { checkoutMethod: "card" }
-    );
-  }
-  const api = new PaymentAPI3(billingApiUrl);
-  const intentResponse = await retryOnceOnFetchFailure(() => api.createPaymentIntent(
-    sessionId,
-    customerEmail,
-    paymentMethodId
-  ));
-  const intentJson = await intentResponse.json().catch(() => null);
-  if (!intentResponse.ok) {
-    const intentError = buildFloPayApiError(
-      intentJson,
-      "Failed to create payment intent."
-    );
-    throw Object.assign(
-      intentError,
-      { checkoutMethod: "card" }
-    );
-  }
-  const intentClientSecret = getRedirectTokenFromProcessResponse(intentJson, {
-    requirePaymentIntentClientSecret: true
-  });
-  if (!intentClientSecret) {
-    throw Object.assign(
-      new FloPayError4("No client secret in payment intent response.", "api_error"),
-      { checkoutMethod: "card" }
-    );
-  }
-  const confirmResult = await flopay.confirmCardPayment({
-    clientSecret: intentClientSecret,
-    paymentMethodId
-  });
-  if (confirmResult.error) {
-    throw Object.assign(
-      confirmResult.error,
-      { checkoutMethod: "card" }
-    );
-  }
-  const rawProvider = typeof flopay.getRawProvider === "function" ? flopay.getRawProvider() : null;
-  const confirmedPaymentIntent = await retrievePaymentIntentFromProvider(
-    rawProvider,
-    intentClientSecret
-  );
-  const confirmedPaymentIntentId = confirmResult.paymentIntentId ?? confirmedPaymentIntent?.id;
-  const confirmedPaymentMethodId = confirmResult.paymentMethodId ?? resolvePaymentIntentPaymentMethodId(confirmedPaymentIntent) ?? paymentMethodId;
-  if (!confirmedPaymentIntentId || confirmResult.status !== "succeeded" && confirmResult.status !== "processing" && confirmResult.status !== "requires_capture") {
-    throw Object.assign(
-      new FloPayError4(
-        `Unfortunately, your payment could not be processed. Please try again using a different payment method or contact your bank for assistance. If the issue persists, feel free to reach out to us for support.`,
-        "api_error",
-        {
-          code: confirmResult.status === "requires_action" ? "authentication_required" : void 0
-        }
-      ),
-      { checkoutMethod: "card" }
-    );
-  }
-  const followUp = await processSavedPaymentForMode({
-    billingApiUrl,
-    sessionId,
-    session,
-    tokenizedData: {
-      id: confirmedPaymentMethodId,
-      type: "card",
-      threeDSecureActionResultTokenId: confirmedPaymentIntentId
-    },
-    returnUrl
-  });
-  const finalResult = followUp.type === "success" ? followUp.result : await handleSavedPaymentRedirectResult(followUp, {
-    flopay,
-    paypalFlopay: null,
-    attempt3DS: true,
-    billingApiUrl,
-    sessionId,
-    session,
-    returnUrl
-  });
-  return {
-    ...finalResult,
-    paymentIntentId: finalResult.paymentIntentId ?? confirmedPaymentIntentId,
-    paymentMethodId: finalResult.paymentMethodId ?? confirmedPaymentMethodId,
-    checkoutMethod: finalResult.checkoutMethod ?? "card"
-  };
-}
 async function handleSavedPaymentRedirectResult(redirectResult, {
   flopay,
   paypalFlopay,
@@ -3682,7 +3609,7 @@ function FloPayCheckout({
   sessionId: sessionIdProp,
   createSession: createSessionParams,
   billingApiUrl,
-  appearance,
+  appearance: appearanceOverride,
   locale,
   loading: loadingNode,
   error: errorNode,
@@ -3697,12 +3624,13 @@ function FloPayCheckout({
   showGooglePay = true,
   debug = false,
   layout,
+  theme,
   buttonsTheme,
   buttonsStyles,
   cardButtonContent,
   cardBackButtonContent,
   cardTitleContent,
-  showSecurityFooter = true,
+  showSecurityFooter: _showSecurityFooter,
   onButtonClick,
   onBeforeButtonClick,
   enableAVS,
@@ -3717,6 +3645,8 @@ function FloPayCheckout({
   onSessionCompleted
 }) {
   const resolvedBillingUrl = resolveBillingApiUrl3(billingApiUrl);
+  const themeBundle = useMemo4(() => resolveTheme2(theme), [theme]);
+  const appearance = appearanceOverride ?? themeBundle?.appearance;
   const checkoutType = createSessionParams ? "embedded_checkout" : "standard_checkout";
   const checkoutLayout = children ? "custom_layout" : layout === "buttons" ? "buttons_layout" : "default_layout";
   const [unified, setUnified] = useState4(null);
@@ -4479,6 +4409,7 @@ function FloPayCheckout({
           showPayPal,
           showApplePay,
           showGooglePay,
+          theme,
           buttonsTheme,
           buttonsStyles,
           cardButtonContent,
@@ -4623,12 +4554,13 @@ function FloPayCheckout({
         showApplePay,
         showGooglePay,
         layout,
+        theme,
         buttonsTheme,
         buttonsStyles,
+        appearance,
         cardButtonContent,
         cardBackButtonContent,
         cardTitleContent,
-        showSecurityFooter,
         onButtonClick,
         onBeforeButtonClick,
         enableAVS,
@@ -4685,6 +4617,7 @@ function InterimButtonsView({
   showPayPal,
   showApplePay,
   showGooglePay,
+  theme,
   buttonsTheme,
   buttonsStyles: stylesOverride,
   cardButtonContent,
@@ -4698,8 +4631,9 @@ function InterimButtonsView({
       setShowCardForm(cardOpen);
     }
   }, [cardOpen, isCardOpenControlled]);
+  const themeBundle = useMemo4(() => resolveTheme2(theme), [theme]);
   const bStyles = useMemo4(() => {
-    const base = resolveButtonsLayoutTheme2(buttonsTheme);
+    const base = themeBundle?.buttonsLayout ?? resolveButtonsLayoutTheme2(buttonsTheme);
     if (!stylesOverride) return base;
     return {
       ...base,
@@ -4711,7 +4645,7 @@ function InterimButtonsView({
       submitButton: { ...base.submitButton, ...stylesOverride.submitButton },
       title: { ...base.title, ...stylesOverride.title }
     };
-  }, [buttonsTheme, stylesOverride]);
+  }, [themeBundle, buttonsTheme, stylesOverride]);
   const skeleton = (h) => /* @__PURE__ */ jsx7("div", { style: {
     height: h,
     borderRadius: 8,
@@ -5407,10 +5341,9 @@ function PayPalButton({
 // src/automatic-payment-button.tsx
 import { useCallback as useCallback5, useEffect as useEffect8, useMemo as useMemo5, useRef as useRef6, useState as useState7 } from "react";
 import { PaymentAPI as PaymentAPI7 } from "@flopay/js";
-import { FloPayError as FloPayError8, resolveBillingApiUrl as resolveBillingApiUrl4, resolveButtonsLayoutTheme as resolveButtonsLayoutTheme3 } from "@flopay/shared";
+import { FloPayError as FloPayError8, resolveBillingApiUrl as resolveBillingApiUrl4, resolveButtonsLayoutTheme as resolveButtonsLayoutTheme3, resolveTheme as resolveTheme3 } from "@flopay/shared";
 import { Fragment as Fragment6, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 var DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT3 = 44;
-var PAYPAL_RESUME_STORAGE_KEY2 = "flopay_automatic_payment_button_resume";
 function sleep2(ms) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
@@ -5423,9 +5356,6 @@ function coerceError(err, fallbackMessage) {
     "api_error"
   );
 }
-function canUseStorage2() {
-  return typeof window !== "undefined" && typeof window.sessionStorage !== "undefined";
-}
 function shouldShowFallbackCheckout(error, sessionId) {
   if (!sessionId) return false;
   if (error.type === "validation_error") return false;
@@ -5434,47 +5364,6 @@ function shouldShowFallbackCheckout(error, sessionId) {
   }
   return true;
 }
-function readPayPalResumeState2() {
-  if (!canUseStorage2()) return null;
-  try {
-    const raw = window.sessionStorage.getItem(PAYPAL_RESUME_STORAGE_KEY2);
-    if (!raw) return null;
-    return JSON.parse(raw);
-  } catch {
-    return null;
-  }
-}
-function persistPayPalResumeState2(state) {
-  if (!canUseStorage2()) return;
-  try {
-    window.sessionStorage.setItem(PAYPAL_RESUME_STORAGE_KEY2, JSON.stringify(state));
-  } catch (error) {
-    console.warn("[FloPayAutomaticPaymentButton] Failed to persist PayPal resume state.", error);
-  }
-}
-function clearPayPalResumeState2() {
-  if (!canUseStorage2()) return;
-  try {
-    window.sessionStorage.removeItem(PAYPAL_RESUME_STORAGE_KEY2);
-  } catch (error) {
-    console.warn("[FloPayAutomaticPaymentButton] Failed to clear PayPal resume state.", error);
-  }
-}
-function clearPayPalRedirectParams2() {
-  if (typeof window === "undefined") return;
-  const url = new URL(window.location.href);
-  const keys = ["payment_intent", "payment_intent_client_secret", "redirect_status"];
-  let changed = false;
-  for (const key of keys) {
-    if (url.searchParams.has(key)) {
-      url.searchParams.delete(key);
-      changed = true;
-    }
-  }
-  if (changed) {
-    window.history.replaceState({}, "", url.toString());
-  }
-}
 function resolveCreateSessionDraft(props) {
   if (props.createSession) {
     return {
@@ -5501,8 +5390,10 @@ function resolveCreateSessionDraft(props) {
 function FloPayAutomaticPaymentButton({
   sessionId,
   createSession,
-  paymentMethodId,
-  checkoutMethod,
+  // Deprecated — accepted for back-compat and silently ignored. Backend
+  // resolves the customer's latest payment method server-side.
+  paymentMethodId: _deprecatedPaymentMethodId,
+  checkoutMethod: _deprecatedCheckoutMethod,
   clientId,
   items,
   subscriptions,
@@ -5514,6 +5405,7 @@ function FloPayAutomaticPaymentButton({
   utmMetadata,
   billingApiUrl,
   locale,
+  theme,
   buttonsTheme,
   buttonsStyles: stylesOverride,
   onSuccess,
@@ -5559,20 +5451,7 @@ function FloPayAutomaticPaymentButton({
   const [overlayStatus, setOverlayStatus] = useState7(null);
   const [overlayError, setOverlayError] = useState7(null);
   const [fallbackSession, setFallbackSession] = useState7(null);
-  const automaticPaymentToken = useMemo5(
-    () => paymentMethodId ? {
-      id: paymentMethodId,
-      // Saved PayPal `user_payment_method` records are submitted with
-      // `type: 'paypal'` so the backend routes the upsell through the
-      // direct PayPal gateway's vaulted-token flow. Card and wallet PMs
-      // continue to use `type: 'card'`.
-      type: checkoutMethod === "paypal" ? "paypal" : "card",
-      ...checkoutMethod === "paypal" ? { isPaypal: true } : {}
-    } : void 0,
-    [checkoutMethod, paymentMethodId]
-  );
   const isMountedRef = useRef6(true);
-  const resumeAttemptedRef = useRef6(false);
   const fallbackSessionRef = useRef6(fallbackSession);
   const onSuccessRef = useRef6(onSuccess);
   const onErrorRef = useRef6(onError);
@@ -5653,10 +5532,6 @@ function FloPayAutomaticPaymentButton({
       });
     }
     try {
-      let paymentResult = null;
-      const redirectResult = getRedirectResultFromCheckoutProcessError(apiResult.autoProcessingError);
-      const shouldTreatCreateSessionFlowAsServerAutoAttempt = options?.fromCreateSession && (apiResult.autoProcessingAttempted === true || !!apiResult.autoProcessingError || !!redirectResult);
-      const shouldRetryPayPalClientSide = checkoutMethod === "paypal" && automaticPaymentToken?.isPaypal === true && options?.fromCreateSession === true;
       if (apiResult.autoProcessingPending) {
         const api = new PaymentAPI7(resolvedBillingUrl);
         const completed = await api.waitForCheckoutSessionCompletion(apiResult.autoProcessingPending.sessionId, {
@@ -5669,50 +5544,14 @@ function FloPayAutomaticPaymentButton({
           });
         }
         await showSuccess({
-          result: {
-            status: "succeeded",
-            paymentMethodId: paymentMethodId ?? void 0,
-            checkoutMethod
-          },
+          result: { status: "succeeded" },
           session: completedSession,
           sessionId: completedSession.id || resolvedSessionId,
           autoCompleted: false
         });
         return;
       }
-      if (redirectResult) {
-        const {
-          publishableKey,
-          paypalPublishableKey
-        } = resolveSavedPaymentPublishableKeys(apiResult);
-        if (redirectResult.type === "paypal_redirect_required" && publishableKey) {
-          persistPayPalResumeState2({
-            sessionId: session.id || resolvedSessionId,
-            publishableKey,
-            paypalPublishableKey
-          });
-        }
-        const {
-          flopay,
-          paypalFlopay
-        } = await loadSavedPaymentProviders({
-          publishableKey,
-          paypalPublishableKey,
-          billingApiUrl: resolvedBillingUrl,
-          locale
-        });
-        paymentResult = await handleSavedPaymentRedirectResult(redirectResult, {
-          flopay,
-          paypalFlopay,
-          attempt3DS: true,
-          billingApiUrl: resolvedBillingUrl,
-          sessionId: session.id || resolvedSessionId,
-          session
-        });
-        if (redirectResult.type === "paypal_redirect_required") {
-          clearPayPalResumeState2();
-        }
-      } else if (apiResult.autoProcessingError && !shouldRetryPayPalClientSide) {
+      if (apiResult.autoProcessingError) {
         throw checkoutProcessErrorToFloPayError(
           apiResult.autoProcessingError,
           "Automatic payment failed. Please try again.",
@@ -5720,7 +5559,22 @@ function FloPayAutomaticPaymentButton({
             checkoutMethod: apiResult.autoProcessingError.checkoutMethod
           }
         );
-      } else if (shouldTreatCreateSessionFlowAsServerAutoAttempt && !shouldRetryPayPalClientSide) {
+      }
+      if (options?.fromCreateSession && apiResult.autoProcessingAttempted === true) {
+        throw checkoutProcessErrorToFloPayError(
+          {
+            type: "unknown",
+            message: "Automatic payment failed. Please try again."
+          },
+          "Automatic payment failed. Please try again."
+        );
+      }
+      const result = await processSavedPaymentForMode({
+        billingApiUrl: resolvedBillingUrl,
+        sessionId: resolvedSessionId ?? session.id,
+        session
+      });
+      if (result.type !== "success") {
         throw checkoutProcessErrorToFloPayError(
           {
             type: "unknown",
@@ -5728,121 +5582,16 @@ function FloPayAutomaticPaymentButton({
           },
           "Automatic payment failed. Please try again."
         );
-      } else {
-        const result = await processSavedPaymentForMode({
-          billingApiUrl: resolvedBillingUrl,
-          sessionId: resolvedSessionId ?? session.id,
-          session,
-          tokenizedData: automaticPaymentToken
-        });
-        paymentResult = result.type === "success" ? result.result : null;
-        if (result.type !== "success") {
-          const {
-            publishableKey,
-            paypalPublishableKey
-          } = resolveSavedPaymentPublishableKeys(apiResult);
-          if (result.type === "paypal_redirect_required" && publishableKey) {
-            persistPayPalResumeState2({
-              sessionId: session.id || resolvedSessionId,
-              publishableKey,
-              paypalPublishableKey
-            });
-          }
-          const {
-            flopay,
-            paypalFlopay
-          } = await loadSavedPaymentProviders({
-            publishableKey,
-            paypalPublishableKey,
-            billingApiUrl: resolvedBillingUrl,
-            locale
-          });
-          paymentResult = await handleSavedPaymentRedirectResult(result, {
-            flopay,
-            paypalFlopay,
-            attempt3DS: true,
-            billingApiUrl: resolvedBillingUrl,
-            sessionId: session.id || resolvedSessionId,
-            session
-          });
-          if (result.type === "paypal_redirect_required") {
-            clearPayPalResumeState2();
-          }
-        }
       }
       await showSuccess({
-        result: paymentResult ? {
-          ...paymentResult,
-          paymentMethodId: paymentResult.paymentMethodId ?? paymentMethodId,
-          checkoutMethod: paymentResult.checkoutMethod ?? checkoutMethod
-        } : {
-          status: "succeeded",
-          paymentMethodId: paymentMethodId ?? void 0,
-          checkoutMethod
-        },
+        result: result.result,
         session,
         sessionId: session.id || resolvedSessionId,
         autoCompleted: false
       });
     } catch (err) {
-      let floPayErr = normalizeSavedPaymentError(err);
+      const floPayErr = normalizeSavedPaymentError(err);
       const fallbackSessionId = session.id || resolvedSessionId;
-      const shouldTreatCreateSessionFlowAsServerAutoAttempt = options?.fromCreateSession && apiResult.autoProcessingAttempted === true;
-      if (!shouldTreatCreateSessionFlowAsServerAutoAttempt && floPayErr.code === "authentication_required" && fallbackSessionId && automaticPaymentToken?.id && automaticPaymentToken.id.startsWith("pm_")) {
-        try {
-          const {
-            publishableKey,
-            paypalPublishableKey
-          } = resolveSavedPaymentPublishableKeys(apiResult);
-          const {
-            flopay
-          } = await loadSavedPaymentProviders({
-            publishableKey,
-            paypalPublishableKey,
-            billingApiUrl: resolvedBillingUrl,
-            locale
-          });
-          if (!flopay) {
-            throw new FloPayError8(
-              "Stripe is not available for 3DS authentication.",
-              "api_error",
-              { code: "authentication_required" }
-            );
-          }
-          const paymentResult = await processSavedPaymentWithIntent({
-            billingApiUrl: resolvedBillingUrl,
-            sessionId: fallbackSessionId,
-            session,
-            paymentMethodId: automaticPaymentToken.id,
-            flopay
-          });
-          await showSuccess({
-            result: {
-              ...paymentResult,
-              paymentMethodId: paymentResult.paymentMethodId ?? paymentMethodId,
-              checkoutMethod: paymentResult.checkoutMethod ?? checkoutMethod
-            },
-            session,
-            sessionId: fallbackSessionId,
-            autoCompleted: false
-          });
-          return;
-        } catch (intentRecoveryErr) {
-          floPayErr = normalizeSavedPaymentError(intentRecoveryErr);
-        }
-      }
-      const inResumeWindow = typeof window !== "undefined" && new URLSearchParams(window.location.search).has("payment_intent_client_secret") && !!readPayPalResumeState2();
-      if (floPayErr.code === "payment_intent_unexpected_state" && inResumeWindow) {
-        return;
-      }
-      const isSilentFallbackCase = (floPayErr.code === "paypal_requires_user_interaction" || floPayErr.code === "payment_intent_unexpected_state") && shouldShowFallbackCheckout(floPayErr, fallbackSessionId) && !!fallbackSessionId && isMountedRef.current;
-      if (isSilentFallbackCase) {
-        setFallbackSession({
-          sessionId: fallbackSessionId,
-          errorMessage: ""
-        });
-        return;
-      }
       await showError(floPayErr, {
         emitDecline: true,
         method: floPayErr.checkoutMethod ?? DEFAULT_SAVED_PAYMENT_DECLINE_METHOD
@@ -5855,10 +5604,6 @@ function FloPayAutomaticPaymentButton({
       }
     }
   }, [
-    checkoutMethod,
-    locale,
-    automaticPaymentToken,
-    paymentMethodId,
     resolvedBillingUrl,
     showError,
     showSuccess
@@ -5905,8 +5650,7 @@ function FloPayAutomaticPaymentButton({
       }
       try {
         const result = await api.createAndFetchSession({
-          ...createSessionDraft,
-          ...automaticPaymentToken ? { tokenizedData: automaticPaymentToken } : {}
+          ...createSessionDraft
         });
         await processResolvedSession(result, result.data.session?.id ?? null, {
           fromCreateSession: true
@@ -5961,146 +5705,16 @@ function FloPayAutomaticPaymentButton({
   const handleFallbackDecline = useCallback5((decline) => {
     onDeclineRef.current?.(decline);
   }, []);
-  useEffect8(() => {
-    if (typeof window === "undefined" || resumeAttemptedRef.current) {
-      return;
-    }
-    const params = new URLSearchParams(window.location.search);
-    const clientSecret = params.get("payment_intent_client_secret");
-    if (!clientSecret) {
-      return;
-    }
-    const resumeState = readPayPalResumeState2();
-    if (!resumeState) {
-      return;
-    }
-    resumeAttemptedRef.current = true;
-    void (async () => {
-      setIsProcessing(true);
-      setOverlayError(null);
-      setOverlayStatus("processing");
-      try {
-        if (params.get("redirect_status") === "failed") {
-          throw Object.assign(
-            new FloPayError8("PayPal payment was declined. Please try again.", "api_error"),
-            { checkoutMethod: "paypal" }
-          );
-        }
-        const {
-          flopay,
-          paypalFlopay
-        } = await loadSavedPaymentProviders({
-          publishableKey: resumeState.publishableKey,
-          paypalPublishableKey: resumeState.paypalPublishableKey,
-          billingApiUrl: resolvedBillingUrl,
-          locale
-        });
-        const paypalStripe = (paypalFlopay ?? flopay)?.getRawProvider();
-        if (!paypalStripe) {
-          throw Object.assign(
-            new FloPayError8("PayPal is not available.", "api_error"),
-            { checkoutMethod: "paypal" }
-          );
-        }
-        const { paymentIntent, error } = await paypalStripe.retrievePaymentIntent(clientSecret);
-        if (error) {
-          throw Object.assign(
-            new FloPayError8(
-              error.message ?? "Failed to retrieve PayPal payment status.",
-              "api_error",
-              { code: error.code }
-            ),
-            { checkoutMethod: "paypal" }
-          );
-        }
-        const resultStatus = mapPayPalIntentStatusToPaymentResult(paymentIntent?.status);
-        if (!paymentIntent || resultStatus === "failed") {
-          throw Object.assign(
-            new FloPayError8("PayPal payment was not completed. Please try again.", "api_error"),
-            { checkoutMethod: "paypal" }
-          );
-        }
-        const paymentMethodId2 = typeof paymentIntent.payment_method === "string" ? paymentIntent.payment_method : paymentIntent.payment_method?.id;
-        if (!resumeState.sessionId) {
-          throw Object.assign(
-            new FloPayError8("Missing session id on PayPal resume.", "api_error"),
-            { checkoutMethod: "paypal" }
-          );
-        }
-        const api = new PaymentAPI7(resolvedBillingUrl);
-        const sessionResult = await api.getUnifiedCheckoutSession(resumeState.sessionId);
-        let resumeSession = sessionResult.data.session;
-        if (!resumeSession) {
-          throw Object.assign(
-            new FloPayError8("Could not load session to capture PayPal payment.", "api_error"),
-            { checkoutMethod: "paypal" }
-          );
-        }
-        let finalResultStatus = resultStatus;
-        if (resumeSession.status !== "complete") {
-          const processResult = await processSavedPaymentForMode({
-            billingApiUrl: resolvedBillingUrl,
-            sessionId: resumeState.sessionId,
-            session: resumeSession,
-            tokenizedData: {
-              id: paymentMethodId2 ?? paymentIntent.id,
-              type: "card",
-              threeDSecureActionResultTokenId: paymentIntent.id,
-              isPaypal: true
-            }
-          });
-          if (processResult.type !== "success") {
-            throw Object.assign(
-              new FloPayError8("Failed to finalize PayPal payment.", "api_error"),
-              { checkoutMethod: "paypal" }
-            );
-          }
-          finalResultStatus = processResult.result.status;
-          try {
-            const refreshed = await api.getUnifiedCheckoutSession(resumeState.sessionId);
-            if (refreshed.data.session) {
-              resumeSession = refreshed.data.session;
-            }
-          } catch {
-          }
-        }
-        await showSuccess({
-          result: {
-            status: finalResultStatus,
-            paymentIntentId: paymentIntent.id,
-            paymentMethodId: paymentMethodId2,
-            checkoutMethod: "paypal"
-          },
-          session: resumeSession,
-          sessionId: resumeState.sessionId,
-          autoCompleted: false
-        });
-      } catch (err) {
-        const floPayErr = normalizeSavedPaymentError(err);
-        await showError(floPayErr, {
-          emitDecline: true,
-          method: floPayErr.checkoutMethod ?? "paypal"
-        });
-      } finally {
-        clearPayPalResumeState2();
-        clearPayPalRedirectParams2();
-        if (isMountedRef.current) {
-          setOverlayStatus(null);
-          setOverlayError(null);
-          setIsProcessing(false);
-        }
-      }
-    })();
-  }, [locale, resolvedBillingUrl, showError, showSuccess]);
+  const themeBundle = useMemo5(() => resolveTheme3(theme), [theme]);
   const bStyles = useMemo5(() => {
-    const base = resolveButtonsLayoutTheme3(buttonsTheme);
+    const base = themeBundle?.buttonsLayout ?? resolveButtonsLayoutTheme3(buttonsTheme);
     if (!stylesOverride) return base;
     return {
       ...base,
       ...stylesOverride,
       cardButton: { ...base.cardButton, ...stylesOverride.cardButton }
     };
-  }, [buttonsTheme, stylesOverride]);
+  }, [themeBundle, buttonsTheme, stylesOverride]);
   const cardButtonSizing = children === void 0 ? { boxSizing: "border-box", height: DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT3, padding: "0 1rem" } : { padding: "0.9rem 1rem" };
   return /* @__PURE__ */ jsxs8(Fragment6, { children: [
     /* @__PURE__ */ jsx10(
@@ -6197,9 +5811,12 @@ function FloPayAutomaticPaymentButton({
                 sessionId: fallbackSession.sessionId,
                 checkoutMode: "full",
                 billingApiUrl: resolvedBillingUrl,
+                locale,
+                theme,
+                buttonsTheme,
+                buttonsStyles: stylesOverride,
                 initialErrorMessage: fallbackSession.errorMessage,
                 cardTitleContent: null,
-                showSecurityFooter: false,
                 onComplete: handleFallbackComplete,
                 onError: handleFallbackError,
                 onDecline: handleFallbackDecline