@flopay/react 1.3.0 → 1.3.2

package/dist/index.mjs

@@ -248,6 +248,9 @@ import {
   resolveAVSConfig,
   isAVSFieldVisible,
   getStateFromPostalCode,
+  isPostalCodeSupported,
+  isValidPostalCode,
+  getPostalCodeExample,
   filterStripeMethodsByCountry,
   getStripeMethodDisplayName,
   hasVendoredStripeMethodLogo,
@@ -1334,6 +1337,9 @@ import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-run
 var STRIPE_RESUME_KEY = "flopay_stripe_resume";
 var LEGACY_WALLET_RESUME_KEY = "flopay_wallet_resume";
 var PAYPAL_RESUME_KEY = "flopay_paypal_resume";
+function isAccountValidationError(err) {
+  return err instanceof FloPayError3 && typeof err.statusCode === "number" && err.statusCode >= 400 && err.statusCode < 500;
+}
 function toVaultMount(block) {
   if (!block?.html) return null;
   return {
@@ -1416,6 +1422,18 @@ function getButtonMethodLabel(method) {
       return "Card";
   }
 }
+function malformedPostcodeMessage(country) {
+  const example = getPostalCodeExample(country);
+  return `Enter a valid ${getPostalCodeLabel(country)}${example ? ` (e.g. ${example})` : ""}`;
+}
+function computePostalCodeState(country, zip, visible) {
+  const supported = isPostalCodeSupported(country);
+  const trimmed = zip.trim();
+  const required = visible && supported;
+  const empty = required && !trimmed;
+  const malformed = required && !!trimmed && !isValidPostalCode(country, trimmed);
+  return { visible, supported, required, empty, malformed };
+}
 function normalizeBeforeButtonClickError(method, err) {
   return err instanceof FloPayError3 ? err : new FloPayError3(
     err instanceof Error ? err.message : `${getButtonMethodLabel(method)} before-click hook failed.`,
@@ -2648,6 +2666,11 @@ function SplitCardFormInner({
     if (!flopay || !vaultActive || !sessionId) return null;
     return flopay.cardCapture({ sessionId });
   }, [flopay, vaultActive, sessionId]);
+  const postalCodeState = useMemo3(() => {
+    const cc = selectedCountry;
+    const visible = avsConfig ? isAVSFieldVisible(avsConfig.postal_code, cc) : false;
+    return computePostalCodeState(cc, zipCode, visible);
+  }, [avsConfig, selectedCountry, zipCode]);
   const { avsInvalid, invalidAvsFields } = useMemo3(() => {
     const none = { line1: false, city: false, state: false, zip: false };
     if (!vaultActive || !avsConfig) return { avsInvalid: false, invalidAvsFields: none };
@@ -2657,12 +2680,15 @@ function SplitCardFormInner({
       line1: isEmpty(avsConfig.address_line_1, addressLine1),
       city: isEmpty(avsConfig.city, city),
       state: isEmpty(avsConfig.state, stateValue),
-      zip: isEmpty(avsConfig.postal_code, zipCode)
+      // Empty (required) or malformed both block; unsupported/no-postcode
+      // locales never block (`postalCodeState` fails open above).
+      zip: postalCodeState.empty || postalCodeState.malformed
     };
     const avsInvalid2 = invalidAvsFields2.line1 || invalidAvsFields2.city || invalidAvsFields2.state || invalidAvsFields2.zip;
     return { avsInvalid: avsInvalid2, invalidAvsFields: invalidAvsFields2 };
-  }, [vaultActive, avsConfig, selectedCountry, addressLine1, city, stateValue, zipCode]);
+  }, [vaultActive, avsConfig, selectedCountry, addressLine1, city, stateValue, postalCodeState]);
   const [hasAttemptedSubmit, setHasAttemptedSubmit] = useState3(false);
+  const [zipTouched, setZipTouched] = useState3(false);
   const [vaultMount, setVaultMount] = useState3(
     () => toVaultMount(session?.vault)
   );
@@ -2815,10 +2841,6 @@ function SplitCardFormInner({
     },
     [onErrorChange]
   );
-  useEffect5(() => {
-    if (!vaultActive || !cardCapture) return;
-    cardCapture.setSubmitGate?.(avsInvalid);
-  }, [vaultActive, cardCapture, avsInvalid]);
   useEffect5(() => {
     if (!vaultActive || !cardCapture) return;
     cardCapture.setCardFieldOrder?.(cardFieldOrder ?? null, avsConfig == null);
@@ -2872,73 +2894,118 @@ function SplitCardFormInner({
     nonce,
     updateError
   ]);
+  const vaultOutcomeRef = useRef4({
+    onComplete,
+    onError,
+    updateError,
+    emitDecline,
+    resolvedAccount,
+    fullName,
+    avsConfig,
+    avsCheckProp,
+    sessionId,
+    nonce,
+    baseUrl
+  });
+  vaultOutcomeRef.current = {
+    onComplete,
+    onError,
+    updateError,
+    emitDecline,
+    resolvedAccount,
+    fullName,
+    avsConfig,
+    avsCheckProp,
+    sessionId,
+    nonce,
+    baseUrl
+  };
+  const vaultCompletedRef = useRef4(false);
+  const buildVaultAccountSnapshot = useCallback(() => {
+    const { resolvedAccount: resolvedAccount2, avsConfig: avsConfig2, fullName: fullName2, avsCheckProp: avsCheckProp2 } = vaultOutcomeRef.current;
+    const cc = selectedCountryRef.current || resolvedAccount2.country || "US";
+    const stateVisible = avsConfig2 ? isAVSFieldVisible(avsConfig2.state, cc) : false;
+    const line1Visible = avsConfig2 ? isAVSFieldVisible(avsConfig2.address_line_1, cc) : false;
+    const zipVisible = avsConfig2 ? isAVSFieldVisible(avsConfig2.postal_code, cc) : false;
+    const cityVisible = avsConfig2 ? isAVSFieldVisible(avsConfig2.city, cc) : false;
+    const line2Visible = avsConfig2 ? isAVSFieldVisible(avsConfig2.address_line_2, cc) : false;
+    const derivedState = line1Visible && !stateVisible && zipVisible ? getStateFromPostalCode(cc, (zipCodeRef.current ?? "").trim()) : null;
+    const stateValue2 = stateVisible ? stateRef.current : derivedState;
+    return {
+      accountData: {
+        userId: resolvedAccount2.userId ?? "",
+        email: resolvedAccount2.email ?? "",
+        firstName: resolvedAccount2.firstName ?? fullName2.trim().split(/\s+/)[0] ?? "",
+        lastName: resolvedAccount2.lastName ?? fullName2.trim().split(/\s+/).slice(1).join(" ") ?? "",
+        ...zipVisible && zipCodeRef.current ? { zip: zipCodeRef.current } : {},
+        ...cityVisible && cityRef.current ? { city: cityRef.current } : {},
+        ...stateValue2 ? { state: stateValue2 } : {},
+        ...line1Visible && addressLine1Ref.current ? { addressLine1: addressLine1Ref.current } : {},
+        ...line2Visible && addressLine2Ref.current ? { addressLine2: addressLine2Ref.current } : {},
+        country: cc
+      },
+      ...avsCheckProp2 !== void 0 ? { avsCheck: avsCheckProp2 } : {},
+      ...avsConfig2 ? {
+        avsConfig: {
+          country: isAVSFieldVisible(avsConfig2.country, cc),
+          postal_code: zipVisible,
+          address_line_1: line1Visible,
+          address_line_2: line2Visible,
+          city: cityVisible,
+          state: stateVisible
+        }
+      } : {}
+    };
+  }, []);
   useEffect5(() => {
     if (!vaultActive || !cardCapture) return;
+    cardCapture.setSubmitGate?.(avsInvalid);
+  }, [vaultActive, cardCapture, avsInvalid]);
+  useEffect5(() => {
+    if (!vaultActive || !cardCapture) return;
+    vaultCompletedRef.current = false;
     let cancelled = false;
     const offSubmitting = cardCapture.on("submitting", () => {
       setHasAttemptedSubmit(true);
       setOverlayStatus("processing");
-      if (!sessionId || !nonce) return;
-      const cc = selectedCountryRef.current || resolvedAccount.country || "US";
-      const stateVisible = avsConfig ? isAVSFieldVisible(avsConfig.state, cc) : false;
-      const line1Visible = avsConfig ? isAVSFieldVisible(avsConfig.address_line_1, cc) : false;
-      const zipVisible = avsConfig ? isAVSFieldVisible(avsConfig.postal_code, cc) : false;
-      const cityVisible = avsConfig ? isAVSFieldVisible(avsConfig.city, cc) : false;
-      const line2Visible = avsConfig ? isAVSFieldVisible(avsConfig.address_line_2, cc) : false;
-      const derivedState = line1Visible && !stateVisible && zipVisible ? getStateFromPostalCode(cc, zipCodeRef.current ?? "") : null;
-      const stateValue2 = stateVisible ? stateRef.current : derivedState;
-      void new PaymentAPI2(baseUrl).patchAccountSnapshot(sessionId, nonce, {
-        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(" ") ?? "",
-          ...zipVisible && zipCodeRef.current ? { zip: zipCodeRef.current } : {},
-          ...cityVisible && cityRef.current ? { city: cityRef.current } : {},
-          ...stateValue2 ? { state: stateValue2 } : {},
-          ...line1Visible && addressLine1Ref.current ? { addressLine1: addressLine1Ref.current } : {},
-          ...line2Visible && addressLine2Ref.current ? { addressLine2: addressLine2Ref.current } : {},
-          country: cc
-        },
-        ...avsCheckProp !== void 0 ? { avsCheck: avsCheckProp } : {},
-        ...avsConfig ? {
-          avsConfig: {
-            country: isAVSFieldVisible(avsConfig.country, cc),
-            postal_code: zipVisible,
-            address_line_1: line1Visible,
-            address_line_2: line2Visible,
-            city: cityVisible,
-            state: stateVisible
-          }
-        } : {}
-      }).catch(() => {
+      const { baseUrl: baseUrl2, sessionId: sessionId2, nonce: nonce2, updateError: updateError2, onError: onError2 } = vaultOutcomeRef.current;
+      if (!sessionId2 || !nonce2) return;
+      void new PaymentAPI2(baseUrl2).patchAccountSnapshot(sessionId2, nonce2, buildVaultAccountSnapshot()).catch((err) => {
+        if (!isAccountValidationError(err)) return;
+        const message = err instanceof Error ? err.message : "Please check your billing address and try again.";
+        updateError2(message);
+        setOverlayStatus(null);
+        onError2?.(err instanceof FloPayError3 ? err : new FloPayError3(message, "api_error"));
       });
     });
     const offComplete = cardCapture.on("complete", async (event) => {
-      markSessionRecentlyCompleted(event.sessionId ?? sessionId);
+      markSessionRecentlyCompleted(event.sessionId ?? vaultOutcomeRef.current.sessionId);
       setOverlayStatus("success");
       await new Promise((r) => setTimeout(r, PROCESSING_OVERLAY_SUCCESS_DELAY_MS));
-      if (cancelled) return;
-      onComplete?.({
+      if (vaultCompletedRef.current) return;
+      vaultCompletedRef.current = true;
+      vaultOutcomeRef.current.onComplete?.({
         status: "succeeded",
         paymentIntentId: event.intentId,
         checkoutMethod: "card"
       });
     });
     const offDecline = cardCapture.on("decline", async (event) => {
+      const { updateError: updateError2, emitDecline: emitDecline2 } = vaultOutcomeRef.current;
       const message = event.message ?? "Your payment was declined. Please try another card or contact your bank.";
-      updateError(message);
+      updateError2(message);
       setOverlayStatus("error");
-      emitDecline("card", message, event.declineReason ? { declineCode: event.declineReason } : void 0);
+      emitDecline2("card", message, event.declineReason ? { declineCode: event.declineReason } : void 0);
       await new Promise((r) => setTimeout(r, PROCESSING_OVERLAY_ERROR_DELAY_MS));
       if (cancelled) return;
       setOverlayStatus(null);
     });
     const offError = cardCapture.on("error", async (event) => {
+      const { updateError: updateError2, onError: onError2 } = vaultOutcomeRef.current;
       const message = event.message ?? "There was a problem processing your payment. Please try again.";
-      updateError(message);
+      updateError2(message);
       setOverlayStatus("error");
-      onError?.(new FloPayError3(message, "api_error"));
+      onError2?.(new FloPayError3(message, "api_error"));
       await new Promise((r) => setTimeout(r, PROCESSING_OVERLAY_ERROR_DELAY_MS));
       if (cancelled) return;
       setOverlayStatus(null);
@@ -2950,25 +3017,7 @@ function SplitCardFormInner({
       offDecline();
       offError();
     };
-  }, [
-    vaultActive,
-    cardCapture,
-    sessionId,
-    nonce,
-    baseUrl,
-    avsConfig,
-    avsCheckProp,
-    resolvedAccount.userId,
-    resolvedAccount.email,
-    resolvedAccount.firstName,
-    resolvedAccount.lastName,
-    resolvedAccount.country,
-    fullName,
-    onComplete,
-    onError,
-    updateError,
-    emitDecline
-  ]);
+  }, [vaultActive, cardCapture]);
   const directPaypalConfigured = !!directPaypal?.clientId;
   const hasEnabledMethodsPayload = Array.isArray(enabledPaymentMethods);
   const hasEnabledMethods = hasEnabledMethodsPayload && enabledPaymentMethods.length > 0;
@@ -3156,7 +3205,7 @@ function SplitCardFormInner({
               const stateVisible = isAVSFieldVisible(avsConfig.state, c);
               const line1Visible = isAVSFieldVisible(avsConfig.address_line_1, c);
               const zipVisible = isAVSFieldVisible(avsConfig.postal_code, c);
-              const derivedState = line1Visible && !stateVisible && zipVisible ? getStateFromPostalCode(c, zipCodeRef.current ?? "") : null;
+              const derivedState = line1Visible && !stateVisible && zipVisible ? getStateFromPostalCode(c, (zipCodeRef.current ?? "").trim()) : null;
               const stateValue2 = stateVisible ? stateRef.current : derivedState;
               return {
                 country: c,
@@ -3470,10 +3519,21 @@ function SplitCardFormInner({
       try {
         if (avsConfig) {
           const country = selectedCountryRef.current;
-          if (isAVSFieldVisible(avsConfig.postal_code, country) && !zipCodeRef.current.trim()) {
+          const postal = computePostalCodeState(
+            country,
+            zipCodeRef.current,
+            isAVSFieldVisible(avsConfig.postal_code, country)
+          );
+          if (postal.empty) {
+            setZipTouched(true);
             updateError(getPostalCodeLabel(country) + " is required");
             return;
           }
+          if (postal.malformed) {
+            setZipTouched(true);
+            updateError(malformedPostcodeMessage(country));
+            return;
+          }
           if (isAVSFieldVisible(avsConfig.address_line_1, country) && !addressLine1Ref.current.trim()) {
             updateError("Street address is required");
             return;
@@ -3614,6 +3674,8 @@ function SplitCardFormInner({
   const resolvedBorder = bStyles.cardInputBorder ?? (isButtons ? "#e5e7eb" : "#A4A4FF");
   const resolvedDangerColor = appearanceVars?.colorDanger ?? "#dc2626";
   const avsBorderColor = (fieldInvalid) => hasAttemptedSubmit && fieldInvalid ? resolvedDangerColor : resolvedBorder;
+  const showPostcodeError = (postalCodeState.malformed || postalCodeState.empty) && (zipTouched || hasAttemptedSubmit);
+  const zipBorderColor = showPostcodeError ? resolvedDangerColor : avsBorderColor(invalidAvsFields.zip);
   const cardBg = bStyles.cardFormContainer?.backgroundColor ?? themedWrapperBg ?? (isButtons ? "white" : "#EDEDFF");
   const cardInputBg = bStyles.cardInputBackground ?? appearanceVars?.colorBackground ?? "white";
   const hideBackButtonLabel = isEmptySlotContent(cardBackButtonContent);
@@ -4043,7 +4105,7 @@ function SplitCardFormInner({
           isAVSFieldVisible(avsConfig.postal_code, cc) && /* @__PURE__ */ jsx7("div", { style: {
             flex: avsLayoutProp === "row" ? 1 : void 0,
             backgroundColor: cardInputBg,
-            border: `1px solid ${avsBorderColor(invalidAvsFields.zip)}`,
+            border: `1px solid ${zipBorderColor}`,
             padding: "10px",
             ...avsLayoutProp === "row" && isAVSFieldVisible(avsConfig.country, cc) ? { borderRadius: "0", borderTopRightRadius: resolvedBorderRadius, borderBottomRightRadius: resolvedBorderRadius } : { borderRadius: resolvedBorderRadius }
           }, children: /* @__PURE__ */ jsx7(
@@ -4060,13 +4122,31 @@ function SplitCardFormInner({
                 setZipCode(e.target.value);
                 onZipChange?.(e.target.value);
               },
+              onBlur: () => setZipTouched(true),
               disabled: isSubmitting,
-              required: true,
+              required: postalCodeState.required,
+              "aria-invalid": showPostcodeError || void 0,
+              "aria-describedby": showPostcodeError ? "flopay-billing-postal-code-error" : void 0,
               "data-testid": "flopay-zip",
               style: inputFieldStyle()
             }
           ) })
-        ] })
+        ] }),
+        showPostcodeError && /* @__PURE__ */ jsx7(
+          "div",
+          {
+            id: "flopay-billing-postal-code-error",
+            role: "alert",
+            "data-testid": "flopay-zip-error",
+            style: {
+              marginTop: "0.375rem",
+              color: resolvedDangerColor,
+              ...sharedInputTypography,
+              fontSize: "0.75rem"
+            },
+            children: postalCodeState.empty ? `${getPostalCodeLabel(cc)} is required` : malformedPostcodeMessage(cc)
+          }
+        )
       ] });
     })() }),
     vaultActive && cardPreFormSlot && /* @__PURE__ */ jsx7("div", { style: { order: -2, width: "100%" }, children: cardPreFormSlot }),