@flopay/react 1.1.6 → 1.2.1

package/dist/index.mjs

@@ -234,6 +234,7 @@ var AddressElement = createElementComponent("address", "AddressElement");
 // src/split-card-form.tsx
 import {
   ExpressCheckoutElement,
+  PaymentElement as PaymentElement2,
   Elements as StripeElements,
   useElements as useStripeElements,
   useStripe as useStripeRaw
@@ -246,10 +247,19 @@ import {
   COUNTRY_OPTIONS,
   resolveAVSConfig,
   isAVSFieldVisible,
-  getStateFromPostalCode
+  getStateFromPostalCode,
+  filterStripeMethodsByCurrency,
+  filterStripeMethodsByCountry,
+  filterStripeMethodsByAmount,
+  getStripeMethodDisplayName,
+  hasVendoredStripeMethodLogo,
+  needsStripeMethodExplicitConfirm,
+  resolveStripeMethodBrandVariant,
+  partitionStripeMethods,
+  stripeExpressMethodToOptionKey
 } from "@flopay/shared";
 import { PaymentAPI as PaymentAPI2 } from "@flopay/js";
-import { forwardRef, useCallback, useContext as useContext3, useEffect as useEffect4, useImperativeHandle, useMemo as useMemo3, useRef as useRef3, useState as useState3 } from "react";
+import React6, { forwardRef, useCallback, useContext as useContext3, useEffect as useEffect4, useImperativeHandle, useMemo as useMemo3, useRef as useRef3, useState as useState3 } from "react";
 
 // src/hooks.ts
 import { useContext as useContext2 } from "react";
@@ -1223,9 +1233,11 @@ ${debugLines.join("\n")}`
 // src/split-card-form.tsx
 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 STRIPE_RESUME_KEY = "flopay_stripe_resume";
+var LEGACY_WALLET_RESUME_KEY = "flopay_wallet_resume";
 var FLOPAY_KEYFRAMES = `
 .paypal-buttons { margin: 0 !important; vertical-align: top !important; }
+@keyframes flopay-spin { to { transform: rotate(360deg); } }
 @keyframes flopay-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
 @keyframes flopay-fade-in { 0% { opacity: 0; } 100% { opacity: 1; } }
 @keyframes flopay-buttons-enter {
@@ -1246,6 +1258,25 @@ var FLOPAY_KEYFRAMES = `
 }
 `;
 var DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT = 44;
+function derivePrimaryTileStyle(opts) {
+  if (!opts.themeBundle) {
+    return {
+      backgroundColor: "white",
+      color: "#262833",
+      border: "1px solid #d1d5db",
+      borderRadius: "8px",
+      boxShadow: "0 1px 2px rgba(0,0,0,0.04)"
+    };
+  }
+  const submit = opts.submitButtonStyle ?? {};
+  return {
+    backgroundColor: submit.backgroundColor ?? opts.resolvedPrimaryColor,
+    color: submit.color ?? "white",
+    border: submit.border ?? "none",
+    borderRadius: submit.borderRadius ?? opts.resolvedBorderRadius,
+    boxShadow: submit.boxShadow
+  };
+}
 var BUTTONS_PANEL_HIDDEN_STYLE = {
   visibility: "hidden",
   position: "absolute",
@@ -1291,6 +1322,7 @@ function resolveExpressCheckoutLoadState(event, methods) {
 function ExpressCheckoutReadySwap({
   state,
   placeholderTestId,
+  borderRadius = 8,
   children
 }) {
   if (state === "unavailable" || state === "load_error") return null;
@@ -1304,7 +1336,7 @@ function ExpressCheckoutReadySwap({
           position: "absolute",
           inset: 0,
           height: 44,
-          borderRadius: 8,
+          borderRadius,
           background: "#e5e7eb",
           animation: state === "ready" ? void 0 : "flopay-pulse 1.5s ease-in-out infinite",
           opacity: state === "ready" ? 0 : 1,
@@ -1347,7 +1379,8 @@ function PayPalButtonInner({
   onButtonClick,
   onDecline,
   runBeforeButtonClick,
-  onLoadStateChange
+  onLoadStateChange,
+  placeholderBorderRadius
 }) {
   const stripe = useStripeRaw();
   const elements = useStripeElements();
@@ -1517,31 +1550,39 @@ function PayPalButtonInner({
     }
   }, [stripe, elements, sessionId, email, baseUrl, onTokenizedBody, onErrorChange, onDecline, runBeforeButtonClick]);
   return /* @__PURE__ */ jsxs4(Fragment2, { children: [
-    /* @__PURE__ */ jsx6(ExpressCheckoutReadySwap, { state: loadState, placeholderTestId: "flopay-paypal-placeholder", children: /* @__PURE__ */ jsx6(
-      ExpressCheckoutElement,
+    /* @__PURE__ */ jsx6(
+      ExpressCheckoutReadySwap,
       {
-        onReady: (event) => setLoadState(resolveExpressCheckoutLoadState(event, ["paypal"])),
-        onLoadError: () => setLoadState("load_error"),
-        onClick: handlePayPalClick,
-        onConfirm: handlePayPalConfirm,
-        onCancel: () => {
-          beforeClickRef.current = null;
-          onDecline?.(buildDeclineEvent("paypal", "PayPal checkout was cancelled."));
-        },
-        options: {
-          buttonType: { paypal: "paypal" },
-          billingAddressRequired: false,
-          phoneNumberRequired: false,
-          shippingAddressRequired: false,
-          paymentMethods: {
-            applePay: "never",
-            googlePay: "never",
-            paypal: "auto",
-            link: "never"
+        state: loadState,
+        placeholderTestId: "flopay-paypal-placeholder",
+        borderRadius: placeholderBorderRadius,
+        children: /* @__PURE__ */ jsx6(
+          ExpressCheckoutElement,
+          {
+            onReady: (event) => setLoadState(resolveExpressCheckoutLoadState(event, ["paypal"])),
+            onLoadError: () => setLoadState("load_error"),
+            onClick: handlePayPalClick,
+            onConfirm: handlePayPalConfirm,
+            onCancel: () => {
+              beforeClickRef.current = null;
+              onDecline?.(buildDeclineEvent("paypal", "PayPal checkout was cancelled."));
+            },
+            options: {
+              buttonType: { paypal: "paypal" },
+              billingAddressRequired: false,
+              phoneNumberRequired: false,
+              shippingAddressRequired: false,
+              paymentMethods: {
+                applePay: "never",
+                googlePay: "never",
+                paypal: "auto",
+                link: "never"
+              }
+            }
           }
-        }
+        )
       }
-    ) }),
+    ),
     submitting && /* @__PURE__ */ jsx6(ProcessingOverlay, { status: "processing" })
   ] });
 }
@@ -1549,14 +1590,14 @@ function WalletButtonInner({
   sessionId,
   email,
   billingApiUrl,
-  showApplePay = true,
-  showGooglePay = true,
+  expressMethods,
   onTokenizedBody,
   onErrorChange,
   onButtonClick,
   onDecline,
   runBeforeButtonClick,
-  onLoadStateChange
+  onLoadStateChange,
+  placeholderBorderRadius
 }) {
   const stripe = useStripeRaw();
   const elements = useStripeElements();
@@ -1574,10 +1615,9 @@ function WalletButtonInner({
       const walletType = event.expressPaymentType;
       let prepared = beforeClickRef.current;
       beforeClickRef.current = null;
+      const buttonMethod = walletType === "apple_pay" ? "apple_pay" : "google_pay";
       if (!prepared && runBeforeButtonClick) {
-        const beforeClick = await runBeforeButtonClick(
-          walletType === "apple_pay" ? "apple_pay" : "google_pay"
-        );
+        const beforeClick = await runBeforeButtonClick(buttonMethod);
         if (!beforeClick.proceed) {
           event.paymentFailed({ reason: "fail", message: "Wallet checkout was cancelled." });
           return;
@@ -1587,7 +1627,7 @@ function WalletButtonInner({
           sessionId: beforeClick.sessionId
         };
       }
-      const method = walletType === "apple_pay" ? "apple_pay" : "google_pay";
+      const method = buttonMethod;
       const effectiveSessionId = prepared?.sessionId ?? sessionId;
       const effectiveEmail = prepared?.accountPatch?.email ?? email;
       try {
@@ -1657,53 +1697,655 @@ function WalletButtonInner({
     },
     [stripe, elements, sessionId, email, baseUrl, onTokenizedBody, onErrorChange, onDecline, runBeforeButtonClick]
   );
+  const expressMethodMap = useMemo3(() => {
+    const allKeys = ["applePay", "googlePay", "paypal", "link", "amazonPay", "klarna"];
+    const alwaysCapable = /* @__PURE__ */ new Set(["applePay", "googlePay"]);
+    const enabledKeys = new Set(expressMethods.map(stripeExpressMethodToOptionKey));
+    const out = {};
+    for (const key of allKeys) {
+      if (!enabledKeys.has(key)) {
+        out[key] = "never";
+      } else {
+        out[key] = alwaysCapable.has(key) ? "always" : "auto";
+      }
+    }
+    return out;
+  }, [expressMethods]);
+  const availableMethodKeys = useMemo3(
+    () => expressMethods.map(stripeExpressMethodToOptionKey),
+    [expressMethods]
+  );
   return /* @__PURE__ */ jsxs4(Fragment2, { children: [
-    /* @__PURE__ */ jsx6(ExpressCheckoutReadySwap, { state: loadState, placeholderTestId: "flopay-wallet-placeholder", children: /* @__PURE__ */ jsx6(
-      ExpressCheckoutElement,
+    /* @__PURE__ */ jsx6(
+      ExpressCheckoutReadySwap,
       {
-        onReady: (event) => {
-          setLoadState(resolveExpressCheckoutLoadState(event, ["applePay", "googlePay"]));
-        },
-        onLoadError: (e) => {
-          setLoadState("load_error");
-        },
-        onClick: async (event) => {
-          lastWalletMethodRef.current = event.expressPaymentType === "apple_pay" ? "apple_pay" : "google_pay";
-          const beforeClick = runBeforeButtonClick ? await runBeforeButtonClick(lastWalletMethodRef.current) : { proceed: true };
-          if (!beforeClick.proceed) {
-            beforeClickRef.current = null;
-            event.reject();
-            return;
+        state: loadState,
+        placeholderTestId: "flopay-wallet-placeholder",
+        borderRadius: placeholderBorderRadius,
+        children: /* @__PURE__ */ jsx6(
+          ExpressCheckoutElement,
+          {
+            onReady: (event) => {
+              setLoadState(resolveExpressCheckoutLoadState(event, availableMethodKeys));
+            },
+            onLoadError: (_event) => {
+              setLoadState("load_error");
+            },
+            onClick: async (event) => {
+              lastWalletMethodRef.current = event.expressPaymentType === "apple_pay" ? "apple_pay" : "google_pay";
+              const beforeClick = runBeforeButtonClick ? await runBeforeButtonClick(lastWalletMethodRef.current) : { proceed: true };
+              if (!beforeClick.proceed) {
+                beforeClickRef.current = null;
+                event.reject();
+                return;
+              }
+              beforeClickRef.current = {
+                accountPatch: beforeClick.accountPatch,
+                sessionId: beforeClick.sessionId
+              };
+              onButtonClick?.(lastWalletMethodRef.current);
+              event.resolve();
+            },
+            onConfirm: handleWalletConfirm,
+            onCancel: () => {
+              beforeClickRef.current = null;
+              onDecline?.(buildDeclineEvent(lastWalletMethodRef.current, "Wallet checkout was cancelled."));
+            },
+            options: {
+              buttonType: { applePay: "plain", googlePay: "plain" },
+              paymentMethods: expressMethodMap,
+              layout: { maxColumns: 1, overflow: "never" }
+            }
           }
-          beforeClickRef.current = {
-            accountPatch: beforeClick.accountPatch,
-            sessionId: beforeClick.sessionId
-          };
-          onButtonClick?.(lastWalletMethodRef.current);
-          event.resolve();
+        )
+      }
+    ),
+    submitting && /* @__PURE__ */ jsx6(ProcessingOverlay, { status: "processing" })
+  ] });
+}
+function StripeMethodButton({
+  method,
+  themeId,
+  submitting = false,
+  disabled = false,
+  highlighted = false,
+  hasNextStep = false,
+  onClick,
+  backgroundColor,
+  borderColor,
+  textColor,
+  borderRadius,
+  fontFamily
+}) {
+  const brand = resolveStripeMethodBrandVariant(method, themeId);
+  const resolvedBackground = brand?.backgroundColor ?? backgroundColor ?? "#ffffff";
+  const resolvedBorder = brand?.borderColor ?? borderColor ?? "#d1d5db";
+  const resolvedTextColor = brand?.textColor ?? textColor ?? "#262833";
+  return /* @__PURE__ */ jsx6(
+    "button",
+    {
+      type: "button",
+      "data-testid": `flopay-stripe-method-button-${method}`,
+      "data-method": method,
+      onClick: () => {
+        if (!submitting && !disabled) onClick();
+      },
+      disabled: submitting || disabled,
+      "aria-busy": submitting || void 0,
+      style: {
+        position: "relative",
+        width: "100%",
+        boxSizing: "border-box",
+        height: DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT,
+        padding: "0 1rem",
+        backgroundColor: resolvedBackground,
+        color: resolvedTextColor,
+        border: `1px solid ${resolvedBorder}`,
+        borderRadius: borderRadius ?? 8,
+        fontSize: "0.95rem",
+        fontWeight: 600,
+        fontFamily,
+        cursor: submitting || disabled ? "not-allowed" : "pointer",
+        opacity: disabled && !submitting ? 0.55 : 1,
+        // Submitting state pulses the whole button background, mirroring
+        // the wallet ECE's `flopay-pulse` skeleton. This keeps the loading
+        // affordance consistent between embedded wallets (Apple Pay,
+        // Google Pay) and these custom APM tile buttons — same animation
+        // curve, same duration, only the surface colour changes (grey for
+        // the wallet skeleton vs. brand colour for an in-flight tile).
+        animation: submitting ? "flopay-pulse 1.5s ease-in-out infinite" : void 0,
+        display: "flex",
+        alignItems: "center",
+        // Always center the logo+name group. The drill-in chevron (input
+        // methods) is absolutely positioned at the right edge below so it
+        // doesn't pull the label off-center.
+        justifyContent: "center",
+        gap: 8,
+        transition: "transform 0.1s, opacity 140ms ease-out, border-color 140ms ease-out",
+        boxShadow: highlighted ? "0 0 0 2px rgba(74, 73, 255, 0.15)" : void 0
+      },
+      children: submitting ? (
+        // 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__ */ jsx6("span", { style: { margin: "0 auto" }, children: `Connecting to ${getStripeMethodDisplayName(method)}\u2026` })
+      ) : /* @__PURE__ */ jsxs4(Fragment2, { children: [
+        /* @__PURE__ */ jsxs4(
+          "span",
+          {
+            style: {
+              display: "inline-flex",
+              alignItems: "center",
+              // Real vendored logos are self-contained brand cards, so they
+              // get an 8px gap from the label. The generated placeholder
+              // monogram reads as part of the label (the tile's first letter),
+              // so it sits flush (0px) against the name.
+              gap: hasVendoredStripeMethodLogo(method) ? 8 : 0
+            },
+            children: [
+              brand?.logoSvg && /* @__PURE__ */ jsx6(
+                "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,
+                    display: "inline-flex",
+                    borderRadius: 3,
+                    overflow: "hidden"
+                  },
+                  dangerouslySetInnerHTML: { __html: brand.logoSvg }
+                }
+              ),
+              /* @__PURE__ */ jsx6("span", { children: getStripeMethodDisplayName(method) })
+            ]
+          }
+        ),
+        hasNextStep && /* @__PURE__ */ jsx6(
+          "svg",
+          {
+            width: "14",
+            height: "14",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: resolvedTextColor,
+            strokeWidth: "2.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            style: {
+              position: "absolute",
+              right: "1rem",
+              top: "50%",
+              transform: "translateY(-50%)",
+              flexShrink: 0,
+              opacity: 0.7
+            },
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx6("path", { d: "M9 18l6-6-6-6" })
+          }
+        )
+      ] })
+    }
+  );
+}
+function StripeMethodInlineForm({
+  method,
+  sessionId,
+  email,
+  billingName,
+  billingApiUrl,
+  onTokenizedBody,
+  onErrorChange,
+  onDecline,
+  onCancel,
+  runBeforeButtonClick,
+  onButtonClick,
+  isProcessing,
+  submitButtonColor,
+  submitButtonBorderRadius,
+  submitButtonStyle
+}) {
+  const stripe = useStripeRaw();
+  const elements = useStripeElements();
+  const [submitting, setSubmitting] = useState3(false);
+  const submittingRef = useRef3(false);
+  const [isMethodComplete, setIsMethodComplete] = useState3(false);
+  const [loadState, setLoadState] = useState3("loading");
+  const baseUrl = billingApiUrl.replace(/\/+$/, "");
+  const handlePay = useCallback(async () => {
+    if (!stripe || !elements || isProcessing || submittingRef.current || !isMethodComplete) return;
+    submittingRef.current = true;
+    setSubmitting(true);
+    const beforeClick = runBeforeButtonClick ? await runBeforeButtonClick("card") : { proceed: true };
+    if (!beforeClick.proceed) {
+      submittingRef.current = false;
+      setSubmitting(false);
+      return;
+    }
+    onButtonClick?.("card");
+    const effectiveSessionId = beforeClick.sessionId ?? sessionId;
+    const effectiveEmail = beforeClick.accountPatch?.email ?? email;
+    try {
+      onErrorChange?.(null);
+      const submitRes = await elements.submit();
+      if (submitRes.error) {
+        onErrorChange?.(submitRes.error.message ?? "Payment failed.");
+        return;
+      }
+      const pmRes = await stripe.createPaymentMethod({ elements });
+      if (pmRes.error || !pmRes.paymentMethod) {
+        onErrorChange?.(pmRes.error?.message ?? "Failed to create payment method.");
+        return;
+      }
+      const paymentMethod = pmRes.paymentMethod;
+      if (!effectiveSessionId || !effectiveEmail) {
+        throw new Error("Missing sessionId or email for payment.");
+      }
+      const intentResponse = await fetch(`${baseUrl}/v1/checkouts/payments/intents`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          sessionId: effectiveSessionId,
+          email: effectiveEmail,
+          paymentMethodType: paymentMethod.type || method,
+          isPaypal: false
+        })
+      });
+      if (!intentResponse.ok) {
+        const intentError = await buildFloPayApiErrorFromResponse(intentResponse, "Failed to create payment intent");
+        onErrorChange?.(intentError.message);
+        onDecline?.(buildDeclineEvent("card", intentError));
+        return;
+      }
+      const intentJson = await intentResponse.json();
+      const intentClientSecret = intentJson.data?.id;
+      if (!intentClientSecret) throw new Error("No client_secret in payment intent response");
+      if (typeof window !== "undefined") {
+        try {
+          localStorage.setItem(STRIPE_RESUME_KEY, JSON.stringify({
+            sessionId: effectiveSessionId,
+            paymentMethodId: paymentMethod.id,
+            paymentMethodType: paymentMethod.type ?? method,
+            gateway: "stripe"
+          }));
+        } catch {
+        }
+      }
+      const { error: confirmError, paymentIntent } = await stripe.confirmPayment({
+        clientSecret: intentClientSecret,
+        confirmParams: {
+          return_url: window.location.href,
+          payment_method: paymentMethod.id
         },
-        onConfirm: handleWalletConfirm,
-        onCancel: () => {
-          beforeClickRef.current = null;
-          onDecline?.(buildDeclineEvent(lastWalletMethodRef.current, "Wallet checkout was cancelled."));
+        redirect: "if_required"
+      });
+      if (confirmError) {
+        if (typeof window !== "undefined") {
+          try {
+            localStorage.removeItem(STRIPE_RESUME_KEY);
+          } catch {
+          }
+        }
+        const message = confirmError.message ?? "Payment failed.";
+        onErrorChange?.(message);
+        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 (typeof window !== "undefined") {
+          try {
+            localStorage.removeItem(STRIPE_RESUME_KEY);
+          } catch {
+          }
+        }
+        const message = piStatus === "canceled" ? "Payment was canceled." : "Payment was not completed. Please try again.";
+        onErrorChange?.(message);
+        onDecline?.(buildDeclineEvent("card", message, { code: piStatus ?? "missing_payment_intent" }));
+        return;
+      }
+      if (typeof window !== "undefined") {
+        try {
+          localStorage.removeItem(STRIPE_RESUME_KEY);
+        } catch {
+        }
+      }
+      const confirmedPmId = typeof paymentIntent?.payment_method === "string" ? paymentIntent.payment_method : paymentIntent?.payment_method?.id;
+      onTokenizedBody({
+        id: confirmedPmId ?? paymentMethod.id,
+        type: "card",
+        threeDSecureActionResultTokenId: paymentIntent?.id,
+        gateway: "stripe",
+        paymentMethodType: paymentMethod.type ?? method
+      }, {
+        accountPatch: beforeClick.accountPatch,
+        sessionId: effectiveSessionId
+      });
+    } catch (err) {
+      onErrorChange?.(err instanceof Error ? err.message : "Payment failed. Please try again.");
+    } finally {
+      submittingRef.current = false;
+      setSubmitting(false);
+    }
+  }, [
+    stripe,
+    elements,
+    isProcessing,
+    isMethodComplete,
+    runBeforeButtonClick,
+    onButtonClick,
+    sessionId,
+    email,
+    baseUrl,
+    method,
+    onTokenizedBody,
+    onErrorChange,
+    onDecline
+  ]);
+  void onCancel;
+  return /* @__PURE__ */ jsxs4("div", { "data-testid": `flopay-stripe-method-form-${method}`, style: { display: "flex", flexDirection: "column" }, children: [
+    /* @__PURE__ */ jsx6(
+      PaymentElement2,
+      {
+        onReady: () => setLoadState("ready"),
+        onLoadError: () => setLoadState("load_error"),
+        onChange: (event) => {
+          const evRecord = event;
+          setIsMethodComplete(!!evRecord.complete);
         },
         options: {
-          buttonType: { applePay: "plain", googlePay: "plain" },
-          paymentMethods: {
-            applePay: showApplePay ? "always" : "never",
-            googlePay: showGooglePay ? "always" : "never",
-            paypal: "never",
-            link: "never",
-            amazonPay: "never",
-            klarna: "never"
-          },
-          layout: { maxColumns: 1, overflow: "never" }
+          layout: { type: "accordion", defaultCollapsed: false, radios: "never" },
+          defaultValues: {
+            billingDetails: {
+              name: billingName && billingName.trim().length >= 3 ? billingName.trim() : "FloPay Customer",
+              ...email ? { email } : {}
+            }
+          }
         }
       }
-    ) }),
-    submitting && /* @__PURE__ */ jsx6(ProcessingOverlay, { status: "processing" })
+    ),
+    /* @__PURE__ */ jsx6(
+      "button",
+      {
+        type: "button",
+        "data-testid": `flopay-stripe-method-pay-${method}`,
+        onClick: () => {
+          void handlePay();
+        },
+        disabled: !isMethodComplete || submitting || isProcessing || loadState !== "ready",
+        style: {
+          width: "100%",
+          marginTop: "0.75rem",
+          padding: "0.875rem",
+          backgroundColor: submitButtonColor,
+          color: "white",
+          border: "none",
+          borderRadius: submitButtonBorderRadius,
+          fontSize: "1rem",
+          fontWeight: 600,
+          cursor: !isMethodComplete || submitting || isProcessing || loadState !== "ready" ? "not-allowed" : "pointer",
+          opacity: !isMethodComplete || submitting || isProcessing || loadState !== "ready" ? 0.5 : 1,
+          transition: "opacity 120ms ease-out",
+          ...submitButtonStyle ?? {}
+        },
+        children: submitting ? "Processing\u2026" : `Pay with ${getStripeMethodDisplayName(method)}`
+      }
+    )
   ] });
 }
+function StripePaymentElementInner({
+  sessionId,
+  email,
+  billingName,
+  billingApiUrl,
+  paymentElementMethods,
+  stripeInstance,
+  paymentElementBaseOptions,
+  onTokenizedBody,
+  onErrorChange,
+  onButtonClick,
+  onDecline,
+  runBeforeButtonClick,
+  onLoadStateChange,
+  isProcessing = false,
+  submitButtonColor = "#4A49FF",
+  submitButtonBorderRadius = 8,
+  submitButtonStyle,
+  buttonAppearance,
+  themeId,
+  onExpandApm,
+  expandedApmMethod
+}) {
+  const baseUrl = billingApiUrl.replace(/\/+$/, "");
+  const [expandedMethod, setExpandedMethod] = useState3(null);
+  const [submittingMethod, setSubmittingMethod] = useState3(null);
+  const submittingRef = useRef3(false);
+  useEffect4(() => {
+    if (paymentElementMethods.length > 0 && stripeInstance) {
+      onLoadStateChange?.("ready");
+    } else if (!stripeInstance) {
+      onLoadStateChange?.("loading");
+    }
+  }, [paymentElementMethods.length, stripeInstance, onLoadStateChange]);
+  const handleAutoConfirm = useCallback(async (method) => {
+    if (!stripeInstance) return;
+    if (submittingRef.current || isProcessing) return;
+    submittingRef.current = true;
+    setSubmittingMethod(method);
+    const beforeClick = runBeforeButtonClick ? await runBeforeButtonClick("card") : { proceed: true };
+    if (!beforeClick.proceed) {
+      submittingRef.current = false;
+      setSubmittingMethod(null);
+      return;
+    }
+    onButtonClick?.("card");
+    const effectiveSessionId = beforeClick.sessionId ?? sessionId;
+    const effectiveEmail = beforeClick.accountPatch?.email ?? email;
+    try {
+      onErrorChange?.(null);
+      if (!effectiveSessionId || !effectiveEmail) {
+        throw new Error("Missing sessionId or email for payment.");
+      }
+      const intentResponse = await fetch(`${baseUrl}/v1/checkouts/payments/intents`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          sessionId: effectiveSessionId,
+          email: effectiveEmail,
+          // Wire type, not pm_xxx — backend scopes `payment_method_types`
+          // to this single method so unrelated account-wide methods
+          // (apple_pay without domain verification, …) don't poison PI
+          // creation.
+          paymentMethodType: method,
+          isPaypal: false
+        })
+      });
+      if (!intentResponse.ok) {
+        const intentError = await buildFloPayApiErrorFromResponse(intentResponse, "Failed to create payment intent");
+        onErrorChange?.(intentError.message);
+        onDecline?.(buildDeclineEvent("card", intentError));
+        return;
+      }
+      const intentJson = await intentResponse.json();
+      const intentClientSecret = intentJson.data?.id;
+      if (!intentClientSecret) throw new Error("No client_secret in payment intent response");
+      if (typeof window !== "undefined") {
+        try {
+          localStorage.setItem(STRIPE_RESUME_KEY, JSON.stringify({
+            sessionId: effectiveSessionId,
+            paymentMethodType: method,
+            gateway: "stripe"
+          }));
+        } catch {
+        }
+      }
+      const { error: confirmError, paymentIntent } = await stripeInstance.confirmPayment({
+        clientSecret: intentClientSecret,
+        confirmParams: {
+          return_url: window.location.href,
+          // Inline the method data — no Elements / PaymentElement
+          // required. Stripe creates the PaymentMethod during confirm
+          // and proceeds to its popup/redirect UI.
+          payment_method_data: {
+            type: method,
+            billing_details: {
+              name: billingName && billingName.trim().length >= 3 ? billingName.trim() : "FloPay Customer",
+              ...effectiveEmail ? { email: effectiveEmail } : {}
+            }
+          }
+        },
+        redirect: "if_required"
+      });
+      if (confirmError) {
+        if (typeof window !== "undefined") {
+          try {
+            localStorage.removeItem(STRIPE_RESUME_KEY);
+          } catch {
+          }
+        }
+        const message = confirmError.message ?? "Payment failed.";
+        onErrorChange?.(message);
+        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 (typeof window !== "undefined") {
+          try {
+            localStorage.removeItem(STRIPE_RESUME_KEY);
+          } catch {
+          }
+        }
+        const message = piStatus === "canceled" ? "Payment was canceled." : "Payment was not completed. Please try again.";
+        onErrorChange?.(message);
+        onDecline?.(buildDeclineEvent("card", message, { code: piStatus ?? "missing_payment_intent" }));
+        return;
+      }
+      if (typeof window !== "undefined") {
+        try {
+          localStorage.removeItem(STRIPE_RESUME_KEY);
+        } catch {
+        }
+      }
+      const confirmedPmId = typeof paymentIntent?.payment_method === "string" ? paymentIntent.payment_method : paymentIntent?.payment_method?.id;
+      onTokenizedBody({
+        id: confirmedPmId ?? paymentIntent?.id,
+        type: "card",
+        threeDSecureActionResultTokenId: paymentIntent?.id,
+        gateway: "stripe",
+        paymentMethodType: method
+      }, {
+        accountPatch: beforeClick.accountPatch,
+        sessionId: effectiveSessionId
+      });
+    } catch (err) {
+      onErrorChange?.(err instanceof Error ? err.message : "Payment failed. Please try again.");
+    } finally {
+      submittingRef.current = false;
+      setSubmittingMethod(null);
+    }
+  }, [
+    stripeInstance,
+    isProcessing,
+    runBeforeButtonClick,
+    onButtonClick,
+    sessionId,
+    email,
+    baseUrl,
+    billingName,
+    onTokenizedBody,
+    onErrorChange,
+    onDecline
+  ]);
+  const [localExpandedMethod, setLocalExpandedMethod] = useState3(null);
+  const activeExpandedMethod = onExpandApm ? expandedApmMethod ?? null : localExpandedMethod;
+  const handleMethodClick = useCallback((method) => {
+    if (submittingRef.current || isProcessing) return;
+    if (activeExpandedMethod && activeExpandedMethod !== method) return;
+    if (needsStripeMethodExplicitConfirm(method)) {
+      if (onExpandApm) {
+        onExpandApm(method);
+      } else {
+        setLocalExpandedMethod(method);
+      }
+    } else {
+      void handleAutoConfirm(method);
+    }
+  }, [activeExpandedMethod, isProcessing, handleAutoConfirm, onExpandApm]);
+  const localInlineElementsOptions = useMemo3(() => {
+    if (!localExpandedMethod) return null;
+    return {
+      ...paymentElementBaseOptions,
+      paymentMethodTypes: [localExpandedMethod]
+    };
+  }, [localExpandedMethod, paymentElementBaseOptions]);
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      "data-testid": "flopay-stripe-payment-element-region",
+      style: { display: "flex", flexDirection: "column", gap: "0.5rem" },
+      children: paymentElementMethods.map((method) => {
+        const isExpanded = expandedApmMethod === method;
+        const isSubmittingThis = submittingMethod === method;
+        const otherInProgress = submittingMethod !== null && submittingMethod !== method || expandedApmMethod !== null && expandedApmMethod !== void 0 && expandedApmMethod !== method;
+        return /* @__PURE__ */ jsxs4(React6.Fragment, { children: [
+          /* @__PURE__ */ jsx6(
+            StripeMethodButton,
+            {
+              method,
+              themeId,
+              submitting: isSubmittingThis,
+              disabled: otherInProgress,
+              highlighted: isExpanded,
+              hasNextStep: needsStripeMethodExplicitConfirm(method),
+              onClick: () => handleMethodClick(method),
+              backgroundColor: buttonAppearance?.backgroundColor,
+              borderColor: buttonAppearance?.borderColor,
+              textColor: buttonAppearance?.textColor,
+              borderRadius: buttonAppearance?.borderRadius,
+              fontFamily: buttonAppearance?.fontFamily
+            }
+          ),
+          !onExpandApm && localExpandedMethod === method && localInlineElementsOptions && stripeInstance && /* @__PURE__ */ jsx6(
+            StripeElements,
+            {
+              stripe: stripeInstance,
+              options: localInlineElementsOptions,
+              children: /* @__PURE__ */ jsx6(
+                StripeMethodInlineForm,
+                {
+                  method,
+                  sessionId,
+                  email,
+                  billingName,
+                  billingApiUrl,
+                  onTokenizedBody,
+                  onErrorChange,
+                  onDecline,
+                  onCancel: () => setLocalExpandedMethod(null),
+                  runBeforeButtonClick,
+                  onButtonClick,
+                  isProcessing,
+                  submitButtonColor,
+                  submitButtonBorderRadius,
+                  submitButtonStyle
+                }
+              )
+            },
+            method
+          )
+        ] }, method);
+      })
+    }
+  );
+}
 function SplitCardFormInner({
   sessionId,
   billingApiUrl,
@@ -1726,6 +2368,8 @@ function SplitCardFormInner({
   onFirstNameChange,
   onLastNameChange,
   showPayPal = true,
+  showStripe = true,
+  enabledPaymentMethods,
   showApplePay = true,
   showGooglePay = true,
   layout = "default",
@@ -1785,6 +2429,7 @@ function SplitCardFormInner({
   const avsConfig = useMemo3(() => resolveAVSConfig(enableAVSProp), [enableAVSProp]);
   const enableAVS = avsConfig !== null;
   const [viewState, setViewState] = useState3(initialCardOpen ? "card" : "buttons");
+  const [expandedApmMethod, setExpandedApmMethod] = useState3(null);
   const showCardForm = viewState === "expanding" || viewState === "card";
   const TRANSITION_MS = 280;
   const expandToCard = useCallback(() => {
@@ -1795,6 +2440,18 @@ function SplitCardFormInner({
     setViewState("collapsing");
     setTimeout(() => setViewState("buttons"), TRANSITION_MS);
   }, []);
+  const expandToApm = useCallback((method) => {
+    setExpandedApmMethod(method);
+    setViewState("apm-expanding");
+    setTimeout(() => setViewState("apm-form"), TRANSITION_MS);
+  }, []);
+  const collapseFromApm = useCallback(() => {
+    setViewState("apm-collapsing");
+    setTimeout(() => {
+      setViewState("buttons");
+      setExpandedApmMethod(null);
+    }, TRANSITION_MS);
+  }, []);
   useEffect4(() => {
     if (layout === "buttons" && initialCardOpen) {
       setViewState("card");
@@ -1848,20 +2505,43 @@ function SplitCardFormInner({
     return paypalFlopay.getRawProvider();
   }, [paypalFlopay]);
   const amountInCents = totalAmount || 100;
+  const stripeAppearanceProp = appearance ? { appearance } : null;
+  const paymentElementAppearance = useMemo3(() => {
+    const base = appearance ?? {};
+    const baseRules = base.rules ?? {};
+    return {
+      ...base,
+      rules: {
+        ...baseRules,
+        ".AccordionItem": {
+          padding: "10px 14px",
+          boxShadow: "none",
+          ...baseRules[".AccordionItem"] ?? {}
+        },
+        ".AccordionItemContents": {
+          padding: "6px 14px 12px",
+          boxShadow: "none",
+          ...baseRules[".AccordionItemContents"] ?? {}
+        }
+      }
+    };
+  }, [appearance]);
   const walletOptions = useMemo3(() => ({
     mode: "payment",
     amount: amountInCents,
     currency: currency.toLowerCase(),
     paymentMethodCreation: "manual",
-    captureMethod: "manual"
-  }), [amountInCents, currency]);
+    captureMethod: "manual",
+    ...stripeAppearanceProp
+  }), [amountInCents, currency, stripeAppearanceProp]);
   const paypalOptions = useMemo3(() => ({
     mode: "payment",
     amount: amountInCents,
     currency: currency.toLowerCase(),
     captureMethod: "manual",
-    setupFutureUsage: "off_session"
-  }), [amountInCents, currency]);
+    setupFutureUsage: "off_session",
+    ...stripeAppearanceProp
+  }), [amountInCents, currency, stripeAppearanceProp]);
   const updateError = useCallback(
     (err) => {
       setError(err);
@@ -1875,22 +2555,98 @@ function SplitCardFormInner({
     },
     [onDecline]
   );
-  const showWallets = showApplePay || showGooglePay;
+  const directPaypalConfigured = !!directPaypal?.clientId;
+  const hasEnabledMethodsPayload = Array.isArray(enabledPaymentMethods);
+  const hasEnabledMethods = hasEnabledMethodsPayload && enabledPaymentMethods.length > 0;
+  const paypalEnabled = hasEnabledMethodsPayload && enabledPaymentMethods.includes("paypal");
+  const { expressMethods, paymentElementMethods } = useMemo3(
+    () => partitionStripeMethods(enabledPaymentMethods, {
+      excludePaypal: directPaypalConfigured
+    }),
+    [enabledPaymentMethods, directPaypalConfigured]
+  );
+  const paypalRenderedSeparately = directPaypalConfigured || !!paypalFlopay;
+  const expressMethodsForWalletRow = useMemo3(
+    () => paypalRenderedSeparately ? expressMethods.filter((m) => m !== "paypal") : expressMethods,
+    [expressMethods, paypalRenderedSeparately]
+  );
+  const legacyExpressMethods = useMemo3(() => {
+    const out = [];
+    if (showApplePay) out.push("apple_pay");
+    if (showGooglePay) out.push("google_pay");
+    return out;
+  }, [showApplePay, showGooglePay]);
+  const walletExpressMethods = hasEnabledMethodsPayload ? expressMethodsForWalletRow : legacyExpressMethods;
+  const showWallets = showStripe && walletExpressMethods.length > 0;
+  const paymentElementMethodsForCurrency = useMemo3(
+    () => filterStripeMethodsByAmount(
+      filterStripeMethodsByCountry(
+        filterStripeMethodsByCurrency(paymentElementMethods, currency),
+        countryProp
+      ),
+      currency,
+      amountInCents
+    ),
+    [paymentElementMethods, currency, countryProp, amountInCents]
+  );
+  const paymentElementBaseOptions = useMemo3(() => ({
+    mode: "payment",
+    amount: amountInCents,
+    currency: currency.toLowerCase(),
+    paymentMethodCreation: "manual",
+    appearance: paymentElementAppearance
+  }), [amountInCents, currency, paymentElementAppearance]);
   const [paypalLoadState, setPaypalLoadState] = useState3("loading");
   const [walletLoadState, setWalletLoadState] = useState3("loading");
+  const [paymentElementLoadState, setPaymentElementLoadState] = useState3("loading");
   const [directPaypalReady, setDirectPaypalReady] = useState3(false);
   const [inAppBrowserDetected, setInAppBrowserDetected] = useState3();
   useEffect4(() => {
     setInAppBrowserDetected(isInAppBrowser());
   }, []);
-  const directPaypalConfigured = !!directPaypal?.clientId;
-  const shouldShowPayPal = showPayPal && (directPaypalConfigured || inAppBrowserDetected === false);
-  const shouldShowWallets = showWallets;
+  const shouldShowPayPal = showPayPal && (directPaypalConfigured || (hasEnabledMethodsPayload ? paypalEnabled : inAppBrowserDetected === false));
+  const shouldShowWallets = showStripe && showWallets;
   const shouldRenderDirectPayPal = shouldShowPayPal && directPaypalConfigured;
   const shouldRenderStripePayPal = shouldShowPayPal && !directPaypalConfigured && !!paypalStripeInstance;
   const shouldRenderWallets = shouldShowWallets && !!stripeInstance;
+  const shouldRenderPaymentElement = showStripe && hasEnabledMethods && paymentElementMethodsForCurrency.length > 0 && !!stripeInstance;
   const shouldDisplayPayPalRow = shouldRenderDirectPayPal ? directPaypalReady : shouldRenderStripePayPal && isExpressCheckoutRowVisible(paypalLoadState);
   const shouldDisplayWalletRow = shouldRenderWallets && isExpressCheckoutRowVisible(walletLoadState);
+  const shouldDisplayPaymentElementRow = shouldRenderPaymentElement && paymentElementLoadState !== "load_error";
+  const validationFiredRef = useRef3(false);
+  useEffect4(() => {
+    if (validationFiredRef.current) return;
+    if (!showStripe && !showPayPal) {
+      validationFiredRef.current = true;
+      const err = new FloPayError3(
+        "FloPay: both `showStripe` and `showPayPal` are false \u2014 nothing to render.",
+        "validation_error"
+      );
+      onError?.(err);
+      updateError(err.message);
+    } else if (!showStripe && showPayPal && !directPaypalConfigured && !paypalStripeInstance) {
+      validationFiredRef.current = true;
+      const err = new FloPayError3(
+        "FloPay: `showStripe` is false and no PayPal gateway is configured for this session \u2014 nothing to render.",
+        "validation_error"
+      );
+      onError?.(err);
+      updateError(err.message);
+    }
+  }, [showStripe, showPayPal, directPaypalConfigured, paypalStripeInstance, onError, updateError]);
+  const deprecationLoggedRef = useRef3(false);
+  useEffect4(() => {
+    if (deprecationLoggedRef.current) return;
+    if (!hasEnabledMethods) return;
+    const stale = [];
+    if (showApplePay !== true) stale.push("showApplePay");
+    if (showGooglePay !== true) stale.push("showGooglePay");
+    if (stale.length === 0) return;
+    deprecationLoggedRef.current = true;
+    console.warn(
+      `[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 = useCallback((value) => {
     setFullName(value);
     onFullNameChange?.(value);
@@ -2191,24 +2947,75 @@ function SplitCardFormInner({
       }
     }
   }), [flopay, dispatchTokenizedBody, onError, updateError, emitDecline]);
+  const stripeResumeAttemptedRef = useRef3(false);
   useEffect4(() => {
-    if (typeof window === "undefined") return;
-    const stored = localStorage.getItem(WALLET_RESUME_KEY);
-    if (!stored) return;
-    try {
-      const payload = JSON.parse(stored);
-      if (payload.sessionId === sessionId) {
-        localStorage.removeItem(WALLET_RESUME_KEY);
-        dispatchTokenizedBody({
-          id: payload.tokenId,
-          type: payload.tokenType,
-          threeDSecureActionResultTokenId: payload.paymentIntentId
-        });
+    if (typeof window === "undefined" || stripeResumeAttemptedRef.current) return;
+    const params = new URLSearchParams(window.location.search);
+    const paymentIntentId = params.get("payment_intent");
+    const clientSecret = params.get("payment_intent_client_secret");
+    const redirectStatus = params.get("redirect_status");
+    if (!paymentIntentId || !clientSecret) return;
+    const readPayload = (key) => {
+      const raw = localStorage.getItem(key);
+      if (!raw) return null;
+      try {
+        return JSON.parse(raw);
+      } catch {
+        localStorage.removeItem(key);
+        return null;
       }
-    } catch {
-      localStorage.removeItem(WALLET_RESUME_KEY);
-    }
-  }, [sessionId, dispatchTokenizedBody]);
+    };
+    const payload = readPayload(STRIPE_RESUME_KEY) ?? readPayload(LEGACY_WALLET_RESUME_KEY);
+    if (payload?.sessionId && payload.sessionId !== sessionId) return;
+    stripeResumeAttemptedRef.current = true;
+    localStorage.removeItem(STRIPE_RESUME_KEY);
+    localStorage.removeItem(LEGACY_WALLET_RESUME_KEY);
+    const cleanedUrl = new URL(window.location.href);
+    cleanedUrl.searchParams.delete("payment_intent");
+    cleanedUrl.searchParams.delete("payment_intent_client_secret");
+    cleanedUrl.searchParams.delete("redirect_status");
+    window.history.replaceState({}, "", cleanedUrl.toString());
+    const paymentMethodType = payload?.paymentMethodType ?? payload?.tokenType ?? "card";
+    const declineMethod = "card";
+    (async () => {
+      const rawProvider = flopay?.getRawProvider();
+      if (!rawProvider) {
+        const message = "Payment is not available \u2014 please refresh and try again.";
+        updateError(message);
+        emitDecline(declineMethod, message);
+        return;
+      }
+      if (redirectStatus === "failed") {
+        const message = "Payment was declined. Please try again.";
+        updateError(message);
+        emitDecline(declineMethod, message);
+        return;
+      }
+      const { paymentIntent, error: error2 } = await rawProvider.retrievePaymentIntent(clientSecret);
+      if (error2) {
+        const message = error2.message ?? "Failed to retrieve payment status.";
+        updateError(message);
+        emitDecline(declineMethod, message, { code: error2.code });
+        return;
+      }
+      const piStatus = paymentIntent?.status;
+      const successful = piStatus === "succeeded" || piStatus === "requires_capture" || piStatus === "processing";
+      if (!paymentIntent || !successful) {
+        const message = piStatus === "canceled" ? "Payment was canceled." : "Payment was not completed. Please try again.";
+        updateError(message);
+        emitDecline(declineMethod, message, { code: piStatus ?? "missing_payment_intent" });
+        return;
+      }
+      const resolvedPmId = typeof paymentIntent.payment_method === "string" ? paymentIntent.payment_method : paymentIntent.payment_method?.id;
+      dispatchTokenizedBody({
+        id: resolvedPmId ?? payload?.paymentMethodId ?? payload?.tokenId ?? paymentIntent.id,
+        type: "card",
+        threeDSecureActionResultTokenId: paymentIntent.id,
+        gateway: payload?.gateway ?? "stripe",
+        paymentMethodType
+      });
+    })();
+  }, [sessionId, dispatchTokenizedBody, flopay, updateError, emitDecline]);
   const handleSubmit = useCallback(
     async (e) => {
       e.preventDefault();
@@ -2491,17 +3298,23 @@ function SplitCardFormInner({
       /* @__PURE__ */ jsx6("div", { style: {
         flex: 1,
         backgroundColor: cardInputBg,
-        border: `1px solid ${resolvedBorder}`,
+        // Longhand only — mixing `border` shorthand with per-side
+        // overrides triggers React's "shorthand vs longhand" warning
+        // because render order isn't deterministic.
         borderTop: "none",
         borderRight: "none",
+        borderBottom: `1px solid ${resolvedBorder}`,
+        borderLeft: `1px solid ${resolvedBorder}`,
         borderBottomLeftRadius: "8px",
         padding: "10px"
       }, children: /* @__PURE__ */ jsx6(CardExpiryElement, { options: stripeElementStyle }) }),
       /* @__PURE__ */ jsx6("div", { style: {
         flex: 1,
         backgroundColor: cardInputBg,
-        border: `1px solid ${resolvedBorder}`,
         borderTop: "none",
+        borderRight: `1px solid ${resolvedBorder}`,
+        borderBottom: `1px solid ${resolvedBorder}`,
+        borderLeft: `1px solid ${resolvedBorder}`,
         borderBottomRightRadius: "8px",
         padding: "10px"
       }, children: /* @__PURE__ */ jsx6(CardCvcElement, { options: stripeElementStyle }) })
@@ -2593,7 +3406,10 @@ function SplitCardFormInner({
           isAVSFieldVisible(avsConfig.city, cc) && /* @__PURE__ */ jsx6("div", { style: {
             flex: 1,
             backgroundColor: cardInputBg,
-            border: `1px solid ${resolvedBorder}`,
+            borderTop: `1px solid ${resolvedBorder}`,
+            borderRight: `1px solid ${resolvedBorder}`,
+            borderBottom: `1px solid ${resolvedBorder}`,
+            borderLeft: `1px solid ${resolvedBorder}`,
             padding: "10px",
             borderTopLeftRadius: "8px",
             borderBottomLeftRadius: "8px",
@@ -2670,7 +3486,10 @@ function SplitCardFormInner({
           isAVSFieldVisible(avsConfig.country, cc) && /* @__PURE__ */ jsx6("div", { style: {
             flex: avsLayoutProp === "row" ? 1 : void 0,
             backgroundColor: cardInputBg,
-            border: `1px solid ${resolvedBorder}`,
+            borderTop: `1px solid ${resolvedBorder}`,
+            borderRight: `1px solid ${resolvedBorder}`,
+            borderBottom: `1px solid ${resolvedBorder}`,
+            borderLeft: `1px solid ${resolvedBorder}`,
             padding: "10px",
             ...avsLayoutProp === "row" && isAVSFieldVisible(avsConfig.postal_code, cc) ? { borderRadius: "0", borderTopLeftRadius: "8px", borderBottomLeftRadius: "8px", borderRight: "none" } : { borderRadius: "8px" },
             ...isButtons && bStyles.countrySelect ? bStyles.countrySelect : {}
@@ -2765,11 +3584,65 @@ function SplitCardFormInner({
       }
     )
   ] });
+  const gateDebugStyle = {
+    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"
+  };
+  const renderDirectPaypalGateDebug = (testId) => {
+    if (!debug) return null;
+    if (!showPayPal || !directPaypalConfigured) {
+      return /* @__PURE__ */ jsx6("pre", { "data-testid": testId, style: gateDebugStyle, children: "FloPay/DirectPayPal-debug - not enabled" });
+    }
+    return /* @__PURE__ */ jsx6("pre", { "data-testid": testId, style: gateDebugStyle, children: [
+      "FloPay/DirectPayPal-debug (parent gate)",
+      `  showPayPal=${showPayPal}`,
+      `  directPaypalConfigured=${directPaypalConfigured}`,
+      `  inAppBrowserDetected=${String(inAppBrowserDetected)}`,
+      `  shouldRenderDirectPayPal=${shouldRenderDirectPayPal}`,
+      `  shouldRenderStripePayPal=${shouldRenderStripePayPal}`,
+      `  hasPaypalStripeInstance=${!!paypalStripeInstance}`
+    ].join("\n") });
+  };
+  const renderStripeGateDebug = (testId) => {
+    if (!debug) return null;
+    if (!showStripe || !stripeInstance) {
+      return /* @__PURE__ */ jsx6("pre", { "data-testid": testId, style: gateDebugStyle, children: "FloPay/Stripe-debug - not enabled" });
+    }
+    return /* @__PURE__ */ jsx6("pre", { "data-testid": testId, style: gateDebugStyle, children: [
+      "FloPay/Stripe-debug (parent gate)",
+      `  showStripe=${showStripe}`,
+      `  currency=${currency}`,
+      `  amountInCents=${amountInCents}`,
+      `  enabledPaymentMethods: ${JSON.stringify(enabledPaymentMethods ?? [])}`,
+      `  enabledPaymentMethodsProvided=${hasEnabledMethodsPayload}`,
+      `  hasEnabledMethods=${hasEnabledMethods}`,
+      `  expressMethods: ${JSON.stringify(expressMethods)}`,
+      `  walletExpressMethods: ${JSON.stringify(walletExpressMethods)}`,
+      `  paymentElementMethods: ${JSON.stringify(paymentElementMethods)}`,
+      `  paymentElementMethodsForCurrency: ${JSON.stringify(paymentElementMethodsForCurrency)}`,
+      `  hasStripeInstance=${!!stripeInstance}`,
+      `  shouldRenderWallets=${shouldRenderWallets}`,
+      `  shouldRenderPaymentElement=${shouldRenderPaymentElement}`
+    ].join("\n") });
+  };
+  const isApmView = viewState === "apm-expanding" || viewState === "apm-form" || viewState === "apm-collapsing";
+  const apmAnim = viewState === "apm-expanding" ? `flopay-card-enter ${TRANSITION_MS}ms cubic-bezier(0, 0, 0.2, 1) both` : viewState === "apm-collapsing" ? `flopay-card-exit ${TRANSITION_MS}ms cubic-bezier(0.4, 0, 0.2, 1) both` : void 0;
+  const apmInlineOptions = expandedApmMethod ? {
+    ...paymentElementBaseOptions,
+    paymentMethodTypes: [expandedApmMethod]
+  } : null;
   if (layout === "buttons") {
-    const isButtonsView = viewState === "buttons" || viewState === "expanding";
+    const isButtonsView = viewState === "buttons" || viewState === "expanding" || viewState === "apm-expanding";
     const isCardView = viewState === "expanding" || viewState === "card" || viewState === "collapsing";
     const cardButtonSizing = cardButtonContent === void 0 ? { boxSizing: "border-box", height: DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT, padding: "0 1rem" } : { padding: "0.9rem 1rem" };
-    const buttonsAnim = viewState === "expanding" ? `flopay-buttons-exit ${TRANSITION_MS}ms cubic-bezier(0.4, 0, 0.2, 1) both` : viewState === "collapsing" ? `flopay-buttons-enter ${TRANSITION_MS}ms cubic-bezier(0, 0, 0.2, 1) both` : void 0;
+    const 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__ */ jsx6(FloPayKeyframes, {}),
@@ -2790,32 +3663,8 @@ function SplitCardFormInner({
               ...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")
-                }
-              ),
+              renderDirectPaypalGateDebug("flopay-direct-paypal-gate-debug"),
+              renderStripeGateDebug("flopay-stripe-gate-debug"),
               shouldRenderDirectPayPal && directPaypal && /* @__PURE__ */ jsxs4(Fragment2, { children: [
                 paypalDirectRetry && /* @__PURE__ */ jsx6(
                   "div",
@@ -2870,7 +3719,8 @@ function SplitCardFormInner({
                   onButtonClick,
                   onDecline,
                   runBeforeButtonClick,
-                  onLoadStateChange: setPaypalLoadState
+                  onLoadStateChange: setPaypalLoadState,
+                  placeholderBorderRadius: bStyles.cardButton?.borderRadius ?? resolvedBorderRadius
                 }
               ) }),
               shouldRenderWallets ? /* @__PURE__ */ jsx6(StripeElements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ jsx6(
@@ -2879,17 +3729,48 @@ function SplitCardFormInner({
                   sessionId,
                   email: resolvedAccount.email,
                   billingApiUrl: resolvedBillingApiUrl,
-                  showApplePay,
-                  showGooglePay,
+                  expressMethods: walletExpressMethods,
+                  onTokenizedBody: dispatchTokenizedBody,
+                  onErrorChange: updateError,
+                  onButtonClick,
+                  onDecline,
+                  runBeforeButtonClick,
+                  onLoadStateChange: setWalletLoadState,
+                  placeholderBorderRadius: bStyles.cardButton?.borderRadius ?? resolvedBorderRadius
+                }
+              ) }) : shouldShowWallets ? /* @__PURE__ */ jsx6("div", { style: { height: DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT, borderRadius: bStyles.cardButton?.borderRadius ?? resolvedBorderRadius, background: "#e5e7eb", animation: "flopay-pulse 1.5s ease-in-out infinite" } }) : null,
+              shouldRenderPaymentElement && /* @__PURE__ */ jsx6(
+                StripePaymentElementInner,
+                {
+                  sessionId,
+                  email: resolvedAccount.email,
+                  billingName: [resolvedAccount.firstName, resolvedAccount.lastName].filter(Boolean).join(" ").trim() || void 0,
+                  billingApiUrl: resolvedBillingApiUrl,
+                  paymentElementMethods: paymentElementMethodsForCurrency,
+                  stripeInstance,
+                  paymentElementBaseOptions,
                   onTokenizedBody: dispatchTokenizedBody,
                   onErrorChange: updateError,
                   onButtonClick,
                   onDecline,
                   runBeforeButtonClick,
-                  onLoadStateChange: setWalletLoadState
+                  onLoadStateChange: setPaymentElementLoadState,
+                  isProcessing: isSubmitting,
+                  submitButtonColor: resolvedPrimaryColor,
+                  submitButtonBorderRadius: resolvedBorderRadius,
+                  submitButtonStyle: bStyles.submitButton,
+                  onExpandApm: expandToApm,
+                  expandedApmMethod,
+                  themeId: theme,
+                  buttonAppearance: {
+                    backgroundColor: bStyles.cardButton?.backgroundColor,
+                    borderColor: bStyles.cardInputBorder,
+                    textColor: bStyles.cardButton?.color,
+                    borderRadius: bStyles.cardButton?.borderRadius
+                  }
                 }
-              ) }) : 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(
+              ),
+              showStripe && /* @__PURE__ */ jsx6(
                 "button",
                 {
                   type: "button",
@@ -2904,10 +3785,21 @@ function SplitCardFormInner({
                   style: {
                     width: "100%",
                     ...cardButtonSizing,
-                    backgroundColor: "white",
-                    color: "#262833",
-                    border: "1px solid #d1d5db",
-                    borderRadius: "8px",
+                    // `bStyles.cardButton` first — supplies the bundle's
+                    // padding / typography / border-radius — then the
+                    // primary surface overrides on top, so the card button
+                    // ends up wearing the *submit* button's colours rather
+                    // than the bundle's neutral white-tile `cardButton`
+                    // colours. Without this order flip, every non-classic
+                    // bundle's `cardButton.backgroundColor` was winning
+                    // over the primary fill we just derived above it.
+                    ...bStyles.cardButton,
+                    ...derivePrimaryTileStyle({
+                      themeBundle,
+                      resolvedPrimaryColor,
+                      resolvedBorderRadius,
+                      submitButtonStyle: bStyles.submitButton
+                    }),
                     fontSize: bStyles.cardButtonFontSize ?? "0.95rem",
                     fontWeight: 600,
                     cursor: isSubmitting ? "not-allowed" : "pointer",
@@ -2916,10 +3808,8 @@ function SplitCardFormInner({
                     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
+                    opacity: isSubmitting ? 0.6 : 1
                   },
                   onMouseDown: (e) => {
                     e.currentTarget.style.transform = "scale(0.985)";
@@ -2950,44 +3840,209 @@ function SplitCardFormInner({
             ]
           }
         ),
-        isCardView && /* @__PURE__ */ jsx6("div", { style: {
+        showStripe && isCardView && /* @__PURE__ */ jsx6("div", { style: {
           gridArea: "1 / 1",
           ...cardAnim ? { animation: cardAnim } : {},
           ...viewState === "collapsing" ? { pointerEvents: "none" } : {}
-        }, children: cardFormBlock })
+        }, children: cardFormBlock }),
+        showStripe && isApmView && expandedApmMethod && apmInlineOptions && stripeInstance && /* @__PURE__ */ jsx6("div", { style: {
+          gridArea: "1 / 1",
+          ...apmAnim ? { animation: apmAnim } : {},
+          ...viewState === "apm-collapsing" ? { pointerEvents: "none" } : {}
+        }, children: /* @__PURE__ */ jsxs4("div", { style: {
+          backgroundColor: cardBg,
+          borderRadius: containerRadius,
+          ...containerOverrides,
+          padding: containerPadding
+        }, children: [
+          /* @__PURE__ */ jsxs4("div", { style: {
+            display: "flex",
+            alignItems: "center",
+            padding: "0.75rem 0 0.625rem"
+          }, children: [
+            /* @__PURE__ */ jsxs4(
+              "button",
+              {
+                type: "button",
+                "data-testid": "flopay-apm-back-button",
+                onClick: collapseFromApm,
+                style: {
+                  display: "inline-flex",
+                  alignItems: "center",
+                  gap: hideBackButtonLabel ? 0 : "0.5rem",
+                  background: "none",
+                  border: "none",
+                  cursor: "pointer",
+                  color: "#4b5563",
+                  fontSize: bStyles.backButtonFontSize ?? "0.85rem",
+                  fontWeight: 500,
+                  padding: 0,
+                  transition: "color 0.15s",
+                  flexShrink: 0,
+                  ...bStyles.backButton
+                },
+                "aria-label": "Back to payment methods",
+                children: [
+                  /* @__PURE__ */ jsx6("span", { style: {
+                    display: "inline-flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    width: 28,
+                    height: 28,
+                    borderRadius: "50%",
+                    backgroundColor: "#f3f4f6",
+                    transition: "background-color 0.15s",
+                    ...bStyles.backButtonIcon
+                  }, children: /* @__PURE__ */ jsx6("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx6("path", { d: "M15 18l-6-6 6-6" }) }) }),
+                  /* @__PURE__ */ jsx6(BackButtonContentSlot, { content: cardBackButtonContent })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx6("div", { style: {
+              flex: 1,
+              textAlign: "center",
+              fontWeight: 600,
+              fontSize: bStyles.titleFontSize ?? "1.05rem",
+              color: resolvedTitleColor,
+              paddingRight: 80,
+              ...bStyles.title
+            }, children: `Pay with ${getStripeMethodDisplayName(expandedApmMethod)}` })
+          ] }),
+          /* @__PURE__ */ jsx6(
+            StripeElements,
+            {
+              stripe: stripeInstance,
+              options: apmInlineOptions,
+              children: /* @__PURE__ */ jsx6(
+                StripeMethodInlineForm,
+                {
+                  method: expandedApmMethod,
+                  sessionId,
+                  email: resolvedAccount.email,
+                  billingName: [resolvedAccount.firstName, resolvedAccount.lastName].filter(Boolean).join(" ").trim() || void 0,
+                  billingApiUrl: resolvedBillingApiUrl,
+                  onTokenizedBody: dispatchTokenizedBody,
+                  onErrorChange: updateError,
+                  onDecline,
+                  onCancel: collapseFromApm,
+                  runBeforeButtonClick,
+                  onButtonClick,
+                  isProcessing: isSubmitting,
+                  submitButtonColor: resolvedPrimaryColor,
+                  submitButtonBorderRadius: resolvedBorderRadius,
+                  submitButtonStyle: bStyles.submitButton
+                }
+              )
+            },
+            expandedApmMethod
+          )
+        ] }) })
       ] })
     ] });
   }
+  if (isApmView && expandedApmMethod && apmInlineOptions && stripeInstance && showStripe) {
+    return /* @__PURE__ */ jsxs4("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
+      /* @__PURE__ */ jsx6(FloPayKeyframes, {}),
+      overlayStatus && /* @__PURE__ */ jsx6(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
+      /* @__PURE__ */ jsx6("div", { style: {
+        ...apmAnim ? { animation: apmAnim } : {},
+        ...viewState === "apm-collapsing" ? { pointerEvents: "none" } : {}
+      }, children: /* @__PURE__ */ jsxs4("div", { style: {
+        backgroundColor: cardBg,
+        borderRadius: containerRadius,
+        ...containerOverrides,
+        padding: containerPadding
+      }, children: [
+        /* @__PURE__ */ jsxs4("div", { style: {
+          display: "flex",
+          alignItems: "center",
+          padding: "0.75rem 0 0.625rem"
+        }, children: [
+          /* @__PURE__ */ jsxs4(
+            "button",
+            {
+              type: "button",
+              "data-testid": "flopay-apm-back-button-default",
+              onClick: collapseFromApm,
+              style: {
+                display: "inline-flex",
+                alignItems: "center",
+                gap: hideBackButtonLabel ? 0 : "0.5rem",
+                background: "none",
+                border: "none",
+                cursor: "pointer",
+                color: "#4b5563",
+                fontSize: bStyles.backButtonFontSize ?? "0.85rem",
+                fontWeight: 500,
+                padding: 0,
+                transition: "color 0.15s",
+                flexShrink: 0,
+                ...bStyles.backButton
+              },
+              "aria-label": "Back to payment methods",
+              children: [
+                /* @__PURE__ */ jsx6("span", { style: {
+                  display: "inline-flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  width: 28,
+                  height: 28,
+                  borderRadius: "50%",
+                  backgroundColor: "#f3f4f6",
+                  transition: "background-color 0.15s",
+                  ...bStyles.backButtonIcon
+                }, children: /* @__PURE__ */ jsx6("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx6("path", { d: "M15 18l-6-6 6-6" }) }) }),
+                /* @__PURE__ */ jsx6(BackButtonContentSlot, { content: cardBackButtonContent })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx6("div", { style: {
+            flex: 1,
+            textAlign: "center",
+            fontWeight: 600,
+            fontSize: bStyles.titleFontSize ?? "1.05rem",
+            color: resolvedTitleColor,
+            paddingRight: 80,
+            ...bStyles.title
+          }, children: `Pay with ${getStripeMethodDisplayName(expandedApmMethod)}` })
+        ] }),
+        /* @__PURE__ */ jsx6(
+          StripeElements,
+          {
+            stripe: stripeInstance,
+            options: apmInlineOptions,
+            children: /* @__PURE__ */ jsx6(
+              StripeMethodInlineForm,
+              {
+                method: expandedApmMethod,
+                sessionId,
+                email: resolvedAccount.email,
+                billingName: [resolvedAccount.firstName, resolvedAccount.lastName].filter(Boolean).join(" ").trim() || void 0,
+                billingApiUrl: resolvedBillingApiUrl,
+                onTokenizedBody: dispatchTokenizedBody,
+                onErrorChange: updateError,
+                onDecline,
+                onCancel: collapseFromApm,
+                runBeforeButtonClick,
+                onButtonClick,
+                isProcessing: isSubmitting,
+                submitButtonColor: resolvedPrimaryColor,
+                submitButtonBorderRadius: resolvedBorderRadius,
+                submitButtonStyle: bStyles.submitButton
+              }
+            )
+          },
+          expandedApmMethod
+        )
+      ] }) })
+    ] });
+  }
   return /* @__PURE__ */ jsxs4("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
     /* @__PURE__ */ jsx6(FloPayKeyframes, {}),
     overlayStatus && /* @__PURE__ */ jsx6(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
     /* @__PURE__ */ jsxs4("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
-      debug && showPayPal && /* @__PURE__ */ jsx6(
-        "pre",
-        {
-          "data-testid": "flopay-direct-paypal-gate-debug-default",
-          style: {
-            margin: 0,
-            padding: "6px 8px",
-            background: "#eef2ff",
-            border: "1px solid #c7d2fe",
-            borderRadius: 6,
-            color: "#111827",
-            font: "11px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace",
-            whiteSpace: "pre-wrap",
-            wordBreak: "break-word"
-          },
-          children: [
-            "FloPay/DirectPayPal-debug (parent gate)",
-            `  showPayPal=${showPayPal}`,
-            `  directPaypalConfigured=${directPaypalConfigured}`,
-            `  inAppBrowserDetected=${String(inAppBrowserDetected)}`,
-            `  shouldRenderDirectPayPal=${shouldRenderDirectPayPal}`,
-            `  shouldRenderStripePayPal=${shouldRenderStripePayPal}`,
-            `  hasPaypalStripeInstance=${!!paypalStripeInstance}`
-          ].join("\n")
-        }
-      ),
+      renderDirectPaypalGateDebug("flopay-direct-paypal-gate-debug-default"),
+      renderStripeGateDebug("flopay-stripe-gate-debug-default"),
       shouldRenderDirectPayPal && directPaypal && /* @__PURE__ */ jsxs4(Fragment2, { children: [
         paypalDirectRetry && /* @__PURE__ */ jsx6(
           "div",
@@ -3042,7 +4097,8 @@ function SplitCardFormInner({
           onButtonClick,
           onDecline,
           runBeforeButtonClick,
-          onLoadStateChange: setPaypalLoadState
+          onLoadStateChange: setPaypalLoadState,
+          placeholderBorderRadius: bStyles.cardButton?.borderRadius ?? resolvedBorderRadius
         }
       ) }),
       shouldRenderWallets && /* @__PURE__ */ jsx6(StripeElements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ jsx6(
@@ -3051,18 +4107,49 @@ function SplitCardFormInner({
           sessionId,
           email: resolvedAccount.email,
           billingApiUrl: resolvedBillingApiUrl,
-          showApplePay,
-          showGooglePay,
+          expressMethods: walletExpressMethods,
+          onTokenizedBody: dispatchTokenizedBody,
+          onErrorChange: updateError,
+          onButtonClick,
+          onDecline,
+          runBeforeButtonClick,
+          onLoadStateChange: setWalletLoadState,
+          placeholderBorderRadius: bStyles.cardButton?.borderRadius ?? resolvedBorderRadius
+        }
+      ) }),
+      shouldRenderPaymentElement && /* @__PURE__ */ jsx6(
+        StripePaymentElementInner,
+        {
+          sessionId,
+          email: resolvedAccount.email,
+          billingName: [resolvedAccount.firstName, resolvedAccount.lastName].filter(Boolean).join(" ").trim() || void 0,
+          billingApiUrl: resolvedBillingApiUrl,
+          paymentElementMethods: paymentElementMethodsForCurrency,
+          stripeInstance,
+          paymentElementBaseOptions,
           onTokenizedBody: dispatchTokenizedBody,
           onErrorChange: updateError,
           onButtonClick,
           onDecline,
           runBeforeButtonClick,
-          onLoadStateChange: setWalletLoadState
+          onLoadStateChange: setPaymentElementLoadState,
+          isProcessing: isSubmitting,
+          submitButtonColor: resolvedPrimaryColor,
+          submitButtonBorderRadius: resolvedBorderRadius,
+          submitButtonStyle: bStyles.submitButton,
+          themeId: theme,
+          onExpandApm: expandToApm,
+          expandedApmMethod,
+          buttonAppearance: {
+            backgroundColor: bStyles.cardButton?.backgroundColor,
+            borderColor: bStyles.cardInputBorder,
+            textColor: bStyles.cardButton?.color,
+            borderRadius: bStyles.cardButton?.borderRadius
+          }
         }
-      ) })
+      )
     ] }),
-    (shouldDisplayWalletRow || shouldDisplayPayPalRow) && /* @__PURE__ */ jsxs4("div", { style: {
+    showStripe && (shouldDisplayWalletRow || shouldDisplayPayPalRow || shouldDisplayPaymentElementRow) && /* @__PURE__ */ jsxs4("div", { style: {
       display: "flex",
       alignItems: "center",
       gap: "0.75rem",
@@ -3074,7 +4161,7 @@ function SplitCardFormInner({
       /* @__PURE__ */ jsx6("span", { children: "or pay with card" }),
       /* @__PURE__ */ jsx6("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } })
     ] }),
-    cardFormBlock
+    showStripe && cardFormBlock
   ] });
 }
 
@@ -3607,6 +4694,7 @@ function hasInlineSessionPatchData(patch) {
 }
 function FloPayCheckout({
   sessionId: sessionIdProp,
+  nonce: nonceProp,
   createSession: createSessionParams,
   billingApiUrl,
   appearance: appearanceOverride,
@@ -3620,6 +4708,7 @@ function FloPayCheckout({
   onCountryChange,
   onZipChange,
   showPayPal = true,
+  showStripe = true,
   showApplePay = true,
   showGooglePay = true,
   debug = false,
@@ -3966,6 +5055,14 @@ function FloPayCheckout({
       },
       successUrl: params?.successUrl,
       cancelUrl: params?.cancelUrl,
+      // Unified products[] is the post-#760 wire shape. Must be included or
+      // carts that only set `products` (no legacy items/subscriptions) all
+      // hash to the same key — the bootstrap effect's `createSessionHash`
+      // dep then never changes when products change, the session-id cache
+      // hits the wrong session, and the backend's enabledPaymentMethods
+      // result for the *previous* cart sticks until a fresh page-load with
+      // the session cache cleared.
+      p: params?.products?.map((x) => `${x.type ?? ""}:${x.code ?? x.providerItemId ?? x.providerPlanId ?? ""}:${x.totalAmount ?? ""}:${x.overrideAmount ?? ""}:${x.quantity ?? 1}`).sort(),
       i: params?.items?.map((x) => `${x.code ?? x.providerItemId ?? ""}:${x.totalAmount ?? ""}:${x.overrideAmount ?? ""}:${x.quantity ?? 1}`).sort(),
       s: params?.subscriptions?.map((x) => `${x.code ?? x.providerPlanId ?? ""}:${x.totalAmount ?? ""}:${x.overrideAmount ?? ""}:${x.quantity ?? 1}`).sort(),
       couponCodes: params?.couponCodes,
@@ -4192,7 +5289,7 @@ function FloPayCheckout({
     async function init() {
       try {
         const api = new PaymentAPI4(resolvedBillingUrl);
-        const result = await api.getUnifiedCheckoutSession(activeSessionId);
+        const result = await api.getUnifiedCheckoutSession(activeSessionId, nonceProp);
         if (cancelled) return;
         setUnified(result);
         const sess = result.data.session ?? null;
@@ -4279,6 +5376,7 @@ function FloPayCheckout({
     createSessionHash,
     effectiveCreateSessionMode,
     initSessionDependency,
+    nonceProp,
     runSavedPaymentFlow
   ]);
   const handleConfirmCheckout = useCallback2(async () => {
@@ -4352,17 +5450,18 @@ function FloPayCheckout({
       ] });
     }
     if (layout === "buttons") {
+      const bundleRadius = themeBundle?.buttonsLayout?.cardButton?.borderRadius ?? themeBundle?.appearance.variables?.borderRadius ?? 8;
       const skeletonBar = (h) => /* @__PURE__ */ jsx7("div", { style: {
         height: h,
-        borderRadius: 8,
+        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: [
           showPayPal && skeletonBar(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
-          (showApplePay || showGooglePay) && skeletonBar(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
-          skeletonBar(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
+          showStripe && (showApplePay || showGooglePay) && skeletonBar(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
+          showStripe && skeletonBar(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
           /* @__PURE__ */ jsx7("style", { children: `@keyframes flopay-loading-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
         ] }),
         modeOverlay
@@ -4390,6 +5489,8 @@ function FloPayCheckout({
     return /* @__PURE__ */ jsx7(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx7(
       "div",
       {
+        role: "alert",
+        "data-testid": "flopay-load-error",
         style: {
           padding: 24,
           textAlign: "center",
@@ -4407,6 +5508,7 @@ function FloPayCheckout({
         {
           onButtonClick,
           showPayPal,
+          showStripe,
           showApplePay,
           showGooglePay,
           theme,
@@ -4551,6 +5653,8 @@ function FloPayCheckout({
         onErrorChange: setModeError,
         onFullNameChange,
         showPayPal,
+        showStripe,
+        enabledPaymentMethods: unified?.data.stripe?.enabledPaymentMethods,
         showApplePay,
         showGooglePay,
         layout,
@@ -4615,6 +5719,7 @@ function InterimButtonsView({
   cardOpen,
   errorMessage,
   showPayPal,
+  showStripe = true,
   showApplePay,
   showGooglePay,
   theme,
@@ -4646,9 +5751,10 @@ function InterimButtonsView({
       title: { ...base.title, ...stylesOverride.title }
     };
   }, [themeBundle, buttonsTheme, stylesOverride]);
+  const skeletonRadius = themeBundle?.buttonsLayout?.cardButton?.borderRadius ?? themeBundle?.appearance.variables?.borderRadius ?? 8;
   const skeleton = (h) => /* @__PURE__ */ jsx7("div", { style: {
     height: h,
-    borderRadius: 8,
+    borderRadius: skeletonRadius,
     background: "#e5e7eb",
     animation: "flopay-interim-pulse 1.5s ease-in-out infinite"
   } });
@@ -4719,8 +5825,28 @@ function InterimButtonsView({
       ] }),
       /* @__PURE__ */ jsx7("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTopLeftRadius: 8, borderTopRightRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx7("div", { style: { width: "60%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
       /* @__PURE__ */ jsxs5("div", { style: { display: "flex" }, children: [
-        /* @__PURE__ */ jsx7("div", { style: { flex: 1, backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTop: "none", borderRight: "none", borderBottomLeftRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx7("div", { style: { width: "50%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
-        /* @__PURE__ */ jsx7("div", { style: { flex: 1, backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTop: "none", borderBottomRightRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx7("div", { style: { width: "40%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) })
+        /* @__PURE__ */ jsx7("div", { style: {
+          flex: 1,
+          backgroundColor: inputBg,
+          borderTop: "none",
+          borderRight: "none",
+          borderBottom: `1px solid ${inputBorder}`,
+          borderLeft: `1px solid ${inputBorder}`,
+          borderBottomLeftRadius: 8,
+          padding: 12,
+          height: 45
+        }, children: /* @__PURE__ */ jsx7("div", { style: { width: "50%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
+        /* @__PURE__ */ jsx7("div", { style: {
+          flex: 1,
+          backgroundColor: inputBg,
+          borderTop: "none",
+          borderRight: `1px solid ${inputBorder}`,
+          borderBottom: `1px solid ${inputBorder}`,
+          borderLeft: `1px solid ${inputBorder}`,
+          borderBottomRightRadius: 8,
+          padding: 12,
+          height: 45
+        }, children: /* @__PURE__ */ jsx7("div", { style: { width: "40%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) })
       ] }),
       /* @__PURE__ */ jsx7("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderRadius: 8, marginTop: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx7("div", { style: { width: "45%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
       /* @__PURE__ */ jsx7("div", { style: {
@@ -4744,8 +5870,8 @@ function InterimButtonsView({
   }
   return /* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
     showPayPal && skeleton(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
-    (showApplePay || showGooglePay) && skeleton(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
-    /* @__PURE__ */ jsx7(
+    showStripe && (showApplePay || showGooglePay) && skeleton(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
+    showStripe && /* @__PURE__ */ jsx7(
       "button",
       {
         type: "button",
@@ -4814,7 +5940,7 @@ import { PaymentAPI as PaymentAPI5 } from "@flopay/js";
 import { FloPayError as FloPayError6 } from "@flopay/shared";
 import { forwardRef as forwardRef2, useCallback as useCallback3, useEffect as useEffect6, useImperativeHandle as useImperativeHandle2, useState as useState5 } from "react";
 import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
-var WALLET_RESUME_KEY2 = "flopay_wallet_resume";
+var WALLET_RESUME_KEY = "flopay_wallet_resume";
 var CheckoutForm = forwardRef2(
   function CheckoutForm2(props, ref) {
     return /* @__PURE__ */ jsx8(CheckoutFormInner, { ...props, innerRef: ref });
@@ -4940,7 +6066,7 @@ function CheckoutFormInner({
             onDecline?.(buildDeclineEvent("paypal", message));
             return;
           }
-          localStorage.setItem(WALLET_RESUME_KEY2, JSON.stringify({
+          localStorage.setItem(WALLET_RESUME_KEY, JSON.stringify({
             sessionId,
             paymentIntentId: "",
             tokenType: "card",
@@ -5016,12 +6142,12 @@ function CheckoutFormInner({
   }), [flopay, dispatchTokenizedBody, onError, updateError, emitDecline]);
   useEffect6(() => {
     if (typeof window === "undefined") return;
-    const stored = localStorage.getItem(WALLET_RESUME_KEY2);
+    const stored = localStorage.getItem(WALLET_RESUME_KEY);
     if (!stored) return;
     try {
       const payload = JSON.parse(stored);
       if (payload.sessionId === sessionId) {
-        localStorage.removeItem(WALLET_RESUME_KEY2);
+        localStorage.removeItem(WALLET_RESUME_KEY);
         dispatchTokenizedBody({
           id: payload.tokenId,
           type: payload.tokenType,
@@ -5029,7 +6155,7 @@ function CheckoutFormInner({
         });
       }
     } catch {
-      localStorage.removeItem(WALLET_RESUME_KEY2);
+      localStorage.removeItem(WALLET_RESUME_KEY);
     }
   }, [sessionId, dispatchTokenizedBody]);
   const handleSubmit = useCallback3(
@@ -5374,10 +6500,12 @@ function resolveCreateSessionDraft(props) {
   if (!props.clientId || !props.account || !props.successUrl || !props.cancelUrl) {
     return null;
   }
+  const hasProducts = props.products != null;
   return {
     clientId: props.clientId,
-    items: props.items,
-    subscriptions: props.subscriptions,
+    products: props.products,
+    items: hasProducts ? void 0 : props.items,
+    subscriptions: hasProducts ? void 0 : props.subscriptions,
     account: props.account,
     successUrl: props.successUrl,
     cancelUrl: props.cancelUrl,
@@ -5395,6 +6523,7 @@ function FloPayAutomaticPaymentButton({
   paymentMethodId: _deprecatedPaymentMethodId,
   checkoutMethod: _deprecatedCheckoutMethod,
   clientId,
+  products,
   items,
   subscriptions,
   account,
@@ -5425,6 +6554,7 @@ function FloPayAutomaticPaymentButton({
     () => resolveCreateSessionDraft({
       createSession,
       clientId,
+      products,
       items,
       subscriptions,
       account,
@@ -5440,6 +6570,7 @@ function FloPayAutomaticPaymentButton({
       clientId,
       couponCodes,
       createSession,
+      products,
       items,
       subscriptions,
       successUrl,
@@ -5728,10 +6859,20 @@ function FloPayAutomaticPaymentButton({
         style: {
           width: "100%",
           ...cardButtonSizing,
-          backgroundColor: "white",
-          color: "#262833",
-          border: "1px solid #d1d5db",
-          borderRadius: "8px",
+          // `bStyles.cardButton` first so the bundle's padding / typography
+          // / radius / shadow come through, then `derivePrimaryTileStyle`
+          // on top so the auto-pay button carries the *submit* button's
+          // background and text colours — making it visually identical to
+          // the "Confirm Payment" / "Pay with X" actions it stands in for.
+          // Inline `style` consumer override stays at the end so explicit
+          // per-button overrides still win.
+          ...bStyles.cardButton,
+          ...derivePrimaryTileStyle({
+            themeBundle,
+            resolvedPrimaryColor: themeBundle?.appearance.variables?.colorPrimary ?? "#4A49FF",
+            resolvedBorderRadius: themeBundle?.appearance.variables?.borderRadius ?? "8px",
+            submitButtonStyle: bStyles.submitButton
+          }),
           fontSize: bStyles.cardButtonFontSize ?? "0.95rem",
           fontWeight: 600,
           cursor: disabled || isProcessing ? "not-allowed" : "pointer",
@@ -5739,11 +6880,9 @@ function FloPayAutomaticPaymentButton({
           alignItems: "center",
           justifyContent: "center",
           gap: "0.625rem",
-          boxShadow: "0 1px 2px rgba(0,0,0,0.04)",
           transition: "border-color 0.2s, box-shadow 0.2s, transform 0.1s",
           position: "relative",
           opacity: disabled || isProcessing ? 0.6 : 1,
-          ...bStyles.cardButton,
           ...style
         },
         onMouseDown: (e) => {