@flopay/react 0.3.17 → 0.3.19

package/dist/index.d.cts

@@ -102,10 +102,10 @@ interface FloPayCheckoutProps {
      */
     onButtonClick?: (method: CheckoutButtonMethod) => void;
     /**
-     * Called before the credit/debit card button continues.
-     * Card only: this does not run for PayPal or wallet buttons.
+     * Called before a payment button continues in `layout="buttons"`.
+     * Runs for card, PayPal, Apple Pay, and Google Pay.
      * In `layout="buttons"` with `createSession`, the returned patch is merged
-     * into the inline session params before the real card session is created.
+     * into the inline session params before the selected flow continues.
      */
     onBeforeButtonClick?: (event: BeforeButtonClickEvent) => void | false | Promise<void | false | InlineSessionPatch> | InlineSessionPatch;
     /**
@@ -417,8 +417,8 @@ interface SplitCardFormProps {
      */
     onButtonClick?: (method: CheckoutButtonMethod) => void;
     /**
-     * Called before the credit/debit card button continues.
-     * Card only: this does not run for PayPal or wallet buttons.
+     * Called before a payment button continues in `layout="buttons"`.
+     * Runs for card, PayPal, Apple Pay, and Google Pay.
      */
     onBeforeButtonClick?: (event: BeforeButtonClickEvent) => MaybePromise<void | false | InlineSessionPatch>;
     /**

package/dist/index.d.ts

@@ -102,10 +102,10 @@ interface FloPayCheckoutProps {
      */
     onButtonClick?: (method: CheckoutButtonMethod) => void;
     /**
-     * Called before the credit/debit card button continues.
-     * Card only: this does not run for PayPal or wallet buttons.
+     * Called before a payment button continues in `layout="buttons"`.
+     * Runs for card, PayPal, Apple Pay, and Google Pay.
      * In `layout="buttons"` with `createSession`, the returned patch is merged
-     * into the inline session params before the real card session is created.
+     * into the inline session params before the selected flow continues.
      */
     onBeforeButtonClick?: (event: BeforeButtonClickEvent) => void | false | Promise<void | false | InlineSessionPatch> | InlineSessionPatch;
     /**
@@ -417,8 +417,8 @@ interface SplitCardFormProps {
      */
     onButtonClick?: (method: CheckoutButtonMethod) => void;
     /**
-     * Called before the credit/debit card button continues.
-     * Card only: this does not run for PayPal or wallet buttons.
+     * Called before a payment button continues in `layout="buttons"`.
+     * Runs for card, PayPal, Apple Pay, and Google Pay.
      */
     onBeforeButtonClick?: (event: BeforeButtonClickEvent) => MaybePromise<void | false | InlineSessionPatch>;
     /**

package/dist/index.mjs

@@ -350,6 +350,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 FloPayError2 ? err : new FloPayError2(
+    err instanceof Error ? err.message : `${getButtonMethodLabel(method)} before-click hook failed.`,
+    "validation_error"
+  );
+}
 function FloPayKeyframes() {
   return /* @__PURE__ */ jsx4("style", { children: FLOPAY_KEYFRAMES });
 }
@@ -520,13 +539,15 @@ function PayPalButtonInner({
   onErrorChange,
   isProcessing = false,
   onButtonClick,
-  onDecline
+  onDecline,
+  runBeforeButtonClick
 }) {
   const stripe = useStripeRaw();
   const elements = useStripeElements();
   const [loadState, setLoadState] = useState2("loading");
   const [submitting, setSubmitting] = useState2(false);
   const paypalResumeAttempted = useRef2(false);
+  const beforeClickRef = useRef2(null);
   const baseUrl = billingApiUrl.replace(/\/+$/, "");
   useEffect3(() => {
     if (!stripe || paypalResumeAttempted.current) return;
@@ -575,13 +596,50 @@ function PayPalButtonInner({
       }
     })();
   }, [stripe, onTokenizedBody, onErrorChange, onDecline]);
-  const handlePayPalConfirm = useCallback(async (_event) => {
+  const handlePayPalClick = useCallback(async (event) => {
+    if (isProcessing || submitting) {
+      event.reject();
+      return;
+    }
+    const beforeClick = runBeforeButtonClick ? await runBeforeButtonClick("paypal", { deferInlineSessionPatch: true }) : { proceed: true };
+    if (!beforeClick.proceed) {
+      beforeClickRef.current = null;
+      event.reject();
+      return;
+    }
+    beforeClickRef.current = {
+      accountPatch: beforeClick.accountPatch,
+      pendingInlinePatch: beforeClick.pendingInlinePatch
+    };
+    event.resolve();
+  }, [isProcessing, runBeforeButtonClick, submitting]);
+  const handlePayPalConfirm = 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,
+        pendingInlinePatch: beforeClick.pendingInlinePatch ?? Promise.resolve({ error: null, sessionId: beforeClick.sessionId ?? sessionId })
+      };
+    }
+    const patchResult = prepared?.pendingInlinePatch ? await prepared.pendingInlinePatch : { error: null, sessionId };
+    if (patchResult.error) {
+      event.paymentFailed({ reason: "fail", message: patchResult.error.message });
+      return;
+    }
+    const effectiveSessionId = patchResult.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;
@@ -593,8 +651,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"
         })
@@ -628,21 +686,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__ */ jsxs2(Fragment2, { children: [
     /* @__PURE__ */ jsx4(ExpressCheckoutReadySwap, { state: loadState, placeholderTestId: "flopay-paypal-placeholder", children: /* @__PURE__ */ jsx4(
       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: {
@@ -668,7 +731,8 @@ function WalletButtonInner({
   onTokenizedBody,
   onErrorChange,
   onButtonClick,
-  onDecline
+  onDecline,
+  runBeforeButtonClick
 }) {
   const stripe = useStripeRaw();
   const elements = useStripeElements();
@@ -676,10 +740,34 @@ function WalletButtonInner({
   const [submitting, setSubmitting] = useState2(false);
   const baseUrl = billingApiUrl.replace(/\/+$/, "");
   const lastWalletMethodRef = useRef2("card");
+  const beforeClickRef = useRef2(null);
   const handleWalletConfirm = 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,
+          pendingInlinePatch: beforeClick.pendingInlinePatch ?? Promise.resolve({ error: null, sessionId: beforeClick.sessionId ?? sessionId })
+        };
+      }
+      const patchResult = prepared?.pendingInlinePatch ? await prepared.pendingInlinePatch : { error: null, sessionId };
+      if (patchResult.error) {
+        event.paymentFailed({ reason: "fail", message: patchResult.error.message });
+        return;
+      }
+      const method = walletType === "apple_pay" ? "apple_pay" : "google_pay";
+      const effectiveSessionId = patchResult.sessionId ?? sessionId;
+      const effectiveEmail = prepared?.accountPatch?.email ?? email;
       onButtonClick?.(walletType === "apple_pay" ? "apple_pay" : "google_pay");
       try {
         setSubmitting(true);
@@ -694,15 +782,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
           })
@@ -716,7 +804,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, {
@@ -728,6 +815,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.");
@@ -735,7 +825,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__ */ jsxs2(Fragment2, { children: [
     /* @__PURE__ */ jsx4(ExpressCheckoutReadySwap, { state: loadState, placeholderTestId: "flopay-wallet-placeholder", children: /* @__PURE__ */ jsx4(
@@ -743,12 +833,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, { deferInlineSessionPatch: true }) : { proceed: true };
+          if (!beforeClick.proceed) {
+            beforeClickRef.current = null;
+            event.reject();
+            return;
+          }
+          beforeClickRef.current = {
+            accountPatch: beforeClick.accountPatch,
+            pendingInlinePatch: beforeClick.pendingInlinePatch
+          };
           event.resolve();
         },
         onConfirm: handleWalletConfirm,
         onCancel: () => {
+          beforeClickRef.current = null;
           onDecline?.(buildDeclineEvent(lastWalletMethodRef.current, "Wallet checkout was cancelled."));
         },
         options: {
@@ -910,55 +1011,91 @@ function SplitCardFormInner({
     onFirstNameChange?.(parts[0] ?? "");
     onLastNameChange?.(parts.length > 1 ? parts.slice(1).join(" ") : "");
   }, [onFullNameChange, onFirstNameChange, onLastNameChange]);
-  const runBeforeCardButtonClick = useCallback(async () => {
-    if (!onBeforeButtonClick) return true;
+  const applyInlineSessionPatch = 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 = useCallback(async (method, options) => {
+    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 pendingInlinePatch = applyInlineSessionPatch(result, method);
+        if (options?.deferInlineSessionPatch) {
+          return {
+            proceed: true,
+            accountPatch: result.account,
+            pendingInlinePatch
+          };
+        }
+        const patchResult = await pendingInlinePatch;
+        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 FloPayError2 ? err : new FloPayError2(
-        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 = 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
@@ -1067,11 +1204,11 @@ function SplitCardFormInner({
     [baseUrl, sessionId, resolvedAccount, fullName, chv, flopay, onComplete, onError, updateError, emitDecline]
   );
   const dispatchTokenizedBody = useCallback(
-    (tokenizedBody) => {
+    (tokenizedBody, overrides) => {
       if (onTokenizedBody) {
         onTokenizedBody(tokenizedBody);
       } else {
-        processPaymentInternal(tokenizedBody);
+        processPaymentInternal(tokenizedBody, overrides);
       }
     },
     [onTokenizedBody, processPaymentInternal]
@@ -1498,6 +1635,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__ */ jsxs2("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
@@ -1523,9 +1661,10 @@ function SplitCardFormInner({
               onErrorChange: updateError,
               isProcessing: isSubmitting,
               onButtonClick,
-              onDecline
+              onDecline,
+              runBeforeButtonClick
             }
-          ) }) : showPayPal ? /* @__PURE__ */ jsx4("div", { style: { height: 44, borderRadius: 8, background: "#e5e7eb", animation: "flopay-pulse 1.5s ease-in-out infinite" } }) : null,
+          ) }) : showPayPal ? /* @__PURE__ */ jsx4("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__ */ jsx4(StripeElements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ jsx4(
             WalletButtonInner,
             {
@@ -1537,24 +1676,25 @@ function SplitCardFormInner({
               onTokenizedBody: dispatchTokenizedBody,
               onErrorChange: updateError,
               onButtonClick,
-              onDecline
+              onDecline,
+              runBeforeButtonClick
             }
-          ) }) : showWallets ? /* @__PURE__ */ jsx4("div", { style: { height: 44, borderRadius: 8, background: "#e5e7eb", animation: "flopay-pulse 1.5s ease-in-out infinite" } }) : null,
+          ) }) : showWallets ? /* @__PURE__ */ jsx4("div", { style: { height: DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT, borderRadius: 8, background: "#e5e7eb", animation: "flopay-pulse 1.5s ease-in-out infinite" } }) : null,
           /* @__PURE__ */ jsx4(
             "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",
@@ -1653,6 +1793,7 @@ function SplitCardFormInner({
 
 // src/flopay-checkout.tsx
 import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2 = 44;
 function hasInlineSessionPatchData(patch) {
   if (!patch) return false;
   return Boolean(
@@ -1959,16 +2100,27 @@ function FloPayCheckout({
     [fallbackPublishableKey, locale, resolvedBillingUrl]
   );
   const handleInlineSessionPatch = useCallback2(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
   ]);
   useEffect4(() => {
     let cancelled = false;
@@ -2121,6 +2273,7 @@ function FloPayCheckout({
       loading: isLoading,
       error: loadError,
       checkoutMode: currentMode,
+      inlineSessionDraft: effectiveCreateSession,
       applyInlineSessionPatch: shouldHandleInlineSessionPatch ? handleInlineSessionPatch : void 0,
       inlineSessionPatchProcessing: cardBootstrapPending
     }),
@@ -2129,6 +2282,7 @@ function FloPayCheckout({
       isLoading,
       loadError,
       currentMode,
+      effectiveCreateSession,
       shouldHandleInlineSessionPatch,
       handleInlineSessionPatch,
       cardBootstrapPending
@@ -2145,9 +2299,9 @@ function FloPayCheckout({
         animation: "flopay-loading-pulse 1.5s ease-in-out infinite"
       } });
       return /* @__PURE__ */ jsxs3("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__ */ jsx5("style", { children: `@keyframes flopay-loading-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
       ] });
     }
@@ -2361,6 +2515,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";
@@ -2451,8 +2606,8 @@ function InterimButtonsView({
     ] });
   }
   return /* @__PURE__ */ jsxs3("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__ */ jsx5(
       "button",
       {
@@ -2469,7 +2624,7 @@ function InterimButtonsView({
         disabled: cardLoading,
         style: {
           width: "100%",
-          padding: "0.9rem 1rem",
+          ...cardButtonSizing,
           backgroundColor: "white",
           color: "#262833",
           border: "1px solid #d1d5db",