@flopay/react 0.1.4 → 0.1.6

package/dist/index.d.cts

@@ -64,6 +64,8 @@ interface FloPayCheckoutProps {
     showApplePay?: boolean;
     /** Whether to show Google Pay button (default: true). Only renders on supported devices. */
     showGooglePay?: boolean;
+    /** Layout mode: 'default' (all visible) or 'buttons' (PayPal/wallets + expandable card form). */
+    layout?: 'default' | 'buttons';
     /** Label for the submit button. */
     submitLabel?: string;
     /** Additional CSS class for the wrapper. */
@@ -107,7 +109,7 @@ interface FloPayCheckoutProps {
  * />
  * ```
  */
-declare function FloPayCheckout({ sessionId, billingApiUrl, appearance, locale, fallbackPublishableKey, loading: loadingNode, error: errorNode, onComplete, onError, showPayPal, showApplePay, showGooglePay, submitLabel, className, children, checkoutMode: checkoutModeProp, confirmLabel, renderConfirmButton, onSessionCompleted, }: FloPayCheckoutProps): React.ReactElement;
+declare function FloPayCheckout({ sessionId, billingApiUrl, appearance, locale, fallbackPublishableKey, loading: loadingNode, error: errorNode, onComplete, onError, showPayPal, showApplePay, showGooglePay, layout, submitLabel, className, children, checkoutMode: checkoutModeProp, confirmLabel, renderConfirmButton, onSessionCompleted, }: FloPayCheckoutProps): React.ReactElement;
 
 /**
  * Returns the current `FloPay` instance, or `null` if the provider
@@ -330,6 +332,13 @@ interface SplitCardFormProps {
     showApplePay?: boolean;
     /** Show Google Pay button. Defaults to `true`. Only renders on supported devices. */
     showGooglePay?: boolean;
+    /**
+     * Layout mode for the payment form.
+     * - `'default'` — all payment methods + card form shown together (current behavior)
+     * - `'buttons'` — PayPal, wallets, and a "Credit / Debit Card" button; clicking the card
+     *   button expands the card form with a back button to return to the button view
+     */
+    layout?: 'default' | 'buttons';
     /** Total amount in cents (smallest currency unit). Used for wallet/PayPal Elements config. */
     totalAmount?: number;
     /** Currency code (used for PayPal Elements config). */

package/dist/index.d.ts

@@ -64,6 +64,8 @@ interface FloPayCheckoutProps {
     showApplePay?: boolean;
     /** Whether to show Google Pay button (default: true). Only renders on supported devices. */
     showGooglePay?: boolean;
+    /** Layout mode: 'default' (all visible) or 'buttons' (PayPal/wallets + expandable card form). */
+    layout?: 'default' | 'buttons';
     /** Label for the submit button. */
     submitLabel?: string;
     /** Additional CSS class for the wrapper. */
@@ -107,7 +109,7 @@ interface FloPayCheckoutProps {
  * />
  * ```
  */
-declare function FloPayCheckout({ sessionId, billingApiUrl, appearance, locale, fallbackPublishableKey, loading: loadingNode, error: errorNode, onComplete, onError, showPayPal, showApplePay, showGooglePay, submitLabel, className, children, checkoutMode: checkoutModeProp, confirmLabel, renderConfirmButton, onSessionCompleted, }: FloPayCheckoutProps): React.ReactElement;
+declare function FloPayCheckout({ sessionId, billingApiUrl, appearance, locale, fallbackPublishableKey, loading: loadingNode, error: errorNode, onComplete, onError, showPayPal, showApplePay, showGooglePay, layout, submitLabel, className, children, checkoutMode: checkoutModeProp, confirmLabel, renderConfirmButton, onSessionCompleted, }: FloPayCheckoutProps): React.ReactElement;
 
 /**
  * Returns the current `FloPay` instance, or `null` if the provider
@@ -330,6 +332,13 @@ interface SplitCardFormProps {
     showApplePay?: boolean;
     /** Show Google Pay button. Defaults to `true`. Only renders on supported devices. */
     showGooglePay?: boolean;
+    /**
+     * Layout mode for the payment form.
+     * - `'default'` — all payment methods + card form shown together (current behavior)
+     * - `'buttons'` — PayPal, wallets, and a "Credit / Debit Card" button; clicking the card
+     *   button expands the card form with a back button to return to the button view
+     */
+    layout?: 'default' | 'buttons';
     /** Total amount in cents (smallest currency unit). Used for wallet/PayPal Elements config. */
     totalAmount?: number;
     /** Currency code (used for PayPal Elements config). */

package/dist/index.mjs

@@ -163,7 +163,7 @@ 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 }) {
+function ProcessingOverlay({ status, errorMessage }) {
   return /* @__PURE__ */ jsx3("div", { style: {
     position: "fixed",
     inset: 0,
@@ -239,11 +239,21 @@ 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); } }
           @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; } }
         ` })
   ] }) });
 }
@@ -465,10 +475,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 +511,7 @@ function SplitCardFormInner({
   showPayPal = true,
   showApplePay = true,
   showGooglePay = true,
+  layout = "default",
   totalAmount = 0,
   currency = "usd",
   innerRef
@@ -508,6 +521,7 @@ 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 [fullName, setFullName] = useState2("");
   const [formReady, setFormReady] = useState2(false);
@@ -792,8 +806,265 @@ function SplitCardFormInner({
   if (!isReady) {
     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 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"
+    } : {}
+  }, children: [
+    isButtons && showCardForm && /* @__PURE__ */ jsxs("div", { style: {
+      display: "flex",
+      alignItems: "center",
+      padding: "0.75rem 0 0.625rem"
+    }, children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => setShowCardForm(false),
+          style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: "0.5rem",
+            background: "none",
+            border: "none",
+            cursor: "pointer",
+            color: "#4b5563",
+            fontSize: "0.85rem",
+            fontWeight: 500,
+            padding: 0,
+            transition: "color 0.15s",
+            flexShrink: 0
+          },
+          onMouseOver: (e) => {
+            e.currentTarget.style.color = "#1f2937";
+          },
+          onMouseOut: (e) => {
+            e.currentTarget.style.color = "#4b5563";
+          },
+          "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"
+            }, 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" })
+    ] }),
+    !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}`,
+      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 ${cardBorderColor}`,
+        borderTop: "none",
+        borderRight: "none",
+        borderBottomLeftRadius: "8px",
+        padding: "10px"
+      }, children: /* @__PURE__ */ jsx3(CardExpiryElement, {}) }),
+      /* @__PURE__ */ jsx3("div", { style: {
+        flex: 1,
+        backgroundColor: "white",
+        border: `1px solid ${cardBorderColor}`,
+        borderTop: "none",
+        borderBottomRightRadius: "8px",
+        padding: "10px"
+      }, children: /* @__PURE__ */ jsx3(CardCvcElement, {}) })
+    ] }),
+    /* @__PURE__ */ jsx3("div", { style: {
+      backgroundColor: "white",
+      border: `1px solid ${cardBorderColor}`,
+      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__ */ 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"
+    }, 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: "1rem",
+          fontWeight: 600,
+          cursor: !formReady || isSubmitting ? "not-allowed" : "pointer",
+          opacity: !formReady || isSubmitting ? 0.5 : 1
+        },
+        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") {
+    return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
+      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,
+          display: "flex",
+          alignItems: "center",
+          gap: "0.5rem"
+        }, 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
+    ] });
+  }
   return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
-    overlayStatus && /* @__PURE__ */ jsx3(ProcessingOverlay, { status: overlayStatus }),
+    overlayStatus && /* @__PURE__ */ jsx3(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
     showWallets && stripeInstance && /* @__PURE__ */ jsx3(StripeElements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ jsx3(
       WalletButtonInner,
       {
@@ -829,93 +1100,7 @@ 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
   ] });
 }
 
@@ -934,6 +1119,7 @@ function FloPayCheckout({
   showPayPal = true,
   showApplePay = true,
   showGooglePay = true,
+  layout,
   submitLabel,
   className,
   children,
@@ -1309,6 +1495,7 @@ function FloPayCheckout({
         showPayPal,
         showApplePay,
         showGooglePay,
+        layout,
         submitLabel,
         className
       }