@flopay/react 0.2.1 → 0.3.1

package/dist/index.cjs

@@ -586,6 +586,12 @@ function SplitCardFormInner({
   buttonsTheme,
   buttonsStyles: buttonsStylesOverride,
   onButtonClick,
+  enableAVS = false,
+  avsLayout: avsLayoutProp = "row",
+  country: countryProp,
+  zip: zipProp,
+  onCountryChange,
+  onZipChange,
   totalAmount = 0,
   currency = "usd",
   innerRef
@@ -596,6 +602,10 @@ function SplitCardFormInner({
   const [processing, setProcessing] = (0, import_react5.useState)(false);
   const [error, setError] = (0, import_react5.useState)(null);
   const [is3DSActive, setIs3DSActive] = (0, import_react5.useState)(false);
+  const [selectedCountry, setSelectedCountry] = (0, import_react5.useState)(countryProp ?? "US");
+  const [zipCode, setZipCode] = (0, import_react5.useState)(zipProp ?? "");
+  const zipCodeRef = (0, import_react5.useRef)(zipProp ?? "");
+  const selectedCountryRef = (0, import_react5.useRef)(countryProp ?? "US");
   const [viewState, setViewState] = (0, import_react5.useState)("buttons");
   const showCardForm = viewState === "expanding" || viewState === "card";
   const TRANSITION_MS = 280;
@@ -683,7 +693,8 @@ function SplitCardFormInner({
               userId: userId ?? "",
               email: email ?? "",
               firstName: firstName ?? fullName.trim().split(/\s+/)[0] ?? "",
-              lastName: lastName ?? fullName.trim().split(/\s+/).slice(1).join(" ") ?? ""
+              lastName: lastName ?? fullName.trim().split(/\s+/).slice(1).join(" ") ?? "",
+              ...enableAVS ? { zip: zipCodeRef.current, country: selectedCountryRef.current } : {}
             },
             chv
           })
@@ -844,13 +855,24 @@ function SplitCardFormInner({
       updateError(null);
       let handedOff = false;
       try {
+        if (enableAVS && !zipCodeRef.current.trim()) {
+          updateError((0, import_shared3.getPostalCodeLabel)(selectedCountryRef.current) + " is required");
+          return;
+        }
         const submitResult = await flopay.submitElements();
         if (submitResult.error) {
           updateError(submitResult.error.message);
           onError?.(submitResult.error);
           return;
         }
-        const pmResult = await flopay.createPaymentMethod();
+        const billingDetails = enableAVS ? {
+          name: fullName,
+          address: {
+            country: selectedCountryRef.current,
+            postal_code: zipCodeRef.current
+          }
+        } : void 0;
+        const pmResult = await flopay.createPaymentMethod(billingDetails);
         if (pmResult.error || !pmResult.paymentMethodId) {
           updateError(pmResult.error?.message ?? "Failed to create payment method.");
           return;
@@ -1032,6 +1054,83 @@ function SplitCardFormInner({
         }
       }
     ) }),
+    enableAVS && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: {
+      display: "flex",
+      flexDirection: avsLayoutProp === "column" ? "column" : "row",
+      gap: avsLayoutProp === "column" ? "0.5rem" : "0",
+      marginTop: "0.5rem"
+    }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.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",
+            fontSize: bStyles.cardInputFontSize ?? "16px",
+            fontFamily: "Poppins, sans-serif",
+            color: bStyles.cardInputColor ?? "#262833",
+            cursor: "pointer",
+            ...isButtons && bStyles.nameInput ? bStyles.nameInput : {}
+          },
+          children: import_shared3.COUNTRY_OPTIONS.map((c) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("option", { value: c.code, children: [
+            c.flag,
+            " ",
+            c.name
+          ] }, c.code))
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: {
+        flex: avsLayoutProp === "row" ? 1 : void 0,
+        backgroundColor: cardInputBg,
+        border: `1px solid ${resolvedBorder}`,
+        padding: "10px",
+        ...avsLayoutProp === "row" ? { borderRadius: "0", borderTopRightRadius: "8px", borderBottomRightRadius: "8px" } : { borderRadius: "8px" },
+        ...isButtons && bStyles.zipInput ? bStyles.zipInput : {}
+      }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "input",
+        {
+          placeholder: (0, import_shared3.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",
+            fontSize: bStyles.cardInputFontSize ?? "16px",
+            fontFamily: "Poppins, sans-serif",
+            color: bStyles.cardInputColor ?? "#262833",
+            ...isButtons && bStyles.nameInput ? bStyles.nameInput : {}
+          }
+        }
+      ) })
+    ] }),
     displayError && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { role: "alert", "data-testid": "flopay-error", style: {
       margin: "0.75rem 0",
       padding: "0.625rem 0.875rem",
@@ -1257,6 +1356,8 @@ function FloPayCheckout({
   buttonsTheme,
   buttonsStyles,
   onButtonClick,
+  enableAVS,
+  avsLayout,
   submitLabel,
   className,
   children,
@@ -1798,6 +1899,10 @@ function FloPayCheckout({
         buttonsTheme,
         buttonsStyles,
         onButtonClick,
+        enableAVS,
+        avsLayout,
+        country: session?.customer?.country,
+        zip: session?.customer?.zip,
         submitLabel,
         className
       }