@flopay/react 0.2.1 → 0.3.4

package/dist/index.mjs

@@ -67,13 +67,61 @@ function FloPayProvider({
 }
 
 // src/flopay-checkout.tsx
-import React4, { useCallback as useCallback2, useEffect as useEffect4, useMemo as useMemo3, useRef as useRef3, useState as useState3 } from "react";
+import React5, { useCallback as useCallback2, useEffect as useEffect4, useMemo as useMemo3, useRef as useRef3, useState as useState3 } from "react";
 import { loadFloPay, PaymentAPI } from "@flopay/js";
 import { FloPayError as FloPayError2, resolveBillingApiUrl as resolveBillingApiUrl3, buildCheckoutDisplayData, resolveButtonsLayoutTheme as resolveButtonsLayoutTheme2 } from "@flopay/shared";
 
+// src/card-button-content.tsx
+import "react";
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+function DefaultCardButtonContent() {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ 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__ */ jsx2("rect", { width: "20", height: "14", x: "2", y: "5", rx: "2" }),
+          /* @__PURE__ */ jsx2("line", { x1: "2", x2: "22", y1: "10", y2: "10" })
+        ]
+      }
+    ),
+    "Credit / Debit Card",
+    /* @__PURE__ */ jsx2(
+      "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__ */ jsx2("path", { d: "M9 18l6-6-6-6" })
+      }
+    )
+  ] });
+}
+function CardButtonContentSlot({
+  content
+}) {
+  return /* @__PURE__ */ jsx2(Fragment, { children: content ?? /* @__PURE__ */ jsx2(DefaultCardButtonContent, {}) });
+}
+
 // src/elements.tsx
 import { useEffect as useEffect2, useRef, useContext } from "react";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 function createElementComponent(elementType, displayName) {
   function ElementComponent({
     className,
@@ -119,7 +167,7 @@ function createElementComponent(elementType, displayName) {
         }
       };
     }, [elements]);
-    return /* @__PURE__ */ jsx2("div", { ref: containerRef, className, id, style });
+    return /* @__PURE__ */ jsx3("div", { ref: containerRef, className, id, style });
   }
   ElementComponent.displayName = displayName;
   return ElementComponent;
@@ -138,7 +186,7 @@ import {
   useElements as useStripeElements,
   useStripe as useStripeRaw
 } from "@stripe/react-stripe-js";
-import { resolveButtonsLayoutTheme } from "@flopay/shared";
+import { resolveButtonsLayoutTheme, getPostalCodeLabel, COUNTRY_OPTIONS } from "@flopay/shared";
 import { forwardRef, useCallback, useEffect as useEffect3, useImperativeHandle, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
 
 // src/hooks.ts
@@ -162,7 +210,7 @@ function useBillingApiUrl() {
 
 // src/split-card-form.tsx
 import { FloPayError } from "@flopay/shared";
-import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var WALLET_RESUME_KEY = "flopay_wallet_resume";
 var FLOPAY_KEYFRAMES = `
 @keyframes flopay-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
@@ -185,10 +233,10 @@ var FLOPAY_KEYFRAMES = `
 }
 `;
 function FloPayKeyframes() {
-  return /* @__PURE__ */ jsx3("style", { children: FLOPAY_KEYFRAMES });
+  return /* @__PURE__ */ jsx4("style", { children: FLOPAY_KEYFRAMES });
 }
 function ProcessingOverlay({ status, errorMessage }) {
-  return /* @__PURE__ */ jsx3("div", { style: {
+  return /* @__PURE__ */ jsx4("div", { style: {
     position: "fixed",
     inset: 0,
     background: "rgba(0,0,0,0.35)",
@@ -197,7 +245,7 @@ function ProcessingOverlay({ status, errorMessage }) {
     justifyContent: "center",
     zIndex: 1e3,
     backdropFilter: "blur(2px)"
-  }, children: /* @__PURE__ */ jsxs("div", { style: {
+  }, children: /* @__PURE__ */ jsxs2("div", { style: {
     background: "white",
     borderRadius: 12,
     padding: "2rem 2.5rem",
@@ -209,8 +257,8 @@ function ProcessingOverlay({ status, errorMessage }) {
     alignItems: "center",
     gap: 16
   }, children: [
-    /* @__PURE__ */ jsxs("div", { style: { width: 48, height: 48, position: "relative" }, children: [
-      status === "processing" && /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsxs2("div", { style: { width: 48, height: 48, position: "relative" }, children: [
+      status === "processing" && /* @__PURE__ */ jsxs2(
         "svg",
         {
           width: "48",
@@ -220,14 +268,14 @@ function ProcessingOverlay({ status, errorMessage }) {
           xmlns: "http://www.w3.org/2000/svg",
           style: { animation: "flopay-spin 0.8s linear infinite" },
           children: [
-            /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "12", r: "10", stroke: "#e5e7eb", strokeWidth: "3" }),
-            /* @__PURE__ */ jsx3("path", { d: "M4 12a8 8 0 018-8v3a5 5 0 00-5 5H4z", fill: "#4A49FF" })
+            /* @__PURE__ */ jsx4("circle", { cx: "12", cy: "12", r: "10", stroke: "#e5e7eb", strokeWidth: "3" }),
+            /* @__PURE__ */ jsx4("path", { d: "M4 12a8 8 0 018-8v3a5 5 0 00-5 5H4z", fill: "#4A49FF" })
           ]
         }
       ),
-      status === "success" && /* @__PURE__ */ jsx3("div", { style: { animation: "flopay-pop 0.4s cubic-bezier(0.34,1.56,0.64,1)" }, children: /* @__PURE__ */ jsxs("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-        /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "12", r: "11", fill: "#22c55e" }),
-        /* @__PURE__ */ jsx3(
+      status === "success" && /* @__PURE__ */ jsx4("div", { style: { animation: "flopay-pop 0.4s cubic-bezier(0.34,1.56,0.64,1)" }, children: /* @__PURE__ */ jsxs2("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+        /* @__PURE__ */ jsx4("circle", { cx: "12", cy: "12", r: "11", fill: "#22c55e" }),
+        /* @__PURE__ */ jsx4(
           "path",
           {
             d: "M7 12.5l3 3 7-7",
@@ -239,9 +287,9 @@ function ProcessingOverlay({ status, errorMessage }) {
           }
         )
       ] }) }),
-      status === "error" && /* @__PURE__ */ jsx3("div", { style: { animation: "flopay-shake 0.4s ease" }, children: /* @__PURE__ */ jsxs("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-        /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "12", r: "11", fill: "#ef4444" }),
-        /* @__PURE__ */ jsx3(
+      status === "error" && /* @__PURE__ */ jsx4("div", { style: { animation: "flopay-shake 0.4s ease" }, children: /* @__PURE__ */ jsxs2("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+        /* @__PURE__ */ jsx4("circle", { cx: "12", cy: "12", r: "11", fill: "#ef4444" }),
+        /* @__PURE__ */ jsx4(
           "path",
           {
             d: "M8 8l8 8M16 8l-8 8",
@@ -253,7 +301,7 @@ function ProcessingOverlay({ status, errorMessage }) {
         )
       ] }) })
     ] }),
-    /* @__PURE__ */ jsxs("span", { style: {
+    /* @__PURE__ */ jsxs2("span", { style: {
       fontSize: 14,
       fontWeight: 600,
       letterSpacing: "0.05em",
@@ -263,7 +311,7 @@ function ProcessingOverlay({ status, errorMessage }) {
       status === "success" && "PAYMENT SUCCESSFUL",
       status === "error" && "PAYMENT FAILED"
     ] }),
-    status === "error" && errorMessage && /* @__PURE__ */ jsx3("p", { style: {
+    status === "error" && errorMessage && /* @__PURE__ */ jsx4("p", { style: {
       fontSize: 13,
       color: "#6b7280",
       fontWeight: 400,
@@ -271,7 +319,7 @@ function ProcessingOverlay({ status, errorMessage }) {
       lineHeight: 1.4,
       margin: 0
     }, children: errorMessage }),
-    /* @__PURE__ */ jsx3("style", { children: `
+    /* @__PURE__ */ jsx4("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; } }
@@ -281,7 +329,7 @@ function ProcessingOverlay({ status, errorMessage }) {
 }
 var SplitCardForm = forwardRef(
   function SplitCardForm2(props, ref) {
-    return /* @__PURE__ */ jsx3(SplitCardFormInner, { ...props, innerRef: ref });
+    return /* @__PURE__ */ jsx4(SplitCardFormInner, { ...props, innerRef: ref });
   }
 );
 function PayPalButtonInner({
@@ -398,8 +446,8 @@ function PayPalButtonInner({
       setSubmitting(false);
     }
   }, [stripe, elements, sessionId, email, baseUrl, onTokenizedBody, onErrorChange]);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx3("div", { children: /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx4("div", { children: /* @__PURE__ */ jsx4(
       ExpressCheckoutElement,
       {
         onReady: () => setReady(true),
@@ -417,7 +465,7 @@ function PayPalButtonInner({
         }
       }
     ) }),
-    submitting && /* @__PURE__ */ jsx3(ProcessingOverlay, { status: "processing" })
+    submitting && /* @__PURE__ */ jsx4(ProcessingOverlay, { status: "processing" })
   ] });
 }
 function WalletButtonInner({
@@ -491,8 +539,8 @@ function WalletButtonInner({
     },
     [stripe, elements, sessionId, email, baseUrl, onTokenizedBody, onErrorChange]
   );
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx3("div", { children: /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx4("div", { children: /* @__PURE__ */ jsx4(
       ExpressCheckoutElement,
       {
         onReady: () => setReady(true),
@@ -513,7 +561,7 @@ function WalletButtonInner({
         }
       }
     ) }),
-    submitting && /* @__PURE__ */ jsx3(ProcessingOverlay, { status: "processing" })
+    submitting && /* @__PURE__ */ jsx4(ProcessingOverlay, { status: "processing" })
   ] });
 }
 function SplitCardFormInner({
@@ -541,7 +589,14 @@ function SplitCardFormInner({
   layout = "default",
   buttonsTheme,
   buttonsStyles: buttonsStylesOverride,
+  cardButtonContent,
   onButtonClick,
+  enableAVS = false,
+  avsLayout: avsLayoutProp = "row",
+  country: countryProp,
+  zip: zipProp,
+  onCountryChange,
+  onZipChange,
   totalAmount = 0,
   currency = "usd",
   innerRef
@@ -552,6 +607,10 @@ function SplitCardFormInner({
   const [processing, setProcessing] = useState2(false);
   const [error, setError] = useState2(null);
   const [is3DSActive, setIs3DSActive] = useState2(false);
+  const [selectedCountry, setSelectedCountry] = useState2(countryProp ?? "US");
+  const [zipCode, setZipCode] = useState2(zipProp ?? "");
+  const zipCodeRef = useRef2(zipProp ?? "");
+  const selectedCountryRef = useRef2(countryProp ?? "US");
   const [viewState, setViewState] = useState2("buttons");
   const showCardForm = viewState === "expanding" || viewState === "card";
   const TRANSITION_MS = 280;
@@ -639,7 +698,8 @@ function SplitCardFormInner({
               userId: userId ?? "",
               email: email ?? "",
               firstName: firstName ?? fullName.trim().split(/\s+/)[0] ?? "",
-              lastName: lastName ?? fullName.trim().split(/\s+/).slice(1).join(" ") ?? ""
+              lastName: lastName ?? fullName.trim().split(/\s+/).slice(1).join(" ") ?? "",
+              ...enableAVS ? { zip: zipCodeRef.current, country: selectedCountryRef.current } : {}
             },
             chv
           })
@@ -800,13 +860,24 @@ function SplitCardFormInner({
       updateError(null);
       let handedOff = false;
       try {
+        if (enableAVS && !zipCodeRef.current.trim()) {
+          updateError(getPostalCodeLabel(selectedCountryRef.current) + " is required");
+          return;
+        }
         const submitResult = await flopay.submitElements();
         if (submitResult.error) {
           updateError(submitResult.error.message);
           onError?.(submitResult.error);
           return;
         }
-        const pmResult = await flopay.createPaymentMethod();
+        const billingDetails = enableAVS ? {
+          name: fullName,
+          address: {
+            country: selectedCountryRef.current,
+            postal_code: zipCodeRef.current
+          }
+        } : void 0;
+        const pmResult = await flopay.createPaymentMethod(billingDetails);
         if (pmResult.error || !pmResult.paymentMethodId) {
           updateError(pmResult.error?.message ?? "Failed to create payment method.");
           return;
@@ -859,7 +930,7 @@ function SplitCardFormInner({
   );
   const isReady = flopay !== null && elements !== null;
   if (!isReady) {
-    return /* @__PURE__ */ jsx3("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." });
+    return /* @__PURE__ */ jsx4("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." });
   }
   const isButtons = layout === "buttons";
   const resolvedBorder = isButtons ? bStyles.cardInputBorder ?? "#e5e7eb" : "#A4A4FF";
@@ -875,19 +946,19 @@ function SplitCardFormInner({
       invalid: { color: "#ef4444" }
     }
   } : {};
-  const cardFormBlock = /* @__PURE__ */ jsxs("div", { style: {
+  const cardFormBlock = /* @__PURE__ */ jsxs2("div", { style: {
     backgroundColor: cardBg,
     borderRadius: "8px",
     padding: isButtons ? "0" : "1rem",
     ...isButtons ? bStyles.cardFormContainer : {},
     ...isButtons ? { padding: bStyles.cardFormContainer?.padding ?? "0" } : {}
   }, children: [
-    isButtons && showCardForm && /* @__PURE__ */ jsxs("div", { style: {
+    isButtons && showCardForm && /* @__PURE__ */ jsxs2("div", { style: {
       display: "flex",
       alignItems: "center",
       padding: "0.75rem 0 0.625rem"
     }, children: [
-      /* @__PURE__ */ jsxs(
+      /* @__PURE__ */ jsxs2(
         "button",
         {
           type: "button",
@@ -909,7 +980,7 @@ function SplitCardFormInner({
           },
           "aria-label": "Back to payment methods",
           children: [
-            /* @__PURE__ */ jsx3("span", { style: {
+            /* @__PURE__ */ jsx4("span", { style: {
               display: "inline-flex",
               alignItems: "center",
               justifyContent: "center",
@@ -919,12 +990,12 @@ function SplitCardFormInner({
               backgroundColor: "#f3f4f6",
               transition: "background-color 0.15s",
               ...bStyles.backButtonIcon
-            }, children: /* @__PURE__ */ jsx3("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx3("path", { d: "M15 18l-6-6 6-6" }) }) }),
+            }, children: /* @__PURE__ */ jsx4("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx4("path", { d: "M15 18l-6-6 6-6" }) }) }),
             "Go back"
           ]
         }
       ),
-      /* @__PURE__ */ jsx3("div", { style: {
+      /* @__PURE__ */ jsx4("div", { style: {
         flex: 1,
         textAlign: "center",
         fontWeight: 600,
@@ -934,16 +1005,16 @@ function SplitCardFormInner({
         ...bStyles.title
       }, children: "Secure card checkout" })
     ] }),
-    !isButtons && /* @__PURE__ */ jsx3("div", { style: { textAlign: "center", fontWeight: 600, fontSize: "1.1rem", padding: "0.5rem 0", color: "#262833" }, children: "Secure card checkout" }),
-    /* @__PURE__ */ jsx3("div", { style: {
+    !isButtons && /* @__PURE__ */ jsx4("div", { style: { textAlign: "center", fontWeight: 600, fontSize: "1.1rem", padding: "0.5rem 0", color: "#262833" }, children: "Secure card checkout" }),
+    /* @__PURE__ */ jsx4("div", { style: {
       backgroundColor: cardInputBg,
       border: `1px solid ${resolvedBorder}`,
       borderTopLeftRadius: "8px",
       borderTopRightRadius: "8px",
       padding: "10px"
-    }, children: /* @__PURE__ */ jsx3(CardNumberElement, { onReady: () => setFormReady(true), options: stripeElementStyle }) }),
-    /* @__PURE__ */ jsxs("div", { style: { display: "flex" }, children: [
-      /* @__PURE__ */ jsx3("div", { style: {
+    }, children: /* @__PURE__ */ jsx4(CardNumberElement, { onReady: () => setFormReady(true), options: stripeElementStyle }) }),
+    /* @__PURE__ */ jsxs2("div", { style: { display: "flex" }, children: [
+      /* @__PURE__ */ jsx4("div", { style: {
         flex: 1,
         backgroundColor: cardInputBg,
         border: `1px solid ${resolvedBorder}`,
@@ -951,23 +1022,23 @@ function SplitCardFormInner({
         borderRight: "none",
         borderBottomLeftRadius: "8px",
         padding: "10px"
-      }, children: /* @__PURE__ */ jsx3(CardExpiryElement, { options: stripeElementStyle }) }),
-      /* @__PURE__ */ jsx3("div", { style: {
+      }, children: /* @__PURE__ */ jsx4(CardExpiryElement, { options: stripeElementStyle }) }),
+      /* @__PURE__ */ jsx4("div", { style: {
         flex: 1,
         backgroundColor: cardInputBg,
         border: `1px solid ${resolvedBorder}`,
         borderTop: "none",
         borderBottomRightRadius: "8px",
         padding: "10px"
-      }, children: /* @__PURE__ */ jsx3(CardCvcElement, { options: stripeElementStyle }) })
+      }, children: /* @__PURE__ */ jsx4(CardCvcElement, { options: stripeElementStyle }) })
     ] }),
-    /* @__PURE__ */ jsx3("div", { style: {
+    /* @__PURE__ */ jsx4("div", { style: {
       backgroundColor: cardInputBg,
       border: `1px solid ${resolvedBorder}`,
       borderRadius: "8px",
       marginTop: "0.5rem",
       padding: "10px"
-    }, children: /* @__PURE__ */ jsx3(
+    }, children: /* @__PURE__ */ jsx4(
       "input",
       {
         placeholder: "Full Name on Card",
@@ -988,7 +1059,84 @@ function SplitCardFormInner({
         }
       }
     ) }),
-    displayError && /* @__PURE__ */ jsxs("div", { role: "alert", "data-testid": "flopay-error", style: {
+    enableAVS && /* @__PURE__ */ jsxs2("div", { style: {
+      display: "flex",
+      flexDirection: avsLayoutProp === "column" ? "column" : "row",
+      gap: avsLayoutProp === "column" ? "0.5rem" : "0",
+      marginTop: "0.5rem"
+    }, children: [
+      /* @__PURE__ */ jsx4("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__ */ jsx4(
+        "select",
+        {
+          value: selectedCountry,
+          onChange: (e) => {
+            selectedCountryRef.current = e.target.value;
+            setSelectedCountry(e.target.value);
+            onCountryChange?.(e.target.value);
+          },
+          disabled: isSubmitting,
+          autoComplete: "country",
+          "data-testid": "flopay-country",
+          style: {
+            width: "100%",
+            border: "none",
+            outline: "none",
+            background: "transparent",
+            fontSize: bStyles.cardInputFontSize ?? "16px",
+            fontFamily: "Poppins, sans-serif",
+            color: bStyles.cardInputColor ?? "#262833",
+            cursor: "pointer",
+            ...isButtons && bStyles.nameInput ? bStyles.nameInput : {}
+          },
+          children: COUNTRY_OPTIONS.map((c) => /* @__PURE__ */ jsxs2("option", { value: c.code, children: [
+            c.flag,
+            " ",
+            c.name
+          ] }, c.code))
+        }
+      ) }),
+      /* @__PURE__ */ jsx4("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__ */ jsx4(
+        "input",
+        {
+          placeholder: getPostalCodeLabel(selectedCountry),
+          autoComplete: "postal-code",
+          value: zipCode,
+          onChange: (e) => {
+            zipCodeRef.current = e.target.value;
+            setZipCode(e.target.value);
+            onZipChange?.(e.target.value);
+          },
+          disabled: isSubmitting,
+          required: true,
+          "data-testid": "flopay-zip",
+          style: {
+            width: "100%",
+            border: "none",
+            outline: "none",
+            background: "transparent",
+            fontSize: bStyles.cardInputFontSize ?? "16px",
+            fontFamily: "Poppins, sans-serif",
+            color: bStyles.cardInputColor ?? "#262833",
+            ...isButtons && bStyles.nameInput ? bStyles.nameInput : {}
+          }
+        }
+      ) })
+    ] }),
+    displayError && /* @__PURE__ */ jsxs2("div", { role: "alert", "data-testid": "flopay-error", style: {
       margin: "0.75rem 0",
       padding: "0.625rem 0.875rem",
       background: "#FEF2F2",
@@ -1002,10 +1150,10 @@ function SplitCardFormInner({
       gap: "0.5rem",
       ...isButtons && bStyles.errorBanner ? bStyles.errorBanner : {}
     }, children: [
-      /* @__PURE__ */ jsx3("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx3("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__ */ jsx4("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx4("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__ */ jsx3(
+    children ?? /* @__PURE__ */ jsx4(
       "button",
       {
         type: "submit",
@@ -1028,7 +1176,7 @@ function SplitCardFormInner({
         children: isSubmitting ? "PROCESSING..." : submitLabel
       }
     ),
-    !isButtons && /* @__PURE__ */ jsx3("div", { style: {
+    !isButtons && /* @__PURE__ */ jsx4("div", { style: {
       backgroundColor: "#EFF9F0",
       borderRadius: "8px",
       padding: "0.75rem",
@@ -1044,11 +1192,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__ */ jsxs("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
-      /* @__PURE__ */ jsx3(FloPayKeyframes, {}),
-      overlayStatus && /* @__PURE__ */ jsx3(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
-      /* @__PURE__ */ jsxs("div", { style: { display: "grid" }, children: [
-        /* @__PURE__ */ jsxs("div", { style: {
+    return /* @__PURE__ */ jsxs2("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
+      /* @__PURE__ */ jsx4(FloPayKeyframes, {}),
+      overlayStatus && /* @__PURE__ */ jsx4(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
+      /* @__PURE__ */ jsxs2("div", { style: { display: "grid" }, children: [
+        /* @__PURE__ */ jsxs2("div", { style: {
           gridArea: "1 / 1",
           display: "flex",
           flexDirection: "column",
@@ -1057,7 +1205,7 @@ function SplitCardFormInner({
           ...!isButtonsView && !buttonsAnim ? { visibility: "hidden", position: "absolute", pointerEvents: "none", width: "100%" } : {},
           ...buttonsAnim ? { animation: buttonsAnim, pointerEvents: "none" } : {}
         }, children: [
-          showPayPal && stripeInstance ? /* @__PURE__ */ jsx3(StripeElements, { stripe: stripeInstance, options: paypalOptions, children: /* @__PURE__ */ jsx3(
+          showPayPal && stripeInstance ? /* @__PURE__ */ jsx4(StripeElements, { stripe: stripeInstance, options: paypalOptions, children: /* @__PURE__ */ jsx4(
             PayPalButtonInner,
             {
               sessionId,
@@ -1068,8 +1216,8 @@ function SplitCardFormInner({
               isProcessing: isSubmitting,
               onButtonClick
             }
-          ) }) : showPayPal ? /* @__PURE__ */ jsx3("div", { style: { height: 44, borderRadius: 8, background: "#e5e7eb", animation: "flopay-pulse 1.5s ease-in-out infinite" } }) : null,
-          showWallets && stripeInstance ? /* @__PURE__ */ jsx3(StripeElements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ jsx3(
+          ) }) : showPayPal ? /* @__PURE__ */ jsx4("div", { style: { height: 44, borderRadius: 8, background: "#e5e7eb", animation: "flopay-pulse 1.5s ease-in-out infinite" } }) : null,
+          showWallets && stripeInstance ? /* @__PURE__ */ jsx4(StripeElements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ jsx4(
             WalletButtonInner,
             {
               sessionId,
@@ -1081,8 +1229,8 @@ function SplitCardFormInner({
               onErrorChange: updateError,
               onButtonClick
             }
-          ) }) : showWallets ? /* @__PURE__ */ jsx3("div", { style: { height: 44, borderRadius: 8, background: "#e5e7eb", animation: "flopay-pulse 1.5s ease-in-out infinite" } }) : null,
-          /* @__PURE__ */ jsxs(
+          ) }) : showWallets ? /* @__PURE__ */ jsx4("div", { style: { height: 44, borderRadius: 8, background: "#e5e7eb", animation: "flopay-pulse 1.5s ease-in-out infinite" } }) : null,
+          /* @__PURE__ */ jsx4(
             "button",
             {
               type: "button",
@@ -1115,17 +1263,10 @@ function SplitCardFormInner({
               onMouseUp: (e) => {
                 e.currentTarget.style.transform = "scale(1)";
               },
-              children: [
-                /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                  /* @__PURE__ */ jsx3("rect", { width: "20", height: "14", x: "2", y: "5", rx: "2" }),
-                  /* @__PURE__ */ jsx3("line", { x1: "2", x2: "22", y1: "10", y2: "10" })
-                ] }),
-                "Credit / Debit Card",
-                /* @__PURE__ */ jsx3("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__ */ jsx3("path", { d: "M9 18l6-6-6-6" }) })
-              ]
+              children: /* @__PURE__ */ jsx4(CardButtonContentSlot, { content: cardButtonContent })
             }
           ),
-          displayError && viewState === "buttons" && /* @__PURE__ */ jsxs("div", { role: "alert", "data-testid": "flopay-error", style: {
+          displayError && viewState === "buttons" && /* @__PURE__ */ jsxs2("div", { role: "alert", "data-testid": "flopay-error", style: {
             margin: "0.25rem 0",
             padding: "0.625rem 0.875rem",
             background: "#FEF2F2",
@@ -1139,11 +1280,11 @@ function SplitCardFormInner({
             gap: "0.5rem",
             ...bStyles.errorBanner ? bStyles.errorBanner : {}
           }, children: [
-            /* @__PURE__ */ jsx3("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx3("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__ */ jsx4("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx4("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__ */ jsx3("div", { style: {
+        isCardView && /* @__PURE__ */ jsx4("div", { style: {
           gridArea: "1 / 1",
           ...cardAnim ? { animation: cardAnim } : {},
           ...viewState === "collapsing" ? { pointerEvents: "none" } : {}
@@ -1151,10 +1292,10 @@ function SplitCardFormInner({
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
-    /* @__PURE__ */ jsx3(FloPayKeyframes, {}),
-    overlayStatus && /* @__PURE__ */ jsx3(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
-    showWallets && stripeInstance && /* @__PURE__ */ jsx3(StripeElements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs2("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsx4(FloPayKeyframes, {}),
+    overlayStatus && /* @__PURE__ */ jsx4(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
+    showWallets && stripeInstance && /* @__PURE__ */ jsx4(StripeElements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ jsx4(
       WalletButtonInner,
       {
         sessionId,
@@ -1166,7 +1307,7 @@ function SplitCardFormInner({
         onErrorChange: updateError
       }
     ) }),
-    showPayPal && stripeInstance && /* @__PURE__ */ jsx3(StripeElements, { stripe: stripeInstance, options: paypalOptions, children: /* @__PURE__ */ jsx3(
+    showPayPal && stripeInstance && /* @__PURE__ */ jsx4(StripeElements, { stripe: stripeInstance, options: paypalOptions, children: /* @__PURE__ */ jsx4(
       PayPalButtonInner,
       {
         sessionId,
@@ -1177,7 +1318,7 @@ function SplitCardFormInner({
         isProcessing: isSubmitting
       }
     ) }),
-    (showWallets && stripeInstance || showPayPal && stripeInstance) && /* @__PURE__ */ jsxs("div", { style: {
+    (showWallets && stripeInstance || showPayPal && stripeInstance) && /* @__PURE__ */ jsxs2("div", { style: {
       display: "flex",
       alignItems: "center",
       gap: "0.75rem",
@@ -1185,16 +1326,16 @@ function SplitCardFormInner({
       color: "#999",
       fontSize: "0.85rem"
     }, children: [
-      /* @__PURE__ */ jsx3("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } }),
-      /* @__PURE__ */ jsx3("span", { children: "or pay with card" }),
-      /* @__PURE__ */ jsx3("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } })
+      /* @__PURE__ */ jsx4("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } }),
+      /* @__PURE__ */ jsx4("span", { children: "or pay with card" }),
+      /* @__PURE__ */ jsx4("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } })
     ] }),
     cardFormBlock
   ] });
 }
 
 // src/flopay-checkout.tsx
-import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 function FloPayCheckout({
   sessionId: sessionIdProp,
   createSession: createSessionParams,
@@ -1212,7 +1353,10 @@ function FloPayCheckout({
   layout,
   buttonsTheme,
   buttonsStyles,
+  cardButtonContent,
   onButtonClick,
+  enableAVS,
+  avsLayout,
   submitLabel,
   className,
   children,
@@ -1615,23 +1759,23 @@ function FloPayCheckout({
     [session, isLoading, loadError, currentMode]
   );
   if (isLoading) {
-    if (loadingNode) return /* @__PURE__ */ jsx4(Fragment2, { children: loadingNode });
+    if (loadingNode) return /* @__PURE__ */ jsx5(Fragment3, { children: loadingNode });
     if (layout === "buttons") {
-      const skeletonBar = (h) => /* @__PURE__ */ jsx4("div", { style: {
+      const skeletonBar = (h) => /* @__PURE__ */ jsx5("div", { style: {
         height: h,
         borderRadius: 8,
         background: "#e5e7eb",
         animation: "flopay-loading-pulse 1.5s ease-in-out infinite"
       } });
-      return /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
+      return /* @__PURE__ */ jsxs3("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
         showPayPal && skeletonBar(44),
         (showApplePay || showGooglePay) && skeletonBar(44),
         skeletonBar(48),
-        /* @__PURE__ */ jsx4("style", { children: `@keyframes flopay-loading-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
+        /* @__PURE__ */ jsx5("style", { children: `@keyframes flopay-loading-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
       ] });
     }
-    return /* @__PURE__ */ jsxs2("div", { style: { display: "flex", justifyContent: "center", padding: 32 }, children: [
-      /* @__PURE__ */ jsx4("div", { style: {
+    return /* @__PURE__ */ jsxs3("div", { style: { display: "flex", justifyContent: "center", padding: 32 }, children: [
+      /* @__PURE__ */ jsx5("div", { style: {
         width: 24,
         height: 24,
         border: "2px solid #e5e7eb",
@@ -1639,12 +1783,12 @@ function FloPayCheckout({
         borderRadius: "50%",
         animation: "spin 0.6s linear infinite"
       } }),
-      /* @__PURE__ */ jsx4("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` })
+      /* @__PURE__ */ jsx5("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` })
     ] });
   }
   if (loadError) {
-    if (errorNode) return /* @__PURE__ */ jsx4(Fragment2, { children: errorNode(loadError) });
-    return /* @__PURE__ */ jsx4(
+    if (errorNode) return /* @__PURE__ */ jsx5(Fragment3, { children: errorNode(loadError) });
+    return /* @__PURE__ */ jsx5(
       "div",
       {
         style: {
@@ -1658,7 +1802,7 @@ function FloPayCheckout({
     );
   }
   if ((!flopay || !providerOptions) && createSessionParams && layout === "buttons") {
-    return /* @__PURE__ */ jsx4(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx4(
+    return /* @__PURE__ */ jsx5(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx5(
       InterimButtonsView,
       {
         onButtonClick,
@@ -1666,14 +1810,15 @@ function FloPayCheckout({
         showApplePay,
         showGooglePay,
         buttonsTheme,
-        buttonsStyles
+        buttonsStyles,
+        cardButtonContent
       }
     ) });
   }
-  if (!flopay || !providerOptions) return /* @__PURE__ */ jsx4(Fragment2, {});
+  if (!flopay || !providerOptions) return /* @__PURE__ */ jsx5(Fragment3, {});
   if (currentMode === "confirm") {
-    return /* @__PURE__ */ jsx4(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx4(FloPayProvider, { flopay, options: providerOptions, children: /* @__PURE__ */ jsxs2("div", { className, children: [
-      modeError && /* @__PURE__ */ jsx4(
+    return /* @__PURE__ */ jsx5(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx5(FloPayProvider, { flopay, options: providerOptions, children: /* @__PURE__ */ jsxs3("div", { className, children: [
+      modeError && /* @__PURE__ */ jsx5(
         "div",
         {
           style: {
@@ -1688,7 +1833,7 @@ function FloPayCheckout({
       renderConfirmButton ? renderConfirmButton({
         onConfirm: handleConfirmCheckout,
         isProcessing: confirmProcessing
-      }) : /* @__PURE__ */ jsx4(
+      }) : /* @__PURE__ */ jsx5(
         "button",
         {
           type: "button",
@@ -1711,8 +1856,8 @@ function FloPayCheckout({
       )
     ] }) }) });
   }
-  return /* @__PURE__ */ jsx4(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsxs2(FloPayProvider, { flopay, options: providerOptions, children: [
-    modeError && /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsxs3(FloPayProvider, { flopay, options: providerOptions, children: [
+    modeError && /* @__PURE__ */ jsx5(
       "div",
       {
         style: {
@@ -1727,7 +1872,7 @@ function FloPayCheckout({
         children: modeError
       }
     ),
-    children ? /* @__PURE__ */ jsx4(
+    children ? /* @__PURE__ */ jsx5(
       SessionInjector,
       {
         sessionId: resolvedSessionId,
@@ -1735,7 +1880,7 @@ function FloPayCheckout({
         session,
         children
       }
-    ) : /* @__PURE__ */ jsx4(
+    ) : /* @__PURE__ */ jsx5(
       SplitCardForm,
       {
         sessionId: resolvedSessionId,
@@ -1753,7 +1898,12 @@ function FloPayCheckout({
         layout,
         buttonsTheme,
         buttonsStyles,
+        cardButtonContent,
         onButtonClick,
+        enableAVS,
+        avsLayout,
+        country: session?.customer?.country,
+        zip: session?.customer?.zip,
         submitLabel,
         className
       }
@@ -1766,8 +1916,8 @@ function SessionInjector({
   session,
   children
 }) {
-  return /* @__PURE__ */ jsx4(Fragment2, { children: React4.Children.map(children, (child) => {
-    if (!React4.isValidElement(child)) return child;
+  return /* @__PURE__ */ jsx5(Fragment3, { children: React5.Children.map(children, (child) => {
+    if (!React5.isValidElement(child)) return child;
     const existing = child.props;
     const injected = {};
     if (!existing.sessionId) injected.sessionId = sessionId;
@@ -1781,7 +1931,7 @@ function SessionInjector({
         injected.lastName = session.customer.lastName;
     }
     if (Object.keys(injected).length === 0) return child;
-    return React4.cloneElement(child, injected);
+    return React5.cloneElement(child, injected);
   }) });
 }
 function InterimButtonsView({
@@ -1790,7 +1940,8 @@ function InterimButtonsView({
   showApplePay,
   showGooglePay,
   buttonsTheme,
-  buttonsStyles: stylesOverride
+  buttonsStyles: stylesOverride,
+  cardButtonContent
 }) {
   const [showCardForm, setShowCardForm] = useState3(false);
   const bStyles = useMemo3(() => {
@@ -1805,7 +1956,7 @@ function InterimButtonsView({
       title: { ...base.title, ...stylesOverride.title }
     };
   }, [buttonsTheme, stylesOverride]);
-  const skeleton = (h) => /* @__PURE__ */ jsx4("div", { style: {
+  const skeleton = (h) => /* @__PURE__ */ jsx5("div", { style: {
     height: h,
     borderRadius: 8,
     background: "#e5e7eb",
@@ -1814,15 +1965,15 @@ function InterimButtonsView({
   if (showCardForm) {
     const inputBorder = bStyles.cardInputBorder ?? "#e5e7eb";
     const inputBg = bStyles.cardInputBackground ?? "white";
-    return /* @__PURE__ */ jsxs2("div", { style: {
+    return /* @__PURE__ */ jsxs3("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__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", padding: "0.75rem 0 0.625rem" }, children: [
-        /* @__PURE__ */ jsxs2(
+      /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", padding: "0.75rem 0 0.625rem" }, children: [
+        /* @__PURE__ */ jsxs3(
           "button",
           {
             type: "button",
@@ -1842,7 +1993,7 @@ function InterimButtonsView({
               ...bStyles.backButton
             },
             children: [
-              /* @__PURE__ */ jsx4("span", { style: {
+              /* @__PURE__ */ jsx5("span", { style: {
                 display: "inline-flex",
                 alignItems: "center",
                 justifyContent: "center",
@@ -1851,12 +2002,12 @@ function InterimButtonsView({
                 borderRadius: "50%",
                 backgroundColor: "#f3f4f6",
                 ...bStyles.backButtonIcon
-              }, children: /* @__PURE__ */ jsx4("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx4("path", { d: "M15 18l-6-6 6-6" }) }) }),
+              }, children: /* @__PURE__ */ jsx5("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx5("path", { d: "M15 18l-6-6 6-6" }) }) }),
               "Go back"
             ]
           }
         ),
-        /* @__PURE__ */ jsx4("div", { style: {
+        /* @__PURE__ */ jsx5("div", { style: {
           flex: 1,
           textAlign: "center",
           fontWeight: 600,
@@ -1866,13 +2017,13 @@ function InterimButtonsView({
           ...bStyles.title
         }, children: "Secure card checkout" })
       ] }),
-      /* @__PURE__ */ jsx4("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTopLeftRadius: 8, borderTopRightRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx4("div", { style: { width: "60%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
-      /* @__PURE__ */ jsxs2("div", { style: { display: "flex" }, children: [
-        /* @__PURE__ */ jsx4("div", { style: { flex: 1, backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTop: "none", borderRight: "none", borderBottomLeftRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx4("div", { style: { width: "50%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
-        /* @__PURE__ */ jsx4("div", { style: { flex: 1, backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTop: "none", borderBottomRightRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx4("div", { style: { width: "40%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) })
+      /* @__PURE__ */ jsx5("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTopLeftRadius: 8, borderTopRightRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx5("div", { style: { width: "60%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
+      /* @__PURE__ */ jsxs3("div", { style: { display: "flex" }, children: [
+        /* @__PURE__ */ jsx5("div", { style: { flex: 1, backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTop: "none", borderRight: "none", borderBottomLeftRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx5("div", { style: { width: "50%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
+        /* @__PURE__ */ jsx5("div", { style: { flex: 1, backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTop: "none", borderBottomRightRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx5("div", { style: { width: "40%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) })
       ] }),
-      /* @__PURE__ */ jsx4("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderRadius: 8, marginTop: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx4("div", { style: { width: "45%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
-      /* @__PURE__ */ jsx4("div", { style: {
+      /* @__PURE__ */ jsx5("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderRadius: 8, marginTop: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx5("div", { style: { width: "45%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
+      /* @__PURE__ */ jsx5("div", { style: {
         height: 50,
         borderRadius: 8,
         marginTop: 16,
@@ -1881,7 +2032,7 @@ function InterimButtonsView({
         ...bStyles.submitButton,
         opacity: 0.5
       } }),
-      /* @__PURE__ */ jsx4("style", { children: `
+      /* @__PURE__ */ jsx5("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); }
@@ -1891,10 +2042,10 @@ function InterimButtonsView({
         ` })
     ] });
   }
-  return /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
+  return /* @__PURE__ */ jsxs3("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
     showPayPal && skeleton(44),
     (showApplePay || showGooglePay) && skeleton(44),
-    /* @__PURE__ */ jsxs2(
+    /* @__PURE__ */ jsx5(
       "button",
       {
         type: "button",
@@ -1927,28 +2078,21 @@ function InterimButtonsView({
         onMouseUp: (e) => {
           e.currentTarget.style.transform = "scale(1)";
         },
-        children: [
-          /* @__PURE__ */ jsxs2("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-            /* @__PURE__ */ jsx4("rect", { width: "20", height: "14", x: "2", y: "5", rx: "2" }),
-            /* @__PURE__ */ jsx4("line", { x1: "2", x2: "22", y1: "10", y2: "10" })
-          ] }),
-          "Credit / Debit Card",
-          /* @__PURE__ */ jsx4("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__ */ jsx4("path", { d: "M9 18l6-6-6-6" }) })
-        ]
+        children: /* @__PURE__ */ jsx5(CardButtonContentSlot, { content: cardButtonContent })
       }
     ),
-    /* @__PURE__ */ jsx4("style", { children: `@keyframes flopay-interim-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
+    /* @__PURE__ */ jsx5("style", { children: `@keyframes flopay-interim-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
   ] });
 }
 
 // src/checkout-form.tsx
 import { FloPayError as FloPayError3 } from "@flopay/shared";
 import { forwardRef as forwardRef2, useCallback as useCallback3, useEffect as useEffect5, useImperativeHandle as useImperativeHandle2, useState as useState4 } from "react";
-import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var WALLET_RESUME_KEY2 = "flopay_wallet_resume";
 var CheckoutForm = forwardRef2(
   function CheckoutForm2(props, ref) {
-    return /* @__PURE__ */ jsx5(CheckoutFormInner, { ...props, innerRef: ref });
+    return /* @__PURE__ */ jsx6(CheckoutFormInner, { ...props, innerRef: ref });
   }
 );
 function CheckoutFormInner({
@@ -2191,8 +2335,8 @@ function CheckoutFormInner({
     [flopay, elements, isSubmitting, sessionId, email, baseUrl, isSelfContained, dispatchTokenizedBody, onError, updateError]
   );
   const isReady = flopay !== null && elements !== null;
-  return /* @__PURE__ */ jsxs3("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
-    (is3DSActive || isSubmitting) && /* @__PURE__ */ jsx5("div", { "data-testid": "flopay-overlay", style: {
+  return /* @__PURE__ */ jsxs4("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
+    (is3DSActive || isSubmitting) && /* @__PURE__ */ jsx6("div", { "data-testid": "flopay-overlay", style: {
       position: "absolute",
       inset: 0,
       background: "rgba(255,255,255,0.7)",
@@ -2201,12 +2345,12 @@ function CheckoutFormInner({
       justifyContent: "center",
       zIndex: 10
     }, children: is3DSActive ? "Verifying payment..." : "Processing..." }),
-    !isReady && /* @__PURE__ */ jsx5("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." }),
-    isReady && /* @__PURE__ */ jsxs3(Fragment3, { children: [
-      /* @__PURE__ */ jsx5(PaymentElement, { options: { layout } }),
-      showAddress && /* @__PURE__ */ jsx5(AddressElement, { options: { mode: showAddress === true ? "billing" : showAddress } }),
-      displayError && /* @__PURE__ */ jsx5("div", { role: "alert", "data-testid": "flopay-error", style: { color: "red", margin: "0.75rem 0" }, children: displayError }),
-      children ?? /* @__PURE__ */ jsx5(
+    !isReady && /* @__PURE__ */ jsx6("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." }),
+    isReady && /* @__PURE__ */ jsxs4(Fragment4, { children: [
+      /* @__PURE__ */ jsx6(PaymentElement, { options: { layout } }),
+      showAddress && /* @__PURE__ */ jsx6(AddressElement, { options: { mode: showAddress === true ? "billing" : showAddress } }),
+      displayError && /* @__PURE__ */ jsx6("div", { role: "alert", "data-testid": "flopay-error", style: { color: "red", margin: "0.75rem 0" }, children: displayError }),
+      children ?? /* @__PURE__ */ jsx6(
         "button",
         {
           type: "submit",
@@ -2222,7 +2366,7 @@ function CheckoutFormInner({
 // src/paypal-button.tsx
 import { FloPayError as FloPayError4 } from "@flopay/shared";
 import { useCallback as useCallback4, useEffect as useEffect6, useRef as useRef4, useState as useState5 } from "react";
-import { Fragment as Fragment4, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 function PayPalButton({
   sessionId,
   billingApiUrl,
@@ -2377,11 +2521,11 @@ function PayPalButton({
     }
   }, [flopay, elements, sessionId, email, baseUrl, dispatchTokenizedBody, onErrorChange]);
   if (!flopay || !elements) {
-    return /* @__PURE__ */ jsx6("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6, animation: "pulse 1.5s infinite" } });
+    return /* @__PURE__ */ jsx7("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6, animation: "pulse 1.5s infinite" } });
   }
-  return /* @__PURE__ */ jsxs4(Fragment4, { children: [
-    !ready && /* @__PURE__ */ jsx6("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6 } }),
-    /* @__PURE__ */ jsx6("div", { style: ready ? {} : { display: "none" }, children: /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsxs5(Fragment5, { children: [
+    !ready && /* @__PURE__ */ jsx7("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6 } }),
+    /* @__PURE__ */ jsx7("div", { style: ready ? {} : { display: "none" }, children: /* @__PURE__ */ jsx7(
       "button",
       {
         type: "button",
@@ -2403,7 +2547,7 @@ function PayPalButton({
         children: submitting ? "Processing..." : "PayPal"
       }
     ) }),
-    (submitting || isProcessing) && /* @__PURE__ */ jsx6("div", { style: {
+    (submitting || isProcessing) && /* @__PURE__ */ jsx7("div", { style: {
       position: "fixed",
       inset: 0,
       background: "rgba(0,0,0,0.4)",
@@ -2411,7 +2555,7 @@ function PayPalButton({
       alignItems: "center",
       justifyContent: "center",
       zIndex: 1e3
-    }, children: /* @__PURE__ */ jsx6("div", { style: {
+    }, children: /* @__PURE__ */ jsx7("div", { style: {
       background: "white",
       borderRadius: 8,
       padding: "1.5rem",