@flopay/react 0.1.5 → 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,7 +164,30 @@ function useBillingApiUrl() {
 import { FloPayError } from "@flopay/shared";
 import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
 var WALLET_RESUME_KEY = "flopay_wallet_resume";
-function ProcessingOverlay({ status }) {
+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",
     inset: 0,
@@ -239,6 +263,14 @@ function ProcessingOverlay({ status }) {
       status === "success" && "PAYMENT SUCCESSFUL",
       status === "error" && "PAYMENT FAILED"
     ] }),
+    status === "error" && errorMessage && /* @__PURE__ */ jsx3("p", { style: {
+      fontSize: 13,
+      color: "#6b7280",
+      fontWeight: 400,
+      maxWidth: 260,
+      lineHeight: 1.4,
+      margin: 0
+    }, children: errorMessage }),
     /* @__PURE__ */ jsx3("style", { children: `
           @keyframes flopay-spin { to { transform: rotate(360deg); } }
           @keyframes flopay-pop { 0% { transform: scale(0); } 100% { transform: scale(1); } }
@@ -258,7 +290,8 @@ function PayPalButtonInner({
   billingApiUrl,
   onTokenizedBody,
   onErrorChange,
-  isProcessing = false
+  isProcessing = false,
+  onButtonClick
 }) {
   const stripe = useStripeRaw();
   const elements = useStripeElements();
@@ -311,6 +344,7 @@ function PayPalButtonInner({
   }, [stripe, onTokenizedBody, onErrorChange]);
   const handlePayPalConfirm = useCallback(async (_event) => {
     if (!stripe || !elements) return;
+    onButtonClick?.("paypal");
     try {
       setSubmitting(true);
       onErrorChange?.(null);
@@ -365,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),
@@ -393,7 +427,8 @@ function WalletButtonInner({
   showApplePay = true,
   showGooglePay = true,
   onTokenizedBody,
-  onErrorChange
+  onErrorChange,
+  onButtonClick
 }) {
   const stripe = useStripeRaw();
   const elements = useStripeElements();
@@ -403,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);
@@ -455,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),
@@ -465,10 +502,12 @@ function WalletButtonInner({
         options: {
           buttonType: { applePay: "plain", googlePay: "plain" },
           paymentMethods: {
-            applePay: showApplePay ? "auto" : "never",
-            googlePay: showGooglePay ? "auto" : "never",
+            applePay: showApplePay ? "always" : "never",
+            googlePay: showGooglePay ? "always" : "never",
             paypal: "never",
-            link: "never"
+            link: "never",
+            amazonPay: "never",
+            klarna: "never"
           },
           layout: { overflow: "never" }
         }
@@ -499,6 +538,10 @@ function SplitCardFormInner({
   showPayPal = true,
   showApplePay = true,
   showGooglePay = true,
+  layout = "default",
+  buttonsTheme,
+  buttonsStyles: buttonsStylesOverride,
+  onButtonClick,
   totalAmount = 0,
   currency = "usd",
   innerRef
@@ -509,12 +552,37 @@ function SplitCardFormInner({
   const [processing, setProcessing] = useState2(false);
   const [error, setError] = useState2(null);
   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(/\/+$/, "");
@@ -726,6 +794,7 @@ function SplitCardFormInner({
     async (e) => {
       e.preventDefault();
       if (!flopay || !elements || isSubmitting || processingRef.current) return;
+      onButtonClick?.("card");
       setProcessing(true);
       setOverlayStatus("processing");
       updateError(null);
@@ -792,8 +861,299 @@ function SplitCardFormInner({
   if (!isReady) {
     return /* @__PURE__ */ jsx3("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." });
   }
+  const isButtons = layout === "buttons";
+  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 ? bStyles.cardFormContainer : {},
+    ...isButtons ? { padding: bStyles.cardFormContainer?.padding ?? "0" } : {}
+  }, children: [
+    isButtons && showCardForm && /* @__PURE__ */ jsxs("div", { style: {
+      display: "flex",
+      alignItems: "center",
+      padding: "0.75rem 0 0.625rem"
+    }, children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: collapseToButtons,
+          style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: "0.5rem",
+            background: "none",
+            border: "none",
+            cursor: "pointer",
+            color: "#4b5563",
+            fontSize: bStyles.backButtonFontSize ?? "0.85rem",
+            fontWeight: 500,
+            padding: 0,
+            transition: "color 0.15s",
+            flexShrink: 0,
+            ...bStyles.backButton
+          },
+          "aria-label": "Back to payment methods",
+          children: [
+            /* @__PURE__ */ jsx3("span", { style: {
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: 28,
+              height: 28,
+              borderRadius: "50%",
+              backgroundColor: "#f3f4f6",
+              transition: "background-color 0.15s",
+              ...bStyles.backButtonIcon
+            }, children: /* @__PURE__ */ 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: 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: cardInputBg,
+      border: `1px solid ${resolvedBorder}`,
+      borderTopLeftRadius: "8px",
+      borderTopRightRadius: "8px",
+      padding: "10px"
+    }, children: /* @__PURE__ */ jsx3(CardNumberElement, { onReady: () => setFormReady(true), options: stripeElementStyle }) }),
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex" }, children: [
+      /* @__PURE__ */ jsx3("div", { style: {
+        flex: 1,
+        backgroundColor: cardInputBg,
+        border: `1px solid ${resolvedBorder}`,
+        borderTop: "none",
+        borderRight: "none",
+        borderBottomLeftRadius: "8px",
+        padding: "10px"
+      }, children: /* @__PURE__ */ jsx3(CardExpiryElement, { options: stripeElementStyle }) }),
+      /* @__PURE__ */ jsx3("div", { style: {
+        flex: 1,
+        backgroundColor: cardInputBg,
+        border: `1px solid ${resolvedBorder}`,
+        borderTop: "none",
+        borderBottomRightRadius: "8px",
+        padding: "10px"
+      }, children: /* @__PURE__ */ jsx3(CardCvcElement, { options: stripeElementStyle }) })
+    ] }),
+    /* @__PURE__ */ jsx3("div", { style: {
+      backgroundColor: cardInputBg,
+      border: `1px solid ${resolvedBorder}`,
+      borderRadius: "8px",
+      marginTop: "0.5rem",
+      padding: "10px"
+    }, children: /* @__PURE__ */ jsx3(
+      "input",
+      {
+        placeholder: "Full Name on Card",
+        autoComplete: "cc-name",
+        value: fullName,
+        onChange: (e) => handleNameChange(e.target.value),
+        disabled: isSubmitting,
+        required: true,
+        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__ */ jsxs("div", { role: "alert", "data-testid": "flopay-error", style: {
+      margin: "0.75rem 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",
+      ...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
+    ] }),
+    children ?? /* @__PURE__ */ jsx3(
+      "button",
+      {
+        type: "submit",
+        disabled: !formReady || isSubmitting,
+        "data-testid": "flopay-submit",
+        style: {
+          width: "100%",
+          padding: "0.875rem",
+          marginTop: "1rem",
+          backgroundColor: "#4A49FF",
+          color: "white",
+          border: "none",
+          borderRadius: "8px",
+          fontSize: isButtons && bStyles.submitButtonFontSize ? bStyles.submitButtonFontSize : "1rem",
+          fontWeight: 600,
+          cursor: !formReady || isSubmitting ? "not-allowed" : "pointer",
+          opacity: !formReady || isSubmitting ? 0.5 : 1,
+          ...isButtons ? bStyles.submitButton : {}
+        },
+        children: isSubmitting ? "PROCESSING..." : submitLabel
+      }
+    ),
+    !isButtons && /* @__PURE__ */ jsx3("div", { style: {
+      backgroundColor: "#EFF9F0",
+      borderRadius: "8px",
+      padding: "0.75rem",
+      marginTop: "0.75rem",
+      textAlign: "center",
+      fontSize: "0.85rem",
+      fontWeight: 600,
+      color: "#7DAD3A"
+    }, 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: "grid" }, children: [
+        /* @__PURE__ */ jsxs("div", { style: {
+          gridArea: "1 / 1",
+          display: "flex",
+          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: [
+          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: [
-    overlayStatus && /* @__PURE__ */ jsx3(ProcessingOverlay, { status: overlayStatus }),
+    /* @__PURE__ */ jsx3(FloPayKeyframes, {}),
+    overlayStatus && /* @__PURE__ */ jsx3(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
     showWallets && stripeInstance && /* @__PURE__ */ jsx3(StripeElements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ jsx3(
       WalletButtonInner,
       {
@@ -829,100 +1189,15 @@ function SplitCardFormInner({
       /* @__PURE__ */ jsx3("span", { children: "or pay with card" }),
       /* @__PURE__ */ jsx3("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } })
     ] }),
-    /* @__PURE__ */ jsxs("div", { style: { backgroundColor: "#EDEDFF", borderRadius: "8px", padding: "1rem" }, children: [
-      /* @__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 #A4A4FF",
-        borderTopLeftRadius: "8px",
-        borderTopRightRadius: "8px",
-        padding: "10px"
-      }, children: /* @__PURE__ */ jsx3(CardNumberElement, { onReady: () => setFormReady(true) }) }),
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex" }, children: [
-        /* @__PURE__ */ jsx3("div", { style: {
-          flex: 1,
-          backgroundColor: "white",
-          border: "1px solid #A4A4FF",
-          borderTop: "none",
-          borderRight: "none",
-          borderBottomLeftRadius: "8px",
-          padding: "10px"
-        }, children: /* @__PURE__ */ jsx3(CardExpiryElement, {}) }),
-        /* @__PURE__ */ jsx3("div", { style: {
-          flex: 1,
-          backgroundColor: "white",
-          border: "1px solid #A4A4FF",
-          borderTop: "none",
-          borderBottomRightRadius: "8px",
-          padding: "10px"
-        }, children: /* @__PURE__ */ jsx3(CardCvcElement, {}) })
-      ] }),
-      /* @__PURE__ */ jsx3("div", { style: {
-        backgroundColor: "white",
-        border: "1px solid #A4A4FF",
-        borderRadius: "8px",
-        marginTop: "0.5rem",
-        padding: "10px"
-      }, children: /* @__PURE__ */ jsx3(
-        "input",
-        {
-          placeholder: "Full Name on Card",
-          autoComplete: "cc-name",
-          value: fullName,
-          onChange: (e) => handleNameChange(e.target.value),
-          disabled: isSubmitting,
-          required: true,
-          style: {
-            width: "100%",
-            border: "none",
-            outline: "none",
-            fontSize: "16px",
-            fontFamily: "Poppins, sans-serif",
-            color: "#262833"
-          }
-        }
-      ) }),
-      displayError && /* @__PURE__ */ jsx3("div", { role: "alert", "data-testid": "flopay-error", style: { color: "red", margin: "0.75rem 0", fontSize: "0.9rem" }, children: displayError }),
-      children ?? /* @__PURE__ */ jsx3(
-        "button",
-        {
-          type: "submit",
-          disabled: !formReady || isSubmitting,
-          "data-testid": "flopay-submit",
-          style: {
-            width: "100%",
-            padding: "0.875rem",
-            marginTop: "1rem",
-            backgroundColor: "#4A49FF",
-            color: "white",
-            border: "none",
-            borderRadius: "8px",
-            fontSize: "1rem",
-            fontWeight: 600,
-            cursor: !formReady || isSubmitting ? "not-allowed" : "pointer",
-            opacity: !formReady || isSubmitting ? 0.5 : 1
-          },
-          children: isSubmitting ? "PROCESSING..." : submitLabel
-        }
-      ),
-      /* @__PURE__ */ jsx3("div", { style: {
-        backgroundColor: "#EFF9F0",
-        borderRadius: "8px",
-        padding: "0.75rem",
-        marginTop: "0.75rem",
-        textAlign: "center",
-        fontSize: "0.85rem",
-        fontWeight: 600,
-        color: "#7DAD3A"
-      }, children: "Secure Card Checkout" })
-    ] })
+    cardFormBlock
   ] });
 }
 
 // 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,
@@ -934,6 +1209,10 @@ function FloPayCheckout({
   showPayPal = true,
   showApplePay = true,
   showGooglePay = true,
+  layout,
+  buttonsTheme,
+  buttonsStyles,
+  onButtonClick,
   submitLabel,
   className,
   children,
@@ -947,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");
@@ -969,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 ?? "",
@@ -1003,7 +1283,7 @@ function FloPayCheckout({
         "api_error"
       );
     },
-    [resolvedBillingUrl, sessionId]
+    [resolvedBillingUrl, resolvedSessionId]
   );
   const handleRedirectResult = useCallback2(
     async (redirectResult, sess, options) => {
@@ -1048,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;
@@ -1075,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) {
@@ -1086,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;
@@ -1100,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;
@@ -1135,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);
@@ -1187,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) });
@@ -1229,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: [
@@ -1289,7 +1730,7 @@ function FloPayCheckout({
     children ? /* @__PURE__ */ jsx4(
       SessionInjector,
       {
-        sessionId,
+        sessionId: resolvedSessionId,
         billingApiUrl: resolvedBillingUrl,
         session,
         children
@@ -1297,7 +1738,7 @@ function FloPayCheckout({
     ) : /* @__PURE__ */ jsx4(
       SplitCardForm,
       {
-        sessionId,
+        sessionId: resolvedSessionId,
         email: session?.customer?.email,
         userId: session?.customer?.id,
         firstName: session?.customer?.firstName,
@@ -1309,6 +1750,10 @@ function FloPayCheckout({
         showPayPal,
         showApplePay,
         showGooglePay,
+        layout,
+        buttonsTheme,
+        buttonsStyles,
+        onButtonClick,
         submitLabel,
         className
       }
@@ -1339,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";