@flopay/react 0.4.11 → 0.5.0

package/dist/index.cjs

@@ -1056,12 +1056,15 @@ function SplitCardFormInner({
   showSecurityFooter = true,
   onButtonClick,
   onBeforeButtonClick,
-  enableAVS = false,
+  enableAVS: enableAVSProp,
   avsLayout: avsLayoutProp = "row",
   country: countryProp,
   zip: zipProp,
   onCountryChange,
   onZipChange,
+  avsCheck: avsCheckProp,
+  checkoutType: checkoutTypeProp,
+  checkoutLayout: checkoutLayoutProp,
   totalAmount = 0,
   currency = "usd",
   initialCardOpen = false,
@@ -1077,9 +1080,19 @@ function SplitCardFormInner({
   const [is3DSActive, setIs3DSActive] = (0, import_react7.useState)(false);
   const [selectedCountry, setSelectedCountry] = (0, import_react7.useState)(countryProp ?? "US");
   const [zipCode, setZipCode] = (0, import_react7.useState)(zipProp ?? "");
+  const [addressLine1, setAddressLine1] = (0, import_react7.useState)("");
+  const [addressLine2, setAddressLine2] = (0, import_react7.useState)("");
+  const [city, setCity] = (0, import_react7.useState)("");
+  const [stateValue, setStateValue] = (0, import_react7.useState)("");
   const [accountPatch, setAccountPatch] = (0, import_react7.useState)({});
   const zipCodeRef = (0, import_react7.useRef)(zipProp ?? "");
   const selectedCountryRef = (0, import_react7.useRef)(countryProp ?? "US");
+  const addressLine1Ref = (0, import_react7.useRef)("");
+  const addressLine2Ref = (0, import_react7.useRef)("");
+  const cityRef = (0, import_react7.useRef)("");
+  const stateRef = (0, import_react7.useRef)("");
+  const avsConfig = (0, import_react7.useMemo)(() => (0, import_shared4.resolveAVSConfig)(enableAVSProp), [enableAVSProp]);
+  const enableAVS = avsConfig !== null;
   const [viewState, setViewState] = (0, import_react7.useState)(initialCardOpen ? "card" : "buttons");
   const showCardForm = viewState === "expanding" || viewState === "card";
   const TRANSITION_MS = 280;
@@ -1251,9 +1264,33 @@ function SplitCardFormInner({
               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 } : {}
+              ...avsConfig ? (() => {
+                const c = selectedCountryRef.current;
+                return {
+                  country: c,
+                  ...(0, import_shared4.isAVSFieldVisible)(avsConfig.postal_code, c) && zipCodeRef.current ? { zip: zipCodeRef.current } : {},
+                  ...(0, import_shared4.isAVSFieldVisible)(avsConfig.city, c) && cityRef.current ? { city: cityRef.current } : {},
+                  ...(0, import_shared4.isAVSFieldVisible)(avsConfig.state, c) && stateRef.current ? { state: stateRef.current } : {},
+                  ...(0, import_shared4.isAVSFieldVisible)(avsConfig.address_line_1, c) && addressLine1Ref.current ? { addressLine1: addressLine1Ref.current } : {},
+                  ...(0, import_shared4.isAVSFieldVisible)(avsConfig.address_line_2, c) && addressLine2Ref.current ? { addressLine2: addressLine2Ref.current } : {}
+                };
+              })() : {}
             },
-            chv
+            chv,
+            // Checkout analytics metadata
+            avsCheck: avsCheckProp ?? false,
+            checkoutType: checkoutTypeProp,
+            checkoutLayout: checkoutLayoutProp,
+            // Resolved exposure: which fields were actually shown for the active country.
+            // Country-scoped rules (e.g. ['US', 'CA']) are flattened to booleans here.
+            avsConfig: avsConfig ? {
+              country: (0, import_shared4.isAVSFieldVisible)(avsConfig.country, selectedCountryRef.current),
+              postal_code: (0, import_shared4.isAVSFieldVisible)(avsConfig.postal_code, selectedCountryRef.current),
+              address_line_1: (0, import_shared4.isAVSFieldVisible)(avsConfig.address_line_1, selectedCountryRef.current),
+              address_line_2: (0, import_shared4.isAVSFieldVisible)(avsConfig.address_line_2, selectedCountryRef.current),
+              city: (0, import_shared4.isAVSFieldVisible)(avsConfig.city, selectedCountryRef.current),
+              state: (0, import_shared4.isAVSFieldVisible)(avsConfig.state, selectedCountryRef.current)
+            } : void 0
           })
         });
         if (response.ok) {
@@ -1277,14 +1314,19 @@ function SplitCardFormInner({
           }
           setIs3DSActive(true);
           try {
-            const retryBillingAddress = {
-              ...(enableAVS ? selectedCountryRef.current : effectiveAccount.country) ? {
-                country: enableAVS ? selectedCountryRef.current : effectiveAccount.country
-              } : {},
-              ...(enableAVS ? zipCodeRef.current.trim() : effectiveAccount.zip) || "" ? {
-                postal_code: enableAVS ? zipCodeRef.current.trim() : effectiveAccount.zip
-              } : {}
-            };
+            const retryBillingAddress = {};
+            const retryCC = selectedCountryRef.current;
+            const retryCountry = enableAVS ? retryCC : effectiveAccount.country;
+            if (retryCountry) retryBillingAddress["country"] = retryCountry;
+            if (avsConfig && (0, import_shared4.isAVSFieldVisible)(avsConfig.postal_code, retryCC) && zipCodeRef.current.trim()) {
+              retryBillingAddress["postal_code"] = zipCodeRef.current.trim();
+            } else if (!avsConfig && effectiveAccount.zip) {
+              retryBillingAddress["postal_code"] = effectiveAccount.zip;
+            }
+            if (avsConfig && (0, import_shared4.isAVSFieldVisible)(avsConfig.address_line_1, retryCC) && addressLine1Ref.current.trim()) retryBillingAddress["line1"] = addressLine1Ref.current.trim();
+            if (avsConfig && (0, import_shared4.isAVSFieldVisible)(avsConfig.address_line_2, retryCC) && addressLine2Ref.current.trim()) retryBillingAddress["line2"] = addressLine2Ref.current.trim();
+            if (avsConfig && (0, import_shared4.isAVSFieldVisible)(avsConfig.city, retryCC) && cityRef.current.trim()) retryBillingAddress["city"] = cityRef.current.trim();
+            if (avsConfig && (0, import_shared4.isAVSFieldVisible)(avsConfig.state, retryCC) && stateRef.current.trim()) retryBillingAddress["state"] = stateRef.current.trim();
             const result = await flopay.confirmPayment({
               clientSecret: secret,
               returnUrl: window.location.href,
@@ -1442,9 +1484,24 @@ function SplitCardFormInner({
       updateError(null);
       let handedOff = false;
       try {
-        if (enableAVS && !zipCodeRef.current.trim()) {
-          updateError((0, import_shared4.getPostalCodeLabel)(selectedCountryRef.current) + " is required");
-          return;
+        if (avsConfig) {
+          const country = selectedCountryRef.current;
+          if ((0, import_shared4.isAVSFieldVisible)(avsConfig.postal_code, country) && !zipCodeRef.current.trim()) {
+            updateError((0, import_shared4.getPostalCodeLabel)(country) + " is required");
+            return;
+          }
+          if ((0, import_shared4.isAVSFieldVisible)(avsConfig.address_line_1, country) && !addressLine1Ref.current.trim()) {
+            updateError("Street address is required");
+            return;
+          }
+          if ((0, import_shared4.isAVSFieldVisible)(avsConfig.city, country) && !cityRef.current.trim()) {
+            updateError("City is required");
+            return;
+          }
+          if ((0, import_shared4.isAVSFieldVisible)(avsConfig.state, country) && !stateRef.current.trim()) {
+            updateError((0, import_shared4.getStateLabel)(country) + " is required");
+            return;
+          }
         }
         const submitResult = await flopay.submitElements();
         if (submitResult.error) {
@@ -1452,14 +1509,19 @@ function SplitCardFormInner({
           onError?.(submitResult.error);
           return;
         }
-        const billingAddress = {
-          ...(enableAVS ? selectedCountryRef.current : resolvedAccount.country) ? {
-            country: enableAVS ? selectedCountryRef.current : resolvedAccount.country
-          } : {},
-          ...(enableAVS ? zipCodeRef.current.trim() : resolvedAccount.zip) || "" ? {
-            postal_code: enableAVS ? zipCodeRef.current.trim() : resolvedAccount.zip
-          } : {}
-        };
+        const billingAddress = {};
+        const cc = selectedCountryRef.current;
+        const avsCountry = enableAVS ? cc : resolvedAccount.country;
+        if (avsCountry) billingAddress["country"] = avsCountry;
+        if (avsConfig && (0, import_shared4.isAVSFieldVisible)(avsConfig.postal_code, cc) && zipCodeRef.current.trim()) {
+          billingAddress["postal_code"] = zipCodeRef.current.trim();
+        } else if (!avsConfig && resolvedAccount.zip) {
+          billingAddress["postal_code"] = resolvedAccount.zip;
+        }
+        if (avsConfig && (0, import_shared4.isAVSFieldVisible)(avsConfig.address_line_1, cc) && addressLine1Ref.current.trim()) billingAddress["line1"] = addressLine1Ref.current.trim();
+        if (avsConfig && (0, import_shared4.isAVSFieldVisible)(avsConfig.address_line_2, cc) && addressLine2Ref.current.trim()) billingAddress["line2"] = addressLine2Ref.current.trim();
+        if (avsConfig && (0, import_shared4.isAVSFieldVisible)(avsConfig.city, cc) && cityRef.current.trim()) billingAddress["city"] = cityRef.current.trim();
+        if (avsConfig && (0, import_shared4.isAVSFieldVisible)(avsConfig.state, cc) && stateRef.current.trim()) billingAddress["state"] = stateRef.current.trim();
         const billingDetails = {
           ...resolvedAccount.email ? { email: resolvedAccount.email } : {},
           ...fullName.trim() ? { name: fullName.trim() } : {},
@@ -1686,80 +1748,198 @@ function SplitCardFormInner({
         }
       }
     ) }),
-    enableAVS && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: {
-      display: "flex",
-      flexDirection: avsLayoutProp === "column" ? "column" : "row",
-      gap: avsLayoutProp === "column" ? "0.5rem" : "0",
-      marginTop: "0.5rem"
-    }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
-        flex: avsLayoutProp === "row" ? 1 : void 0,
-        backgroundColor: cardInputBg,
-        border: `1px solid ${resolvedBorder}`,
-        padding: "10px",
-        ...avsLayoutProp === "row" ? { borderRadius: "0", borderTopLeftRadius: "8px", borderBottomLeftRadius: "8px", borderRight: "none" } : { borderRadius: "8px" },
-        ...isButtons && bStyles.countrySelect ? bStyles.countrySelect : {}
-      }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        "select",
-        {
-          value: selectedCountry,
-          onChange: (e) => {
-            selectedCountryRef.current = e.target.value;
-            setSelectedCountry(e.target.value);
-            onCountryChange?.(e.target.value);
-          },
-          disabled: isSubmitting,
-          autoComplete: "country",
-          "data-testid": "flopay-country",
-          style: {
-            width: "100%",
-            border: "none",
-            outline: "none",
-            background: "transparent",
-            ...sharedInputTypography,
-            cursor: "pointer",
-            ...isButtons && bStyles.nameInput ? bStyles.nameInput : {}
-          },
-          children: import_shared4.COUNTRY_OPTIONS.map((c) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("option", { value: c.code, children: [
-            c.flag,
-            " ",
-            c.name
-          ] }, c.code))
-        }
-      ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
-        flex: avsLayoutProp === "row" ? 1 : void 0,
+    avsConfig && (() => {
+      const cc = selectedCountry;
+      const inputWrapStyle = (extraStyle) => ({
         backgroundColor: cardInputBg,
         border: `1px solid ${resolvedBorder}`,
+        borderRadius: "8px",
+        marginTop: "0.5rem",
         padding: "10px",
-        ...avsLayoutProp === "row" ? { borderRadius: "0", borderTopRightRadius: "8px", borderBottomRightRadius: "8px" } : { borderRadius: "8px" },
-        ...isButtons && bStyles.zipInput ? bStyles.zipInput : {}
-      }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        "input",
-        {
-          className: "flopay-shared-input",
-          placeholder: (0, import_shared4.getPostalCodeLabel)(selectedCountry),
-          autoComplete: "postal-code",
-          value: zipCode,
-          onChange: (e) => {
-            zipCodeRef.current = e.target.value;
-            setZipCode(e.target.value);
-            onZipChange?.(e.target.value);
-          },
-          disabled: isSubmitting,
-          required: true,
-          "data-testid": "flopay-zip",
-          style: {
-            width: "100%",
-            border: "none",
-            outline: "none",
-            background: "transparent",
-            ...sharedInputTypography,
-            ...isButtons && bStyles.nameInput ? bStyles.nameInput : {}
+        ...isButtons && extraStyle ? extraStyle : {}
+      });
+      const inputFieldStyle = () => ({
+        width: "100%",
+        border: "none",
+        outline: "none",
+        background: "transparent",
+        ...sharedInputTypography,
+        ...isButtons && bStyles.nameInput ? bStyles.nameInput : {}
+      });
+      const stateOpts = (0, import_shared4.getStateOptions)(cc);
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+        (0, import_shared4.isAVSFieldVisible)(avsConfig.address_line_1, cc) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: inputWrapStyle(bStyles.addressLine1Input), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "input",
+          {
+            className: "flopay-shared-input",
+            placeholder: "Street Address (e.g. 123 Main St)",
+            autoComplete: "address-line1",
+            value: addressLine1,
+            onChange: (e) => {
+              addressLine1Ref.current = e.target.value;
+              setAddressLine1(e.target.value);
+            },
+            disabled: isSubmitting,
+            required: true,
+            "data-testid": "flopay-address-line1",
+            style: inputFieldStyle()
           }
-        }
-      ) })
-    ] }),
+        ) }),
+        (0, import_shared4.isAVSFieldVisible)(avsConfig.address_line_2, cc) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: inputWrapStyle(bStyles.addressLine2Input), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "input",
+          {
+            className: "flopay-shared-input",
+            placeholder: "Apt, Suite, Unit (optional)",
+            autoComplete: "address-line2",
+            value: addressLine2,
+            onChange: (e) => {
+              addressLine2Ref.current = e.target.value;
+              setAddressLine2(e.target.value);
+            },
+            disabled: isSubmitting,
+            "data-testid": "flopay-address-line2",
+            style: inputFieldStyle()
+          }
+        ) }),
+        ((0, import_shared4.isAVSFieldVisible)(avsConfig.city, cc) || (0, import_shared4.isAVSFieldVisible)(avsConfig.state, cc)) && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: {
+          display: "flex",
+          gap: "0",
+          marginTop: "0.5rem"
+        }, children: [
+          (0, import_shared4.isAVSFieldVisible)(avsConfig.city, cc) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
+            flex: 1,
+            backgroundColor: cardInputBg,
+            border: `1px solid ${resolvedBorder}`,
+            padding: "10px",
+            borderTopLeftRadius: "8px",
+            borderBottomLeftRadius: "8px",
+            ...(0, import_shared4.isAVSFieldVisible)(avsConfig.state, cc) ? { borderRight: "none", borderTopRightRadius: 0, borderBottomRightRadius: 0 } : { borderRadius: "8px" },
+            ...isButtons && bStyles.cityInput ? bStyles.cityInput : {}
+          }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "input",
+            {
+              className: "flopay-shared-input",
+              placeholder: "City",
+              autoComplete: "address-level2",
+              value: city,
+              onChange: (e) => {
+                cityRef.current = e.target.value;
+                setCity(e.target.value);
+              },
+              disabled: isSubmitting,
+              required: true,
+              "data-testid": "flopay-city",
+              style: inputFieldStyle()
+            }
+          ) }),
+          (0, import_shared4.isAVSFieldVisible)(avsConfig.state, cc) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
+            flex: 1,
+            backgroundColor: cardInputBg,
+            border: `1px solid ${resolvedBorder}`,
+            padding: "10px",
+            borderTopRightRadius: "8px",
+            borderBottomRightRadius: "8px",
+            ...(0, import_shared4.isAVSFieldVisible)(avsConfig.city, cc) ? { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 } : { borderRadius: "8px" },
+            ...isButtons && bStyles.stateInput ? bStyles.stateInput : {}
+          }, children: stateOpts ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+            "select",
+            {
+              value: stateValue,
+              onChange: (e) => {
+                stateRef.current = e.target.value;
+                setStateValue(e.target.value);
+              },
+              disabled: isSubmitting,
+              autoComplete: "address-level1",
+              required: true,
+              "data-testid": "flopay-state",
+              style: { ...inputFieldStyle(), cursor: "pointer" },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "", children: (0, import_shared4.getStateLabel)(cc) }),
+                stateOpts.map((s) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: s.code, children: s.name }, s.code))
+              ]
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "input",
+            {
+              className: "flopay-shared-input",
+              placeholder: (0, import_shared4.getStateLabel)(cc),
+              autoComplete: "address-level1",
+              value: stateValue,
+              onChange: (e) => {
+                stateRef.current = e.target.value;
+                setStateValue(e.target.value);
+              },
+              disabled: isSubmitting,
+              required: true,
+              "data-testid": "flopay-state",
+              style: inputFieldStyle()
+            }
+          ) })
+        ] }),
+        ((0, import_shared4.isAVSFieldVisible)(avsConfig.country, cc) || (0, import_shared4.isAVSFieldVisible)(avsConfig.postal_code, cc)) && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: {
+          display: "flex",
+          flexDirection: avsLayoutProp === "column" ? "column" : "row",
+          gap: avsLayoutProp === "column" ? "0.5rem" : "0",
+          marginTop: "0.5rem"
+        }, children: [
+          (0, import_shared4.isAVSFieldVisible)(avsConfig.country, cc) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
+            flex: avsLayoutProp === "row" ? 1 : void 0,
+            backgroundColor: cardInputBg,
+            border: `1px solid ${resolvedBorder}`,
+            padding: "10px",
+            ...avsLayoutProp === "row" && (0, import_shared4.isAVSFieldVisible)(avsConfig.postal_code, cc) ? { borderRadius: "0", borderTopLeftRadius: "8px", borderBottomLeftRadius: "8px", borderRight: "none" } : { borderRadius: "8px" },
+            ...isButtons && bStyles.countrySelect ? bStyles.countrySelect : {}
+          }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "select",
+            {
+              value: selectedCountry,
+              onChange: (e) => {
+                selectedCountryRef.current = e.target.value;
+                setSelectedCountry(e.target.value);
+                onCountryChange?.(e.target.value);
+                stateRef.current = "";
+                setStateValue("");
+              },
+              disabled: isSubmitting,
+              autoComplete: "country",
+              "data-testid": "flopay-country",
+              style: { ...inputFieldStyle(), cursor: "pointer" },
+              children: import_shared4.COUNTRY_OPTIONS.map((c) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("option", { value: c.code, children: [
+                c.flag,
+                " ",
+                c.name
+              ] }, c.code))
+            }
+          ) }),
+          (0, import_shared4.isAVSFieldVisible)(avsConfig.postal_code, cc) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
+            flex: avsLayoutProp === "row" ? 1 : void 0,
+            backgroundColor: cardInputBg,
+            border: `1px solid ${resolvedBorder}`,
+            padding: "10px",
+            ...avsLayoutProp === "row" && (0, import_shared4.isAVSFieldVisible)(avsConfig.country, cc) ? { borderRadius: "0", borderTopRightRadius: "8px", borderBottomRightRadius: "8px" } : { borderRadius: "8px" },
+            ...isButtons && bStyles.zipInput ? bStyles.zipInput : {}
+          }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "input",
+            {
+              className: "flopay-shared-input",
+              placeholder: (0, import_shared4.getPostalCodeLabel)(selectedCountry),
+              autoComplete: "postal-code",
+              value: zipCode,
+              onChange: (e) => {
+                zipCodeRef.current = e.target.value;
+                setZipCode(e.target.value);
+                onZipChange?.(e.target.value);
+              },
+              disabled: isSubmitting,
+              required: true,
+              "data-testid": "flopay-zip",
+              style: inputFieldStyle()
+            }
+          ) })
+        ] })
+      ] });
+    })(),
     displayError && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { role: "alert", "data-testid": "flopay-error", style: {
       margin: "0.75rem 0",
       padding: "0.625rem 0.875rem",
@@ -2903,7 +3083,14 @@ function FloPayCheckout({
       }
     }
     if (!sid) {
-      realResult = await api.createAndFetchSession(params);
+      const paramsWithAnalytics = {
+        ...params,
+        avsCheck: !!enableAVS,
+        avsConfig: typeof enableAVS === "object" ? enableAVS : void 0,
+        checkoutType: "embedded_checkout",
+        checkoutLayout: children ? "custom_layout" : layout === "buttons" ? "buttons_layout" : "default_layout"
+      };
+      realResult = await api.createAndFetchSession(paramsWithAnalytics);
       sid = realResult.data.session?.id ?? "";
       if (sid && typeof window !== "undefined") {
         window.sessionStorage.setItem(cacheKey, sid);
@@ -3387,6 +3574,9 @@ function FloPayCheckout({
         country: session?.customer?.country,
         onCountryChange,
         onZipChange,
+        avsCheck: !!enableAVS,
+        checkoutType: createSessionParams ? "embedded_checkout" : "standard_checkout",
+        checkoutLayout: children ? "custom_layout" : layout === "buttons" ? "buttons_layout" : "default_layout",
         submitLabel,
         className
       }