@flopay/react 0.2.1 → 0.3.1

package/dist/index.d.cts

@@ -86,6 +86,13 @@ interface FloPayCheckoutProps {
      * `method`: `'card'` | `'paypal'` | `'apple_pay'` | `'google_pay'`
      */
     onButtonClick?: (method: string) => void;
+    /**
+     * Enable AVS (Address Verification). Shows country dropdown + ZIP/postcode input
+     * in the card form. When enabled, billing_details are passed to Stripe for AVS checks.
+     */
+    enableAVS?: boolean;
+    /** Layout for AVS fields: 'row' (side-by-side, default) or 'column' (stacked). */
+    avsLayout?: 'row' | 'column';
     /** Label for the submit button. */
     submitLabel?: string;
     /** Additional CSS class for the wrapper. */
@@ -129,7 +136,7 @@ interface FloPayCheckoutProps {
  * />
  * ```
  */
-declare function FloPayCheckout({ sessionId: sessionIdProp, createSession: createSessionParams, billingApiUrl, appearance, locale, fallbackPublishableKey, loading: loadingNode, error: errorNode, onComplete, onError, showPayPal, showApplePay, showGooglePay, layout, buttonsTheme, buttonsStyles, onButtonClick, 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, showPayPal, showApplePay, showGooglePay, layout, buttonsTheme, buttonsStyles, onButtonClick, enableAVS, avsLayout, submitLabel, className, children, checkoutMode: checkoutModeProp, confirmLabel, renderConfirmButton, onSessionCompleted, }: FloPayCheckoutProps): React.ReactElement;
 
 /**
  * Returns the current `FloPay` instance, or `null` if the provider
@@ -374,6 +381,21 @@ interface SplitCardFormProps {
      * `method`: `'card'` | `'paypal'` | `'apple_pay'` | `'google_pay'`
      */
     onButtonClick?: (method: string) => void;
+    /**
+     * Enable AVS (Address Verification). Shows country dropdown + ZIP/postcode input.
+     * When enabled, billing_details are passed to Stripe's createPaymentMethod for AVS checks.
+     */
+    enableAVS?: boolean;
+    /** Layout for AVS fields: 'row' (side-by-side, default) or 'column' (stacked). */
+    avsLayout?: 'row' | 'column';
+    /** Pre-filled country code (ISO 3166-1 alpha-2) for AVS. */
+    country?: string;
+    /** Pre-filled ZIP/postal code for AVS. */
+    zip?: string;
+    /** Callback when AVS country changes. */
+    onCountryChange?: (country: string) => void;
+    /** Callback when AVS ZIP/postal code changes. */
+    onZipChange?: (zip: string) => void;
     /** Total amount in cents (smallest currency unit). Used for wallet/PayPal Elements config. */
     totalAmount?: number;
     /** Currency code (used for PayPal Elements config). */

package/dist/index.d.ts

@@ -86,6 +86,13 @@ interface FloPayCheckoutProps {
      * `method`: `'card'` | `'paypal'` | `'apple_pay'` | `'google_pay'`
      */
     onButtonClick?: (method: string) => void;
+    /**
+     * Enable AVS (Address Verification). Shows country dropdown + ZIP/postcode input
+     * in the card form. When enabled, billing_details are passed to Stripe for AVS checks.
+     */
+    enableAVS?: boolean;
+    /** Layout for AVS fields: 'row' (side-by-side, default) or 'column' (stacked). */
+    avsLayout?: 'row' | 'column';
     /** Label for the submit button. */
     submitLabel?: string;
     /** Additional CSS class for the wrapper. */
@@ -129,7 +136,7 @@ interface FloPayCheckoutProps {
  * />
  * ```
  */
-declare function FloPayCheckout({ sessionId: sessionIdProp, createSession: createSessionParams, billingApiUrl, appearance, locale, fallbackPublishableKey, loading: loadingNode, error: errorNode, onComplete, onError, showPayPal, showApplePay, showGooglePay, layout, buttonsTheme, buttonsStyles, onButtonClick, 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, showPayPal, showApplePay, showGooglePay, layout, buttonsTheme, buttonsStyles, onButtonClick, enableAVS, avsLayout, submitLabel, className, children, checkoutMode: checkoutModeProp, confirmLabel, renderConfirmButton, onSessionCompleted, }: FloPayCheckoutProps): React.ReactElement;
 
 /**
  * Returns the current `FloPay` instance, or `null` if the provider
@@ -374,6 +381,21 @@ interface SplitCardFormProps {
      * `method`: `'card'` | `'paypal'` | `'apple_pay'` | `'google_pay'`
      */
     onButtonClick?: (method: string) => void;
+    /**
+     * Enable AVS (Address Verification). Shows country dropdown + ZIP/postcode input.
+     * When enabled, billing_details are passed to Stripe's createPaymentMethod for AVS checks.
+     */
+    enableAVS?: boolean;
+    /** Layout for AVS fields: 'row' (side-by-side, default) or 'column' (stacked). */
+    avsLayout?: 'row' | 'column';
+    /** Pre-filled country code (ISO 3166-1 alpha-2) for AVS. */
+    country?: string;
+    /** Pre-filled ZIP/postal code for AVS. */
+    zip?: string;
+    /** Callback when AVS country changes. */
+    onCountryChange?: (country: string) => void;
+    /** Callback when AVS ZIP/postal code changes. */
+    onZipChange?: (zip: string) => void;
     /** Total amount in cents (smallest currency unit). Used for wallet/PayPal Elements config. */
     totalAmount?: number;
     /** Currency code (used for PayPal Elements config). */

package/dist/index.mjs

@@ -138,7 +138,7 @@ import {
   useElements as useStripeElements,
   useStripe as useStripeRaw
 } from "@stripe/react-stripe-js";
-import { resolveButtonsLayoutTheme } from "@flopay/shared";
+import { resolveButtonsLayoutTheme, getPostalCodeLabel, COUNTRY_OPTIONS } from "@flopay/shared";
 import { forwardRef, useCallback, useEffect as useEffect3, useImperativeHandle, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
 
 // src/hooks.ts
@@ -542,6 +542,12 @@ function SplitCardFormInner({
   buttonsTheme,
   buttonsStyles: buttonsStylesOverride,
   onButtonClick,
+  enableAVS = false,
+  avsLayout: avsLayoutProp = "row",
+  country: countryProp,
+  zip: zipProp,
+  onCountryChange,
+  onZipChange,
   totalAmount = 0,
   currency = "usd",
   innerRef
@@ -552,6 +558,10 @@ function SplitCardFormInner({
   const [processing, setProcessing] = useState2(false);
   const [error, setError] = useState2(null);
   const [is3DSActive, setIs3DSActive] = useState2(false);
+  const [selectedCountry, setSelectedCountry] = useState2(countryProp ?? "US");
+  const [zipCode, setZipCode] = useState2(zipProp ?? "");
+  const zipCodeRef = useRef2(zipProp ?? "");
+  const selectedCountryRef = useRef2(countryProp ?? "US");
   const [viewState, setViewState] = useState2("buttons");
   const showCardForm = viewState === "expanding" || viewState === "card";
   const TRANSITION_MS = 280;
@@ -639,7 +649,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
           })
@@ -800,13 +811,24 @@ function SplitCardFormInner({
       updateError(null);
       let handedOff = false;
       try {
+        if (enableAVS && !zipCodeRef.current.trim()) {
+          updateError(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;
@@ -988,6 +1010,83 @@ function SplitCardFormInner({
         }
       }
     ) }),
+    enableAVS && /* @__PURE__ */ jsxs("div", { style: {
+      display: "flex",
+      flexDirection: avsLayoutProp === "column" ? "column" : "row",
+      gap: avsLayoutProp === "column" ? "0.5rem" : "0",
+      marginTop: "0.5rem"
+    }, children: [
+      /* @__PURE__ */ jsx3("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__ */ jsx3(
+        "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: COUNTRY_OPTIONS.map((c) => /* @__PURE__ */ jsxs("option", { value: c.code, children: [
+            c.flag,
+            " ",
+            c.name
+          ] }, c.code))
+        }
+      ) }),
+      /* @__PURE__ */ jsx3("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__ */ jsx3(
+        "input",
+        {
+          placeholder: 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__ */ jsxs("div", { role: "alert", "data-testid": "flopay-error", style: {
       margin: "0.75rem 0",
       padding: "0.625rem 0.875rem",
@@ -1213,6 +1312,8 @@ function FloPayCheckout({
   buttonsTheme,
   buttonsStyles,
   onButtonClick,
+  enableAVS,
+  avsLayout,
   submitLabel,
   className,
   children,
@@ -1754,6 +1855,10 @@ function FloPayCheckout({
         buttonsTheme,
         buttonsStyles,
         onButtonClick,
+        enableAVS,
+        avsLayout,
+        country: session?.customer?.country,
+        zip: session?.customer?.zip,
         submitLabel,
         className
       }