@blocklet/payment-react 1.18.24 → 1.18.26

package/es/checkout/donate.js

@@ -65,6 +65,7 @@ export function DonateDetails({ supporters = [], currency, method }) {
   return /* @__PURE__ */ jsx(
     Stack,
     {
+      className: "cko-donate-details",
       sx: {
         width: "100%",
         minWidth: "256px",
@@ -246,8 +247,17 @@ function SupporterAvatar({
         onClose: () => setOpen(false),
         sx: {
           ".MuiDialogContent-root": {
-            width: "450px",
+            width: {
+              xs: "100%",
+              md: "450px"
+            },
             padding: "8px"
+          },
+          ".cko-donate-details": {
+            maxHeight: {
+              xs: "100%",
+              md: "300px"
+            }
           }
         },
         title: `${customersNum} supporter${customersNum > 1 ? "s" : ""}`,

package/es/components/country-select.js

@@ -1,10 +1,110 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo, forwardRef } from "react";
-import { Box, MenuItem, Select, Typography } from "@mui/material";
+import { useMemo, forwardRef, useState, useEffect, useRef } from "react";
+import { Box, MenuItem, Select, Typography, TextField } from "@mui/material";
 import { useFormContext } from "react-hook-form";
 import { FlagEmoji, defaultCountries, parseCountry } from "react-international-phone";
+import { useMobile } from "../hooks/mobile.js";
 const CountrySelect = forwardRef(({ value, onChange, name, sx }, ref) => {
   const { setValue } = useFormContext();
+  const [open, setOpen] = useState(false);
+  const [searchText, setSearchText] = useState("");
+  const inputRef = useRef(null);
+  const menuRef = useRef(null);
+  const listRef = useRef(null);
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+  const itemHeightRef = useRef(40);
+  const { isMobile } = useMobile();
+  const measuredRef = useRef(false);
+  useEffect(() => {
+    if (!open)
+      return () => {
+      };
+    const handleResize = () => {
+      measuredRef.current = false;
+    };
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [open]);
+  const scrollToTop = () => {
+    if (listRef.current) {
+      listRef.current.scrollTop = 0;
+    }
+  };
+  const measureItemHeight = () => {
+    if (!listRef.current || !open)
+      return;
+    const items = listRef.current.querySelectorAll(".MuiMenuItem-root");
+    if (items.length > 0) {
+      const firstItem = items[0];
+      if (firstItem.offsetHeight > 0) {
+        itemHeightRef.current = firstItem.offsetHeight;
+      }
+    }
+  };
+  const controlScrollPosition = (index) => {
+    if (!listRef.current)
+      return;
+    if (open && !measuredRef.current) {
+      measureItemHeight();
+      measuredRef.current = true;
+    }
+    const listHeight = listRef.current.clientHeight;
+    const targetPosition = index * itemHeightRef.current;
+    if (index < 2) {
+      listRef.current.scrollTop = 0;
+    } else if (index > filteredCountries.length - 3) {
+      listRef.current.scrollTop = listRef.current.scrollHeight - listHeight;
+    } else {
+      const scrollPosition = targetPosition - listHeight / 2 + itemHeightRef.current / 2;
+      listRef.current.scrollTop = Math.max(0, scrollPosition);
+    }
+  };
+  useEffect(() => {
+    let timeout = null;
+    if (open) {
+      timeout = setTimeout(() => {
+        scrollToTop();
+        if (!isMobile && inputRef.current) {
+          inputRef.current.focus();
+        }
+      }, 100);
+    } else {
+      setSearchText("");
+      setFocusedIndex(-1);
+    }
+    return () => {
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+    };
+  }, [open, isMobile]);
+  const filteredCountries = useMemo(() => {
+    if (!searchText)
+      return defaultCountries;
+    return defaultCountries.filter((c) => {
+      const parsed = parseCountry(c);
+      return parsed.name.toLowerCase().includes(searchText.toLowerCase()) || parsed.iso2.toLowerCase().includes(searchText.toLowerCase()) || `+${parsed.dialCode}`.includes(searchText);
+    });
+  }, [searchText]);
+  useEffect(() => {
+    scrollToTop();
+    setFocusedIndex(-1);
+  }, [searchText]);
+  useEffect(() => {
+    let timeout = null;
+    if (focusedIndex >= 0) {
+      timeout = setTimeout(() => {
+        controlScrollPosition(focusedIndex);
+      }, 10);
+    }
+    return () => {
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+    };
+  }, [focusedIndex, filteredCountries.length]);
   const countryDetail = useMemo(() => {
     const item = defaultCountries.find((v) => v[1] === value);
     return value && item ? parseCountry(item) : { name: "" };
@@ -13,13 +113,62 @@ const CountrySelect = forwardRef(({ value, onChange, name, sx }, ref) => {
     onChange(e.target.value);
     setValue(name, e.target.value);
   };
-  return /* @__PURE__ */ jsx(
+  const handleCountryClick = (code) => {
+    onChange(code);
+    setValue(name, code);
+    setOpen(false);
+  };
+  const handleSearchChange = (e) => {
+    e.stopPropagation();
+    setSearchText(e.target.value);
+  };
+  const handleKeyDown = (e) => {
+    e.stopPropagation();
+    if (e.key === "Escape") {
+      setOpen(false);
+      return;
+    }
+    const handleNavigation = (direction) => {
+      e.preventDefault();
+      setFocusedIndex((prev) => {
+        if (direction === "next") {
+          if (prev === -1)
+            return 0;
+          return prev >= filteredCountries.length - 1 ? 0 : prev + 1;
+        }
+        if (prev === -1)
+          return filteredCountries.length - 1;
+        return prev <= 0 ? filteredCountries.length - 1 : prev - 1;
+      });
+    };
+    if (e.key === "Tab") {
+      handleNavigation(e.shiftKey ? "prev" : "next");
+      return;
+    }
+    if (e.key === "ArrowDown") {
+      handleNavigation("next");
+      return;
+    }
+    if (e.key === "ArrowUp") {
+      handleNavigation("prev");
+      return;
+    }
+    if (e.key === "Enter" && focusedIndex >= 0 && focusedIndex < filteredCountries.length) {
+      e.preventDefault();
+      const country = parseCountry(filteredCountries[focusedIndex]);
+      handleCountryClick(country.iso2);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
     Select,
     {
       ref,
+      open,
+      onOpen: () => setOpen(true),
+      onClose: () => setOpen(false),
       MenuProps: {
         style: {
-          height: "300px",
+          maxHeight: "300px",
           top: "10px"
         },
         anchorOrigin: {
@@ -29,6 +178,18 @@ const CountrySelect = forwardRef(({ value, onChange, name, sx }, ref) => {
         transformOrigin: {
           vertical: "top",
           horizontal: "left"
+        },
+        PaperProps: {
+          ref: menuRef,
+          sx: {
+            display: "flex",
+            "& .MuiList-root": {
+              pt: 0,
+              display: "flex",
+              flexDirection: "column",
+              overflowY: "hidden"
+            }
+          }
         }
       },
       sx: {
@@ -55,23 +216,84 @@ const CountrySelect = forwardRef(({ value, onChange, name, sx }, ref) => {
       },
       value,
       onChange: onCountryChange,
-      renderValue: (code) => {
-        return /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", flexWrap: "nowrap", gap: 0.5, sx: { cursor: "pointer" }, children: [
-          /* @__PURE__ */ jsx(FlagEmoji, { iso2: code, style: { display: "flex" } }),
-          /* @__PURE__ */ jsx(Typography, { children: countryDetail?.name })
-        ] });
-      },
-      children: defaultCountries.map((c) => {
-        const parsed = parseCountry(c);
-        return /* @__PURE__ */ jsxs(MenuItem, { value: parsed.iso2, children: [
-          /* @__PURE__ */ jsx(FlagEmoji, { iso2: parsed.iso2, style: { marginRight: "8px" } }),
-          /* @__PURE__ */ jsx(Typography, { marginRight: "8px", children: parsed.name }),
-          /* @__PURE__ */ jsxs(Typography, { color: "gray", children: [
-            "+",
-            parsed.dialCode
-          ] })
-        ] }, parsed.iso2);
-      })
+      renderValue: (code) => /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", flexWrap: "nowrap", gap: 0.5, sx: { cursor: "pointer" }, children: [
+        /* @__PURE__ */ jsx(FlagEmoji, { iso2: code, style: { display: "flex" } }),
+        /* @__PURE__ */ jsx(Typography, { children: countryDetail?.name })
+      ] }),
+      children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: {
+              position: "sticky",
+              top: 0,
+              zIndex: 1,
+              bgcolor: "background.paper",
+              p: 1
+            },
+            onClick: (e) => {
+              e.stopPropagation();
+            },
+            children: /* @__PURE__ */ jsx(
+              TextField,
+              {
+                inputRef,
+                autoFocus: !isMobile,
+                fullWidth: true,
+                placeholder: "Search country...",
+                value: searchText,
+                onChange: handleSearchChange,
+                onKeyDown: handleKeyDown,
+                onClick: (e) => e.stopPropagation(),
+                size: "small",
+                variant: "outlined"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            ref: listRef,
+            sx: {
+              flex: 1,
+              overflowY: "auto",
+              overflowX: "hidden",
+              maxHeight: "calc(300px - 65px)",
+              scrollBehavior: "smooth"
+            },
+            children: filteredCountries.length > 0 ? filteredCountries.map((c, index) => {
+              const parsed = parseCountry(c);
+              const isFocused = index === focusedIndex;
+              return /* @__PURE__ */ jsxs(
+                MenuItem,
+                {
+                  value: parsed.iso2,
+                  selected: parsed.iso2 === value,
+                  onClick: () => handleCountryClick(parsed.iso2),
+                  sx: {
+                    "&.Mui-selected": {
+                      backgroundColor: "rgba(0, 0, 0, 0.04)"
+                    },
+                    "&:hover": {
+                      backgroundColor: "var(--backgrounds-bg-highlight, #eff6ff)"
+                    },
+                    ...isFocused ? {
+                      backgroundColor: "var(--backgrounds-bg-highlight, #eff6ff)",
+                      outline: "none"
+                    } : {}
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(FlagEmoji, { iso2: parsed.iso2, style: { marginRight: "8px" } }),
+                    /* @__PURE__ */ jsx(Typography, { children: parsed.name })
+                  ]
+                },
+                parsed.iso2
+              );
+            }) : /* @__PURE__ */ jsx(MenuItem, { disabled: true, children: /* @__PURE__ */ jsx(Typography, { color: "text.secondary", children: "No countries found" }) })
+          }
+        )
+      ]
     }
   );
 });

package/es/components/over-due-invoice-payment.d.ts

@@ -27,13 +27,14 @@ type Props = {
         subscriptionCount?: number;
         detailUrl: string;
     }) => React.ReactNode;
+    authToken?: string;
 };
 type SummaryItem = {
     amount: string;
     currency: PaymentCurrency;
     method: PaymentMethod;
 };
-declare function OverdueInvoicePayment({ subscriptionId, customerId, mode, dialogProps, children, onPaid, detailLinkOptions, successToast, alertMessage, }: Props): import("react").JSX.Element | null;
+declare function OverdueInvoicePayment({ subscriptionId, customerId, mode, dialogProps, children, onPaid, detailLinkOptions, successToast, alertMessage, authToken, }: Props): import("react").JSX.Element | null;
 declare namespace OverdueInvoicePayment {
     var defaultProps: {
         mode: string;
@@ -49,6 +50,7 @@ declare namespace OverdueInvoicePayment {
         customerId: undefined;
         successToast: boolean;
         alertMessage: string;
+        authToken: undefined;
     };
 }
 export default OverdueInvoicePayment;

package/es/components/over-due-invoice-payment.js

@@ -23,7 +23,7 @@ const fetchOverdueInvoices = async (params) => {
   } else {
     url = `/api/customers/${params.customerId}/overdue/invoices`;
   }
-  const res = await api.get(url);
+  const res = await api.get(params.authToken ? joinURL(url, `?authToken=${params.authToken}`) : url);
   return res.data;
 };
 function OverdueInvoicePayment({
@@ -36,7 +36,8 @@ function OverdueInvoicePayment({
   },
   detailLinkOptions = { enabled: true },
   successToast = true,
-  alertMessage = ""
+  alertMessage = "",
+  authToken
 }) {
   const { t } = useLocaleContext();
   const { connect } = usePaymentContext();
@@ -55,7 +56,7 @@ function OverdueInvoicePayment({
     error,
     loading,
     runAsync: refresh
-  } = useRequest(() => fetchOverdueInvoices({ subscriptionId, customerId }), {
+  } = useRequest(() => fetchOverdueInvoices({ subscriptionId, customerId, authToken }), {
     ready: !!subscriptionId || !!customerId
   });
   const detailUrl = useMemo(() => {
@@ -396,6 +397,7 @@ OverdueInvoicePayment.defaultProps = {
   subscriptionId: void 0,
   customerId: void 0,
   successToast: true,
-  alertMessage: ""
+  alertMessage: "",
+  authToken: void 0
 };
 export default OverdueInvoicePayment;

package/es/contexts/payment.d.ts

@@ -25,10 +25,11 @@ export type PaymentContextProps = {
     connect: import('@arcblock/did-connect/lib/types').SessionContext['connectApi'];
     children: any;
     baseUrl?: string;
+    authToken?: string;
 };
 declare const PaymentContext: import("react").Context<PaymentContextType>;
 declare const Consumer: import("react").Consumer<PaymentContextType>;
-declare function PaymentProvider({ session, connect, children, baseUrl }: PaymentContextProps): import("react").JSX.Element | null;
+declare function PaymentProvider({ session, connect, children, baseUrl, authToken }: PaymentContextProps): import("react").JSX.Element | null;
 declare namespace PaymentProvider {
     var defaultProps: {};
 }

package/es/contexts/payment.js

@@ -33,9 +33,16 @@ const getCurrency = (currencyId, methods) => {
 const getMethod = (methodId, methods) => {
   return methods.find((x) => x.id === methodId);
 };
-function PaymentProvider({ session, connect, children, baseUrl }) {
+function PaymentProvider({ session, connect, children, baseUrl, authToken }) {
   if (baseUrl) {
     window.__PAYMENT_KIT_BASE_URL = baseUrl;
+  } else {
+    window.__PAYMENT_KIT_BASE_URL = "";
+  }
+  if (authToken) {
+    window.__PAYMENT_KIT_AUTH_TOKEN = authToken;
+  } else {
+    window.__PAYMENT_KIT_AUTH_TOKEN = "";
   }
   const [livemode, setLivemode] = useLocalStorageState("livemode", { defaultValue: true });
   const {

package/es/hooks/keyboard.js

@@ -39,6 +39,9 @@ export const useTabNavigation = (items, onSelect, options) => {
           return i;
         }
       }
+      if (includeCustom && navigableElements.length > 0) {
+        return navigableElements.length - 1;
+      }
     }
     return -1;
   }, [items, includeCustom, isCustomSelected, currentValue, valueType, compareValue, findNavigableElements]);

package/es/index.d.ts

@@ -43,5 +43,6 @@ export * from './hooks/mobile';
 export * from './hooks/table';
 export * from './hooks/scroll';
 export * from './hooks/keyboard';
+export * from './libs/validator';
 export { translations, createTranslator } from './locales';
 export { createLazyComponent, api, dayjs, FormInput, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CheckoutDonate, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, TxLink, TxGas, SafeGuard, PricingItem, CountrySelect, Table, TruncatedText, Link, OverdueInvoicePayment, PaymentBeneficiaries, LoadingButton, DonateDetails, };

package/es/index.js

@@ -43,6 +43,7 @@ export * from "./hooks/mobile.js";
 export * from "./hooks/table.js";
 export * from "./hooks/scroll.js";
 export * from "./hooks/keyboard.js";
+export * from "./libs/validator.js";
 export { translations, createTranslator } from "./locales/index.js";
 export {
   createLazyComponent,

package/es/libs/api.js

@@ -10,6 +10,10 @@ api.interceptors.request.use(
     const locale = getLocale(window.blocklet?.languages);
     const query = new URLSearchParams(config.url?.split("?").pop());
     config.params = { ...config.params || {}, locale };
+    const authToken = window.__PAYMENT_KIT_AUTH_TOKEN;
+    if (authToken && typeof config.params.authToken === "undefined" && !query.has("authToken")) {
+      config.params.authToken = authToken;
+    }
     if (typeof config.params.livemode === "undefined" && query.has("livemode") === false) {
       const livemode = localStorage.getItem("livemode");
       config.params.livemode = isNull(livemode) ? true : JSON.parse(livemode);

package/es/libs/currency.d.ts

@@ -0,0 +1,3 @@
+export declare const getUserStorageKey: (base: string, did?: string) => string;
+export declare const saveCurrencyPreference: (currencyId: string, did?: string) => void;
+export declare const getCurrencyPreference: (did?: string, availableCurrencyIds?: string[]) => string | null;

package/es/libs/currency.js

@@ -0,0 +1,22 @@
+const CURRENCY_PREFERENCE_KEY_BASE = "payment-currency-preference";
+export const getUserStorageKey = (base, did) => {
+  return did ? `${base}:${did}` : base;
+};
+export const saveCurrencyPreference = (currencyId, did) => {
+  try {
+    localStorage.setItem(getUserStorageKey(CURRENCY_PREFERENCE_KEY_BASE, did), currencyId);
+  } catch (e) {
+    console.warn("Failed to save currency preference", e);
+  }
+};
+export const getCurrencyPreference = (did, availableCurrencyIds) => {
+  try {
+    const saved = localStorage.getItem(getUserStorageKey(CURRENCY_PREFERENCE_KEY_BASE, did));
+    if (saved && (!availableCurrencyIds || availableCurrencyIds.includes(saved))) {
+      return saved;
+    }
+  } catch (e) {
+    console.warn("Failed to access localStorage", e);
+  }
+  return null;
+};

package/es/libs/phone-validator.js

@@ -14,6 +14,8 @@ export const getPhoneUtil = async () => {
   return phoneUtil;
 };
 export const validatePhoneNumber = async (phoneNumber) => {
+  if (!phoneNumber)
+    return true;
   try {
     let util = null;
     try {

package/es/libs/util.d.ts

@@ -10,8 +10,8 @@ export declare function formatDateTime(date: Date | string | number, locale?: st
 export declare const formatLocale: (locale?: string) => string;
 export declare const formatPrettyMsLocale: (locale: string) => "zh_CN" | "en_US";
 export declare const formatError: (err: any) => any;
-export declare function formatBNStr(str?: string, decimals?: number, precision?: number, trim?: boolean): string;
-export declare function formatNumber(n: number | string, precision?: number, trim?: boolean): string;
+export declare function formatBNStr(str?: string, decimals?: number, precision?: number, trim?: boolean, thousandSeparated?: boolean): string;
+export declare function formatNumber(n: number | string, precision?: number, trim?: boolean, thousandSeparated?: boolean): string;
 export declare const formatPrice: (price: TPrice, currency: TPaymentCurrency, unit_label?: string, quantity?: number, bn?: boolean, locale?: string) => string;
 export declare const formatPriceAmount: (price: TPrice, currency: TPaymentCurrency, unit_label?: string, quantity?: number, bn?: boolean) => string;
 export declare function getStatementDescriptor(items: any[]): any;

package/es/libs/util.js

@@ -85,16 +85,19 @@ export const formatError = (err) => {
   }
   return err.message;
 };
-export function formatBNStr(str = "", decimals = 18, precision = 6, trim = true) {
-  return formatNumber(fromUnitToToken(str, decimals), precision, trim);
+export function formatBNStr(str = "", decimals = 18, precision = 6, trim = true, thousandSeparated = true) {
+  if (!str) {
+    return "0";
+  }
+  return formatNumber(fromUnitToToken(str, decimals), precision, trim, thousandSeparated);
 }
-export function formatNumber(n, precision = 6, trim = true) {
+export function formatNumber(n, precision = 6, trim = true, thousandSeparated = true) {
   if (!n || n === "0") {
     return "0";
   }
   const num = numbro(n);
   const options = {
-    thousandSeparated: true,
+    thousandSeparated,
     ...(precision || precision === 0) && { mantissa: precision }
   };
   const result = num.format(options);

package/es/libs/validator.d.ts

@@ -0,0 +1 @@
+export declare function validatePostalCode(postalCode: string, country?: string): boolean;

package/es/libs/validator.js

@@ -0,0 +1,70 @@
+import isPostalCode from "validator/lib/isPostalCode";
+const POSTAL_CODE_SUPPORTED_COUNTRIES = [
+  "AD",
+  "AT",
+  "AU",
+  "BE",
+  "BG",
+  "BR",
+  "CA",
+  "CH",
+  "CN",
+  "CZ",
+  "DE",
+  "DK",
+  "DZ",
+  "EE",
+  "ES",
+  "FI",
+  "FR",
+  "GB",
+  "GR",
+  "HR",
+  "HU",
+  "ID",
+  "IE",
+  "IL",
+  "IN",
+  "IR",
+  "IS",
+  "IT",
+  "JP",
+  "KE",
+  "KR",
+  "LI",
+  "LT",
+  "LU",
+  "LV",
+  "MX",
+  "MT",
+  "NL",
+  "NO",
+  "NZ",
+  "PL",
+  "PR",
+  "PT",
+  "RO",
+  "RU",
+  "SA",
+  "SE",
+  "SI",
+  "SK",
+  "TN",
+  "TW",
+  "UA",
+  "US",
+  "ZA",
+  "ZM"
+];
+export function validatePostalCode(postalCode, country) {
+  if (!postalCode)
+    return true;
+  const countryUpper = country?.toUpperCase();
+  const isSupported = country && POSTAL_CODE_SUPPORTED_COUNTRIES.includes(countryUpper);
+  try {
+    return isPostalCode(postalCode, isSupported ? countryUpper : "any");
+  } catch (error) {
+    console.error(error);
+    return false;
+  }
+}

package/es/payment/form/address.js

@@ -1,15 +1,17 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import { Fade, FormLabel, InputAdornment, Stack } from "@mui/material";
-import { Controller, useFormContext } from "react-hook-form";
+import { Controller, useFormContext, useWatch } from "react-hook-form";
 import FormInput from "../../components/input.js";
 import CountrySelect from "../../components/country-select.js";
+import { validatePostalCode } from "../../libs/validator.js";
 AddressForm.defaultProps = {
   sx: {}
 };
 export default function AddressForm({ mode, stripe, sx = {} }) {
   const { t } = useLocaleContext();
   const { control } = useFormContext();
+  const country = useWatch({ control, name: "billing_address.country" });
   if (mode === "required") {
     return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsx(Stack, { className: "cko-payment-address cko-payment-form", sx, children: /* @__PURE__ */ jsxs(Stack, { direction: "column", className: "cko-payment-form", spacing: 0, children: [
       /* @__PURE__ */ jsx(FormLabel, { className: "base-label", children: t("payment.checkout.billing.line1") }),
@@ -50,7 +52,13 @@ export default function AddressForm({ mode, stripe, sx = {} }) {
         FormInput,
         {
           name: "billing_address.postal_code",
-          rules: { required: t("payment.checkout.required") },
+          rules: {
+            required: t("payment.checkout.required"),
+            validate: (x) => {
+              const isValid = validatePostalCode(x, country);
+              return isValid ? true : t("payment.checkout.invalid");
+            }
+          },
           errorPosition: "right",
           variant: "outlined",
           placeholder: t("payment.checkout.billing.postal_code"),
@@ -85,7 +93,13 @@ export default function AddressForm({ mode, stripe, sx = {} }) {
         FormInput,
         {
           name: "billing_address.postal_code",
-          rules: { required: t("payment.checkout.required") },
+          rules: {
+            required: t("payment.checkout.required"),
+            validate: (x) => {
+              const isValid = validatePostalCode(x, country);
+              return isValid ? true : t("payment.checkout.invalid");
+            }
+          },
           errorPosition: "right",
           variant: "outlined",
           placeholder: t("payment.checkout.billing.postal_code"),