@flopay/react 0.3.15 → 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

@@ -361,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",
@@ -478,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(/\/+$/, "");
@@ -590,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."));
@@ -627,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");
@@ -693,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();
@@ -742,6 +786,7 @@ function SplitCardFormInner({
   isProcessing: externalProcessing,
   error: externalError,
   onErrorChange,
+  onFullNameChange,
   onFirstNameChange,
   onLastNameChange,
   showPayPal = true,
@@ -860,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 {
@@ -1625,6 +1671,9 @@ function FloPayCheckout({
   onComplete,
   onError,
   onDecline,
+  onFullNameChange,
+  onCountryChange,
+  onZipChange,
   showPayPal = true,
   showApplePay = true,
   showGooglePay = true,
@@ -2223,6 +2272,7 @@ function FloPayCheckout({
         onComplete,
         onError,
         onDecline,
+        onFullNameChange,
         showPayPal,
         showApplePay,
         showGooglePay,
@@ -2237,6 +2287,8 @@ function FloPayCheckout({
         enableAVS,
         avsLayout,
         country: session?.customer?.country,
+        onCountryChange,
+        onZipChange,
         submitLabel,
         className
       }