@flopay/react 0.1.6 → 0.2.1

package/dist/index.mjs

@@ -69,7 +69,7 @@ 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 { loadFloPay, PaymentAPI } from "@flopay/js";
-import { FloPayError as FloPayError2, resolveBillingApiUrl as resolveBillingApiUrl3, buildCheckoutDisplayData } from "@flopay/shared";
+import { FloPayError as FloPayError2, resolveBillingApiUrl as resolveBillingApiUrl3, buildCheckoutDisplayData, resolveButtonsLayoutTheme as resolveButtonsLayoutTheme2 } from "@flopay/shared";
 
 // src/elements.tsx
 import { useEffect as useEffect2, useRef, useContext } from "react";
@@ -138,6 +138,7 @@ import {
   useElements as useStripeElements,
   useStripe as useStripeRaw
 } from "@stripe/react-stripe-js";
+import { resolveButtonsLayoutTheme } from "@flopay/shared";
 import { forwardRef, useCallback, useEffect as useEffect3, useImperativeHandle, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
 
 // src/hooks.ts
@@ -163,6 +164,29 @@ function useBillingApiUrl() {
 import { FloPayError } from "@flopay/shared";
 import { Fragment, jsx as jsx3, jsxs } 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; } }
+@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__ */ jsx3("style", { children: FLOPAY_KEYFRAMES });
+}
 function ProcessingOverlay({ status, errorMessage }) {
   return /* @__PURE__ */ jsx3("div", { style: {
     position: "fixed",
@@ -252,8 +276,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; } }
         ` })
   ] }) });
 }
@@ -268,7 +290,8 @@ function PayPalButtonInner({
   billingApiUrl,
   onTokenizedBody,
   onErrorChange,
-  isProcessing = false
+  isProcessing = false,
+  onButtonClick
 }) {
   const stripe = useStripeRaw();
   const elements = useStripeElements();
@@ -321,6 +344,7 @@ function PayPalButtonInner({
   }, [stripe, onTokenizedBody, onErrorChange]);
   const handlePayPalConfirm = useCallback(async (_event) => {
     if (!stripe || !elements) return;
+    onButtonClick?.("paypal");
     try {
       setSubmitting(true);
       onErrorChange?.(null);
@@ -375,7 +399,7 @@ function PayPalButtonInner({
     }
   }, [stripe, elements, sessionId, email, baseUrl, onTokenizedBody, onErrorChange]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx3("div", { style: { marginBottom: ready ? "0.5rem" : 0 }, children: /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx3("div", { children: /* @__PURE__ */ jsx3(
       ExpressCheckoutElement,
       {
         onReady: () => setReady(true),
@@ -403,7 +427,8 @@ function WalletButtonInner({
   showApplePay = true,
   showGooglePay = true,
   onTokenizedBody,
-  onErrorChange
+  onErrorChange,
+  onButtonClick
 }) {
   const stripe = useStripeRaw();
   const elements = useStripeElements();
@@ -413,6 +438,8 @@ function WalletButtonInner({
   const handleWalletConfirm = useCallback(
     async (_event) => {
       if (!stripe || !elements) return;
+      const walletType = _event.expressPaymentType;
+      onButtonClick?.(walletType === "apple_pay" ? "apple_pay" : "google_pay");
       try {
         setSubmitting(true);
         onErrorChange?.(null);
@@ -465,7 +492,7 @@ function WalletButtonInner({
     [stripe, elements, sessionId, email, baseUrl, onTokenizedBody, onErrorChange]
   );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx3("div", { style: { marginBottom: ready ? "0.5rem" : 0 }, children: /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx3("div", { children: /* @__PURE__ */ jsx3(
       ExpressCheckoutElement,
       {
         onReady: () => setReady(true),
@@ -512,6 +539,9 @@ function SplitCardFormInner({
   showApplePay = true,
   showGooglePay = true,
   layout = "default",
+  buttonsTheme,
+  buttonsStyles: buttonsStylesOverride,
+  onButtonClick,
   totalAmount = 0,
   currency = "usd",
   innerRef
@@ -521,14 +551,38 @@ function SplitCardFormInner({
   const contextBillingUrl = useBillingApiUrl();
   const [processing, setProcessing] = useState2(false);
   const [error, setError] = useState2(null);
-  const [showCardForm, setShowCardForm] = useState2(false);
   const [is3DSActive, setIs3DSActive] = useState2(false);
+  const [viewState, setViewState] = useState2("buttons");
+  const showCardForm = viewState === "expanding" || viewState === "card";
+  const TRANSITION_MS = 280;
+  const expandToCard = useCallback(() => {
+    setViewState("expanding");
+    setTimeout(() => setViewState("card"), TRANSITION_MS);
+  }, []);
+  const collapseToButtons = useCallback(() => {
+    setViewState("collapsing");
+    setTimeout(() => setViewState("buttons"), TRANSITION_MS);
+  }, []);
   const [fullName, setFullName] = useState2("");
   const [formReady, setFormReady] = useState2(false);
   const [overlayStatus, setOverlayStatus] = useState2(null);
   const processingRef = useRef2(false);
   const resolvedBillingApiUrl = billingApiUrl || contextBillingUrl;
   const displayError = externalError ?? error;
+  const bStyles = useMemo2(() => {
+    const base = 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(/\/+$/, "");
@@ -740,6 +794,7 @@ function SplitCardFormInner({
     async (e) => {
       e.preventDefault();
       if (!flopay || !elements || isSubmitting || processingRef.current) return;
+      onButtonClick?.("card");
       setProcessing(true);
       setOverlayStatus("processing");
       updateError(null);
@@ -807,15 +862,25 @@ function SplitCardFormInner({
     return /* @__PURE__ */ jsx3("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__ */ 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__ */ jsxs("div", { style: {
       display: "flex",
@@ -826,7 +891,7 @@ function SplitCardFormInner({
         "button",
         {
           type: "button",
-          onClick: () => setShowCardForm(false),
+          onClick: collapseToButtons,
           style: {
             display: "inline-flex",
             alignItems: "center",
@@ -835,17 +900,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: [
@@ -857,44 +917,53 @@ function SplitCardFormInner({
               height: 28,
               borderRadius: "50%",
               backgroundColor: "#f3f4f6",
-              transition: "background-color 0.15s"
+              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" }) }) }),
             "Go back"
           ]
         }
       ),
-      /* @__PURE__ */ jsx3("div", { style: { flex: 1, textAlign: "center", fontWeight: 600, fontSize: "1.05rem", color: "#262833", paddingRight: 80 }, children: "Secure card checkout" })
+      /* @__PURE__ */ jsx3("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__ */ jsx3("div", { style: { textAlign: "center", fontWeight: 600, fontSize: "1.1rem", padding: "0.5rem 0", color: "#262833" }, children: "Secure card checkout" }),
     /* @__PURE__ */ jsx3("div", { style: {
-      backgroundColor: "white",
-      border: `1px solid ${cardBorderColor}`,
+      backgroundColor: cardInputBg,
+      border: `1px solid ${resolvedBorder}`,
       borderTopLeftRadius: "8px",
       borderTopRightRadius: "8px",
       padding: "10px"
-    }, children: /* @__PURE__ */ jsx3(CardNumberElement, { onReady: () => setFormReady(true) }) }),
+    }, children: /* @__PURE__ */ jsx3(CardNumberElement, { onReady: () => setFormReady(true), options: stripeElementStyle }) }),
     /* @__PURE__ */ jsxs("div", { style: { display: "flex" }, children: [
       /* @__PURE__ */ jsx3("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__ */ jsx3(CardExpiryElement, {}) }),
+      }, children: /* @__PURE__ */ jsx3(CardExpiryElement, { options: stripeElementStyle }) }),
       /* @__PURE__ */ jsx3("div", { style: {
         flex: 1,
-        backgroundColor: "white",
-        border: `1px solid ${cardBorderColor}`,
+        backgroundColor: cardInputBg,
+        border: `1px solid ${resolvedBorder}`,
         borderTop: "none",
         borderBottomRightRadius: "8px",
         padding: "10px"
-      }, children: /* @__PURE__ */ jsx3(CardCvcElement, {}) })
+      }, children: /* @__PURE__ */ jsx3(CardCvcElement, { options: stripeElementStyle }) })
     ] }),
     /* @__PURE__ */ jsx3("div", { style: {
-      backgroundColor: "white",
-      border: `1px solid ${cardBorderColor}`,
+      backgroundColor: cardInputBg,
+      border: `1px solid ${resolvedBorder}`,
       borderRadius: "8px",
       marginTop: "0.5rem",
       padding: "10px"
@@ -911,9 +980,11 @@ 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 : {}
         }
       }
     ) }),
@@ -928,7 +999,8 @@ function SplitCardFormInner({
       fontWeight: 600,
       display: "flex",
       alignItems: "center",
-      gap: "0.5rem"
+      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" }) }),
       displayError
@@ -947,10 +1019,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
       }
@@ -967,103 +1040,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__ */ 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: showCardForm ? "none" : "flex",
-        flexDirection: "column",
-        gap: "0.5rem"
-      }, children: [
-        showPayPal && stripeInstance && /* @__PURE__ */ jsx3(StripeElements, { stripe: stripeInstance, options: paypalOptions, children: /* @__PURE__ */ jsx3(
-          PayPalButtonInner,
-          {
-            sessionId,
-            email,
-            billingApiUrl: resolvedBillingApiUrl,
-            onTokenizedBody: dispatchTokenizedBody,
-            onErrorChange: updateError,
-            isProcessing: isSubmitting
-          }
-        ) }),
-        showWallets && stripeInstance && /* @__PURE__ */ jsx3(StripeElements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ jsx3(
-          WalletButtonInner,
-          {
-            sessionId,
-            email,
-            billingApiUrl: resolvedBillingApiUrl,
-            showApplePay,
-            showGooglePay,
-            onTokenizedBody: dispatchTokenizedBody,
-            onErrorChange: updateError
-          }
-        ) }),
-        /* @__PURE__ */ 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__ */ 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: { marginLeft: "auto" }, children: /* @__PURE__ */ jsx3("path", { d: "M9 18l6-6-6-6" }) })
-            ]
-          }
-        ),
-        displayError && !showCardForm && /* @__PURE__ */ 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__ */ jsxs("div", { style: { display: "grid" }, children: [
+        /* @__PURE__ */ 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__ */ 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" }) }),
-          displayError
-        ] })
-      ] }),
-      showCardForm && cardFormBlock
+          showPayPal && stripeInstance ? /* @__PURE__ */ jsx3(StripeElements, { stripe: stripeInstance, options: paypalOptions, children: /* @__PURE__ */ jsx3(
+            PayPalButtonInner,
+            {
+              sessionId,
+              email,
+              billingApiUrl: resolvedBillingApiUrl,
+              onTokenizedBody: dispatchTokenizedBody,
+              onErrorChange: updateError,
+              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(
+            WalletButtonInner,
+            {
+              sessionId,
+              email,
+              billingApiUrl: resolvedBillingApiUrl,
+              showApplePay,
+              showGooglePay,
+              onTokenizedBody: dispatchTokenizedBody,
+              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(
+            "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__ */ 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" }) })
+              ]
+            }
+          ),
+          displayError && viewState === "buttons" && /* @__PURE__ */ 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__ */ 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" }) }),
+            displayError
+          ] })
+        ] }),
+        isCardView && /* @__PURE__ */ jsx3("div", { style: {
+          gridArea: "1 / 1",
+          ...cardAnim ? { animation: cardAnim } : {},
+          ...viewState === "collapsing" ? { pointerEvents: "none" } : {}
+        }, children: cardFormBlock })
+      ] })
     ] });
   }
   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(
       WalletButtonInner,
@@ -1107,7 +1196,8 @@ function SplitCardFormInner({
 // src/flopay-checkout.tsx
 import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 function FloPayCheckout({
-  sessionId,
+  sessionId: sessionIdProp,
+  createSession: createSessionParams,
   billingApiUrl,
   appearance,
   locale,
@@ -1120,6 +1210,9 @@ function FloPayCheckout({
   showApplePay = true,
   showGooglePay = true,
   layout,
+  buttonsTheme,
+  buttonsStyles,
+  onButtonClick,
   submitLabel,
   className,
   children,
@@ -1133,6 +1226,7 @@ function FloPayCheckout({
   const [flopay, setFloPay] = useState3(null);
   const flopayRef = useRef3(null);
   const [session, setSession] = useState3(null);
+  const [resolvedSessionId, setResolvedSessionId] = useState3(sessionIdProp ?? "");
   const [isLoading, setIsLoading] = useState3(true);
   const [loadError, setLoadError] = useState3(null);
   const [currentMode, setCurrentMode] = useState3("full");
@@ -1155,7 +1249,7 @@ function FloPayCheckout({
           "x-user-id": sess.customer?.id ?? ""
         },
         body: JSON.stringify({
-          sessionId,
+          sessionId: resolvedSessionId,
           tokenizedData: { id: void 0 },
           accountData: {
             userId: sess.customer?.id ?? "",
@@ -1189,7 +1283,7 @@ function FloPayCheckout({
         "api_error"
       );
     },
-    [resolvedBillingUrl, sessionId]
+    [resolvedBillingUrl, resolvedSessionId]
   );
   const handleRedirectResult = useCallback2(
     async (redirectResult, sess, options) => {
@@ -1234,16 +1328,169 @@ function FloPayCheckout({
       }
       return false;
     },
-    [resolvedBillingUrl, sessionId]
+    [resolvedBillingUrl, resolvedSessionId]
   );
+  const inflightRef = useRef3(/* @__PURE__ */ new Map());
+  const initializedHashRef = useRef3(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 = useMemo3(
+    () => 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 = useRef3(createSessionParams);
+  createSessionParamsRef.current = createSessionParams;
   useEffect4(() => {
     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 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 FloPayError2(
+              "No publishable key found. Provide fallbackPublishableKey or ensure the session includes gatewayData.publishableKey.",
+              "validation_error"
+            );
+          }
+          const instance = await loadFloPay(pk, { billingApiUrl: resolvedBillingUrl, locale });
+          if (!cancelled) {
+            flopayRef.current = instance;
+            setFloPay(instance);
+            initializedHashRef.current = cacheKey;
+          }
+        } catch (err) {
+          if (cancelled) return;
+          const floPayErr = err instanceof FloPayError2 ? err : new FloPayError2(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 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;
@@ -1261,7 +1508,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) {
@@ -1272,9 +1519,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;
@@ -1286,19 +1531,16 @@ function FloPayCheckout({
             return;
           }
         }
-        await initStripe(result, sess);
+        await initStripe(result);
         if (!cancelled) setIsLoading(false);
       } catch (err) {
         if (cancelled) return;
-        const floPayErr = err instanceof FloPayError2 ? err : new FloPayError2(
-          err instanceof Error ? err.message : "Failed to initialize checkout",
-          "api_error"
-        );
+        const floPayErr = err instanceof FloPayError2 ? err : new FloPayError2(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;
@@ -1321,7 +1563,7 @@ function FloPayCheckout({
     return () => {
       cancelled = true;
     };
-  }, [sessionId, resolvedBillingUrl, fallbackPublishableKey, locale, checkoutModeProp]);
+  }, [resolvedSessionId, createSessionHash, resolvedBillingUrl, fallbackPublishableKey, locale, checkoutModeProp]);
   const handleConfirmCheckout = useCallback2(async () => {
     if (confirmProcessing || !session) return;
     setConfirmProcessing(true);
@@ -1373,32 +1615,32 @@ function FloPayCheckout({
     [session, isLoading, loadError, currentMode]
   );
   if (isLoading) {
-    return /* @__PURE__ */ jsx4(Fragment2, { children: loadingNode ?? /* @__PURE__ */ jsxs2(
-      "div",
-      {
-        style: {
-          display: "flex",
-          justifyContent: "center",
-          padding: 32
-        },
-        children: [
-          /* @__PURE__ */ jsx4(
-            "div",
-            {
-              style: {
-                width: 24,
-                height: 24,
-                border: "2px solid #e5e7eb",
-                borderTopColor: "#6b7280",
-                borderRadius: "50%",
-                animation: "spin 0.6s linear infinite"
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx4("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` })
-        ]
-      }
-    ) });
+    if (loadingNode) return /* @__PURE__ */ jsx4(Fragment2, { children: loadingNode });
+    if (layout === "buttons") {
+      const skeletonBar = (h) => /* @__PURE__ */ jsx4("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: [
+        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; } }` })
+      ] });
+    }
+    return /* @__PURE__ */ jsxs2("div", { style: { display: "flex", justifyContent: "center", padding: 32 }, children: [
+      /* @__PURE__ */ jsx4("div", { style: {
+        width: 24,
+        height: 24,
+        border: "2px solid #e5e7eb",
+        borderTopColor: "#6b7280",
+        borderRadius: "50%",
+        animation: "spin 0.6s linear infinite"
+      } }),
+      /* @__PURE__ */ jsx4("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` })
+    ] });
   }
   if (loadError) {
     if (errorNode) return /* @__PURE__ */ jsx4(Fragment2, { children: errorNode(loadError) });
@@ -1415,6 +1657,19 @@ function FloPayCheckout({
       }
     );
   }
+  if ((!flopay || !providerOptions) && createSessionParams && layout === "buttons") {
+    return /* @__PURE__ */ jsx4(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx4(
+      InterimButtonsView,
+      {
+        onButtonClick,
+        showPayPal,
+        showApplePay,
+        showGooglePay,
+        buttonsTheme,
+        buttonsStyles
+      }
+    ) });
+  }
   if (!flopay || !providerOptions) return /* @__PURE__ */ jsx4(Fragment2, {});
   if (currentMode === "confirm") {
     return /* @__PURE__ */ jsx4(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx4(FloPayProvider, { flopay, options: providerOptions, children: /* @__PURE__ */ jsxs2("div", { className, children: [
@@ -1475,7 +1730,7 @@ function FloPayCheckout({
     children ? /* @__PURE__ */ jsx4(
       SessionInjector,
       {
-        sessionId,
+        sessionId: resolvedSessionId,
         billingApiUrl: resolvedBillingUrl,
         session,
         children
@@ -1483,7 +1738,7 @@ function FloPayCheckout({
     ) : /* @__PURE__ */ jsx4(
       SplitCardForm,
       {
-        sessionId,
+        sessionId: resolvedSessionId,
         email: session?.customer?.email,
         userId: session?.customer?.id,
         firstName: session?.customer?.firstName,
@@ -1496,6 +1751,9 @@ function FloPayCheckout({
         showApplePay,
         showGooglePay,
         layout,
+        buttonsTheme,
+        buttonsStyles,
+        onButtonClick,
         submitLabel,
         className
       }
@@ -1526,6 +1784,162 @@ function SessionInjector({
     return React4.cloneElement(child, injected);
   }) });
 }
+function InterimButtonsView({
+  onButtonClick,
+  showPayPal,
+  showApplePay,
+  showGooglePay,
+  buttonsTheme,
+  buttonsStyles: stylesOverride
+}) {
+  const [showCardForm, setShowCardForm] = useState3(false);
+  const bStyles = useMemo3(() => {
+    const base = resolveButtonsLayoutTheme2(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__ */ jsx4("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__ */ jsxs2("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(
+          "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__ */ jsx4("span", { style: {
+                display: "inline-flex",
+                alignItems: "center",
+                justifyContent: "center",
+                width: 28,
+                height: 28,
+                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" }) }) }),
+              "Go back"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx4("div", { style: {
+          flex: 1,
+          textAlign: "center",
+          fontWeight: 600,
+          fontSize: "1.05rem",
+          color: "#262833",
+          paddingRight: 80,
+          ...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__ */ 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: {
+        height: 50,
+        borderRadius: 8,
+        marginTop: 16,
+        background: "#c8c8ff",
+        animation: "flopay-interim-pulse 1.5s ease-in-out infinite",
+        ...bStyles.submitButton,
+        opacity: 0.5
+      } }),
+      /* @__PURE__ */ jsx4("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__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
+    showPayPal && skeleton(44),
+    (showApplePay || showGooglePay) && skeleton(44),
+    /* @__PURE__ */ jsxs2(
+      "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__ */ 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" }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx4("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";