@flopay/react 0.1.6 → 0.3.1

package/dist/index.cjs

@@ -118,7 +118,7 @@ function FloPayProvider({
 // src/flopay-checkout.tsx
 var import_react6 = __toESM(require("react"), 1);
 var import_js = require("@flopay/js");
-var import_shared4 = require("@flopay/shared");
+var import_shared5 = require("@flopay/shared");
 
 // src/elements.tsx
 var import_react3 = require("react");
@@ -182,6 +182,7 @@ 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");
 
 // src/hooks.ts
@@ -204,9 +205,32 @@ function useBillingApiUrl() {
 }
 
 // src/split-card-form.tsx
-var import_shared3 = require("@flopay/shared");
+var import_shared4 = require("@flopay/shared");
 var import_jsx_runtime3 = 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; } }
+@keyframes flopay-fade-in { 0% { opacity: 0; } 100% { opacity: 1; } }
+@keyframes flopay-buttons-enter {
+  0% { opacity: 0; transform: translateX(-16px) scale(0.97); }
+  100% { opacity: 1; transform: translateX(0) scale(1); }
+}
+@keyframes flopay-buttons-exit {
+  0% { opacity: 1; transform: translateX(0) scale(1); }
+  100% { opacity: 0; transform: translateX(-16px) scale(0.97); }
+}
+@keyframes flopay-card-enter {
+  0% { opacity: 0; transform: translateX(16px) scale(0.97); }
+  100% { opacity: 1; transform: translateX(0) scale(1); }
+}
+@keyframes flopay-card-exit {
+  0% { opacity: 1; transform: translateX(0) scale(1); }
+  100% { opacity: 0; transform: translateX(16px) scale(0.97); }
+}
+`;
+function FloPayKeyframes() {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("style", { children: FLOPAY_KEYFRAMES });
+}
 function ProcessingOverlay({ status, errorMessage }) {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: {
     position: "fixed",
@@ -296,8 +320,6 @@ function ProcessingOverlay({ status, errorMessage }) {
           @keyframes flopay-pop { 0% { transform: scale(0); } 100% { transform: scale(1); } }
           @keyframes flopay-draw { to { stroke-dashoffset: 0; } }
           @keyframes flopay-shake { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-4px); } 40%,80% { transform: translateX(4px); } }
-          @keyframes flopay-expand { 0% { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(-8px); } 100% { opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(0); } }
-          @keyframes flopay-fade-in { 0% { opacity: 0; } 100% { opacity: 1; } }
         ` })
   ] }) });
 }
@@ -312,7 +334,8 @@ function PayPalButtonInner({
   billingApiUrl,
   onTokenizedBody,
   onErrorChange,
-  isProcessing = false
+  isProcessing = false,
+  onButtonClick
 }) {
   const stripe = (0, import_react_stripe_js.useStripe)();
   const elements = (0, import_react_stripe_js.useElements)();
@@ -365,6 +388,7 @@ function PayPalButtonInner({
   }, [stripe, onTokenizedBody, onErrorChange]);
   const handlePayPalConfirm = (0, import_react5.useCallback)(async (_event) => {
     if (!stripe || !elements) return;
+    onButtonClick?.("paypal");
     try {
       setSubmitting(true);
       onErrorChange?.(null);
@@ -419,7 +443,7 @@ function PayPalButtonInner({
     }
   }, [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", { style: { marginBottom: ready ? "0.5rem" : 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       import_react_stripe_js.ExpressCheckoutElement,
       {
         onReady: () => setReady(true),
@@ -447,7 +471,8 @@ function WalletButtonInner({
   showApplePay = true,
   showGooglePay = true,
   onTokenizedBody,
-  onErrorChange
+  onErrorChange,
+  onButtonClick
 }) {
   const stripe = (0, import_react_stripe_js.useStripe)();
   const elements = (0, import_react_stripe_js.useElements)();
@@ -457,6 +482,8 @@ function WalletButtonInner({
   const handleWalletConfirm = (0, import_react5.useCallback)(
     async (_event) => {
       if (!stripe || !elements) return;
+      const walletType = _event.expressPaymentType;
+      onButtonClick?.(walletType === "apple_pay" ? "apple_pay" : "google_pay");
       try {
         setSubmitting(true);
         onErrorChange?.(null);
@@ -509,7 +536,7 @@ 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", { style: { marginBottom: ready ? "0.5rem" : 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       import_react_stripe_js.ExpressCheckoutElement,
       {
         onReady: () => setReady(true),
@@ -556,6 +583,15 @@ function SplitCardFormInner({
   showApplePay = true,
   showGooglePay = true,
   layout = "default",
+  buttonsTheme,
+  buttonsStyles: buttonsStylesOverride,
+  onButtonClick,
+  enableAVS = false,
+  avsLayout: avsLayoutProp = "row",
+  country: countryProp,
+  zip: zipProp,
+  onCountryChange,
+  onZipChange,
   totalAmount = 0,
   currency = "usd",
   innerRef
@@ -565,14 +601,42 @@ function SplitCardFormInner({
   const contextBillingUrl = useBillingApiUrl();
   const [processing, setProcessing] = (0, import_react5.useState)(false);
   const [error, setError] = (0, import_react5.useState)(null);
-  const [showCardForm, setShowCardForm] = (0, import_react5.useState)(false);
   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 showCardForm = viewState === "expanding" || viewState === "card";
+  const TRANSITION_MS = 280;
+  const expandToCard = (0, import_react5.useCallback)(() => {
+    setViewState("expanding");
+    setTimeout(() => setViewState("card"), TRANSITION_MS);
+  }, []);
+  const collapseToButtons = (0, import_react5.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 resolvedBillingApiUrl = billingApiUrl || contextBillingUrl;
   const displayError = externalError ?? error;
+  const bStyles = (0, import_react5.useMemo)(() => {
+    const base = (0, import_shared3.resolveButtonsLayoutTheme)(buttonsTheme);
+    if (!buttonsStylesOverride) return base;
+    return {
+      ...base,
+      ...buttonsStylesOverride,
+      cardButton: { ...base.cardButton, ...buttonsStylesOverride.cardButton },
+      cardFormContainer: { ...base.cardFormContainer, ...buttonsStylesOverride.cardFormContainer },
+      backButton: { ...base.backButton, ...buttonsStylesOverride.backButton },
+      backButtonIcon: { ...base.backButtonIcon, ...buttonsStylesOverride.backButtonIcon },
+      submitButton: { ...base.submitButton, ...buttonsStylesOverride.submitButton },
+      title: { ...base.title, ...buttonsStylesOverride.title }
+    };
+  }, [buttonsTheme, buttonsStylesOverride]);
   const isSubmitting = externalProcessing ?? processing;
   const isSelfContained = !onTokenizedBody;
   const baseUrl = resolvedBillingApiUrl.replace(/\/+$/, "");
@@ -629,7 +693,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
           })
@@ -784,24 +849,36 @@ function SplitCardFormInner({
     async (e) => {
       e.preventDefault();
       if (!flopay || !elements || isSubmitting || processingRef.current) return;
+      onButtonClick?.("card");
       setProcessing(true);
       setOverlayStatus("processing");
       updateError(null);
       let handedOff = false;
       try {
+        if (enableAVS && !zipCodeRef.current.trim()) {
+          updateError((0, import_shared3.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;
         }
         if (!sessionId || !email) {
-          throw new import_shared3.FloPayError("Missing sessionId or email", "validation_error");
+          throw new import_shared4.FloPayError("Missing sessionId or email", "validation_error");
         }
         const intentResponse = await fetch(`${baseUrl}/v1/checkouts/payments/intents`, {
           method: "POST",
@@ -813,10 +890,10 @@ function SplitCardFormInner({
             isPaypal: false
           })
         });
-        if (!intentResponse.ok) throw new import_shared3.FloPayError("Failed to create payment intent", "api_error");
+        if (!intentResponse.ok) throw new import_shared4.FloPayError("Failed to create payment intent", "api_error");
         const intentJson = await intentResponse.json();
         const intentClientSecret = intentJson.data?.id;
-        if (!intentClientSecret) throw new import_shared3.FloPayError("No client_secret in payment intent response", "api_error");
+        if (!intentClientSecret) throw new import_shared4.FloPayError("No client_secret in payment intent response", "api_error");
         const confirmResult = await flopay.confirmCardPayment({
           clientSecret: intentClientSecret,
           paymentMethodId: pmResult.paymentMethodId
@@ -851,15 +928,25 @@ function SplitCardFormInner({
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." });
   }
   const isButtons = layout === "buttons";
-  const cardBorderColor = isButtons ? "#e5e7eb" : "#A4A4FF";
-  const cardBg = isButtons ? "white" : "#EDEDFF";
+  const resolvedBorder = isButtons ? bStyles.cardInputBorder ?? "#e5e7eb" : "#A4A4FF";
+  const cardBg = isButtons ? bStyles.cardFormContainer?.backgroundColor ?? "white" : "#EDEDFF";
+  const cardInputBg = isButtons ? bStyles.cardInputBackground ?? "white" : "white";
+  const stripeElementStyle = isButtons && (bStyles.cardInputColor || bStyles.cardInputPlaceholderColor || bStyles.cardInputFontSize) ? {
+    style: {
+      base: {
+        ...bStyles.cardInputColor ? { color: bStyles.cardInputColor } : {},
+        ...bStyles.cardInputFontSize ? { fontSize: bStyles.cardInputFontSize } : {},
+        ...bStyles.cardInputPlaceholderColor ? { "::placeholder": { color: bStyles.cardInputPlaceholderColor } } : {}
+      },
+      invalid: { color: "#ef4444" }
+    }
+  } : {};
   const cardFormBlock = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: {
     backgroundColor: cardBg,
     borderRadius: "8px",
     padding: isButtons ? "0" : "1rem",
-    ...isButtons && showCardForm ? {
-      animation: "flopay-expand 0.4s cubic-bezier(0.16,1,0.3,1) both"
-    } : {}
+    ...isButtons ? bStyles.cardFormContainer : {},
+    ...isButtons ? { padding: bStyles.cardFormContainer?.padding ?? "0" } : {}
   }, children: [
     isButtons && showCardForm && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: {
       display: "flex",
@@ -870,7 +957,7 @@ function SplitCardFormInner({
         "button",
         {
           type: "button",
-          onClick: () => setShowCardForm(false),
+          onClick: collapseToButtons,
           style: {
             display: "inline-flex",
             alignItems: "center",
@@ -879,17 +966,12 @@ function SplitCardFormInner({
             border: "none",
             cursor: "pointer",
             color: "#4b5563",
-            fontSize: "0.85rem",
+            fontSize: bStyles.backButtonFontSize ?? "0.85rem",
             fontWeight: 500,
             padding: 0,
             transition: "color 0.15s",
-            flexShrink: 0
-          },
-          onMouseOver: (e) => {
-            e.currentTarget.style.color = "#1f2937";
-          },
-          onMouseOut: (e) => {
-            e.currentTarget.style.color = "#4b5563";
+            flexShrink: 0,
+            ...bStyles.backButton
           },
           "aria-label": "Back to payment methods",
           children: [
@@ -901,44 +983,53 @@ function SplitCardFormInner({
               height: 28,
               borderRadius: "50%",
               backgroundColor: "#f3f4f6",
-              transition: "background-color 0.15s"
+              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" }) }) }),
             "Go back"
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { flex: 1, textAlign: "center", fontWeight: 600, fontSize: "1.05rem", color: "#262833", paddingRight: 80 }, children: "Secure card checkout" })
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: {
+        flex: 1,
+        textAlign: "center",
+        fontWeight: 600,
+        fontSize: bStyles.titleFontSize ?? "1.05rem",
+        color: "#262833",
+        paddingRight: 80,
+        ...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: {
-      backgroundColor: "white",
-      border: `1px solid ${cardBorderColor}`,
+      backgroundColor: cardInputBg,
+      border: `1px solid ${resolvedBorder}`,
       borderTopLeftRadius: "8px",
       borderTopRightRadius: "8px",
       padding: "10px"
-    }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CardNumberElement, { onReady: () => setFormReady(true) }) }),
+    }, 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: {
         flex: 1,
-        backgroundColor: "white",
-        border: `1px solid ${cardBorderColor}`,
+        backgroundColor: cardInputBg,
+        border: `1px solid ${resolvedBorder}`,
         borderTop: "none",
         borderRight: "none",
         borderBottomLeftRadius: "8px",
         padding: "10px"
-      }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CardExpiryElement, {}) }),
+      }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CardExpiryElement, { options: stripeElementStyle }) }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: {
         flex: 1,
-        backgroundColor: "white",
-        border: `1px solid ${cardBorderColor}`,
+        backgroundColor: cardInputBg,
+        border: `1px solid ${resolvedBorder}`,
         borderTop: "none",
         borderBottomRightRadius: "8px",
         padding: "10px"
-      }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CardCvcElement, {}) })
+      }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CardCvcElement, { options: stripeElementStyle }) })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: {
-      backgroundColor: "white",
-      border: `1px solid ${cardBorderColor}`,
+      backgroundColor: cardInputBg,
+      border: `1px solid ${resolvedBorder}`,
       borderRadius: "8px",
       marginTop: "0.5rem",
       padding: "10px"
@@ -955,12 +1046,91 @@ function SplitCardFormInner({
           width: "100%",
           border: "none",
           outline: "none",
-          fontSize: "16px",
+          background: "transparent",
+          fontSize: bStyles.cardInputFontSize ?? "16px",
           fontFamily: "Poppins, sans-serif",
-          color: "#262833"
+          color: bStyles.cardInputColor ?? "#262833",
+          ...isButtons && bStyles.nameInput ? bStyles.nameInput : {}
         }
       }
     ) }),
+    enableAVS && /* @__PURE__ */ (0, import_jsx_runtime3.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: {
+        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)(
+        "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: import_shared3.COUNTRY_OPTIONS.map((c) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("option", { value: c.code, children: [
+            c.flag,
+            " ",
+            c.name
+          ] }, c.code))
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.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)(
+        "input",
+        {
+          placeholder: (0, import_shared3.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__ */ (0, import_jsx_runtime3.jsxs)("div", { role: "alert", "data-testid": "flopay-error", style: {
       margin: "0.75rem 0",
       padding: "0.625rem 0.875rem",
@@ -972,7 +1142,8 @@ function SplitCardFormInner({
       fontWeight: 600,
       display: "flex",
       alignItems: "center",
-      gap: "0.5rem"
+      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" }) }),
       displayError
@@ -991,10 +1162,11 @@ function SplitCardFormInner({
           color: "white",
           border: "none",
           borderRadius: "8px",
-          fontSize: "1rem",
+          fontSize: isButtons && bStyles.submitButtonFontSize ? bStyles.submitButtonFontSize : "1rem",
           fontWeight: 600,
           cursor: !formReady || isSubmitting ? "not-allowed" : "pointer",
-          opacity: !formReady || isSubmitting ? 0.5 : 1
+          opacity: !formReady || isSubmitting ? 0.5 : 1,
+          ...isButtons ? bStyles.submitButton : {}
         },
         children: isSubmitting ? "PROCESSING..." : submitLabel
       }
@@ -1011,103 +1183,119 @@ function SplitCardFormInner({
     }, children: "Secure Card Checkout" })
   ] });
   if (layout === "buttons") {
+    const isButtonsView = viewState === "buttons" || viewState === "expanding";
+    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: showCardForm ? "none" : "flex",
-        flexDirection: "column",
-        gap: "0.5rem"
-      }, 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)(
-          PayPalButtonInner,
-          {
-            sessionId,
-            email,
-            billingApiUrl: resolvedBillingApiUrl,
-            onTokenizedBody: dispatchTokenizedBody,
-            onErrorChange: updateError,
-            isProcessing: isSubmitting
-          }
-        ) }),
-        showWallets && stripeInstance && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_stripe_js.Elements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          WalletButtonInner,
-          {
-            sessionId,
-            email,
-            billingApiUrl: resolvedBillingApiUrl,
-            showApplePay,
-            showGooglePay,
-            onTokenizedBody: dispatchTokenizedBody,
-            onErrorChange: updateError
-          }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-          "button",
-          {
-            type: "button",
-            onClick: () => setShowCardForm(true),
-            style: {
-              width: "100%",
-              padding: "0.9rem 1rem",
-              backgroundColor: "white",
-              color: "#262833",
-              border: "1px solid #d1d5db",
-              borderRadius: "8px",
-              fontSize: "0.95rem",
-              fontWeight: 600,
-              cursor: "pointer",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              gap: "0.625rem",
-              transition: "border-color 0.2s, box-shadow 0.2s, transform 0.1s",
-              boxShadow: "0 1px 2px rgba(0,0,0,0.04)"
-            },
-            onMouseOver: (e) => {
-              e.currentTarget.style.borderColor = "#A4A4FF";
-              e.currentTarget.style.boxShadow = "0 0 0 1px #A4A4FF, 0 2px 8px rgba(74,73,255,0.08)";
-            },
-            onMouseOut: (e) => {
-              e.currentTarget.style.borderColor = "#d1d5db";
-              e.currentTarget.style.boxShadow = "0 1px 2px rgba(0,0,0,0.04)";
-            },
-            onMouseDown: (e) => {
-              e.currentTarget.style.transform = "scale(0.985)";
-            },
-            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: { marginLeft: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M9 18l6-6-6-6" }) })
-            ]
-          }
-        ),
-        displayError && !showCardForm && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { role: "alert", "data-testid": "flopay-error", style: {
-          margin: "0.25rem 0",
-          padding: "0.625rem 0.875rem",
-          background: "#FEF2F2",
-          border: "1px solid #FECACA",
-          borderRadius: "8px",
-          color: "#991B1B",
-          fontSize: "0.85rem",
-          fontWeight: 600,
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "grid" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: {
+          gridArea: "1 / 1",
           display: "flex",
-          alignItems: "center",
-          gap: "0.5rem"
+          flexDirection: "column",
+          gap: "0.5rem",
+          // When card form is showing (and not transitioning), hide but keep mounted
+          ...!isButtonsView && !buttonsAnim ? { visibility: "hidden", position: "absolute", pointerEvents: "none", width: "100%" } : {},
+          ...buttonsAnim ? { animation: buttonsAnim, pointerEvents: "none" } : {}
         }, children: [
-          /* @__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" }) }),
-          displayError
-        ] })
-      ] }),
-      showCardForm && cardFormBlock
+          showPayPal && stripeInstance ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_stripe_js.Elements, { stripe: stripeInstance, options: paypalOptions, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            PayPalButtonInner,
+            {
+              sessionId,
+              email,
+              billingApiUrl: resolvedBillingApiUrl,
+              onTokenizedBody: dispatchTokenizedBody,
+              onErrorChange: updateError,
+              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)(
+            WalletButtonInner,
+            {
+              sessionId,
+              email,
+              billingApiUrl: resolvedBillingApiUrl,
+              showApplePay,
+              showGooglePay,
+              onTokenizedBody: dispatchTokenizedBody,
+              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)(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                onButtonClick?.("card");
+                expandToCard();
+              },
+              style: {
+                width: "100%",
+                padding: "0.9rem 1rem",
+                backgroundColor: "white",
+                color: "#262833",
+                border: "1px solid #d1d5db",
+                borderRadius: "8px",
+                fontSize: bStyles.cardButtonFontSize ?? "0.95rem",
+                fontWeight: 600,
+                cursor: "pointer",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                gap: "0.625rem",
+                transition: "border-color 0.2s, box-shadow 0.2s, transform 0.1s",
+                boxShadow: "0 1px 2px rgba(0,0,0,0.04)",
+                position: "relative",
+                ...bStyles.cardButton
+              },
+              onMouseDown: (e) => {
+                e.currentTarget.style.transform = "scale(0.985)";
+              },
+              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" }) })
+              ]
+            }
+          ),
+          displayError && viewState === "buttons" && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { role: "alert", "data-testid": "flopay-error", style: {
+            margin: "0.25rem 0",
+            padding: "0.625rem 0.875rem",
+            background: "#FEF2F2",
+            border: "1px solid #FECACA",
+            borderRadius: "8px",
+            color: "#991B1B",
+            fontSize: "0.85rem",
+            fontWeight: 600,
+            display: "flex",
+            alignItems: "center",
+            gap: "0.5rem",
+            ...bStyles.errorBanner ? bStyles.errorBanner : {}
+          }, children: [
+            /* @__PURE__ */ (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" }) }),
+            displayError
+          ] })
+        ] }),
+        isCardView && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: {
+          gridArea: "1 / 1",
+          ...cardAnim ? { animation: cardAnim } : {},
+          ...viewState === "collapsing" ? { pointerEvents: "none" } : {}
+        }, children: cardFormBlock })
+      ] })
     ] });
   }
   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)(
       WalletButtonInner,
@@ -1151,7 +1339,8 @@ function SplitCardFormInner({
 // src/flopay-checkout.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function FloPayCheckout({
-  sessionId,
+  sessionId: sessionIdProp,
+  createSession: createSessionParams,
   billingApiUrl,
   appearance,
   locale,
@@ -1164,6 +1353,11 @@ function FloPayCheckout({
   showApplePay = true,
   showGooglePay = true,
   layout,
+  buttonsTheme,
+  buttonsStyles,
+  onButtonClick,
+  enableAVS,
+  avsLayout,
   submitLabel,
   className,
   children,
@@ -1172,11 +1366,12 @@ function FloPayCheckout({
   renderConfirmButton,
   onSessionCompleted
 }) {
-  const resolvedBillingUrl = (0, import_shared4.resolveBillingApiUrl)(billingApiUrl);
+  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");
@@ -1199,7 +1394,7 @@ function FloPayCheckout({
           "x-user-id": sess.customer?.id ?? ""
         },
         body: JSON.stringify({
-          sessionId,
+          sessionId: resolvedSessionId,
           tokenizedData: { id: void 0 },
           accountData: {
             userId: sess.customer?.id ?? "",
@@ -1228,12 +1423,12 @@ function FloPayCheckout({
           // No client secret available
         };
       }
-      throw new import_shared4.FloPayError(
+      throw new import_shared5.FloPayError(
         json?.message ?? "Payment failed. Please try again.",
         "api_error"
       );
     },
-    [resolvedBillingUrl, sessionId]
+    [resolvedBillingUrl, resolvedSessionId]
   );
   const handleRedirectResult = (0, import_react6.useCallback)(
     async (redirectResult, sess, options) => {
@@ -1278,22 +1473,175 @@ function FloPayCheckout({
       }
       return false;
     },
-    [resolvedBillingUrl, sessionId]
+    [resolvedBillingUrl, resolvedSessionId]
+  );
+  const inflightRef = (0, import_react6.useRef)(/* @__PURE__ */ new Map());
+  const initializedHashRef = (0, import_react6.useRef)(null);
+  function hashCreateParams(params) {
+    const key = JSON.stringify({
+      c: params?.clientId,
+      i: params?.items?.map((x) => `${x.providerItemId}:${x.totalAmount}:${x.overrideAmount ?? ""}:${x.quantity ?? 1}`).sort(),
+      s: params?.subscriptions?.map((x) => `${x.providerPlanId}:${x.totalAmount}:${x.overrideAmount ?? ""}:${x.quantity ?? 1}`).sort(),
+      e: params?.account.email,
+      m: params?.checkoutMode ?? "full"
+    });
+    let h = 0;
+    for (let i = 0; i < key.length; i++) {
+      h = (h << 5) - h + key.charCodeAt(i) | 0;
+    }
+    return `flopay_session_${Math.abs(h).toString(36)}`;
+  }
+  const createSessionHash = (0, import_react6.useMemo)(
+    () => createSessionParams ? hashCreateParams(createSessionParams) : "",
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      createSessionParams?.clientId,
+      createSessionParams?.account?.email,
+      createSessionParams?.checkoutMode,
+      JSON.stringify(createSessionParams?.items),
+      JSON.stringify(createSessionParams?.subscriptions)
+    ]
   );
+  const createSessionParamsRef = (0, import_react6.useRef)(createSessionParams);
+  createSessionParamsRef.current = createSessionParams;
   (0, import_react6.useEffect)(() => {
     let cancelled = false;
-    setIsLoading(true);
     setLoadError(null);
+    if (createSessionHash) {
+      if (initializedHashRef.current === createSessionHash) return;
+      const params = createSessionParamsRef.current;
+      const totalAmount = [
+        ...(params.items ?? []).map((i) => i.overrideAmount ?? i.totalAmount ?? 0),
+        ...(params.subscriptions ?? []).map((s) => s.overrideAmount ?? s.totalAmount ?? 0)
+      ].reduce((sum, v) => sum + v, 0);
+      const currency = params.items?.[0]?.currency ?? params.subscriptions?.[0]?.currency ?? "USD";
+      const syntheticSession = {
+        id: "",
+        clientSecret: "",
+        mode: "payment",
+        amount: Math.round(totalAmount * 100),
+        currency,
+        status: "open",
+        customer: {
+          id: params.account.userId,
+          email: params.account.email,
+          firstName: params.account.firstName,
+          lastName: params.account.lastName
+        },
+        successUrl: params.successUrl,
+        cancelUrl: params.cancelUrl,
+        checkoutMode: params.checkoutMode ?? "full",
+        items: (params.items ?? []).map((i, idx) => ({
+          uuid: `synthetic-item-${idx}`,
+          checkoutSessionId: "",
+          providerItemId: i.providerItemId,
+          providerItemName: i.providerItemName ?? i.providerItemId,
+          quantity: i.quantity ?? 1,
+          totalAmount: i.totalAmount,
+          overrideAmount: i.overrideAmount ?? null,
+          currency: i.currency ?? currency
+        })),
+        subscriptions: (params.subscriptions ?? []).map((s, idx) => ({
+          uuid: `synthetic-sub-${idx}`,
+          checkoutSessionId: "",
+          providerPlanId: s.providerPlanId,
+          providerPlanName: s.providerPlanName ?? s.providerPlanId,
+          quantity: s.quantity ?? 1,
+          totalAmount: s.totalAmount,
+          overrideAmount: s.overrideAmount ?? null,
+          currency: s.currency ?? currency
+        }))
+      };
+      setSession(syntheticSession);
+      setCurrentMode(params.checkoutMode ?? checkoutModeProp ?? "full");
+      setIsLoading(false);
+      const cacheKey = createSessionHash;
+      async function resolveSession() {
+        const api = new import_js.PaymentAPI(resolvedBillingUrl);
+        let sid = typeof window !== "undefined" ? window.sessionStorage.getItem(cacheKey) : null;
+        let realResult = null;
+        if (sid) {
+          try {
+            realResult = await api.getUnifiedCheckoutSession(sid);
+            if (realResult.data.session?.status === "complete") {
+              if (typeof window !== "undefined") window.sessionStorage.removeItem(cacheKey);
+              sid = null;
+              realResult = null;
+            }
+          } catch {
+            if (typeof window !== "undefined") window.sessionStorage.removeItem(cacheKey);
+            sid = null;
+          }
+        }
+        if (!sid) {
+          realResult = await api.createAndFetchSession(createSessionParamsRef.current);
+          sid = realResult.data.session?.id ?? "";
+          if (sid && typeof window !== "undefined") {
+            window.sessionStorage.setItem(cacheKey, sid);
+          }
+        }
+        return { sid: sid ?? "", result: realResult };
+      }
+      (async () => {
+        try {
+          let promise = inflightRef.current.get(cacheKey);
+          if (!promise) {
+            promise = resolveSession();
+            inflightRef.current.set(cacheKey, promise);
+          }
+          let resolved;
+          try {
+            resolved = await promise;
+          } finally {
+            inflightRef.current.delete(cacheKey);
+          }
+          if (cancelled) return;
+          const { sid, result: realResult } = resolved;
+          if (realResult) {
+            setUnified(realResult);
+            if (realResult.data.session) setSession(realResult.data.session);
+          }
+          if (sid) {
+            setResolvedSessionId(sid);
+          }
+          let pk;
+          if (realResult?.provider === "stripe") {
+            pk = realResult.data.stripe?.publishableKey;
+          }
+          if (!pk) pk = fallbackPublishableKey;
+          if (!pk) {
+            throw new import_shared5.FloPayError(
+              "No publishable key found. Provide fallbackPublishableKey or ensure the session includes gatewayData.publishableKey.",
+              "validation_error"
+            );
+          }
+          const instance = await (0, import_js.loadFloPay)(pk, { billingApiUrl: resolvedBillingUrl, locale });
+          if (!cancelled) {
+            flopayRef.current = instance;
+            setFloPay(instance);
+            initializedHashRef.current = cacheKey;
+          }
+        } catch (err) {
+          if (cancelled) return;
+          const floPayErr = err instanceof import_shared5.FloPayError ? err : new import_shared5.FloPayError(err instanceof Error ? err.message : "Failed to create session", "api_error");
+          setLoadError(floPayErr);
+        }
+      })();
+      return () => {
+        cancelled = true;
+      };
+    }
+    setIsLoading(true);
     async function init() {
       try {
         const api = new import_js.PaymentAPI(resolvedBillingUrl);
-        const result = await api.getUnifiedCheckoutSession(sessionId);
+        const result = await api.getUnifiedCheckoutSession(resolvedSessionId);
         if (cancelled) return;
         setUnified(result);
         const sess = result.data.session ?? null;
         setSession(sess);
         if (!sess) {
-          throw new import_shared4.FloPayError("No session data returned", "api_error");
+          throw new import_shared5.FloPayError("No session data returned", "api_error");
         }
         if (sess.status === "complete") {
           setIsLoading(false);
@@ -1305,7 +1653,7 @@ function FloPayCheckout({
         const hasPayPalRedirectParams = typeof window !== "undefined" && new URLSearchParams(window.location.search).has("payment_intent");
         if (effectiveMode === "auto" && !autoCheckoutAttempted.current && !hasPayPalRedirectParams) {
           autoCheckoutAttempted.current = true;
-          const stripeInitPromise = initStripe(result, sess);
+          const stripeInitPromise = initStripe(result);
           try {
             const redirectResult = await processPaymentForMode(sess);
             if (!redirectResult) {
@@ -1316,9 +1664,7 @@ function FloPayCheckout({
             await stripeInitPromise;
             const handled = await handleRedirectResult(redirectResult, sess, { attempt3DS: true });
             if (!cancelled) {
-              if (!handled) {
-                setCurrentMode("full");
-              }
+              if (!handled) setCurrentMode("full");
               setIsLoading(false);
             }
             return;
@@ -1330,26 +1676,23 @@ function FloPayCheckout({
             return;
           }
         }
-        await initStripe(result, sess);
+        await initStripe(result);
         if (!cancelled) setIsLoading(false);
       } catch (err) {
         if (cancelled) return;
-        const floPayErr = err instanceof import_shared4.FloPayError ? err : new import_shared4.FloPayError(
-          err instanceof Error ? err.message : "Failed to initialize checkout",
-          "api_error"
-        );
+        const floPayErr = err instanceof import_shared5.FloPayError ? err : new import_shared5.FloPayError(err instanceof Error ? err.message : "Failed to initialize checkout", "api_error");
         setLoadError(floPayErr);
         setIsLoading(false);
       }
     }
-    async function initStripe(result, _sess) {
+    async function initStripe(result) {
       let publishableKey;
       if (result.provider === "stripe") {
         publishableKey = result.data.stripe?.publishableKey;
       }
       if (!publishableKey) publishableKey = fallbackPublishableKey;
       if (!publishableKey) {
-        throw new import_shared4.FloPayError(
+        throw new import_shared5.FloPayError(
           "No publishable key found in session response. Provide a fallbackPublishableKey prop or ensure the session includes gatewayData.publishableKey.",
           "validation_error"
         );
@@ -1365,7 +1708,7 @@ function FloPayCheckout({
     return () => {
       cancelled = true;
     };
-  }, [sessionId, resolvedBillingUrl, fallbackPublishableKey, locale, checkoutModeProp]);
+  }, [resolvedSessionId, createSessionHash, resolvedBillingUrl, fallbackPublishableKey, locale, checkoutModeProp]);
   const handleConfirmCheckout = (0, import_react6.useCallback)(async () => {
     if (confirmProcessing || !session) return;
     setConfirmProcessing(true);
@@ -1380,7 +1723,7 @@ function FloPayCheckout({
         setCurrentMode("full");
       }
     } catch (err) {
-      const floPayErr = err instanceof import_shared4.FloPayError ? err : new import_shared4.FloPayError(
+      const floPayErr = err instanceof import_shared5.FloPayError ? err : new import_shared5.FloPayError(
         err instanceof Error ? err.message : "Payment failed",
         "api_error"
       );
@@ -1401,7 +1744,7 @@ function FloPayCheckout({
     if (unified.provider === "stripe" && unified.data.stripe?.clientSecret) {
       opts.clientSecret = unified.data.stripe.clientSecret;
     } else {
-      const displayTotal = (0, import_shared4.buildCheckoutDisplayData)(session).total;
+      const displayTotal = (0, import_shared5.buildCheckoutDisplayData)(session).total;
       opts.amount = Math.round(displayTotal * 100) || session.amount;
       opts.currency = session.currency?.toLowerCase();
     }
@@ -1417,32 +1760,32 @@ function FloPayCheckout({
     [session, isLoading, loadError, currentMode]
   );
   if (isLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: loadingNode ?? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-      "div",
-      {
-        style: {
-          display: "flex",
-          justifyContent: "center",
-          padding: 32
-        },
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            "div",
-            {
-              style: {
-                width: 24,
-                height: 24,
-                border: "2px solid #e5e7eb",
-                borderTopColor: "#6b7280",
-                borderRadius: "50%",
-                animation: "spin 0.6s linear infinite"
-              }
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` })
-        ]
-      }
-    ) });
+    if (loadingNode) return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: loadingNode });
+    if (layout === "buttons") {
+      const skeletonBar = (h) => /* @__PURE__ */ (0, import_jsx_runtime4.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: [
+        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; } }` })
+      ] });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", justifyContent: "center", padding: 32 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: {
+        width: 24,
+        height: 24,
+        border: "2px solid #e5e7eb",
+        borderTopColor: "#6b7280",
+        borderRadius: "50%",
+        animation: "spin 0.6s linear infinite"
+      } }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.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) });
@@ -1459,6 +1802,19 @@ 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)(
+      InterimButtonsView,
+      {
+        onButtonClick,
+        showPayPal,
+        showApplePay,
+        showGooglePay,
+        buttonsTheme,
+        buttonsStyles
+      }
+    ) });
+  }
   if (!flopay || !providerOptions) return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.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: [
@@ -1519,7 +1875,7 @@ function FloPayCheckout({
     children ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       SessionInjector,
       {
-        sessionId,
+        sessionId: resolvedSessionId,
         billingApiUrl: resolvedBillingUrl,
         session,
         children
@@ -1527,12 +1883,12 @@ function FloPayCheckout({
     ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       SplitCardForm,
       {
-        sessionId,
+        sessionId: resolvedSessionId,
         email: session?.customer?.email,
         userId: session?.customer?.id,
         firstName: session?.customer?.firstName,
         lastName: session?.customer?.lastName,
-        totalAmount: session ? Math.round((0, import_shared4.buildCheckoutDisplayData)(session).total * 100) : 0,
+        totalAmount: session ? Math.round((0, import_shared5.buildCheckoutDisplayData)(session).total * 100) : 0,
         currency: session?.currency?.toLowerCase() ?? "usd",
         onComplete,
         onError,
@@ -1540,6 +1896,13 @@ function FloPayCheckout({
         showApplePay,
         showGooglePay,
         layout,
+        buttonsTheme,
+        buttonsStyles,
+        onButtonClick,
+        enableAVS,
+        avsLayout,
+        country: session?.customer?.country,
+        zip: session?.customer?.zip,
         submitLabel,
         className
       }
@@ -1570,9 +1933,165 @@ function SessionInjector({
     return import_react6.default.cloneElement(child, injected);
   }) });
 }
+function InterimButtonsView({
+  onButtonClick,
+  showPayPal,
+  showApplePay,
+  showGooglePay,
+  buttonsTheme,
+  buttonsStyles: stylesOverride
+}) {
+  const [showCardForm, setShowCardForm] = (0, import_react6.useState)(false);
+  const bStyles = (0, import_react6.useMemo)(() => {
+    const base = (0, import_shared5.resolveButtonsLayoutTheme)(buttonsTheme);
+    if (!stylesOverride) return base;
+    return {
+      ...base,
+      ...stylesOverride,
+      cardButton: { ...base.cardButton, ...stylesOverride.cardButton },
+      cardFormContainer: { ...base.cardFormContainer, ...stylesOverride.cardFormContainer },
+      submitButton: { ...base.submitButton, ...stylesOverride.submitButton },
+      title: { ...base.title, ...stylesOverride.title }
+    };
+  }, [buttonsTheme, stylesOverride]);
+  const skeleton = (h) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: {
+    height: h,
+    borderRadius: 8,
+    background: "#e5e7eb",
+    animation: "flopay-interim-pulse 1.5s ease-in-out infinite"
+  } });
+  if (showCardForm) {
+    const inputBorder = bStyles.cardInputBorder ?? "#e5e7eb";
+    const inputBg = bStyles.cardInputBackground ?? "white";
+    return /* @__PURE__ */ (0, import_jsx_runtime4.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)(
+          "button",
+          {
+            type: "button",
+            onClick: () => setShowCardForm(false),
+            style: {
+              display: "inline-flex",
+              alignItems: "center",
+              gap: "0.5rem",
+              background: "none",
+              border: "none",
+              cursor: "pointer",
+              color: "#4b5563",
+              fontSize: "0.85rem",
+              fontWeight: 500,
+              padding: 0,
+              flexShrink: 0,
+              ...bStyles.backButton
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: {
+                display: "inline-flex",
+                alignItems: "center",
+                justifyContent: "center",
+                width: 28,
+                height: 28,
+                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" }) }) }),
+              "Go back"
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: {
+          flex: 1,
+          textAlign: "center",
+          fontWeight: 600,
+          fontSize: "1.05rem",
+          color: "#262833",
+          paddingRight: 80,
+          ...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_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: {
+        height: 50,
+        borderRadius: 8,
+        marginTop: 16,
+        background: "#c8c8ff",
+        animation: "flopay-interim-pulse 1.5s ease-in-out infinite",
+        ...bStyles.submitButton,
+        opacity: 0.5
+      } }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.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); }
+            40% { opacity: 1; }
+            100% { opacity: 1; max-height: 600px; transform: translateY(0); }
+          }
+        ` })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
+    showPayPal && skeleton(44),
+    (showApplePay || showGooglePay) && skeleton(44),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          onButtonClick?.("card");
+          setShowCardForm(true);
+        },
+        style: {
+          width: "100%",
+          padding: "0.9rem 1rem",
+          backgroundColor: "white",
+          color: "#262833",
+          border: "1px solid #d1d5db",
+          borderRadius: "8px",
+          fontSize: bStyles.cardButtonFontSize ?? "0.95rem",
+          fontWeight: 600,
+          cursor: "pointer",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: "0.625rem",
+          boxShadow: "0 1px 2px rgba(0,0,0,0.04)",
+          transition: "transform 0.1s",
+          position: "relative",
+          ...bStyles.cardButton
+        },
+        onMouseDown: (e) => {
+          e.currentTarget.style.transform = "scale(0.985)";
+        },
+        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" }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("style", { children: `@keyframes flopay-interim-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
+  ] });
+}
 
 // src/checkout-form.tsx
-var import_shared5 = require("@flopay/shared");
+var import_shared6 = require("@flopay/shared");
 var import_react7 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var WALLET_RESUME_KEY2 = "flopay_wallet_resume";
@@ -1780,7 +2299,7 @@ function CheckoutFormInner({
           return;
         }
         if (!sessionId || !email) {
-          throw new import_shared5.FloPayError("Missing sessionId or email", "validation_error");
+          throw new import_shared6.FloPayError("Missing sessionId or email", "validation_error");
         }
         const intentResponse = await fetch(`${baseUrl}/v1/checkouts/payments/intents`, {
           method: "POST",
@@ -1792,10 +2311,10 @@ function CheckoutFormInner({
             isPaypal: false
           })
         });
-        if (!intentResponse.ok) throw new import_shared5.FloPayError("Failed to create payment intent", "api_error");
+        if (!intentResponse.ok) throw new import_shared6.FloPayError("Failed to create payment intent", "api_error");
         const intentJson = await intentResponse.json();
         const intentClientSecret = intentJson.data?.id;
-        if (!intentClientSecret) throw new import_shared5.FloPayError("No client_secret in payment intent response", "api_error");
+        if (!intentClientSecret) throw new import_shared6.FloPayError("No client_secret in payment intent response", "api_error");
         const confirmResult = await flopay.confirmCardPayment({
           clientSecret: intentClientSecret,
           paymentMethodId: pmResult.paymentMethodId
@@ -1850,7 +2369,7 @@ function CheckoutFormInner({
 }
 
 // src/paypal-button.tsx
-var import_shared6 = require("@flopay/shared");
+var import_shared7 = require("@flopay/shared");
 var import_react8 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function PayPalButton({
@@ -1970,7 +2489,7 @@ function PayPalButton({
       setSubmitting(true);
       onErrorChange?.(null);
       if (!sessionId || !email) {
-        throw new import_shared6.FloPayError("Missing sessionId or email for PayPal payment", "validation_error");
+        throw new import_shared7.FloPayError("Missing sessionId or email for PayPal payment", "validation_error");
       }
       const intentResponse = await fetch(`${baseUrl}/v1/checkouts/payments/intents`, {
         method: "POST",
@@ -1982,10 +2501,10 @@ function PayPalButton({
           isPaypal: "true"
         })
       });
-      if (!intentResponse.ok) throw new import_shared6.FloPayError("Failed to create payment intent", "api_error");
+      if (!intentResponse.ok) throw new import_shared7.FloPayError("Failed to create payment intent", "api_error");
       const intentJson = await intentResponse.json();
       const intentClientSecret = intentJson.data?.id;
-      if (!intentClientSecret) throw new import_shared6.FloPayError("No client_secret in response", "api_error");
+      if (!intentClientSecret) throw new import_shared7.FloPayError("No client_secret in response", "api_error");
       const result = await flopay.confirmPayment({
         clientSecret: intentClientSecret,
         returnUrl: window.location.href