@flopay/react 0.3.14 → 0.3.17

package/dist/index.d.cts

@@ -72,6 +72,12 @@ interface FloPayCheckoutProps {
     onError?: (error: FloPayError) => void;
     /** Called when a payment is declined or the authentication step fails. */
     onDecline?: (decline: DeclineEvent) => void;
+    /** Called when the full cardholder name input changes. */
+    onFullNameChange?: (value: string) => void;
+    /** Called when the AVS country dropdown changes. */
+    onCountryChange?: (country: string) => void;
+    /** Called when the AVS ZIP/postcode input changes. */
+    onZipChange?: (zip: string) => void;
     /** Whether to show the PayPal button (default: true). */
     showPayPal?: boolean;
     /** Whether to show Apple Pay button (default: true). Only renders on supported devices. */
@@ -152,7 +158,7 @@ interface FloPayCheckoutProps {
  * />
  * ```
  */
-declare function FloPayCheckout({ sessionId: sessionIdProp, createSession: createSessionParams, billingApiUrl, appearance, locale, fallbackPublishableKey, loading: loadingNode, error: errorNode, onComplete, onError, onDecline, showPayPal, showApplePay, showGooglePay, layout, buttonsTheme, buttonsStyles, cardButtonContent, cardBackButtonContent, cardTitleContent, onButtonClick, onBeforeButtonClick, enableAVS, avsLayout, submitLabel, className, children, checkoutMode: checkoutModeProp, confirmLabel, renderConfirmButton, onSessionCompleted, }: FloPayCheckoutProps): React.ReactElement;
+declare function FloPayCheckout({ sessionId: sessionIdProp, createSession: createSessionParams, billingApiUrl, appearance, locale, fallbackPublishableKey, loading: loadingNode, error: errorNode, onComplete, onError, onDecline, onFullNameChange, onCountryChange, onZipChange, showPayPal, showApplePay, showGooglePay, layout, buttonsTheme, buttonsStyles, cardButtonContent, cardBackButtonContent, cardTitleContent, onButtonClick, onBeforeButtonClick, enableAVS, avsLayout, submitLabel, className, children, checkoutMode: checkoutModeProp, confirmLabel, renderConfirmButton, onSessionCompleted, }: FloPayCheckoutProps): React.ReactElement;
 
 /**
  * Returns the current `FloPay` instance, or `null` if the provider
@@ -366,6 +372,8 @@ interface SplitCardFormProps {
     error?: string | null;
     /** Called when internal error state changes. */
     onErrorChange?: (error: string | null) => void;
+    /** Callback when the full cardholder name input changes. */
+    onFullNameChange?: (value: string) => void;
     /** Callback when first name changes (from the name input). */
     onFirstNameChange?: (value: string) => void;
     /** Callback when last name changes (from the name input). */

package/dist/index.d.ts

@@ -72,6 +72,12 @@ interface FloPayCheckoutProps {
     onError?: (error: FloPayError) => void;
     /** Called when a payment is declined or the authentication step fails. */
     onDecline?: (decline: DeclineEvent) => void;
+    /** Called when the full cardholder name input changes. */
+    onFullNameChange?: (value: string) => void;
+    /** Called when the AVS country dropdown changes. */
+    onCountryChange?: (country: string) => void;
+    /** Called when the AVS ZIP/postcode input changes. */
+    onZipChange?: (zip: string) => void;
     /** Whether to show the PayPal button (default: true). */
     showPayPal?: boolean;
     /** Whether to show Apple Pay button (default: true). Only renders on supported devices. */
@@ -152,7 +158,7 @@ interface FloPayCheckoutProps {
  * />
  * ```
  */
-declare function FloPayCheckout({ sessionId: sessionIdProp, createSession: createSessionParams, billingApiUrl, appearance, locale, fallbackPublishableKey, loading: loadingNode, error: errorNode, onComplete, onError, onDecline, showPayPal, showApplePay, showGooglePay, layout, buttonsTheme, buttonsStyles, cardButtonContent, cardBackButtonContent, cardTitleContent, onButtonClick, onBeforeButtonClick, enableAVS, avsLayout, submitLabel, className, children, checkoutMode: checkoutModeProp, confirmLabel, renderConfirmButton, onSessionCompleted, }: FloPayCheckoutProps): React.ReactElement;
+declare function FloPayCheckout({ sessionId: sessionIdProp, createSession: createSessionParams, billingApiUrl, appearance, locale, fallbackPublishableKey, loading: loadingNode, error: errorNode, onComplete, onError, onDecline, onFullNameChange, onCountryChange, onZipChange, showPayPal, showApplePay, showGooglePay, layout, buttonsTheme, buttonsStyles, cardButtonContent, cardBackButtonContent, cardTitleContent, onButtonClick, onBeforeButtonClick, enableAVS, avsLayout, submitLabel, className, children, checkoutMode: checkoutModeProp, confirmLabel, renderConfirmButton, onSessionCompleted, }: FloPayCheckoutProps): React.ReactElement;
 
 /**
  * Returns the current `FloPay` instance, or `null` if the provider
@@ -366,6 +372,8 @@ interface SplitCardFormProps {
     error?: string | null;
     /** Called when internal error state changes. */
     onErrorChange?: (error: string | null) => void;
+    /** Callback when the full cardholder name input changes. */
+    onFullNameChange?: (value: string) => void;
     /** Callback when first name changes (from the name input). */
     onFirstNameChange?: (value: string) => void;
     /** Callback when last name changes (from the name input). */

package/dist/index.mjs

@@ -206,7 +206,7 @@ import {
   useStripe as useStripeRaw
 } from "@stripe/react-stripe-js";
 import { resolveButtonsLayoutTheme, getPostalCodeLabel, COUNTRY_OPTIONS } from "@flopay/shared";
-import { forwardRef, useCallback, useEffect as useEffect3, useImperativeHandle, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
+import { forwardRef, useCallback, useContext as useContext3, useEffect as useEffect3, useImperativeHandle, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
 
 // src/hooks.ts
 import { useContext as useContext2 } from "react";
@@ -307,15 +307,6 @@ function buildSyntheticSession(params, checkoutModeOverride) {
     }))
   };
 }
-function ensureInlineSessionReady(params) {
-  if (!params.account.email?.trim()) {
-    throw new FloPayError(
-      "Email is required before continuing with card checkout.",
-      "validation_error",
-      { param: "createSession.account.email" }
-    );
-  }
-}
 function mergeAccountPatch(base, patch) {
   if (!patch) return base;
   return {
@@ -370,6 +361,52 @@ function toCssWeight(value) {
   if (typeof value === "number" || typeof value === "string") return value;
   return void 0;
 }
+function resolveExpressCheckoutLoadState(event, methods) {
+  const available = event.availablePaymentMethods;
+  if (!available) return "unavailable";
+  return methods.some((method) => available[method]) ? "ready" : "unavailable";
+}
+function ExpressCheckoutReadySwap({
+  state,
+  placeholderTestId,
+  children
+}) {
+  if (state === "unavailable") return null;
+  return /* @__PURE__ */ jsxs2("div", { style: { position: "relative", minHeight: 44 }, children: [
+    /* @__PURE__ */ jsx4(
+      "div",
+      {
+        "data-testid": placeholderTestId,
+        "aria-hidden": state === "ready",
+        style: {
+          position: "absolute",
+          inset: 0,
+          height: 44,
+          borderRadius: 8,
+          background: "#e5e7eb",
+          animation: state === "ready" ? void 0 : "flopay-pulse 1.5s ease-in-out infinite",
+          opacity: state === "ready" ? 0 : 1,
+          transform: state === "ready" ? "scale(0.985)" : "scale(1)",
+          transition: "opacity 140ms ease-out, transform 140ms ease-out",
+          pointerEvents: "none"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx4(
+      "div",
+      {
+        style: {
+          minHeight: 44,
+          opacity: state === "ready" ? 1 : 0,
+          transform: state === "ready" ? "translateY(0)" : "translateY(2px)",
+          transition: "opacity 140ms ease-out, transform 140ms ease-out",
+          pointerEvents: state === "ready" ? "auto" : "none"
+        },
+        children
+      }
+    )
+  ] });
+}
 function ProcessingOverlay({ status, errorMessage }) {
   return /* @__PURE__ */ jsx4("div", { style: {
     position: "fixed",
@@ -487,7 +524,7 @@ function PayPalButtonInner({
 }) {
   const stripe = useStripeRaw();
   const elements = useStripeElements();
-  const [ready, setReady] = useState2(false);
+  const [loadState, setLoadState] = useState2("loading");
   const [submitting, setSubmitting] = useState2(false);
   const paypalResumeAttempted = useRef2(false);
   const baseUrl = billingApiUrl.replace(/\/+$/, "");
@@ -599,12 +636,11 @@ function PayPalButtonInner({
     }
   }, [stripe, elements, sessionId, email, baseUrl, onTokenizedBody, onErrorChange, onDecline]);
   return /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    /* @__PURE__ */ jsx4("div", { children: /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx4(ExpressCheckoutReadySwap, { state: loadState, placeholderTestId: "flopay-paypal-placeholder", children: /* @__PURE__ */ jsx4(
       ExpressCheckoutElement,
       {
-        onReady: () => setReady(true),
-        onLoadError: () => {
-        },
+        onReady: (event) => setLoadState(resolveExpressCheckoutLoadState(event, ["paypal"])),
+        onLoadError: () => setLoadState("unavailable"),
         onConfirm: handlePayPalConfirm,
         onCancel: () => {
           onDecline?.(buildDeclineEvent("paypal", "PayPal checkout was cancelled."));
@@ -636,7 +672,7 @@ function WalletButtonInner({
 }) {
   const stripe = useStripeRaw();
   const elements = useStripeElements();
-  const [ready, setReady] = useState2(false);
+  const [loadState, setLoadState] = useState2("loading");
   const [submitting, setSubmitting] = useState2(false);
   const baseUrl = billingApiUrl.replace(/\/+$/, "");
   const lastWalletMethodRef = useRef2("card");
@@ -702,12 +738,11 @@ function WalletButtonInner({
     [stripe, elements, sessionId, email, baseUrl, onTokenizedBody, onErrorChange, onDecline]
   );
   return /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    /* @__PURE__ */ jsx4("div", { children: /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx4(ExpressCheckoutReadySwap, { state: loadState, placeholderTestId: "flopay-wallet-placeholder", children: /* @__PURE__ */ jsx4(
       ExpressCheckoutElement,
       {
-        onReady: () => setReady(true),
-        onLoadError: () => {
-        },
+        onReady: (event) => setLoadState(resolveExpressCheckoutLoadState(event, ["applePay", "googlePay"])),
+        onLoadError: () => setLoadState("unavailable"),
         onClick: (event) => {
           lastWalletMethodRef.current = event.expressPaymentType === "apple_pay" ? "apple_pay" : "google_pay";
           event.resolve();
@@ -751,6 +786,7 @@ function SplitCardFormInner({
   isProcessing: externalProcessing,
   error: externalError,
   onErrorChange,
+  onFullNameChange,
   onFirstNameChange,
   onLastNameChange,
   showPayPal = true,
@@ -777,6 +813,7 @@ function SplitCardFormInner({
 }) {
   const flopay = useFloPay();
   const elements = useElements();
+  const checkout = useContext3(CheckoutContext);
   const contextBillingUrl = useBillingApiUrl();
   const [processing, setProcessing] = useState2(false);
   const [error, setError] = useState2(null);
@@ -822,7 +859,8 @@ function SplitCardFormInner({
       title: { ...base.title, ...buttonsStylesOverride.title }
     };
   }, [buttonsTheme, buttonsStylesOverride]);
-  const isSubmitting = externalProcessing ?? processing;
+  const isInlineSessionPatchProcessing = checkout.inlineSessionPatchProcessing ?? false;
+  const isSubmitting = (externalProcessing ?? processing) || isInlineSessionPatchProcessing;
   const isSelfContained = !onTokenizedBody;
   const baseUrl = resolvedBillingApiUrl.replace(/\/+$/, "");
   const resolvedAccount = useMemo2(() => mergeAccountPatch({
@@ -867,10 +905,11 @@ function SplitCardFormInner({
   const showWallets = showApplePay || showGooglePay;
   const handleNameChange = useCallback((value) => {
     setFullName(value);
+    onFullNameChange?.(value);
     const parts = value.trim().split(/\s+/);
     onFirstNameChange?.(parts[0] ?? "");
     onLastNameChange?.(parts.length > 1 ? parts.slice(1).join(" ") : "");
-  }, [onFirstNameChange, onLastNameChange]);
+  }, [onFullNameChange, onFirstNameChange, onLastNameChange]);
   const runBeforeCardButtonClick = useCallback(async () => {
     if (!onBeforeButtonClick) return true;
     try {
@@ -881,8 +920,11 @@ function SplitCardFormInner({
       if (result === false) {
         return false;
       }
-      if (result?.account) {
-        setAccountPatch((prev) => ({ ...prev ?? {}, ...result.account }));
+      if (result && typeof result === "object") {
+        await checkout.applyInlineSessionPatch?.(result);
+        if (result.account) {
+          setAccountPatch((prev) => ({ ...prev ?? {}, ...result.account }));
+        }
       }
       return true;
     } catch (err) {
@@ -894,7 +936,7 @@ function SplitCardFormInner({
       onError?.(floPayErr);
       return false;
     }
-  }, [onBeforeButtonClick, sessionId, updateError, onError]);
+  }, [checkout.applyInlineSessionPatch, onBeforeButtonClick, sessionId, updateError, onError]);
   const processPaymentInternal = useCallback(
     async (tokenizedBody) => {
       if (processingRef.current) return;
@@ -1503,11 +1545,13 @@ function SplitCardFormInner({
             {
               type: "button",
               onClick: async () => {
+                if (isSubmitting) return;
                 const shouldContinue = await runBeforeCardButtonClick();
                 if (!shouldContinue) return;
                 onButtonClick?.("card");
                 expandToCard();
               },
+              disabled: isSubmitting,
               style: {
                 width: "100%",
                 padding: "0.9rem 1rem",
@@ -1517,7 +1561,7 @@ function SplitCardFormInner({
                 borderRadius: "8px",
                 fontSize: bStyles.cardButtonFontSize ?? "0.95rem",
                 fontWeight: 600,
-                cursor: "pointer",
+                cursor: isSubmitting ? "not-allowed" : "pointer",
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center",
@@ -1525,6 +1569,7 @@ function SplitCardFormInner({
                 transition: "border-color 0.2s, box-shadow 0.2s, transform 0.1s",
                 boxShadow: "0 1px 2px rgba(0,0,0,0.04)",
                 position: "relative",
+                opacity: isSubmitting ? 0.6 : 1,
                 ...bStyles.cardButton
               },
               onMouseDown: (e) => {
@@ -1608,6 +1653,12 @@ function SplitCardFormInner({
 
 // src/flopay-checkout.tsx
 import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function hasInlineSessionPatchData(patch) {
+  if (!patch) return false;
+  return Boolean(
+    patch.account && Object.keys(patch.account).length > 0 || patch.couponCodes !== void 0 || patch.tagsData !== void 0 || patch.utmMetadata !== void 0
+  );
+}
 function FloPayCheckout({
   sessionId: sessionIdProp,
   createSession: createSessionParams,
@@ -1620,6 +1671,9 @@ function FloPayCheckout({
   onComplete,
   onError,
   onDecline,
+  onFullNameChange,
+  onCountryChange,
+  onZipChange,
   showPayPal = true,
   showApplePay = true,
   showGooglePay = true,
@@ -1655,7 +1709,6 @@ function FloPayCheckout({
   const [createSessionPatch, setCreateSessionPatch] = useState3(void 0);
   const [createSessionPatchBaseHash, setCreateSessionPatchBaseHash] = useState3("");
   const [cardBootstrapPending, setCardBootstrapPending] = useState3(false);
-  const [deferredCardOpen, setDeferredCardOpen] = useState3(false);
   const autoCheckoutAttempted = useRef3(false);
   const onCompleteRef = useRef3(onComplete);
   onCompleteRef.current = onComplete;
@@ -1790,9 +1843,6 @@ function FloPayCheckout({
   );
   const inflightRef = useRef3(/* @__PURE__ */ new Map());
   const initializedHashRef = useRef3(null);
-  const deferInlineSessionUntilCardClick = Boolean(
-    effectiveCreateSession && !children && layout === "buttons" && onBeforeButtonClick && (effectiveCreateSession.checkoutMode ?? checkoutModeProp ?? "full") === "full"
-  );
   function hashCreateParams(params) {
     const key = JSON.stringify({
       c: params?.clientId,
@@ -1822,7 +1872,6 @@ function FloPayCheckout({
     setResolvedSessionId(sessionIdProp ?? "");
   }, [sessionIdProp]);
   async function resolveInlineSession(params, cacheKey) {
-    ensureInlineSessionReady(params);
     const api = new PaymentAPI(resolvedBillingUrl);
     let sid = typeof window !== "undefined" ? window.sessionStorage.getItem(cacheKey) : null;
     let realResult = null;
@@ -1867,104 +1916,64 @@ function FloPayCheckout({
       } finally {
         inflightRef.current.delete(cacheKey);
       }
-      if (patch) {
-        setCreateSessionPatchBaseHash(baseCreateSessionHash);
-        setCreateSessionPatch((prev) => mergeInlineSessionPatches(prev, patch));
-      }
-      const { sid, result: realResult } = resolved;
-      setUnified(realResult);
-      if (realResult.data.session) {
-        setSession(realResult.data.session);
-      }
-      if (sid) {
-        setResolvedSessionId(sid);
-      }
-      let publishableKey;
-      if (realResult.provider === "stripe") {
-        publishableKey = realResult.data.stripe?.publishableKey;
-      }
-      if (!publishableKey) publishableKey = fallbackPublishableKey;
-      if (!publishableKey) {
-        throw new FloPayError3(
-          "No publishable key found. Provide fallbackPublishableKey or ensure the session includes gatewayData.publishableKey.",
-          "validation_error"
-        );
-      }
-      const instance = await loadFloPay(publishableKey, {
-        billingApiUrl: resolvedBillingUrl,
-        locale
-      });
-      flopayRef.current = instance;
-      setFloPay(instance);
       initializedHashRef.current = cacheKey;
-      setIsLoading(false);
+      try {
+        if (patch) {
+          setCreateSessionPatchBaseHash(baseCreateSessionHash);
+          setCreateSessionPatch((prev) => mergeInlineSessionPatches(prev, patch));
+        }
+        const { sid, result: realResult } = resolved;
+        setUnified(realResult);
+        if (realResult.data.session) {
+          setSession(realResult.data.session);
+        }
+        if (sid) {
+          setResolvedSessionId(sid);
+        }
+        let publishableKey;
+        if (realResult.provider === "stripe") {
+          publishableKey = realResult.data.stripe?.publishableKey;
+        }
+        if (!publishableKey) publishableKey = fallbackPublishableKey;
+        if (!publishableKey) {
+          throw new FloPayError3(
+            "No publishable key found. Provide fallbackPublishableKey or ensure the session includes gatewayData.publishableKey.",
+            "validation_error"
+          );
+        }
+        const instance = await loadFloPay(publishableKey, {
+          billingApiUrl: resolvedBillingUrl,
+          locale
+        });
+        flopayRef.current = instance;
+        setFloPay(instance);
+        setIsLoading(false);
+      } catch (err) {
+        if (initializedHashRef.current === cacheKey) {
+          initializedHashRef.current = null;
+        }
+        throw err;
+      }
       return resolved;
     },
     [fallbackPublishableKey, locale, resolvedBillingUrl]
   );
-  const handleDeferredCardButtonClick = useCallback2(async () => {
-    if (cardBootstrapPending) return;
-    setLoadError(null);
+  const handleInlineSessionPatch = useCallback2(async (patch) => {
+    if (!hasInlineSessionPatchData(patch) || cardBootstrapPending) return;
     setCardBootstrapPending(true);
     try {
-      const beforeClickResult = await onBeforeButtonClick?.({
-        method: "card",
-        createSession: effectiveCreateSession
-      });
-      if (beforeClickResult === false) {
-        setDeferredCardOpen(false);
-        return;
-      }
-      const patch = beforeClickResult && typeof beforeClickResult === "object" ? beforeClickResult : void 0;
-      const baseParams = createSessionParamsRef.current;
-      if (!baseParams) {
-        throw new FloPayError3(
-          "createSession is required to bootstrap checkout.",
-          "validation_error"
-        );
-      }
-      ensureInlineSessionReady(mergeInlineSessionPatch(baseParams, patch));
-      setDeferredCardOpen(true);
-      onButtonClick?.("card");
       await bootstrapInlineSession(patch);
-    } catch (err) {
-      setDeferredCardOpen(false);
-      const floPayErr = err instanceof FloPayError3 ? err : new FloPayError3(
-        err instanceof Error ? err.message : "Failed to start card checkout.",
-        "api_error"
-      );
-      setLoadError(floPayErr);
-      onErrorRef.current?.(floPayErr);
     } finally {
       setCardBootstrapPending(false);
     }
   }, [
     bootstrapInlineSession,
-    baseCreateSessionHash,
-    cardBootstrapPending,
-    effectiveCreateSession,
-    onButtonClick,
-    onBeforeButtonClick
+    cardBootstrapPending
   ]);
   useEffect4(() => {
     let cancelled = false;
     setLoadError(null);
     if (createSessionHash) {
-      if (deferInlineSessionUntilCardClick) {
-        if (initializedHashRef.current !== createSessionHash) {
-          setSession(null);
-          setUnified(null);
-          setFloPay(null);
-          setResolvedSessionId("");
-          setDeferredCardOpen(false);
-          flopayRef.current = null;
-        }
-        setCurrentMode(createSessionParamsRef.current?.checkoutMode ?? checkoutModeProp ?? "full");
-        setIsLoading(false);
-        return () => {
-          cancelled = true;
-        };
-      }
       if (initializedHashRef.current === createSessionHash) return;
       const params = createSessionParamsRef.current;
       setSession(buildSyntheticSession(params, checkoutModeProp));
@@ -2060,7 +2069,7 @@ function FloPayCheckout({
     return () => {
       cancelled = true;
     };
-  }, [resolvedSessionId, createSessionHash, checkoutModeProp, deferInlineSessionUntilCardClick, bootstrapInlineSession]);
+  }, [resolvedSessionId, createSessionHash, checkoutModeProp, bootstrapInlineSession]);
   const handleConfirmCheckout = useCallback2(async () => {
     if (confirmProcessing || !session) return;
     setConfirmProcessing(true);
@@ -2103,17 +2112,29 @@ function FloPayCheckout({
     }
     return opts;
   }, [unified, session, appearance, resolvedBillingUrl]);
+  const shouldHandleInlineSessionPatch = Boolean(
+    createSessionParams && !children && layout === "buttons" && onBeforeButtonClick && (effectiveCreateSession?.checkoutMode ?? checkoutModeProp ?? "full") === "full"
+  );
   const checkoutValue = useMemo3(
     () => ({
       session,
       loading: isLoading,
       error: loadError,
-      checkoutMode: currentMode
+      checkoutMode: currentMode,
+      applyInlineSessionPatch: shouldHandleInlineSessionPatch ? handleInlineSessionPatch : void 0,
+      inlineSessionPatchProcessing: cardBootstrapPending
     }),
-    [session, isLoading, loadError, currentMode]
+    [
+      session,
+      isLoading,
+      loadError,
+      currentMode,
+      shouldHandleInlineSessionPatch,
+      handleInlineSessionPatch,
+      cardBootstrapPending
+    ]
   );
   const shouldShowInterimButtons = Boolean(createSessionParams) && layout === "buttons" && (!flopay || !providerOptions);
-  const shouldKeepDeferredInterimVisible = shouldShowInterimButtons && deferInlineSessionUntilCardClick;
   if (isLoading) {
     if (loadingNode) return /* @__PURE__ */ jsx5(Fragment3, { children: loadingNode });
     if (layout === "buttons") {
@@ -2142,7 +2163,7 @@ function FloPayCheckout({
       /* @__PURE__ */ jsx5("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` })
     ] });
   }
-  if (loadError && !shouldKeepDeferredInterimVisible) {
+  if (loadError) {
     if (errorNode) return /* @__PURE__ */ jsx5(Fragment3, { children: errorNode(loadError) });
     return /* @__PURE__ */ jsx5(
       "div",
@@ -2162,13 +2183,9 @@ function FloPayCheckout({
       InterimButtonsView,
       {
         onButtonClick,
-        onCardButtonClick: deferInlineSessionUntilCardClick ? handleDeferredCardButtonClick : void 0,
-        cardLoading: cardBootstrapPending,
-        cardOpen: deferInlineSessionUntilCardClick ? deferredCardOpen : void 0,
-        errorMessage: shouldKeepDeferredInterimVisible ? loadError?.message ?? null : null,
-        showPayPal: deferInlineSessionUntilCardClick ? false : showPayPal,
-        showApplePay: deferInlineSessionUntilCardClick ? false : showApplePay,
-        showGooglePay: deferInlineSessionUntilCardClick ? false : showGooglePay,
+        showPayPal,
+        showApplePay,
+        showGooglePay,
         buttonsTheme,
         buttonsStyles,
         cardButtonContent,
@@ -2255,6 +2272,7 @@ function FloPayCheckout({
         onComplete,
         onError,
         onDecline,
+        onFullNameChange,
         showPayPal,
         showApplePay,
         showGooglePay,
@@ -2269,7 +2287,8 @@ function FloPayCheckout({
         enableAVS,
         avsLayout,
         country: session?.customer?.country,
-        initialCardOpen: deferredCardOpen,
+        onCountryChange,
+        onZipChange,
         submitLabel,
         className
       }