@flopay/react 0.3.1 → 0.3.4

package/dist/index.cjs

@@ -116,13 +116,61 @@ function FloPayProvider({
 }
 
 // src/flopay-checkout.tsx
-var import_react6 = __toESM(require("react"), 1);
+var import_react7 = __toESM(require("react"), 1);
 var import_js = require("@flopay/js");
 var import_shared5 = require("@flopay/shared");
 
-// src/elements.tsx
+// src/card-button-content.tsx
 var import_react3 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
+function DefaultCardButtonContent() {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      "svg",
+      {
+        width: "20",
+        height: "20",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { width: "20", height: "14", x: "2", y: "5", rx: "2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "2", x2: "22", y1: "10", y2: "10" })
+        ]
+      }
+    ),
+    "Credit / Debit Card",
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "svg",
+      {
+        width: "16",
+        height: "16",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "#9ca3af",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        style: { position: "absolute", right: "1rem" },
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M9 18l6-6-6-6" })
+      }
+    )
+  ] });
+}
+function CardButtonContentSlot({
+  content
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: content ?? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DefaultCardButtonContent, {}) });
+}
+
+// src/elements.tsx
+var import_react4 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 function createElementComponent(elementType, displayName) {
   function ElementComponent({
     className,
@@ -135,10 +183,10 @@ function createElementComponent(elementType, displayName) {
     onBlur,
     onEscape
   }) {
-    const containerRef = (0, import_react3.useRef)(null);
-    const elementRef = (0, import_react3.useRef)(null);
-    const { elements } = (0, import_react3.useContext)(FloPayContext);
-    (0, import_react3.useEffect)(() => {
+    const containerRef = (0, import_react4.useRef)(null);
+    const elementRef = (0, import_react4.useRef)(null);
+    const { elements } = (0, import_react4.useContext)(FloPayContext);
+    (0, import_react4.useEffect)(() => {
       if (!elements || !containerRef.current) return;
       let mounted = true;
       (async () => {
@@ -168,7 +216,7 @@ function createElementComponent(elementType, displayName) {
         }
       };
     }, [elements]);
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref: containerRef, className, id, style });
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref: containerRef, className, id, style });
   }
   ElementComponent.displayName = displayName;
   return ElementComponent;
@@ -183,30 +231,30 @@ var AddressElement = createElementComponent("address", "AddressElement");
 // src/split-card-form.tsx
 var import_react_stripe_js = require("@stripe/react-stripe-js");
 var import_shared3 = require("@flopay/shared");
-var import_react5 = require("react");
+var import_react6 = require("react");
 
 // src/hooks.ts
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_shared2 = require("@flopay/shared");
 function useFloPay() {
-  const ctx = (0, import_react4.useContext)(FloPayContext);
+  const ctx = (0, import_react5.useContext)(FloPayContext);
   return ctx.flopay;
 }
 function useElements() {
-  const ctx = (0, import_react4.useContext)(FloPayContext);
+  const ctx = (0, import_react5.useContext)(FloPayContext);
   return ctx.elements;
 }
 function useCheckout() {
-  return (0, import_react4.useContext)(CheckoutContext);
+  return (0, import_react5.useContext)(CheckoutContext);
 }
 function useBillingApiUrl() {
-  const ctx = (0, import_react4.useContext)(FloPayContext);
+  const ctx = (0, import_react5.useContext)(FloPayContext);
   return ctx.billingApiUrl || (0, import_shared2.resolveBillingApiUrl)();
 }
 
 // src/split-card-form.tsx
 var import_shared4 = require("@flopay/shared");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var WALLET_RESUME_KEY = "flopay_wallet_resume";
 var FLOPAY_KEYFRAMES = `
 @keyframes flopay-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
@@ -229,10 +277,10 @@ var FLOPAY_KEYFRAMES = `
 }
 `;
 function FloPayKeyframes() {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("style", { children: FLOPAY_KEYFRAMES });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("style", { children: FLOPAY_KEYFRAMES });
 }
 function ProcessingOverlay({ status, errorMessage }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: {
     position: "fixed",
     inset: 0,
     background: "rgba(0,0,0,0.35)",
@@ -241,7 +289,7 @@ function ProcessingOverlay({ status, errorMessage }) {
     justifyContent: "center",
     zIndex: 1e3,
     backdropFilter: "blur(2px)"
-  }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: {
+  }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: {
     background: "white",
     borderRadius: 12,
     padding: "2rem 2.5rem",
@@ -253,8 +301,8 @@ function ProcessingOverlay({ status, errorMessage }) {
     alignItems: "center",
     gap: 16
   }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { width: 48, height: 48, position: "relative" }, children: [
-      status === "processing" && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { width: 48, height: 48, position: "relative" }, children: [
+      status === "processing" && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
         "svg",
         {
           width: "48",
@@ -264,14 +312,14 @@ function ProcessingOverlay({ status, errorMessage }) {
           xmlns: "http://www.w3.org/2000/svg",
           style: { animation: "flopay-spin 0.8s linear infinite" },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "12", cy: "12", r: "10", stroke: "#e5e7eb", strokeWidth: "3" }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M4 12a8 8 0 018-8v3a5 5 0 00-5 5H4z", fill: "#4A49FF" })
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12", cy: "12", r: "10", stroke: "#e5e7eb", strokeWidth: "3" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M4 12a8 8 0 018-8v3a5 5 0 00-5 5H4z", fill: "#4A49FF" })
           ]
         }
       ),
-      status === "success" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { animation: "flopay-pop 0.4s cubic-bezier(0.34,1.56,0.64,1)" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "12", cy: "12", r: "11", fill: "#22c55e" }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      status === "success" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { animation: "flopay-pop 0.4s cubic-bezier(0.34,1.56,0.64,1)" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12", cy: "12", r: "11", fill: "#22c55e" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "path",
           {
             d: "M7 12.5l3 3 7-7",
@@ -283,9 +331,9 @@ function ProcessingOverlay({ status, errorMessage }) {
           }
         )
       ] }) }),
-      status === "error" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { animation: "flopay-shake 0.4s ease" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "12", cy: "12", r: "11", fill: "#ef4444" }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      status === "error" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { animation: "flopay-shake 0.4s ease" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12", cy: "12", r: "11", fill: "#ef4444" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "path",
           {
             d: "M8 8l8 8M16 8l-8 8",
@@ -297,7 +345,7 @@ function ProcessingOverlay({ status, errorMessage }) {
         )
       ] }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { style: {
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { style: {
       fontSize: 14,
       fontWeight: 600,
       letterSpacing: "0.05em",
@@ -307,7 +355,7 @@ function ProcessingOverlay({ status, errorMessage }) {
       status === "success" && "PAYMENT SUCCESSFUL",
       status === "error" && "PAYMENT FAILED"
     ] }),
-    status === "error" && errorMessage && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: {
+    status === "error" && errorMessage && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { style: {
       fontSize: 13,
       color: "#6b7280",
       fontWeight: 400,
@@ -315,7 +363,7 @@ function ProcessingOverlay({ status, errorMessage }) {
       lineHeight: 1.4,
       margin: 0
     }, children: errorMessage }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("style", { children: `
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("style", { children: `
           @keyframes flopay-spin { to { transform: rotate(360deg); } }
           @keyframes flopay-pop { 0% { transform: scale(0); } 100% { transform: scale(1); } }
           @keyframes flopay-draw { to { stroke-dashoffset: 0; } }
@@ -323,9 +371,9 @@ function ProcessingOverlay({ status, errorMessage }) {
         ` })
   ] }) });
 }
-var SplitCardForm = (0, import_react5.forwardRef)(
+var SplitCardForm = (0, import_react6.forwardRef)(
   function SplitCardForm2(props, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SplitCardFormInner, { ...props, innerRef: ref });
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SplitCardFormInner, { ...props, innerRef: ref });
   }
 );
 function PayPalButtonInner({
@@ -339,11 +387,11 @@ function PayPalButtonInner({
 }) {
   const stripe = (0, import_react_stripe_js.useStripe)();
   const elements = (0, import_react_stripe_js.useElements)();
-  const [ready, setReady] = (0, import_react5.useState)(false);
-  const [submitting, setSubmitting] = (0, import_react5.useState)(false);
-  const paypalResumeAttempted = (0, import_react5.useRef)(false);
+  const [ready, setReady] = (0, import_react6.useState)(false);
+  const [submitting, setSubmitting] = (0, import_react6.useState)(false);
+  const paypalResumeAttempted = (0, import_react6.useRef)(false);
   const baseUrl = billingApiUrl.replace(/\/+$/, "");
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (!stripe || paypalResumeAttempted.current) return;
     const params = new URLSearchParams(window.location.search);
     const paymentIntentId = params.get("payment_intent");
@@ -386,7 +434,7 @@ function PayPalButtonInner({
       }
     })();
   }, [stripe, onTokenizedBody, onErrorChange]);
-  const handlePayPalConfirm = (0, import_react5.useCallback)(async (_event) => {
+  const handlePayPalConfirm = (0, import_react6.useCallback)(async (_event) => {
     if (!stripe || !elements) return;
     onButtonClick?.("paypal");
     try {
@@ -442,8 +490,8 @@ function PayPalButtonInner({
       setSubmitting(false);
     }
   }, [stripe, elements, sessionId, email, baseUrl, onTokenizedBody, onErrorChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       import_react_stripe_js.ExpressCheckoutElement,
       {
         onReady: () => setReady(true),
@@ -461,7 +509,7 @@ function PayPalButtonInner({
         }
       }
     ) }),
-    submitting && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ProcessingOverlay, { status: "processing" })
+    submitting && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ProcessingOverlay, { status: "processing" })
   ] });
 }
 function WalletButtonInner({
@@ -476,10 +524,10 @@ function WalletButtonInner({
 }) {
   const stripe = (0, import_react_stripe_js.useStripe)();
   const elements = (0, import_react_stripe_js.useElements)();
-  const [ready, setReady] = (0, import_react5.useState)(false);
-  const [submitting, setSubmitting] = (0, import_react5.useState)(false);
+  const [ready, setReady] = (0, import_react6.useState)(false);
+  const [submitting, setSubmitting] = (0, import_react6.useState)(false);
   const baseUrl = billingApiUrl.replace(/\/+$/, "");
-  const handleWalletConfirm = (0, import_react5.useCallback)(
+  const handleWalletConfirm = (0, import_react6.useCallback)(
     async (_event) => {
       if (!stripe || !elements) return;
       const walletType = _event.expressPaymentType;
@@ -535,8 +583,8 @@ function WalletButtonInner({
     },
     [stripe, elements, sessionId, email, baseUrl, onTokenizedBody, onErrorChange]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       import_react_stripe_js.ExpressCheckoutElement,
       {
         onReady: () => setReady(true),
@@ -557,7 +605,7 @@ function WalletButtonInner({
         }
       }
     ) }),
-    submitting && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ProcessingOverlay, { status: "processing" })
+    submitting && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ProcessingOverlay, { status: "processing" })
   ] });
 }
 function SplitCardFormInner({
@@ -585,6 +633,7 @@ function SplitCardFormInner({
   layout = "default",
   buttonsTheme,
   buttonsStyles: buttonsStylesOverride,
+  cardButtonContent,
   onButtonClick,
   enableAVS = false,
   avsLayout: avsLayoutProp = "row",
@@ -599,31 +648,31 @@ function SplitCardFormInner({
   const flopay = useFloPay();
   const elements = useElements();
   const contextBillingUrl = useBillingApiUrl();
-  const [processing, setProcessing] = (0, import_react5.useState)(false);
-  const [error, setError] = (0, import_react5.useState)(null);
-  const [is3DSActive, setIs3DSActive] = (0, import_react5.useState)(false);
-  const [selectedCountry, setSelectedCountry] = (0, import_react5.useState)(countryProp ?? "US");
-  const [zipCode, setZipCode] = (0, import_react5.useState)(zipProp ?? "");
-  const zipCodeRef = (0, import_react5.useRef)(zipProp ?? "");
-  const selectedCountryRef = (0, import_react5.useRef)(countryProp ?? "US");
-  const [viewState, setViewState] = (0, import_react5.useState)("buttons");
+  const [processing, setProcessing] = (0, import_react6.useState)(false);
+  const [error, setError] = (0, import_react6.useState)(null);
+  const [is3DSActive, setIs3DSActive] = (0, import_react6.useState)(false);
+  const [selectedCountry, setSelectedCountry] = (0, import_react6.useState)(countryProp ?? "US");
+  const [zipCode, setZipCode] = (0, import_react6.useState)(zipProp ?? "");
+  const zipCodeRef = (0, import_react6.useRef)(zipProp ?? "");
+  const selectedCountryRef = (0, import_react6.useRef)(countryProp ?? "US");
+  const [viewState, setViewState] = (0, import_react6.useState)("buttons");
   const showCardForm = viewState === "expanding" || viewState === "card";
   const TRANSITION_MS = 280;
-  const expandToCard = (0, import_react5.useCallback)(() => {
+  const expandToCard = (0, import_react6.useCallback)(() => {
     setViewState("expanding");
     setTimeout(() => setViewState("card"), TRANSITION_MS);
   }, []);
-  const collapseToButtons = (0, import_react5.useCallback)(() => {
+  const collapseToButtons = (0, import_react6.useCallback)(() => {
     setViewState("collapsing");
     setTimeout(() => setViewState("buttons"), TRANSITION_MS);
   }, []);
-  const [fullName, setFullName] = (0, import_react5.useState)("");
-  const [formReady, setFormReady] = (0, import_react5.useState)(false);
-  const [overlayStatus, setOverlayStatus] = (0, import_react5.useState)(null);
-  const processingRef = (0, import_react5.useRef)(false);
+  const [fullName, setFullName] = (0, import_react6.useState)("");
+  const [formReady, setFormReady] = (0, import_react6.useState)(false);
+  const [overlayStatus, setOverlayStatus] = (0, import_react6.useState)(null);
+  const processingRef = (0, import_react6.useRef)(false);
   const resolvedBillingApiUrl = billingApiUrl || contextBillingUrl;
   const displayError = externalError ?? error;
-  const bStyles = (0, import_react5.useMemo)(() => {
+  const bStyles = (0, import_react6.useMemo)(() => {
     const base = (0, import_shared3.resolveButtonsLayoutTheme)(buttonsTheme);
     if (!buttonsStylesOverride) return base;
     return {
@@ -640,25 +689,25 @@ function SplitCardFormInner({
   const isSubmitting = externalProcessing ?? processing;
   const isSelfContained = !onTokenizedBody;
   const baseUrl = resolvedBillingApiUrl.replace(/\/+$/, "");
-  const stripeInstance = (0, import_react5.useMemo)(() => {
+  const stripeInstance = (0, import_react6.useMemo)(() => {
     if (!flopay) return null;
     return flopay.getRawProvider();
   }, [flopay]);
   const amountInCents = totalAmount || 100;
-  const walletOptions = (0, import_react5.useMemo)(() => ({
+  const walletOptions = (0, import_react6.useMemo)(() => ({
     mode: "payment",
     amount: amountInCents,
     currency: currency.toLowerCase(),
     paymentMethodCreation: "manual",
     captureMethod: "manual"
   }), [amountInCents, currency]);
-  const paypalOptions = (0, import_react5.useMemo)(() => ({
+  const paypalOptions = (0, import_react6.useMemo)(() => ({
     mode: "payment",
     amount: amountInCents,
     currency: currency.toLowerCase(),
     captureMethod: "manual"
   }), [amountInCents, currency]);
-  const updateError = (0, import_react5.useCallback)(
+  const updateError = (0, import_react6.useCallback)(
     (err) => {
       setError(err);
       onErrorChange?.(err);
@@ -666,13 +715,13 @@ function SplitCardFormInner({
     [onErrorChange]
   );
   const showWallets = showApplePay || showGooglePay;
-  const handleNameChange = (0, import_react5.useCallback)((value) => {
+  const handleNameChange = (0, import_react6.useCallback)((value) => {
     setFullName(value);
     const parts = value.trim().split(/\s+/);
     onFirstNameChange?.(parts[0] ?? "");
     onLastNameChange?.(parts.length > 1 ? parts.slice(1).join(" ") : "");
   }, [onFirstNameChange, onLastNameChange]);
-  const processPaymentInternal = (0, import_react5.useCallback)(
+  const processPaymentInternal = (0, import_react6.useCallback)(
     async (tokenizedBody) => {
       if (processingRef.current) return;
       processingRef.current = true;
@@ -791,7 +840,7 @@ function SplitCardFormInner({
     },
     [baseUrl, sessionId, userId, email, firstName, lastName, fullName, chv, flopay, onComplete, onError, updateError]
   );
-  const dispatchTokenizedBody = (0, import_react5.useCallback)(
+  const dispatchTokenizedBody = (0, import_react6.useCallback)(
     (tokenizedBody) => {
       if (onTokenizedBody) {
         onTokenizedBody(tokenizedBody);
@@ -801,7 +850,7 @@ function SplitCardFormInner({
     },
     [onTokenizedBody, processPaymentInternal]
   );
-  (0, import_react5.useImperativeHandle)(innerRef, () => ({
+  (0, import_react6.useImperativeHandle)(innerRef, () => ({
     async handleNextAction(secret) {
       if (!flopay) return;
       setIs3DSActive(true);
@@ -827,7 +876,7 @@ function SplitCardFormInner({
       }
     }
   }), [flopay, dispatchTokenizedBody, onError, updateError]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (typeof window === "undefined") return;
     const stored = localStorage.getItem(WALLET_RESUME_KEY);
     if (!stored) return;
@@ -845,7 +894,7 @@ function SplitCardFormInner({
       localStorage.removeItem(WALLET_RESUME_KEY);
     }
   }, [sessionId, dispatchTokenizedBody]);
-  const handleSubmit = (0, import_react5.useCallback)(
+  const handleSubmit = (0, import_react6.useCallback)(
     async (e) => {
       e.preventDefault();
       if (!flopay || !elements || isSubmitting || processingRef.current) return;
@@ -925,7 +974,7 @@ function SplitCardFormInner({
   );
   const isReady = flopay !== null && elements !== null;
   if (!isReady) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." });
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." });
   }
   const isButtons = layout === "buttons";
   const resolvedBorder = isButtons ? bStyles.cardInputBorder ?? "#e5e7eb" : "#A4A4FF";
@@ -941,19 +990,19 @@ function SplitCardFormInner({
       invalid: { color: "#ef4444" }
     }
   } : {};
-  const cardFormBlock = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: {
+  const cardFormBlock = /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: {
     backgroundColor: cardBg,
     borderRadius: "8px",
     padding: isButtons ? "0" : "1rem",
     ...isButtons ? bStyles.cardFormContainer : {},
     ...isButtons ? { padding: bStyles.cardFormContainer?.padding ?? "0" } : {}
   }, children: [
-    isButtons && showCardForm && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: {
+    isButtons && showCardForm && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: {
       display: "flex",
       alignItems: "center",
       padding: "0.75rem 0 0.625rem"
     }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
         "button",
         {
           type: "button",
@@ -975,7 +1024,7 @@ function SplitCardFormInner({
           },
           "aria-label": "Back to payment methods",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: {
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: {
               display: "inline-flex",
               alignItems: "center",
               justifyContent: "center",
@@ -985,12 +1034,12 @@ function SplitCardFormInner({
               backgroundColor: "#f3f4f6",
               transition: "background-color 0.15s",
               ...bStyles.backButtonIcon
-            }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M15 18l-6-6 6-6" }) }) }),
+            }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M15 18l-6-6 6-6" }) }) }),
             "Go back"
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: {
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: {
         flex: 1,
         textAlign: "center",
         fontWeight: 600,
@@ -1000,16 +1049,16 @@ function SplitCardFormInner({
         ...bStyles.title
       }, children: "Secure card checkout" })
     ] }),
-    !isButtons && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { textAlign: "center", fontWeight: 600, fontSize: "1.1rem", padding: "0.5rem 0", color: "#262833" }, children: "Secure card checkout" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: {
+    !isButtons && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { textAlign: "center", fontWeight: 600, fontSize: "1.1rem", padding: "0.5rem 0", color: "#262833" }, children: "Secure card checkout" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: {
       backgroundColor: cardInputBg,
       border: `1px solid ${resolvedBorder}`,
       borderTopLeftRadius: "8px",
       borderTopRightRadius: "8px",
       padding: "10px"
-    }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CardNumberElement, { onReady: () => setFormReady(true), options: stripeElementStyle }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: {
+    }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CardNumberElement, { onReady: () => setFormReady(true), options: stripeElementStyle }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: {
         flex: 1,
         backgroundColor: cardInputBg,
         border: `1px solid ${resolvedBorder}`,
@@ -1017,23 +1066,23 @@ function SplitCardFormInner({
         borderRight: "none",
         borderBottomLeftRadius: "8px",
         padding: "10px"
-      }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CardExpiryElement, { options: stripeElementStyle }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: {
+      }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CardExpiryElement, { options: stripeElementStyle }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: {
         flex: 1,
         backgroundColor: cardInputBg,
         border: `1px solid ${resolvedBorder}`,
         borderTop: "none",
         borderBottomRightRadius: "8px",
         padding: "10px"
-      }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CardCvcElement, { options: stripeElementStyle }) })
+      }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CardCvcElement, { options: stripeElementStyle }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: {
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: {
       backgroundColor: cardInputBg,
       border: `1px solid ${resolvedBorder}`,
       borderRadius: "8px",
       marginTop: "0.5rem",
       padding: "10px"
-    }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       "input",
       {
         placeholder: "Full Name on Card",
@@ -1054,20 +1103,20 @@ function SplitCardFormInner({
         }
       }
     ) }),
-    enableAVS && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: {
+    enableAVS && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: {
       display: "flex",
       flexDirection: avsLayoutProp === "column" ? "column" : "row",
       gap: avsLayoutProp === "column" ? "0.5rem" : "0",
       marginTop: "0.5rem"
     }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: {
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: {
         flex: avsLayoutProp === "row" ? 1 : void 0,
         backgroundColor: cardInputBg,
         border: `1px solid ${resolvedBorder}`,
         padding: "10px",
         ...avsLayoutProp === "row" ? { borderRadius: "0", borderTopLeftRadius: "8px", borderBottomLeftRadius: "8px", borderRight: "none" } : { borderRadius: "8px" },
         ...isButtons && bStyles.countrySelect ? bStyles.countrySelect : {}
-      }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         "select",
         {
           value: selectedCountry,
@@ -1090,21 +1139,21 @@ function SplitCardFormInner({
             cursor: "pointer",
             ...isButtons && bStyles.nameInput ? bStyles.nameInput : {}
           },
-          children: import_shared3.COUNTRY_OPTIONS.map((c) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("option", { value: c.code, children: [
+          children: import_shared3.COUNTRY_OPTIONS.map((c) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("option", { value: c.code, children: [
             c.flag,
             " ",
             c.name
           ] }, c.code))
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: {
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: {
         flex: avsLayoutProp === "row" ? 1 : void 0,
         backgroundColor: cardInputBg,
         border: `1px solid ${resolvedBorder}`,
         padding: "10px",
         ...avsLayoutProp === "row" ? { borderRadius: "0", borderTopRightRadius: "8px", borderBottomRightRadius: "8px" } : { borderRadius: "8px" },
         ...isButtons && bStyles.zipInput ? bStyles.zipInput : {}
-      }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         "input",
         {
           placeholder: (0, import_shared3.getPostalCodeLabel)(selectedCountry),
@@ -1131,7 +1180,7 @@ function SplitCardFormInner({
         }
       ) })
     ] }),
-    displayError && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { role: "alert", "data-testid": "flopay-error", style: {
+    displayError && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { role: "alert", "data-testid": "flopay-error", style: {
       margin: "0.75rem 0",
       padding: "0.625rem 0.875rem",
       background: "#FEF2F2",
@@ -1145,10 +1194,10 @@ function SplitCardFormInner({
       gap: "0.5rem",
       ...isButtons && bStyles.errorBanner ? bStyles.errorBanner : {}
     }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
       displayError
     ] }),
-    children ?? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    children ?? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       "button",
       {
         type: "submit",
@@ -1171,7 +1220,7 @@ function SplitCardFormInner({
         children: isSubmitting ? "PROCESSING..." : submitLabel
       }
     ),
-    !isButtons && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: {
+    !isButtons && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: {
       backgroundColor: "#EFF9F0",
       borderRadius: "8px",
       padding: "0.75rem",
@@ -1187,11 +1236,11 @@ function SplitCardFormInner({
     const isCardView = viewState === "expanding" || viewState === "card" || viewState === "collapsing";
     const buttonsAnim = viewState === "expanding" ? `flopay-buttons-exit ${TRANSITION_MS}ms cubic-bezier(0.4, 0, 0.2, 1) both` : viewState === "collapsing" ? `flopay-buttons-enter ${TRANSITION_MS}ms cubic-bezier(0, 0, 0.2, 1) both` : void 0;
     const cardAnim = viewState === "expanding" ? `flopay-card-enter ${TRANSITION_MS}ms cubic-bezier(0, 0, 0.2, 1) both` : viewState === "collapsing" ? `flopay-card-exit ${TRANSITION_MS}ms cubic-bezier(0.4, 0, 0.2, 1) both` : void 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FloPayKeyframes, {}),
-      overlayStatus && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "grid" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FloPayKeyframes, {}),
+      overlayStatus && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "grid" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: {
           gridArea: "1 / 1",
           display: "flex",
           flexDirection: "column",
@@ -1200,7 +1249,7 @@ function SplitCardFormInner({
           ...!isButtonsView && !buttonsAnim ? { visibility: "hidden", position: "absolute", pointerEvents: "none", width: "100%" } : {},
           ...buttonsAnim ? { animation: buttonsAnim, pointerEvents: "none" } : {}
         }, children: [
-          showPayPal && stripeInstance ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_stripe_js.Elements, { stripe: stripeInstance, options: paypalOptions, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          showPayPal && stripeInstance ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_stripe_js.Elements, { stripe: stripeInstance, options: paypalOptions, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             PayPalButtonInner,
             {
               sessionId,
@@ -1211,8 +1260,8 @@ function SplitCardFormInner({
               isProcessing: isSubmitting,
               onButtonClick
             }
-          ) }) : showPayPal ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { height: 44, borderRadius: 8, background: "#e5e7eb", animation: "flopay-pulse 1.5s ease-in-out infinite" } }) : null,
-          showWallets && stripeInstance ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_stripe_js.Elements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          ) }) : showPayPal ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { height: 44, borderRadius: 8, background: "#e5e7eb", animation: "flopay-pulse 1.5s ease-in-out infinite" } }) : null,
+          showWallets && stripeInstance ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_stripe_js.Elements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             WalletButtonInner,
             {
               sessionId,
@@ -1224,8 +1273,8 @@ function SplitCardFormInner({
               onErrorChange: updateError,
               onButtonClick
             }
-          ) }) : showWallets ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { height: 44, borderRadius: 8, background: "#e5e7eb", animation: "flopay-pulse 1.5s ease-in-out infinite" } }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          ) }) : showWallets ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { height: 44, borderRadius: 8, background: "#e5e7eb", animation: "flopay-pulse 1.5s ease-in-out infinite" } }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "button",
             {
               type: "button",
@@ -1258,17 +1307,10 @@ function SplitCardFormInner({
               onMouseUp: (e) => {
                 e.currentTarget.style.transform = "scale(1)";
               },
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { width: "20", height: "14", x: "2", y: "5", rx: "2" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "2", x2: "22", y1: "10", y2: "10" })
-                ] }),
-                "Credit / Debit Card",
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "#9ca3af", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { position: "absolute", right: "1rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M9 18l6-6-6-6" }) })
-              ]
+              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CardButtonContentSlot, { content: cardButtonContent })
             }
           ),
-          displayError && viewState === "buttons" && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { role: "alert", "data-testid": "flopay-error", style: {
+          displayError && viewState === "buttons" && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { role: "alert", "data-testid": "flopay-error", style: {
             margin: "0.25rem 0",
             padding: "0.625rem 0.875rem",
             background: "#FEF2F2",
@@ -1282,11 +1324,11 @@ function SplitCardFormInner({
             gap: "0.5rem",
             ...bStyles.errorBanner ? bStyles.errorBanner : {}
           }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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__ */ (0, import_jsx_runtime3.jsx)("div", { style: {
+        isCardView && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: {
           gridArea: "1 / 1",
           ...cardAnim ? { animation: cardAnim } : {},
           ...viewState === "collapsing" ? { pointerEvents: "none" } : {}
@@ -1294,10 +1336,10 @@ function SplitCardFormInner({
       ] })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FloPayKeyframes, {}),
-    overlayStatus && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
-    showWallets && stripeInstance && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_stripe_js.Elements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FloPayKeyframes, {}),
+    overlayStatus && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
+    showWallets && stripeInstance && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_stripe_js.Elements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       WalletButtonInner,
       {
         sessionId,
@@ -1309,7 +1351,7 @@ function SplitCardFormInner({
         onErrorChange: updateError
       }
     ) }),
-    showPayPal && stripeInstance && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_stripe_js.Elements, { stripe: stripeInstance, options: paypalOptions, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    showPayPal && stripeInstance && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_stripe_js.Elements, { stripe: stripeInstance, options: paypalOptions, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       PayPalButtonInner,
       {
         sessionId,
@@ -1320,7 +1362,7 @@ function SplitCardFormInner({
         isProcessing: isSubmitting
       }
     ) }),
-    (showWallets && stripeInstance || showPayPal && stripeInstance) && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: {
+    (showWallets && stripeInstance || showPayPal && stripeInstance) && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: {
       display: "flex",
       alignItems: "center",
       gap: "0.75rem",
@@ -1328,16 +1370,16 @@ function SplitCardFormInner({
       color: "#999",
       fontSize: "0.85rem"
     }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "or pay with card" }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } })
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "or pay with card" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } })
     ] }),
     cardFormBlock
   ] });
 }
 
 // src/flopay-checkout.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function FloPayCheckout({
   sessionId: sessionIdProp,
   createSession: createSessionParams,
@@ -1355,6 +1397,7 @@ function FloPayCheckout({
   layout,
   buttonsTheme,
   buttonsStyles,
+  cardButtonContent,
   onButtonClick,
   enableAVS,
   avsLayout,
@@ -1367,24 +1410,24 @@ function FloPayCheckout({
   onSessionCompleted
 }) {
   const resolvedBillingUrl = (0, import_shared5.resolveBillingApiUrl)(billingApiUrl);
-  const [unified, setUnified] = (0, import_react6.useState)(null);
-  const [flopay, setFloPay] = (0, import_react6.useState)(null);
-  const flopayRef = (0, import_react6.useRef)(null);
-  const [session, setSession] = (0, import_react6.useState)(null);
-  const [resolvedSessionId, setResolvedSessionId] = (0, import_react6.useState)(sessionIdProp ?? "");
-  const [isLoading, setIsLoading] = (0, import_react6.useState)(true);
-  const [loadError, setLoadError] = (0, import_react6.useState)(null);
-  const [currentMode, setCurrentMode] = (0, import_react6.useState)("full");
-  const [confirmProcessing, setConfirmProcessing] = (0, import_react6.useState)(false);
-  const [modeError, setModeError] = (0, import_react6.useState)(null);
-  const autoCheckoutAttempted = (0, import_react6.useRef)(false);
-  const onCompleteRef = (0, import_react6.useRef)(onComplete);
+  const [unified, setUnified] = (0, import_react7.useState)(null);
+  const [flopay, setFloPay] = (0, import_react7.useState)(null);
+  const flopayRef = (0, import_react7.useRef)(null);
+  const [session, setSession] = (0, import_react7.useState)(null);
+  const [resolvedSessionId, setResolvedSessionId] = (0, import_react7.useState)(sessionIdProp ?? "");
+  const [isLoading, setIsLoading] = (0, import_react7.useState)(true);
+  const [loadError, setLoadError] = (0, import_react7.useState)(null);
+  const [currentMode, setCurrentMode] = (0, import_react7.useState)("full");
+  const [confirmProcessing, setConfirmProcessing] = (0, import_react7.useState)(false);
+  const [modeError, setModeError] = (0, import_react7.useState)(null);
+  const autoCheckoutAttempted = (0, import_react7.useRef)(false);
+  const onCompleteRef = (0, import_react7.useRef)(onComplete);
   onCompleteRef.current = onComplete;
-  const onErrorRef = (0, import_react6.useRef)(onError);
+  const onErrorRef = (0, import_react7.useRef)(onError);
   onErrorRef.current = onError;
-  const onSessionCompletedRef = (0, import_react6.useRef)(onSessionCompleted);
+  const onSessionCompletedRef = (0, import_react7.useRef)(onSessionCompleted);
   onSessionCompletedRef.current = onSessionCompleted;
-  const processPaymentForMode = (0, import_react6.useCallback)(
+  const processPaymentForMode = (0, import_react7.useCallback)(
     async (sess) => {
       const baseUrl = resolvedBillingUrl.replace(/\/+$/, "");
       const response = await fetch(`${baseUrl}/v1/checkouts/sessions/process`, {
@@ -1430,7 +1473,7 @@ function FloPayCheckout({
     },
     [resolvedBillingUrl, resolvedSessionId]
   );
-  const handleRedirectResult = (0, import_react6.useCallback)(
+  const handleRedirectResult = (0, import_react7.useCallback)(
     async (redirectResult, sess, options) => {
       const stripe = flopayRef.current?.getRawProvider();
       if (!stripe) return false;
@@ -1475,8 +1518,8 @@ function FloPayCheckout({
     },
     [resolvedBillingUrl, resolvedSessionId]
   );
-  const inflightRef = (0, import_react6.useRef)(/* @__PURE__ */ new Map());
-  const initializedHashRef = (0, import_react6.useRef)(null);
+  const inflightRef = (0, import_react7.useRef)(/* @__PURE__ */ new Map());
+  const initializedHashRef = (0, import_react7.useRef)(null);
   function hashCreateParams(params) {
     const key = JSON.stringify({
       c: params?.clientId,
@@ -1491,7 +1534,7 @@ function FloPayCheckout({
     }
     return `flopay_session_${Math.abs(h).toString(36)}`;
   }
-  const createSessionHash = (0, import_react6.useMemo)(
+  const createSessionHash = (0, import_react7.useMemo)(
     () => createSessionParams ? hashCreateParams(createSessionParams) : "",
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
@@ -1502,9 +1545,9 @@ function FloPayCheckout({
       JSON.stringify(createSessionParams?.subscriptions)
     ]
   );
-  const createSessionParamsRef = (0, import_react6.useRef)(createSessionParams);
+  const createSessionParamsRef = (0, import_react7.useRef)(createSessionParams);
   createSessionParamsRef.current = createSessionParams;
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     let cancelled = false;
     setLoadError(null);
     if (createSessionHash) {
@@ -1709,7 +1752,7 @@ function FloPayCheckout({
       cancelled = true;
     };
   }, [resolvedSessionId, createSessionHash, resolvedBillingUrl, fallbackPublishableKey, locale, checkoutModeProp]);
-  const handleConfirmCheckout = (0, import_react6.useCallback)(async () => {
+  const handleConfirmCheckout = (0, import_react7.useCallback)(async () => {
     if (confirmProcessing || !session) return;
     setConfirmProcessing(true);
     setModeError(null);
@@ -1734,7 +1777,7 @@ function FloPayCheckout({
       setConfirmProcessing(false);
     }
   }, [confirmProcessing, session, processPaymentForMode, handleRedirectResult, onError]);
-  const providerOptions = (0, import_react6.useMemo)(() => {
+  const providerOptions = (0, import_react7.useMemo)(() => {
     if (!unified || !session) return void 0;
     const opts = {
       appearance,
@@ -1750,7 +1793,7 @@ function FloPayCheckout({
     }
     return opts;
   }, [unified, session, appearance, resolvedBillingUrl]);
-  const checkoutValue = (0, import_react6.useMemo)(
+  const checkoutValue = (0, import_react7.useMemo)(
     () => ({
       session,
       loading: isLoading,
@@ -1760,23 +1803,23 @@ function FloPayCheckout({
     [session, isLoading, loadError, currentMode]
   );
   if (isLoading) {
-    if (loadingNode) return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: loadingNode });
+    if (loadingNode) return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: loadingNode });
     if (layout === "buttons") {
-      const skeletonBar = (h) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: {
+      const skeletonBar = (h) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
         height: h,
         borderRadius: 8,
         background: "#e5e7eb",
         animation: "flopay-loading-pulse 1.5s ease-in-out infinite"
       } });
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
         showPayPal && skeletonBar(44),
         (showApplePay || showGooglePay) && skeletonBar(44),
         skeletonBar(48),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("style", { children: `@keyframes flopay-loading-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("style", { children: `@keyframes flopay-loading-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
       ] });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", justifyContent: "center", padding: 32 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", justifyContent: "center", padding: 32 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
         width: 24,
         height: 24,
         border: "2px solid #e5e7eb",
@@ -1784,12 +1827,12 @@ function FloPayCheckout({
         borderRadius: "50%",
         animation: "spin 0.6s linear infinite"
       } }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` })
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` })
     ] });
   }
   if (loadError) {
-    if (errorNode) return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: errorNode(loadError) });
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    if (errorNode) return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: errorNode(loadError) });
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "div",
       {
         style: {
@@ -1803,7 +1846,7 @@ function FloPayCheckout({
     );
   }
   if ((!flopay || !providerOptions) && createSessionParams && layout === "buttons") {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       InterimButtonsView,
       {
         onButtonClick,
@@ -1811,14 +1854,15 @@ function FloPayCheckout({
         showApplePay,
         showGooglePay,
         buttonsTheme,
-        buttonsStyles
+        buttonsStyles,
+        cardButtonContent
       }
     ) });
   }
-  if (!flopay || !providerOptions) return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, {});
+  if (!flopay || !providerOptions) return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, {});
   if (currentMode === "confirm") {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FloPayProvider, { flopay, options: providerOptions, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className, children: [
-      modeError && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FloPayProvider, { flopay, options: providerOptions, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className, children: [
+      modeError && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "div",
         {
           style: {
@@ -1833,7 +1877,7 @@ function FloPayCheckout({
       renderConfirmButton ? renderConfirmButton({
         onConfirm: handleConfirmCheckout,
         isProcessing: confirmProcessing
-      }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "button",
         {
           type: "button",
@@ -1856,8 +1900,8 @@ function FloPayCheckout({
       )
     ] }) }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(FloPayProvider, { flopay, options: providerOptions, children: [
-    modeError && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(FloPayProvider, { flopay, options: providerOptions, children: [
+    modeError && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "div",
       {
         style: {
@@ -1872,7 +1916,7 @@ function FloPayCheckout({
         children: modeError
       }
     ),
-    children ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    children ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       SessionInjector,
       {
         sessionId: resolvedSessionId,
@@ -1880,7 +1924,7 @@ function FloPayCheckout({
         session,
         children
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       SplitCardForm,
       {
         sessionId: resolvedSessionId,
@@ -1898,6 +1942,7 @@ function FloPayCheckout({
         layout,
         buttonsTheme,
         buttonsStyles,
+        cardButtonContent,
         onButtonClick,
         enableAVS,
         avsLayout,
@@ -1915,8 +1960,8 @@ function SessionInjector({
   session,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: import_react6.default.Children.map(children, (child) => {
-    if (!import_react6.default.isValidElement(child)) return child;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: import_react7.default.Children.map(children, (child) => {
+    if (!import_react7.default.isValidElement(child)) return child;
     const existing = child.props;
     const injected = {};
     if (!existing.sessionId) injected.sessionId = sessionId;
@@ -1930,7 +1975,7 @@ function SessionInjector({
         injected.lastName = session.customer.lastName;
     }
     if (Object.keys(injected).length === 0) return child;
-    return import_react6.default.cloneElement(child, injected);
+    return import_react7.default.cloneElement(child, injected);
   }) });
 }
 function InterimButtonsView({
@@ -1939,10 +1984,11 @@ function InterimButtonsView({
   showApplePay,
   showGooglePay,
   buttonsTheme,
-  buttonsStyles: stylesOverride
+  buttonsStyles: stylesOverride,
+  cardButtonContent
 }) {
-  const [showCardForm, setShowCardForm] = (0, import_react6.useState)(false);
-  const bStyles = (0, import_react6.useMemo)(() => {
+  const [showCardForm, setShowCardForm] = (0, import_react7.useState)(false);
+  const bStyles = (0, import_react7.useMemo)(() => {
     const base = (0, import_shared5.resolveButtonsLayoutTheme)(buttonsTheme);
     if (!stylesOverride) return base;
     return {
@@ -1954,7 +2000,7 @@ function InterimButtonsView({
       title: { ...base.title, ...stylesOverride.title }
     };
   }, [buttonsTheme, stylesOverride]);
-  const skeleton = (h) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: {
+  const skeleton = (h) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
     height: h,
     borderRadius: 8,
     background: "#e5e7eb",
@@ -1963,15 +2009,15 @@ function InterimButtonsView({
   if (showCardForm) {
     const inputBorder = bStyles.cardInputBorder ?? "#e5e7eb";
     const inputBg = bStyles.cardInputBackground ?? "white";
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: {
       backgroundColor: bStyles.cardFormContainer?.backgroundColor ?? "white",
       borderRadius: "8px",
       animation: "flopay-interim-expand 0.35s cubic-bezier(0.4, 0, 0.2, 1) both",
       overflow: "hidden",
       ...bStyles.cardFormContainer
     }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", alignItems: "center", padding: "0.75rem 0 0.625rem" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", alignItems: "center", padding: "0.75rem 0 0.625rem" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
           "button",
           {
             type: "button",
@@ -1991,7 +2037,7 @@ function InterimButtonsView({
               ...bStyles.backButton
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: {
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: {
                 display: "inline-flex",
                 alignItems: "center",
                 justifyContent: "center",
@@ -2000,12 +2046,12 @@ function InterimButtonsView({
                 borderRadius: "50%",
                 backgroundColor: "#f3f4f6",
                 ...bStyles.backButtonIcon
-              }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M15 18l-6-6 6-6" }) }) }),
+              }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M15 18l-6-6 6-6" }) }) }),
               "Go back"
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: {
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
           flex: 1,
           textAlign: "center",
           fontWeight: 600,
@@ -2015,13 +2061,13 @@ function InterimButtonsView({
           ...bStyles.title
         }, children: "Secure card checkout" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTopLeftRadius: 8, borderTopRightRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { width: "60%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { flex: 1, backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTop: "none", borderRight: "none", borderBottomLeftRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { width: "50%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { flex: 1, backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTop: "none", borderBottomRightRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { width: "40%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) })
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTopLeftRadius: 8, borderTopRightRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { width: "60%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { flex: 1, backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTop: "none", borderRight: "none", borderBottomLeftRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { width: "50%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { flex: 1, backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTop: "none", borderBottomRightRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { width: "40%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderRadius: 8, marginTop: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { width: "45%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: {
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderRadius: 8, marginTop: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { width: "45%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
         height: 50,
         borderRadius: 8,
         marginTop: 16,
@@ -2030,7 +2076,7 @@ function InterimButtonsView({
         ...bStyles.submitButton,
         opacity: 0.5
       } }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("style", { children: `
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("style", { children: `
           @keyframes flopay-interim-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
           @keyframes flopay-interim-expand {
             0% { opacity: 0; max-height: 0; transform: translateY(-12px); }
@@ -2040,10 +2086,10 @@ function InterimButtonsView({
         ` })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
     showPayPal && skeleton(44),
     (showApplePay || showGooglePay) && skeleton(44),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "button",
       {
         type: "button",
@@ -2076,28 +2122,21 @@ function InterimButtonsView({
         onMouseUp: (e) => {
           e.currentTarget.style.transform = "scale(1)";
         },
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { width: "20", height: "14", x: "2", y: "5", rx: "2" }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "2", x2: "22", y1: "10", y2: "10" })
-          ] }),
-          "Credit / Debit Card",
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "#9ca3af", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { position: "absolute", right: "1rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M9 18l6-6-6-6" }) })
-        ]
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CardButtonContentSlot, { content: cardButtonContent })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("style", { children: `@keyframes flopay-interim-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("style", { children: `@keyframes flopay-interim-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
   ] });
 }
 
 // src/checkout-form.tsx
 var import_shared6 = require("@flopay/shared");
-var import_react7 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_react8 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var WALLET_RESUME_KEY2 = "flopay_wallet_resume";
-var CheckoutForm = (0, import_react7.forwardRef)(
+var CheckoutForm = (0, import_react8.forwardRef)(
   function CheckoutForm2(props, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CheckoutFormInner, { ...props, innerRef: ref });
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CheckoutFormInner, { ...props, innerRef: ref });
   }
 );
 function CheckoutFormInner({
@@ -2124,21 +2163,21 @@ function CheckoutFormInner({
   const flopay = useFloPay();
   const elements = useElements();
   const contextBillingUrl = useBillingApiUrl();
-  const [processing, setProcessing] = (0, import_react7.useState)(false);
-  const [error, setError] = (0, import_react7.useState)(null);
-  const [is3DSActive, setIs3DSActive] = (0, import_react7.useState)(false);
+  const [processing, setProcessing] = (0, import_react8.useState)(false);
+  const [error, setError] = (0, import_react8.useState)(null);
+  const [is3DSActive, setIs3DSActive] = (0, import_react8.useState)(false);
   const displayError = externalError ?? error;
   const isSubmitting = externalProcessing ?? processing;
   const isSelfContained = !onTokenizedBody;
   const baseUrl = (billingApiUrl || contextBillingUrl).replace(/\/+$/, "");
-  const updateError = (0, import_react7.useCallback)(
+  const updateError = (0, import_react8.useCallback)(
     (err) => {
       setError(err);
       onErrorChange?.(err);
     },
     [onErrorChange]
   );
-  const processPaymentInternal = (0, import_react7.useCallback)(
+  const processPaymentInternal = (0, import_react8.useCallback)(
     async (tokenizedBody) => {
       setProcessing(true);
       updateError(null);
@@ -2226,7 +2265,7 @@ function CheckoutFormInner({
     },
     [baseUrl, sessionId, userId, email, firstName, lastName, chv, flopay, onComplete, onError, updateError]
   );
-  const dispatchTokenizedBody = (0, import_react7.useCallback)(
+  const dispatchTokenizedBody = (0, import_react8.useCallback)(
     (tokenizedBody) => {
       if (onTokenizedBody) {
         onTokenizedBody(tokenizedBody);
@@ -2236,7 +2275,7 @@ function CheckoutFormInner({
     },
     [onTokenizedBody, processPaymentInternal]
   );
-  (0, import_react7.useImperativeHandle)(innerRef, () => ({
+  (0, import_react8.useImperativeHandle)(innerRef, () => ({
     async handleNextAction(secret) {
       if (!flopay) return;
       setIs3DSActive(true);
@@ -2262,7 +2301,7 @@ function CheckoutFormInner({
       }
     }
   }), [flopay, dispatchTokenizedBody, onError, updateError]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (typeof window === "undefined") return;
     const stored = localStorage.getItem(WALLET_RESUME_KEY2);
     if (!stored) return;
@@ -2280,7 +2319,7 @@ function CheckoutFormInner({
       localStorage.removeItem(WALLET_RESUME_KEY2);
     }
   }, [sessionId, dispatchTokenizedBody]);
-  const handleSubmit = (0, import_react7.useCallback)(
+  const handleSubmit = (0, import_react8.useCallback)(
     async (e) => {
       e.preventDefault();
       if (!flopay || !elements || isSubmitting) return;
@@ -2340,8 +2379,8 @@ function CheckoutFormInner({
     [flopay, elements, isSubmitting, sessionId, email, baseUrl, isSelfContained, dispatchTokenizedBody, onError, updateError]
   );
   const isReady = flopay !== null && elements !== null;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
-    (is3DSActive || isSubmitting) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { "data-testid": "flopay-overlay", style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
+    (is3DSActive || isSubmitting) && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { "data-testid": "flopay-overlay", style: {
       position: "absolute",
       inset: 0,
       background: "rgba(255,255,255,0.7)",
@@ -2350,12 +2389,12 @@ function CheckoutFormInner({
       justifyContent: "center",
       zIndex: 10
     }, children: is3DSActive ? "Verifying payment..." : "Processing..." }),
-    !isReady && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." }),
-    isReady && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PaymentElement, { options: { layout } }),
-      showAddress && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AddressElement, { options: { mode: showAddress === true ? "billing" : showAddress } }),
-      displayError && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { role: "alert", "data-testid": "flopay-error", style: { color: "red", margin: "0.75rem 0" }, children: displayError }),
-      children ?? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    !isReady && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." }),
+    isReady && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PaymentElement, { options: { layout } }),
+      showAddress && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AddressElement, { options: { mode: showAddress === true ? "billing" : showAddress } }),
+      displayError && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { role: "alert", "data-testid": "flopay-error", style: { color: "red", margin: "0.75rem 0" }, children: displayError }),
+      children ?? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         "button",
         {
           type: "submit",
@@ -2370,8 +2409,8 @@ function CheckoutFormInner({
 
 // src/paypal-button.tsx
 var import_shared7 = require("@flopay/shared");
-var import_react8 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_react9 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function PayPalButton({
   sessionId,
   billingApiUrl,
@@ -2388,11 +2427,11 @@ function PayPalButton({
   const flopay = useFloPay();
   const elements = useElements();
   const contextBillingUrl = useBillingApiUrl();
-  const [ready, setReady] = (0, import_react8.useState)(false);
-  const [submitting, setSubmitting] = (0, import_react8.useState)(false);
-  const paypalResumeAttempted = (0, import_react8.useRef)(false);
+  const [ready, setReady] = (0, import_react9.useState)(false);
+  const [submitting, setSubmitting] = (0, import_react9.useState)(false);
+  const paypalResumeAttempted = (0, import_react9.useRef)(false);
   const baseUrl = (billingApiUrl || contextBillingUrl).replace(/\/+$/, "");
-  const processPaymentInternal = (0, import_react8.useCallback)(
+  const processPaymentInternal = (0, import_react9.useCallback)(
     async (tokenizedBody) => {
       try {
         const response = await fetch(`${baseUrl}/v1/checkouts/sessions/process`, {
@@ -2425,7 +2464,7 @@ function PayPalButton({
     },
     [baseUrl, sessionId, userId, email, firstName, lastName, chv, onComplete, onErrorChange]
   );
-  const dispatchTokenizedBody = (0, import_react8.useCallback)(
+  const dispatchTokenizedBody = (0, import_react9.useCallback)(
     (body) => {
       if (onTokenizedBody) {
         onTokenizedBody(body);
@@ -2435,7 +2474,7 @@ function PayPalButton({
     },
     [onTokenizedBody, processPaymentInternal]
   );
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (!flopay || paypalResumeAttempted.current) return;
     const params = new URLSearchParams(window.location.search);
     const paymentIntentId = params.get("payment_intent");
@@ -2483,7 +2522,7 @@ function PayPalButton({
       }
     })();
   }, [flopay, dispatchTokenizedBody, onErrorChange]);
-  const handlePayPalConfirm = (0, import_react8.useCallback)(async () => {
+  const handlePayPalConfirm = (0, import_react9.useCallback)(async () => {
     if (!flopay || !elements) return;
     try {
       setSubmitting(true);
@@ -2526,11 +2565,11 @@ function PayPalButton({
     }
   }, [flopay, elements, sessionId, email, baseUrl, dispatchTokenizedBody, onErrorChange]);
   if (!flopay || !elements) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6, animation: "pulse 1.5s infinite" } });
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6, animation: "pulse 1.5s infinite" } });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-    !ready && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6 } }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: ready ? {} : { display: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+    !ready && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6 } }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: ready ? {} : { display: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "button",
       {
         type: "button",
@@ -2552,7 +2591,7 @@ function PayPalButton({
         children: submitting ? "Processing..." : "PayPal"
       }
     ) }),
-    (submitting || isProcessing) && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
+    (submitting || isProcessing) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
       position: "fixed",
       inset: 0,
       background: "rgba(0,0,0,0.4)",
@@ -2560,7 +2599,7 @@ function PayPalButton({
       alignItems: "center",
       justifyContent: "center",
       zIndex: 1e3
-    }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
+    }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
       background: "white",
       borderRadius: 8,
       padding: "1.5rem",