@flopay/react 0.3.15 → 0.3.17

package/README.md

@@ -131,14 +131,16 @@ Use `onButtonClick` to track button interactions, `onDecline` to track declines/
   createSession={{
     clientId: 'your-client-id',
     items: [{ providerItemId: 'product-1', providerItemName: 'Widget', totalAmount: 29.99, currency: 'EUR' }],
-    account: { userId: 'user_1' },
+    account: { userId: 'user_1', email: 'test@email.com' },
     successUrl: '/success',
     cancelUrl: '/cancel',
   }}
-  onBeforeButtonClick={async ({ method }) => {
+  onBeforeButtonClick={async ({ method, createSession }) => {
     if (method !== 'card') return;
 
-    const email = await openEmailCaptureModal();
+    const email = await openEmailCaptureModal({
+      initialEmail: createSession?.account.email ?? '',
+    });
     if (!email) return false;
 
     return {
@@ -178,7 +180,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` can still be filled in later for the card-button flow. 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`, `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.
 
 ### Advanced: Manual Provider Setup
 

package/dist/index.cjs

@@ -405,6 +405,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__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { position: "relative", minHeight: 44 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "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__ */ (0, import_jsx_runtime4.jsx)(
+      "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__ */ (0, import_jsx_runtime4.jsx)("div", { style: {
     position: "fixed",
@@ -522,7 +568,7 @@ function PayPalButtonInner({
 }) {
   const stripe = (0, import_react_stripe_js.useStripe)();
   const elements = (0, import_react_stripe_js.useElements)();
-  const [ready, setReady] = (0, import_react6.useState)(false);
+  const [loadState, setLoadState] = (0, import_react6.useState)("loading");
   const [submitting, setSubmitting] = (0, import_react6.useState)(false);
   const paypalResumeAttempted = (0, import_react6.useRef)(false);
   const baseUrl = billingApiUrl.replace(/\/+$/, "");
@@ -634,12 +680,11 @@ function PayPalButtonInner({
     }
   }, [stripe, elements, sessionId, email, baseUrl, onTokenizedBody, onErrorChange, onDecline]);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    /* @__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: () => setReady(true),
-        onLoadError: () => {
-        },
+        onReady: (event) => setLoadState(resolveExpressCheckoutLoadState(event, ["paypal"])),
+        onLoadError: () => setLoadState("unavailable"),
         onConfirm: handlePayPalConfirm,
         onCancel: () => {
           onDecline?.(buildDeclineEvent("paypal", "PayPal checkout was cancelled."));
@@ -671,7 +716,7 @@ function WalletButtonInner({
 }) {
   const stripe = (0, import_react_stripe_js.useStripe)();
   const elements = (0, import_react_stripe_js.useElements)();
-  const [ready, setReady] = (0, import_react6.useState)(false);
+  const [loadState, setLoadState] = (0, import_react6.useState)("loading");
   const [submitting, setSubmitting] = (0, import_react6.useState)(false);
   const baseUrl = billingApiUrl.replace(/\/+$/, "");
   const lastWalletMethodRef = (0, import_react6.useRef)("card");
@@ -737,12 +782,11 @@ function WalletButtonInner({
     [stripe, elements, sessionId, email, baseUrl, onTokenizedBody, onErrorChange, onDecline]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ExpressCheckoutReadySwap, { state: loadState, placeholderTestId: "flopay-wallet-placeholder", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       import_react_stripe_js.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();
@@ -786,6 +830,7 @@ function SplitCardFormInner({
   isProcessing: externalProcessing,
   error: externalError,
   onErrorChange,
+  onFullNameChange,
   onFirstNameChange,
   onLastNameChange,
   showPayPal = true,
@@ -904,10 +949,11 @@ function SplitCardFormInner({
   const showWallets = showApplePay || showGooglePay;
   const handleNameChange = (0, import_react6.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 = (0, import_react6.useCallback)(async () => {
     if (!onBeforeButtonClick) return true;
     try {
@@ -1669,6 +1715,9 @@ function FloPayCheckout({
   onComplete,
   onError,
   onDecline,
+  onFullNameChange,
+  onCountryChange,
+  onZipChange,
   showPayPal = true,
   showApplePay = true,
   showGooglePay = true,
@@ -2267,6 +2316,7 @@ function FloPayCheckout({
         onComplete,
         onError,
         onDecline,
+        onFullNameChange,
         showPayPal,
         showApplePay,
         showGooglePay,
@@ -2281,6 +2331,8 @@ function FloPayCheckout({
         enableAVS,
         avsLayout,
         country: session?.customer?.country,
+        onCountryChange,
+        onZipChange,
         submitLabel,
         className
       }