@flopay/react 0.3.17 → 0.3.20

package/README.md

@@ -123,7 +123,7 @@ Theme presets: `'default'`, `'minimal'`, `'rounded'`, `'dark'`. Custom styles vi
 
 #### Button Hooks
 
-Use `onButtonClick` to track button interactions, `onDecline` to track declines/cancellations, and `onBeforeButtonClick` to enrich the credit card flow before the card form opens:
+Use `onButtonClick` to track button interactions, `onDecline` to track declines/cancellations, and `onBeforeButtonClick` to enrich any buttons-layout payment method before it continues:
 
 ```tsx
 <FloPayCheckout
@@ -136,7 +136,11 @@ Use `onButtonClick` to track button interactions, `onDecline` to track declines/
     cancelUrl: '/cancel',
   }}
   onBeforeButtonClick={async ({ method, createSession }) => {
-    if (method !== 'card') return;
+    if (method !== 'card') {
+      return {
+        tagsData: { sessionId: `checkout_${method}_clicked` },
+      };
+    }
 
     const email = await openEmailCaptureModal({
       initialEmail: createSession?.account.email ?? '',
@@ -158,7 +162,7 @@ Use `onButtonClick` to track button interactions, `onDecline` to track declines/
 />
 ```
 
-`onBeforeButtonClick` is **credit card only**. It runs only for the "Credit / Debit Card" button in `layout="buttons"`. It does not run for PayPal, Apple Pay, or Google Pay. If you need required data before every payment method, collect it before rendering checkout.
+`onBeforeButtonClick` runs for every payment button in `layout="buttons"`. Branch on `method` if only some flows need extra work. For PayPal, Apple Pay, and Google Pay, keep the hook fast because it runs during the provider button handshake before the wallet sheet or PayPal window opens.
 
 #### Inline Session Creation
 
@@ -180,7 +184,7 @@ Skip the backend API route — create the session directly in the component:
 
 The component POSTs to the billing API, gets the full session back, and renders the form — zero backend code needed.
 
-When you use `onBeforeButtonClick`, `createSession.account.email` should still be present when checkout renders. If you only have a temporary address such as `test@email.com`, pass it first and replace it in `onBeforeButtonClick` before the card flow continues. PayPal and wallet buttons still bootstrap normally, but this hook does not run for them, so collect any data those methods require before the user uses them.
+When you use `onBeforeButtonClick` with `createSession`, any returned `InlineSessionPatch` is merged into the draft session params before the selected buttons-layout flow continues. That lets you add tracking data or update account fields just in time without pre-creating a separate backend session.
 
 ### Advanced: Manual Provider Setup
 

package/dist/index.cjs

@@ -394,6 +394,25 @@ var FLOPAY_KEYFRAMES = `
   100% { opacity: 0; transform: translateX(16px) scale(0.97); }
 }
 `;
+var DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT = 44;
+function getButtonMethodLabel(method) {
+  switch (method) {
+    case "paypal":
+      return "PayPal";
+    case "apple_pay":
+      return "Apple Pay";
+    case "google_pay":
+      return "Google Pay";
+    default:
+      return "Card";
+  }
+}
+function normalizeBeforeButtonClickError(method, err) {
+  return err instanceof import_shared5.FloPayError ? err : new import_shared5.FloPayError(
+    err instanceof Error ? err.message : `${getButtonMethodLabel(method)} before-click hook failed.`,
+    "validation_error"
+  );
+}
 function FloPayKeyframes() {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("style", { children: FLOPAY_KEYFRAMES });
 }
@@ -564,13 +583,15 @@ function PayPalButtonInner({
   onErrorChange,
   isProcessing = false,
   onButtonClick,
-  onDecline
+  onDecline,
+  runBeforeButtonClick
 }) {
   const stripe = (0, import_react_stripe_js.useStripe)();
   const elements = (0, import_react_stripe_js.useElements)();
   const [loadState, setLoadState] = (0, import_react6.useState)("loading");
   const [submitting, setSubmitting] = (0, import_react6.useState)(false);
   const paypalResumeAttempted = (0, import_react6.useRef)(false);
+  const beforeClickRef = (0, import_react6.useRef)(null);
   const baseUrl = billingApiUrl.replace(/\/+$/, "");
   (0, import_react6.useEffect)(() => {
     if (!stripe || paypalResumeAttempted.current) return;
@@ -619,13 +640,45 @@ function PayPalButtonInner({
       }
     })();
   }, [stripe, onTokenizedBody, onErrorChange, onDecline]);
-  const handlePayPalConfirm = (0, import_react6.useCallback)(async (_event) => {
+  const handlePayPalClick = (0, import_react6.useCallback)(async (event) => {
+    if (isProcessing || submitting) {
+      event.reject();
+      return;
+    }
+    const beforeClick = runBeforeButtonClick ? await runBeforeButtonClick("paypal") : { proceed: true };
+    if (!beforeClick.proceed) {
+      beforeClickRef.current = null;
+      event.reject();
+      return;
+    }
+    beforeClickRef.current = {
+      accountPatch: beforeClick.accountPatch,
+      sessionId: beforeClick.sessionId
+    };
+    event.resolve();
+  }, [isProcessing, runBeforeButtonClick, submitting]);
+  const handlePayPalConfirm = (0, import_react6.useCallback)(async (event) => {
     if (!stripe || !elements) return;
+    let prepared = beforeClickRef.current;
+    beforeClickRef.current = null;
+    if (!prepared && runBeforeButtonClick) {
+      const beforeClick = await runBeforeButtonClick("paypal");
+      if (!beforeClick.proceed) {
+        event.paymentFailed({ reason: "fail", message: "PayPal checkout was cancelled." });
+        return;
+      }
+      prepared = {
+        accountPatch: beforeClick.accountPatch,
+        sessionId: beforeClick.sessionId
+      };
+    }
+    const effectiveSessionId = prepared?.sessionId ?? sessionId;
+    const effectiveEmail = prepared?.accountPatch?.email ?? email;
     onButtonClick?.("paypal");
     try {
       setSubmitting(true);
       onErrorChange?.(null);
-      if (!sessionId || !email) {
+      if (!effectiveSessionId || !effectiveEmail) {
         throw new Error("Missing sessionId or email for PayPal payment");
       }
       const createPM = stripe.createPaymentMethod;
@@ -637,8 +690,8 @@ function PayPalButtonInner({
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
-          sessionId,
-          email,
+          sessionId: effectiveSessionId,
+          email: effectiveEmail,
           paymentMethodType: paymentMethod?.id ?? "paypal",
           isPaypal: "true"
         })
@@ -672,21 +725,26 @@ function PayPalButtonInner({
         type: "card",
         threeDSecureActionResultTokenId: paymentIntent?.id,
         isPaypal: true
+      }, {
+        accountPatch: prepared?.accountPatch,
+        sessionId: effectiveSessionId
       });
     } catch (err) {
       onErrorChange?.(err instanceof Error ? err.message : "PayPal payment failed. Please try again.");
     } finally {
       setSubmitting(false);
     }
-  }, [stripe, elements, sessionId, email, baseUrl, onTokenizedBody, onErrorChange, onDecline]);
+  }, [stripe, elements, sessionId, email, baseUrl, onTokenizedBody, onErrorChange, onDecline, onButtonClick, runBeforeButtonClick]);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ExpressCheckoutReadySwap, { state: loadState, placeholderTestId: "flopay-paypal-placeholder", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       import_react_stripe_js.ExpressCheckoutElement,
       {
         onReady: (event) => setLoadState(resolveExpressCheckoutLoadState(event, ["paypal"])),
         onLoadError: () => setLoadState("unavailable"),
+        onClick: handlePayPalClick,
         onConfirm: handlePayPalConfirm,
         onCancel: () => {
+          beforeClickRef.current = null;
           onDecline?.(buildDeclineEvent("paypal", "PayPal checkout was cancelled."));
         },
         options: {
@@ -712,7 +770,8 @@ function WalletButtonInner({
   onTokenizedBody,
   onErrorChange,
   onButtonClick,
-  onDecline
+  onDecline,
+  runBeforeButtonClick
 }) {
   const stripe = (0, import_react_stripe_js.useStripe)();
   const elements = (0, import_react_stripe_js.useElements)();
@@ -720,10 +779,29 @@ function WalletButtonInner({
   const [submitting, setSubmitting] = (0, import_react6.useState)(false);
   const baseUrl = billingApiUrl.replace(/\/+$/, "");
   const lastWalletMethodRef = (0, import_react6.useRef)("card");
+  const beforeClickRef = (0, import_react6.useRef)(null);
   const handleWalletConfirm = (0, import_react6.useCallback)(
-    async (_event) => {
+    async (event) => {
       if (!stripe || !elements) return;
-      const walletType = _event.expressPaymentType;
+      const walletType = event.expressPaymentType;
+      let prepared = beforeClickRef.current;
+      beforeClickRef.current = null;
+      if (!prepared && runBeforeButtonClick) {
+        const beforeClick = await runBeforeButtonClick(
+          walletType === "apple_pay" ? "apple_pay" : "google_pay"
+        );
+        if (!beforeClick.proceed) {
+          event.paymentFailed({ reason: "fail", message: "Wallet checkout was cancelled." });
+          return;
+        }
+        prepared = {
+          accountPatch: beforeClick.accountPatch,
+          sessionId: beforeClick.sessionId
+        };
+      }
+      const method = walletType === "apple_pay" ? "apple_pay" : "google_pay";
+      const effectiveSessionId = prepared?.sessionId ?? sessionId;
+      const effectiveEmail = prepared?.accountPatch?.email ?? email;
       onButtonClick?.(walletType === "apple_pay" ? "apple_pay" : "google_pay");
       try {
         setSubmitting(true);
@@ -738,15 +816,15 @@ function WalletButtonInner({
           onErrorChange?.(pmError?.message ?? "Failed to create payment method.");
           return;
         }
-        if (!sessionId || !email) {
+        if (!effectiveSessionId || !effectiveEmail) {
           throw new Error("Missing sessionId or email for wallet payment");
         }
         const intentResponse = await fetch(`${baseUrl}/v1/checkouts/payments/intents`, {
           method: "POST",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify({
-            sessionId,
-            email,
+            sessionId: effectiveSessionId,
+            email: effectiveEmail,
             paymentMethodType: paymentMethod.id,
             isPaypal: false
           })
@@ -760,7 +838,6 @@ function WalletButtonInner({
           { payment_method: paymentMethod.id }
         );
         if (confirmError) {
-          const method = walletType === "apple_pay" ? "apple_pay" : "google_pay";
           const message = confirmError.message ?? "Wallet payment failed.";
           onErrorChange?.(message);
           onDecline?.(buildDeclineEvent(method, message, {
@@ -772,6 +849,9 @@ function WalletButtonInner({
           id: paymentMethod.id,
           type: "card",
           threeDSecureActionResultTokenId: paymentIntent?.id
+        }, {
+          accountPatch: prepared?.accountPatch,
+          sessionId: effectiveSessionId
         });
       } catch (err) {
         onErrorChange?.(err instanceof Error ? err.message : "Wallet payment failed. Please try again.");
@@ -779,7 +859,7 @@ function WalletButtonInner({
         setSubmitting(false);
       }
     },
-    [stripe, elements, sessionId, email, baseUrl, onTokenizedBody, onErrorChange, onDecline]
+    [stripe, elements, sessionId, email, baseUrl, onTokenizedBody, onErrorChange, onDecline, onButtonClick, runBeforeButtonClick]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ExpressCheckoutReadySwap, { state: loadState, placeholderTestId: "flopay-wallet-placeholder", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -787,12 +867,23 @@ function WalletButtonInner({
       {
         onReady: (event) => setLoadState(resolveExpressCheckoutLoadState(event, ["applePay", "googlePay"])),
         onLoadError: () => setLoadState("unavailable"),
-        onClick: (event) => {
+        onClick: async (event) => {
           lastWalletMethodRef.current = event.expressPaymentType === "apple_pay" ? "apple_pay" : "google_pay";
+          const beforeClick = runBeforeButtonClick ? await runBeforeButtonClick(lastWalletMethodRef.current) : { proceed: true };
+          if (!beforeClick.proceed) {
+            beforeClickRef.current = null;
+            event.reject();
+            return;
+          }
+          beforeClickRef.current = {
+            accountPatch: beforeClick.accountPatch,
+            sessionId: beforeClick.sessionId
+          };
           event.resolve();
         },
         onConfirm: handleWalletConfirm,
         onCancel: () => {
+          beforeClickRef.current = null;
           onDecline?.(buildDeclineEvent(lastWalletMethodRef.current, "Wallet checkout was cancelled."));
         },
         options: {
@@ -954,55 +1045,83 @@ function SplitCardFormInner({
     onFirstNameChange?.(parts[0] ?? "");
     onLastNameChange?.(parts.length > 1 ? parts.slice(1).join(" ") : "");
   }, [onFullNameChange, onFirstNameChange, onLastNameChange]);
-  const runBeforeCardButtonClick = (0, import_react6.useCallback)(async () => {
-    if (!onBeforeButtonClick) return true;
+  const applyInlineSessionPatch = (0, import_react6.useCallback)(
+    (patch, method) => {
+      if (!checkout.applyInlineSessionPatch) {
+        return Promise.resolve({ error: null, sessionId });
+      }
+      return checkout.applyInlineSessionPatch(patch).then((result) => ({
+        error: null,
+        sessionId: result.sessionId || sessionId
+      })).catch((err) => {
+        const floPayErr = normalizeBeforeButtonClickError(method, err);
+        updateError(floPayErr.message);
+        onError?.(floPayErr);
+        return { error: floPayErr, sessionId };
+      });
+    },
+    [checkout.applyInlineSessionPatch, onError, sessionId, updateError]
+  );
+  const runBeforeButtonClick = (0, import_react6.useCallback)(async (method) => {
+    if (!onBeforeButtonClick) return { proceed: true };
     try {
       const result = await onBeforeButtonClick({
-        method: "card",
-        sessionId: sessionId || void 0
+        method,
+        sessionId: sessionId || void 0,
+        createSession: checkout.inlineSessionDraft
       });
       if (result === false) {
-        return false;
+        return { proceed: false };
       }
       if (result && typeof result === "object") {
-        await checkout.applyInlineSessionPatch?.(result);
         if (result.account) {
           setAccountPatch((prev) => ({ ...prev ?? {}, ...result.account }));
         }
+        const patchResult = await applyInlineSessionPatch(result, method);
+        if (patchResult.error) {
+          return {
+            proceed: false,
+            accountPatch: result.account
+          };
+        }
+        return {
+          proceed: true,
+          accountPatch: result.account,
+          sessionId: patchResult.sessionId
+        };
       }
-      return true;
+      return { proceed: true };
     } catch (err) {
-      const floPayErr = err instanceof import_shared5.FloPayError ? err : new import_shared5.FloPayError(
-        err instanceof Error ? err.message : "Card before-click hook failed.",
-        "validation_error"
-      );
+      const floPayErr = normalizeBeforeButtonClickError(method, err);
       updateError(floPayErr.message);
       onError?.(floPayErr);
-      return false;
+      return { proceed: false };
     }
-  }, [checkout.applyInlineSessionPatch, onBeforeButtonClick, sessionId, updateError, onError]);
+  }, [applyInlineSessionPatch, checkout.inlineSessionDraft, onBeforeButtonClick, onError, sessionId, updateError]);
   const processPaymentInternal = (0, import_react6.useCallback)(
-    async (tokenizedBody) => {
+    async (tokenizedBody, overrides) => {
       if (processingRef.current) return;
       processingRef.current = true;
       setProcessing(true);
       setOverlayStatus("processing");
       updateError(null);
+      const effectiveSessionId = overrides?.sessionId ?? sessionId;
+      const effectiveAccount = mergeAccountPatch(resolvedAccount, overrides?.accountPatch);
       try {
         const response = await fetch(`${baseUrl}/v1/checkouts/sessions/process`, {
           method: "POST",
           headers: {
             "Content-Type": "application/json",
-            "x-user-id": resolvedAccount.userId ?? ""
+            "x-user-id": effectiveAccount.userId ?? ""
           },
           body: JSON.stringify({
-            sessionId,
+            sessionId: effectiveSessionId,
             tokenizedData: tokenizedBody,
             accountData: {
-              userId: resolvedAccount.userId ?? "",
-              email: resolvedAccount.email ?? "",
-              firstName: resolvedAccount.firstName ?? fullName.trim().split(/\s+/)[0] ?? "",
-              lastName: resolvedAccount.lastName ?? fullName.trim().split(/\s+/).slice(1).join(" ") ?? "",
+              userId: effectiveAccount.userId ?? "",
+              email: effectiveAccount.email ?? "",
+              firstName: effectiveAccount.firstName ?? fullName.trim().split(/\s+/)[0] ?? "",
+              lastName: effectiveAccount.lastName ?? fullName.trim().split(/\s+/).slice(1).join(" ") ?? "",
               ...enableAVS ? { zip: zipCodeRef.current, country: selectedCountryRef.current } : {}
             },
             chv
@@ -1111,11 +1230,11 @@ function SplitCardFormInner({
     [baseUrl, sessionId, resolvedAccount, fullName, chv, flopay, onComplete, onError, updateError, emitDecline]
   );
   const dispatchTokenizedBody = (0, import_react6.useCallback)(
-    (tokenizedBody) => {
+    (tokenizedBody, overrides) => {
       if (onTokenizedBody) {
         onTokenizedBody(tokenizedBody);
       } else {
-        processPaymentInternal(tokenizedBody);
+        processPaymentInternal(tokenizedBody, overrides);
       }
     },
     [onTokenizedBody, processPaymentInternal]
@@ -1542,6 +1661,7 @@ function SplitCardFormInner({
   if (layout === "buttons") {
     const isButtonsView = viewState === "buttons" || viewState === "expanding";
     const isCardView = viewState === "expanding" || viewState === "card" || viewState === "collapsing";
+    const cardButtonSizing = cardButtonContent === void 0 ? { boxSizing: "border-box", height: DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT, padding: "0 1rem" } : { padding: "0.9rem 1rem" };
     const buttonsAnim = viewState === "expanding" ? `flopay-buttons-exit ${TRANSITION_MS}ms cubic-bezier(0.4, 0, 0.2, 1) both` : viewState === "collapsing" ? `flopay-buttons-enter ${TRANSITION_MS}ms cubic-bezier(0, 0, 0.2, 1) both` : void 0;
     const cardAnim = viewState === "expanding" ? `flopay-card-enter ${TRANSITION_MS}ms cubic-bezier(0, 0, 0.2, 1) both` : viewState === "collapsing" ? `flopay-card-exit ${TRANSITION_MS}ms cubic-bezier(0.4, 0, 0.2, 1) both` : void 0;
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
@@ -1567,9 +1687,10 @@ function SplitCardFormInner({
               onErrorChange: updateError,
               isProcessing: isSubmitting,
               onButtonClick,
-              onDecline
+              onDecline,
+              runBeforeButtonClick
             }
-          ) }) : showPayPal ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { height: 44, borderRadius: 8, background: "#e5e7eb", animation: "flopay-pulse 1.5s ease-in-out infinite" } }) : null,
+          ) }) : showPayPal ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { height: DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT, borderRadius: 8, background: "#e5e7eb", animation: "flopay-pulse 1.5s ease-in-out infinite" } }) : null,
           showWallets && stripeInstance ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_stripe_js.Elements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             WalletButtonInner,
             {
@@ -1581,24 +1702,25 @@ function SplitCardFormInner({
               onTokenizedBody: dispatchTokenizedBody,
               onErrorChange: updateError,
               onButtonClick,
-              onDecline
+              onDecline,
+              runBeforeButtonClick
             }
-          ) }) : showWallets ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { height: 44, borderRadius: 8, background: "#e5e7eb", animation: "flopay-pulse 1.5s ease-in-out infinite" } }) : null,
+          ) }) : showWallets ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { height: DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT, borderRadius: 8, background: "#e5e7eb", animation: "flopay-pulse 1.5s ease-in-out infinite" } }) : null,
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "button",
             {
               type: "button",
               onClick: async () => {
                 if (isSubmitting) return;
-                const shouldContinue = await runBeforeCardButtonClick();
-                if (!shouldContinue) return;
+                const beforeClick = await runBeforeButtonClick("card");
+                if (!beforeClick.proceed) return;
                 onButtonClick?.("card");
                 expandToCard();
               },
               disabled: isSubmitting,
               style: {
                 width: "100%",
-                padding: "0.9rem 1rem",
+                ...cardButtonSizing,
                 backgroundColor: "white",
                 color: "#262833",
                 border: "1px solid #d1d5db",
@@ -1697,6 +1819,7 @@ function SplitCardFormInner({
 
 // src/flopay-checkout.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
+var DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2 = 44;
 function hasInlineSessionPatchData(patch) {
   if (!patch) return false;
   return Boolean(
@@ -2003,16 +2126,27 @@ function FloPayCheckout({
     [fallbackPublishableKey, locale, resolvedBillingUrl]
   );
   const handleInlineSessionPatch = (0, import_react7.useCallback)(async (patch) => {
-    if (!hasInlineSessionPatchData(patch) || cardBootstrapPending) return;
+    if (!hasInlineSessionPatchData(patch) || cardBootstrapPending) {
+      return {
+        sessionId: resolvedSessionId,
+        session
+      };
+    }
     setCardBootstrapPending(true);
     try {
-      await bootstrapInlineSession(patch);
+      const resolved = await bootstrapInlineSession(patch);
+      return {
+        sessionId: resolved.sid,
+        session: resolved.result.data.session ?? null
+      };
     } finally {
       setCardBootstrapPending(false);
     }
   }, [
     bootstrapInlineSession,
-    cardBootstrapPending
+    cardBootstrapPending,
+    resolvedSessionId,
+    session
   ]);
   (0, import_react7.useEffect)(() => {
     let cancelled = false;
@@ -2165,6 +2299,7 @@ function FloPayCheckout({
       loading: isLoading,
       error: loadError,
       checkoutMode: currentMode,
+      inlineSessionDraft: effectiveCreateSession,
       applyInlineSessionPatch: shouldHandleInlineSessionPatch ? handleInlineSessionPatch : void 0,
       inlineSessionPatchProcessing: cardBootstrapPending
     }),
@@ -2173,6 +2308,7 @@ function FloPayCheckout({
       isLoading,
       loadError,
       currentMode,
+      effectiveCreateSession,
       shouldHandleInlineSessionPatch,
       handleInlineSessionPatch,
       cardBootstrapPending
@@ -2189,9 +2325,9 @@ function FloPayCheckout({
         animation: "flopay-loading-pulse 1.5s ease-in-out infinite"
       } });
       return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
-        showPayPal && skeletonBar(44),
-        (showApplePay || showGooglePay) && skeletonBar(44),
-        skeletonBar(48),
+        showPayPal && skeletonBar(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
+        (showApplePay || showGooglePay) && skeletonBar(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
+        skeletonBar(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
         /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("style", { children: `@keyframes flopay-loading-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
       ] });
     }
@@ -2405,6 +2541,7 @@ function InterimButtonsView({
     background: "#e5e7eb",
     animation: "flopay-interim-pulse 1.5s ease-in-out infinite"
   } });
+  const cardButtonSizing = cardButtonContent === void 0 ? { boxSizing: "border-box", height: DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2, padding: "0 1rem" } : { padding: "0.9rem 1rem" };
   if (showCardForm) {
     const inputBorder = bStyles.cardInputBorder ?? "#e5e7eb";
     const inputBg = bStyles.cardInputBackground ?? "white";
@@ -2495,8 +2632,8 @@ function InterimButtonsView({
     ] });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
-    showPayPal && skeleton(44),
-    (showApplePay || showGooglePay) && skeleton(44),
+    showPayPal && skeleton(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
+    (showApplePay || showGooglePay) && skeleton(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "button",
       {
@@ -2513,7 +2650,7 @@ function InterimButtonsView({
         disabled: cardLoading,
         style: {
           width: "100%",
-          padding: "0.9rem 1rem",
+          ...cardButtonSizing,
           backgroundColor: "white",
           color: "#262833",
           border: "1px solid #d1d5db",