@blocklet/payment-react 1.18.34 → 1.18.35

package/es/libs/util.d.ts

@@ -120,3 +120,4 @@ export declare function parseMarkedText(text: string): Array<{
     type: 'text' | 'marked';
     content: string;
 }>;
+export declare function getTokenBalanceLink(method: TPaymentMethod, address: string): string;

package/es/libs/util.js

@@ -979,3 +979,16 @@ export function parseMarkedText(text) {
   }
   return result.filter((p) => p.content !== "");
 }
+export function getTokenBalanceLink(method, address) {
+  if (!method || !address) {
+    return "";
+  }
+  const explorerHost = method?.settings?.[method?.type]?.explorer_host || "";
+  if (method.type === "arcblock" && address) {
+    return joinURL(explorerHost, "accounts", address, "tokens");
+  }
+  if (["ethereum", "base"].includes(method.type) && address) {
+    return joinURL(explorerHost, "address", address);
+  }
+  return "";
+}

package/es/libs/validator.d.ts

@@ -1 +1,2 @@
 export declare function validatePostalCode(postalCode: string, country?: string): boolean;
+export declare function getFieldValidation(fieldName: string, validations?: Record<string, any>, locale?: string): Record<string, any>;

package/es/libs/validator.js

@@ -1,4 +1,5 @@
 import isPostalCode from "validator/lib/isPostalCode";
+import { t } from "../locales/index.js";
 const POSTAL_CODE_SUPPORTED_COUNTRIES = [
   "AD",
   "AT",
@@ -68,3 +69,16 @@ export function validatePostalCode(postalCode, country) {
     return false;
   }
 }
+export function getFieldValidation(fieldName, validations, locale = "en") {
+  if (!validations || !validations[fieldName])
+    return {};
+  const fieldValidation = validations[fieldName];
+  const rules = {};
+  if (fieldValidation.pattern) {
+    rules.pattern = {
+      value: new RegExp(fieldValidation.pattern),
+      message: fieldValidation.pattern_message?.[locale] || t("payment.checkout.invalid", locale)
+    };
+  }
+  return rules;
+}

package/es/locales/en.js

@@ -232,7 +232,8 @@ export default flat({
         confirmPrompt: "Please confirm the details before proceeding.",
         payer: "Account",
         amount: "Amount",
-        failed: "Account changed, please pay manually."
+        failed: "Account changed, please pay manually.",
+        balanceLink: "View Balance"
       }
     },
     customer: {

package/es/locales/zh.js

@@ -232,7 +232,8 @@ export default flat({
         confirmPrompt: "\u8BF7\u786E\u8BA4\u652F\u4ED8\u4FE1\u606F\u65E0\u8BEF\u540E\u7EE7\u7EED\u3002",
         payer: "\u8D26\u6237\u5730\u5740",
         amount: "\u652F\u4ED8\u91D1\u989D",
-        failed: "\u8D26\u6237\u53D1\u751F\u53D8\u5316\uFF0C\u65E0\u6CD5\u81EA\u52A8\u5B8C\u6210\u652F\u4ED8\uFF0C\u8BF7\u624B\u52A8\u652F\u4ED8\u3002"
+        failed: "\u8D26\u6237\u53D1\u751F\u53D8\u5316\uFF0C\u65E0\u6CD5\u81EA\u52A8\u5B8C\u6210\u652F\u4ED8\uFF0C\u8BF7\u624B\u52A8\u652F\u4ED8\u3002",
+        balanceLink: "\u67E5\u770B\u4F59\u989D"
       }
     },
     customer: {

package/es/payment/form/address.d.ts

@@ -3,11 +3,15 @@ type Props = {
     mode: string;
     stripe: boolean;
     sx?: SxProps;
+    fieldValidation?: Record<string, any>;
+    errorPosition?: 'right' | 'bottom';
 };
-declare function AddressForm({ mode, stripe, sx }: Props): import("react").JSX.Element | null;
+declare function AddressForm({ mode, stripe, sx, fieldValidation, errorPosition }: Props): import("react").JSX.Element | null;
 declare namespace AddressForm {
     var defaultProps: {
         sx: {};
+        fieldValidation: {};
+        errorPosition: string;
     };
 }
 export default AddressForm;

package/es/payment/form/address.js

@@ -4,11 +4,13 @@ import { Fade, FormLabel, InputAdornment, Stack } from "@mui/material";
 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";
+import { getFieldValidation, validatePostalCode } from "../../libs/validator.js";
 AddressForm.defaultProps = {
-  sx: {}
+  sx: {},
+  fieldValidation: {},
+  errorPosition: "right"
 };
-export default function AddressForm({ mode, stripe, sx = {} }) {
+export default function AddressForm({ mode, stripe, sx = {}, fieldValidation, errorPosition }) {
   const { t } = useLocaleContext();
   const { control } = useFormContext();
   const country = useWatch({ control, name: "billing_address.country" });
@@ -19,8 +21,11 @@ export default function AddressForm({ mode, stripe, sx = {} }) {
         FormInput,
         {
           name: "billing_address.line1",
-          rules: { required: t("payment.checkout.required") },
-          errorPosition: "right",
+          rules: {
+            required: t("payment.checkout.required"),
+            ...getFieldValidation("billing_address.line1", fieldValidation)
+          },
+          errorPosition,
           variant: "outlined",
           placeholder: t("payment.checkout.billing.line1")
         }
@@ -30,8 +35,11 @@ export default function AddressForm({ mode, stripe, sx = {} }) {
         FormInput,
         {
           name: "billing_address.city",
-          rules: { required: t("payment.checkout.required") },
-          errorPosition: "right",
+          rules: {
+            required: t("payment.checkout.required"),
+            ...getFieldValidation("billing_address.city", fieldValidation)
+          },
+          errorPosition,
           variant: "outlined",
           placeholder: t("payment.checkout.billing.city")
         }
@@ -41,8 +49,11 @@ export default function AddressForm({ mode, stripe, sx = {} }) {
         FormInput,
         {
           name: "billing_address.state",
-          rules: { required: t("payment.checkout.required") },
-          errorPosition: "right",
+          rules: {
+            required: t("payment.checkout.required"),
+            ...getFieldValidation("billing_address.state", fieldValidation)
+          },
+          errorPosition,
           variant: "outlined",
           placeholder: t("payment.checkout.billing.state")
         }
@@ -57,9 +68,10 @@ export default function AddressForm({ mode, stripe, sx = {} }) {
             validate: (x) => {
               const isValid = validatePostalCode(x, country);
               return isValid ? true : t("payment.checkout.invalid");
-            }
+            },
+            ...getFieldValidation("billing_address.postal_code", fieldValidation)
           },
-          errorPosition: "right",
+          errorPosition,
           variant: "outlined",
           placeholder: t("payment.checkout.billing.postal_code"),
           InputProps: {
@@ -98,9 +110,10 @@ export default function AddressForm({ mode, stripe, sx = {} }) {
             validate: (x) => {
               const isValid = validatePostalCode(x, country);
               return isValid ? true : t("payment.checkout.invalid");
-            }
+            },
+            ...getFieldValidation("billing_address.postal_code", fieldValidation)
           },
-          errorPosition: "right",
+          errorPosition,
           variant: "outlined",
           placeholder: t("payment.checkout.billing.postal_code"),
           wrapperStyle: { height: "40px" },

package/es/payment/form/index.js

@@ -2,7 +2,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import "react-international-phone/style.css";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import Toast from "@arcblock/ux/lib/Toast";
-import { Box, Button, CircularProgress, Divider, Fade, FormLabel, Stack, Typography } from "@mui/material";
+import { Box, Button, CircularProgress, Divider, Fade, FormLabel, Stack, Tooltip, Typography } from "@mui/material";
 import { useMemoizedFn, useSetState } from "ahooks";
 import pWaitFor from "p-wait-for";
 import { useEffect, useMemo, useRef } from "react";
@@ -13,7 +13,7 @@ import isEmail from "validator/es/lib/isEmail";
 import { fromUnitToToken } from "@ocap/util";
 import DID from "@arcblock/ux/lib/DID";
 import isEmpty from "lodash/isEmpty";
-import { HelpOutline } from "@mui/icons-material";
+import { HelpOutline, OpenInNew } from "@mui/icons-material";
 import FormInput from "../../components/input.js";
 import { usePaymentContext } from "../../contexts/payment.js";
 import { useSubscription } from "../../hooks/subscription.js";
@@ -24,6 +24,7 @@ import {
   formatQuantityInventory,
   getPrefix,
   getStatementDescriptor,
+  getTokenBalanceLink,
   isCrossOrigin
 } from "../../libs/util.js";
 import AddressForm from "./address.js";
@@ -36,6 +37,7 @@ import LoadingButton from "../../components/loading-button.js";
 import OverdueInvoicePayment from "../../components/over-due-invoice-payment.js";
 import { saveCurrencyPreference } from "../../libs/currency.js";
 import ConfirmDialog from "../../components/confirm.js";
+import { getFieldValidation } from "../../libs/validator.js";
 export const waitForCheckoutComplete = async (sessionId) => {
   let result;
   await pWaitFor(
@@ -104,6 +106,7 @@ export default function PaymentForm({
   const { isMobile } = useMobile();
   const { session, connect, payable } = usePaymentContext();
   const subscription = useSubscription("events");
+  const formErrorPosition = isMobile ? "bottom" : "right";
   const {
     control,
     getValues,
@@ -456,6 +459,7 @@ export default function PaymentForm({
       window.removeEventListener("keydown", handleKeyDown);
     };
   }, [state.submitting, state.paying, state.stripePaying, quantityInventoryStatus, payable]);
+  const balanceLink = getTokenBalanceLink(method, state.fastCheckoutInfo?.payer || "");
   const FastCheckoutConfirmDialog = state.fastCheckoutInfo && /* @__PURE__ */ jsx(
     ConfirmDialog,
     {
@@ -469,7 +473,23 @@ export default function PaymentForm({
         /* @__PURE__ */ jsxs(Stack, { spacing: 1, children: [
           /* @__PURE__ */ jsxs(Stack, { flexDirection: "row", alignItems: "center", justifyContent: "space-between", children: [
             /* @__PURE__ */ jsx(Typography, { color: "text.primary", sx: { whiteSpace: "nowrap" }, children: t("payment.checkout.fastPay.payer") }),
-            /* @__PURE__ */ jsx(Typography, { children: /* @__PURE__ */ jsx(DID, { did: state.fastCheckoutInfo.payer || "", compact: true, responsive: false }) })
+            /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
+              /* @__PURE__ */ jsx(DID, { did: state.fastCheckoutInfo.payer || "", compact: true, responsive: false }),
+              balanceLink && /* @__PURE__ */ jsx(Tooltip, { title: t("payment.checkout.fastPay.balanceLink"), placement: "top", children: /* @__PURE__ */ jsx(
+                OpenInNew,
+                {
+                  sx: {
+                    color: "text.lighter",
+                    fontSize: "0.85rem",
+                    cursor: "pointer",
+                    "&:hover": { color: "text.primary" }
+                  },
+                  onClick: () => {
+                    window.open(balanceLink, "_blank");
+                  }
+                }
+              ) })
+            ] })
           ] }),
           /* @__PURE__ */ jsxs(Stack, { flexDirection: "row", alignItems: "center", justifyContent: "space-between", children: [
             /* @__PURE__ */ jsx(Typography, { color: "text.primary", children: t("payment.checkout.fastPay.amount") }),
@@ -609,9 +629,10 @@ export default function PaymentForm({
               {
                 name: "customer_name",
                 variant: "outlined",
-                errorPosition: "right",
+                errorPosition: formErrorPosition,
                 rules: {
-                  required: t("payment.checkout.required")
+                  required: t("payment.checkout.required"),
+                  ...getFieldValidation("customer_name", checkoutSession.metadata?.page_info?.field_validation, locale)
                 }
               }
             ),
@@ -621,10 +642,15 @@ export default function PaymentForm({
               {
                 name: "customer_email",
                 variant: "outlined",
-                errorPosition: "right",
+                errorPosition: formErrorPosition,
                 rules: {
                   required: t("payment.checkout.required"),
-                  validate: (x) => isEmail(x) ? true : t("payment.checkout.invalid")
+                  validate: (x) => isEmail(x) ? true : t("payment.checkout.invalid"),
+                  ...getFieldValidation(
+                    "customer_email",
+                    checkoutSession.metadata?.page_info?.field_validation,
+                    locale
+                  )
                 }
               }
             ),
@@ -635,14 +661,19 @@ export default function PaymentForm({
                 {
                   name: "customer_phone",
                   variant: "outlined",
-                  errorPosition: "right",
+                  errorPosition: formErrorPosition,
                   placeholder: "Phone number",
                   rules: {
                     required: t("payment.checkout.required"),
                     validate: async (x) => {
                       const isValid = await validatePhoneNumber(x);
                       return isValid ? true : t("payment.checkout.invalid");
-                    }
+                    },
+                    ...getFieldValidation(
+                      "customer_phone",
+                      checkoutSession.metadata?.page_info?.field_validation,
+                      locale
+                    )
                   }
                 }
               )
@@ -652,7 +683,9 @@ export default function PaymentForm({
               {
                 mode: checkoutSession.billing_address_collection,
                 stripe: method?.type === "stripe",
-                sx: { marginTop: "0 !important" }
+                sx: { marginTop: "0 !important" },
+                fieldValidation: checkoutSession.metadata?.page_info?.field_validation,
+                errorPosition: formErrorPosition
               }
             )
           ]

package/lib/libs/util.d.ts

@@ -120,3 +120,4 @@ export declare function parseMarkedText(text: string): Array<{
     type: 'text' | 'marked';
     content: string;
 }>;
+export declare function getTokenBalanceLink(method: TPaymentMethod, address: string): string;

package/lib/libs/util.js

@@ -44,7 +44,9 @@ exports.getRefundStatusColor = getRefundStatusColor;
 exports.getStatementDescriptor = getStatementDescriptor;
 exports.getSubscriptionAction = void 0;
 exports.getSubscriptionStatusColor = getSubscriptionStatusColor;
-exports.getTxLink = exports.getSubscriptionTimeSummary = void 0;
+exports.getSubscriptionTimeSummary = void 0;
+exports.getTokenBalanceLink = getTokenBalanceLink;
+exports.getTxLink = void 0;
 exports.getUserProfileLink = getUserProfileLink;
 exports.getWebhookStatusColor = getWebhookStatusColor;
 exports.getWordBreakStyle = getWordBreakStyle;
@@ -1169,4 +1171,17 @@ function parseMarkedText(text) {
     }
   }
   return result.filter(p => p.content !== "");
+}
+function getTokenBalanceLink(method, address) {
+  if (!method || !address) {
+    return "";
+  }
+  const explorerHost = method?.settings?.[method?.type]?.explorer_host || "";
+  if (method.type === "arcblock" && address) {
+    return (0, _ufo.joinURL)(explorerHost, "accounts", address, "tokens");
+  }
+  if (["ethereum", "base"].includes(method.type) && address) {
+    return (0, _ufo.joinURL)(explorerHost, "address", address);
+  }
+  return "";
 }

package/lib/libs/validator.d.ts

@@ -1 +1,2 @@
 export declare function validatePostalCode(postalCode: string, country?: string): boolean;
+export declare function getFieldValidation(fieldName: string, validations?: Record<string, any>, locale?: string): Record<string, any>;

package/lib/libs/validator.js

@@ -3,8 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.getFieldValidation = getFieldValidation;
 exports.validatePostalCode = validatePostalCode;
 var _isPostalCode = _interopRequireDefault(require("validator/lib/isPostalCode"));
+var _locales = require("../locales");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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"];
 function validatePostalCode(postalCode, country) {
@@ -17,4 +19,16 @@ function validatePostalCode(postalCode, country) {
     console.error(error);
     return false;
   }
+}
+function getFieldValidation(fieldName, validations, locale = "en") {
+  if (!validations || !validations[fieldName]) return {};
+  const fieldValidation = validations[fieldName];
+  const rules = {};
+  if (fieldValidation.pattern) {
+    rules.pattern = {
+      value: new RegExp(fieldValidation.pattern),
+      message: fieldValidation.pattern_message?.[locale] || (0, _locales.t)("payment.checkout.invalid", locale)
+    };
+  }
+  return rules;
 }

package/lib/locales/en.js

@@ -239,7 +239,8 @@ module.exports = (0, _flat.default)({
         confirmPrompt: "Please confirm the details before proceeding.",
         payer: "Account",
         amount: "Amount",
-        failed: "Account changed, please pay manually."
+        failed: "Account changed, please pay manually.",
+        balanceLink: "View Balance"
       }
     },
     customer: {

package/lib/locales/zh.js

@@ -239,7 +239,8 @@ module.exports = (0, _flat.default)({
         confirmPrompt: "\u8BF7\u786E\u8BA4\u652F\u4ED8\u4FE1\u606F\u65E0\u8BEF\u540E\u7EE7\u7EED\u3002",
         payer: "\u8D26\u6237\u5730\u5740",
         amount: "\u652F\u4ED8\u91D1\u989D",
-        failed: "\u8D26\u6237\u53D1\u751F\u53D8\u5316\uFF0C\u65E0\u6CD5\u81EA\u52A8\u5B8C\u6210\u652F\u4ED8\uFF0C\u8BF7\u624B\u52A8\u652F\u4ED8\u3002"
+        failed: "\u8D26\u6237\u53D1\u751F\u53D8\u5316\uFF0C\u65E0\u6CD5\u81EA\u52A8\u5B8C\u6210\u652F\u4ED8\uFF0C\u8BF7\u624B\u52A8\u652F\u4ED8\u3002",
+        balanceLink: "\u67E5\u770B\u4F59\u989D"
       }
     },
     customer: {

package/lib/payment/form/address.d.ts

@@ -3,11 +3,15 @@ type Props = {
     mode: string;
     stripe: boolean;
     sx?: SxProps;
+    fieldValidation?: Record<string, any>;
+    errorPosition?: 'right' | 'bottom';
 };
-declare function AddressForm({ mode, stripe, sx }: Props): import("react").JSX.Element | null;
+declare function AddressForm({ mode, stripe, sx, fieldValidation, errorPosition }: Props): import("react").JSX.Element | null;
 declare namespace AddressForm {
     var defaultProps: {
         sx: {};
+        fieldValidation: {};
+        errorPosition: string;
     };
 }
 export default AddressForm;

package/lib/payment/form/address.js

@@ -13,12 +13,16 @@ var _countrySelect = _interopRequireDefault(require("../../components/country-se
 var _validator = require("../../libs/validator");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 AddressForm.defaultProps = {
-  sx: {}
+  sx: {},
+  fieldValidation: {},
+  errorPosition: "right"
 };
 function AddressForm({
   mode,
   stripe,
-  sx = {}
+  sx = {},
+  fieldValidation,
+  errorPosition
 }) {
   const {
     t
@@ -46,9 +50,10 @@ function AddressForm({
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
             name: "billing_address.line1",
             rules: {
-              required: t("payment.checkout.required")
+              required: t("payment.checkout.required"),
+              ...(0, _validator.getFieldValidation)("billing_address.line1", fieldValidation)
             },
-            errorPosition: "right",
+            errorPosition,
             variant: "outlined",
             placeholder: t("payment.checkout.billing.line1")
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
@@ -57,9 +62,10 @@ function AddressForm({
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
             name: "billing_address.city",
             rules: {
-              required: t("payment.checkout.required")
+              required: t("payment.checkout.required"),
+              ...(0, _validator.getFieldValidation)("billing_address.city", fieldValidation)
             },
-            errorPosition: "right",
+            errorPosition,
             variant: "outlined",
             placeholder: t("payment.checkout.billing.city")
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
@@ -68,9 +74,10 @@ function AddressForm({
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
             name: "billing_address.state",
             rules: {
-              required: t("payment.checkout.required")
+              required: t("payment.checkout.required"),
+              ...(0, _validator.getFieldValidation)("billing_address.state", fieldValidation)
             },
-            errorPosition: "right",
+            errorPosition,
             variant: "outlined",
             placeholder: t("payment.checkout.billing.state")
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
@@ -83,9 +90,10 @@ function AddressForm({
               validate: x => {
                 const isValid = (0, _validator.validatePostalCode)(x, country);
                 return isValid ? true : t("payment.checkout.invalid");
-              }
+              },
+              ...(0, _validator.getFieldValidation)("billing_address.postal_code", fieldValidation)
             },
-            errorPosition: "right",
+            errorPosition,
             variant: "outlined",
             placeholder: t("payment.checkout.billing.postal_code"),
             InputProps: {
@@ -139,9 +147,10 @@ function AddressForm({
                 validate: x => {
                   const isValid = (0, _validator.validatePostalCode)(x, country);
                   return isValid ? true : t("payment.checkout.invalid");
-                }
+                },
+                ...(0, _validator.getFieldValidation)("billing_address.postal_code", fieldValidation)
               },
-              errorPosition: "right",
+              errorPosition,
               variant: "outlined",
               placeholder: t("payment.checkout.billing.postal_code"),
               wrapperStyle: {

package/lib/payment/form/index.js

@@ -36,6 +36,7 @@ var _loadingButton = _interopRequireDefault(require("../../components/loading-bu
 var _overDueInvoicePayment = _interopRequireDefault(require("../../components/over-due-invoice-payment"));
 var _currency2 = require("../../libs/currency");
 var _confirm = _interopRequireDefault(require("../../components/confirm"));
+var _validator = require("../../libs/validator");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const waitForCheckoutComplete = async sessionId => {
   let result;
@@ -123,6 +124,7 @@ function PaymentForm({
     payable
   } = (0, _payment.usePaymentContext)();
   const subscription = (0, _subscription.useSubscription)("events");
+  const formErrorPosition = isMobile ? "bottom" : "right";
   const {
     control,
     getValues,
@@ -535,6 +537,7 @@ function PaymentForm({
       window.removeEventListener("keydown", handleKeyDown);
     };
   }, [state.submitting, state.paying, state.stripePaying, quantityInventoryStatus, payable]);
+  const balanceLink = (0, _util2.getTokenBalanceLink)(method, state.fastCheckoutInfo?.payer || "");
   const FastCheckoutConfirmDialog = state.fastCheckoutInfo && /* @__PURE__ */(0, _jsxRuntime.jsx)(_confirm.default, {
     onConfirm: handleFastCheckoutConfirm,
     onCancel: handleFastCheckoutCancel,
@@ -561,12 +564,33 @@ function PaymentForm({
               whiteSpace: "nowrap"
             },
             children: t("payment.checkout.fastPay.payer")
-          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_DID.default, {
+          }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              gap: 0.5
+            },
+            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_DID.default, {
               did: state.fastCheckoutInfo.payer || "",
               compact: true,
               responsive: false
-            })
+            }), balanceLink && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Tooltip, {
+              title: t("payment.checkout.fastPay.balanceLink"),
+              placement: "top",
+              children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.OpenInNew, {
+                sx: {
+                  color: "text.lighter",
+                  fontSize: "0.85rem",
+                  cursor: "pointer",
+                  "&:hover": {
+                    color: "text.primary"
+                  }
+                },
+                onClick: () => {
+                  window.open(balanceLink, "_blank");
+                }
+              })
+            })]
           })]
         }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
           flexDirection: "row",
@@ -709,9 +733,10 @@ function PaymentForm({
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
             name: "customer_name",
             variant: "outlined",
-            errorPosition: "right",
+            errorPosition: formErrorPosition,
             rules: {
-              required: t("payment.checkout.required")
+              required: t("payment.checkout.required"),
+              ...(0, _validator.getFieldValidation)("customer_name", checkoutSession.metadata?.page_info?.field_validation, locale)
             }
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
             className: "base-label",
@@ -719,10 +744,11 @@ function PaymentForm({
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
             name: "customer_email",
             variant: "outlined",
-            errorPosition: "right",
+            errorPosition: formErrorPosition,
             rules: {
               required: t("payment.checkout.required"),
-              validate: x => (0, _isEmail.default)(x) ? true : t("payment.checkout.invalid")
+              validate: x => (0, _isEmail.default)(x) ? true : t("payment.checkout.invalid"),
+              ...(0, _validator.getFieldValidation)("customer_email", checkoutSession.metadata?.page_info?.field_validation, locale)
             }
           }), checkoutSession.phone_number_collection?.enabled && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
             children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
@@ -731,14 +757,15 @@ function PaymentForm({
             }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_phone.default, {
               name: "customer_phone",
               variant: "outlined",
-              errorPosition: "right",
+              errorPosition: formErrorPosition,
               placeholder: "Phone number",
               rules: {
                 required: t("payment.checkout.required"),
                 validate: async x => {
                   const isValid = await (0, _phoneValidator.validatePhoneNumber)(x);
                   return isValid ? true : t("payment.checkout.invalid");
-                }
+                },
+                ...(0, _validator.getFieldValidation)("customer_phone", checkoutSession.metadata?.page_info?.field_validation, locale)
               }
             })]
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_address.default, {
@@ -746,7 +773,9 @@ function PaymentForm({
             stripe: method?.type === "stripe",
             sx: {
               marginTop: "0 !important"
-            }
+            },
+            fieldValidation: checkoutSession.metadata?.page_info?.field_validation,
+            errorPosition: formErrorPosition
           })]
         })]
       })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.18.34",
+  "version": "1.18.35",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -93,7 +93,7 @@
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.2",
     "@babel/preset-react": "^7.24.7",
-    "@blocklet/payment-types": "1.18.34",
+    "@blocklet/payment-types": "1.18.35",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -124,5 +124,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "0ddb7c08956891409919c8027b56b77eba1726d4"
+  "gitHead": "802a98b5ca81475f8cd7b9dcbb77fce7240b9788"
 }

package/src/libs/util.ts

@@ -1,6 +1,7 @@
 /* eslint-disable no-nested-ternary */
 /* eslint-disable @typescript-eslint/indent */
 import type {
+  ChainType,
   PaymentDetails,
   PriceCurrency,
   PriceRecurring,
@@ -1259,3 +1260,17 @@ export function parseMarkedText(text: string): Array<{
 
   return result.filter((p) => p.content !== '');
 }
+
+export function getTokenBalanceLink(method: TPaymentMethod, address: string) {
+  if (!method || !address) {
+    return '';
+  }
+  const explorerHost = (method?.settings?.[method?.type as ChainType] as any)?.explorer_host || '';
+  if (method.type === 'arcblock' && address) {
+    return joinURL(explorerHost, 'accounts', address, 'tokens');
+  }
+  if (['ethereum', 'base'].includes(method.type) && address) {
+    return joinURL(explorerHost, 'address', address);
+  }
+  return '';
+}

package/src/libs/validator.ts

@@ -1,4 +1,5 @@
 import isPostalCode, { PostalCodeLocale } from 'validator/lib/isPostalCode';
+import { t } from '../locales';
 
 const POSTAL_CODE_SUPPORTED_COUNTRIES: PostalCodeLocale[] = [
   'AD',
@@ -68,3 +69,16 @@ export function validatePostalCode(postalCode: string, country?: string): boolea
     return false;
   }
 }
+
+export function getFieldValidation(fieldName: string, validations?: Record<string, any>, locale: string = 'en') {
+  if (!validations || !validations[fieldName]) return {};
+  const fieldValidation = validations[fieldName];
+  const rules: Record<string, any> = {};
+  if (fieldValidation.pattern) {
+    rules.pattern = {
+      value: new RegExp(fieldValidation.pattern),
+      message: fieldValidation.pattern_message?.[locale] || t('payment.checkout.invalid', locale),
+    };
+  }
+  return rules;
+}

package/src/locales/en.tsx

@@ -241,6 +241,7 @@ export default flat({
         payer: 'Account',
         amount: 'Amount',
         failed: 'Account changed, please pay manually.',
+        balanceLink: 'View Balance',
       },
     },
     customer: {

package/src/locales/zh.tsx

@@ -236,6 +236,7 @@ export default flat({
         payer: '账户地址',
         amount: '支付金额',
         failed: '账户发生变化，无法自动完成支付，请手动支付。',
+        balanceLink: '查看余额',
       },
     },
     customer: {

package/src/payment/form/address.tsx

@@ -4,19 +4,23 @@ import type { SxProps } from '@mui/material';
 import { Controller, useFormContext, useWatch } from 'react-hook-form';
 import FormInput from '../../components/input';
 import CountrySelect from '../../components/country-select';
-import { validatePostalCode } from '../../libs/validator';
+import { getFieldValidation, validatePostalCode } from '../../libs/validator';
 
 type Props = {
   mode: string;
   stripe: boolean;
   sx?: SxProps;
+  fieldValidation?: Record<string, any>;
+  errorPosition?: 'right' | 'bottom';
 };
 
 AddressForm.defaultProps = {
   sx: {},
+  fieldValidation: {},
+  errorPosition: 'right',
 };
 
-export default function AddressForm({ mode, stripe, sx = {} }: Props) {
+export default function AddressForm({ mode, stripe, sx = {}, fieldValidation, errorPosition }: Props) {
   const { t } = useLocaleContext();
   const { control } = useFormContext();
   const country = useWatch({ control, name: 'billing_address.country' });
@@ -28,24 +32,33 @@ export default function AddressForm({ mode, stripe, sx = {} }: Props) {
             <FormLabel className="base-label">{t('payment.checkout.billing.line1')}</FormLabel>
             <FormInput
               name="billing_address.line1"
-              rules={{ required: t('payment.checkout.required') }}
-              errorPosition="right"
+              rules={{
+                required: t('payment.checkout.required'),
+                ...getFieldValidation('billing_address.line1', fieldValidation),
+              }}
+              errorPosition={errorPosition}
               variant="outlined"
               placeholder={t('payment.checkout.billing.line1')}
             />
             <FormLabel className="base-label">{t('payment.checkout.billing.city')}</FormLabel>
             <FormInput
               name="billing_address.city"
-              rules={{ required: t('payment.checkout.required') }}
-              errorPosition="right"
+              rules={{
+                required: t('payment.checkout.required'),
+                ...getFieldValidation('billing_address.city', fieldValidation),
+              }}
+              errorPosition={errorPosition}
               variant="outlined"
               placeholder={t('payment.checkout.billing.city')}
             />
             <FormLabel className="base-label">{t('payment.checkout.billing.state')}</FormLabel>
             <FormInput
               name="billing_address.state"
-              rules={{ required: t('payment.checkout.required') }}
-              errorPosition="right"
+              rules={{
+                required: t('payment.checkout.required'),
+                ...getFieldValidation('billing_address.state', fieldValidation),
+              }}
+              errorPosition={errorPosition}
               variant="outlined"
               placeholder={t('payment.checkout.billing.state')}
             />
@@ -58,8 +71,9 @@ export default function AddressForm({ mode, stripe, sx = {} }: Props) {
                   const isValid = validatePostalCode(x, country);
                   return isValid ? true : t('payment.checkout.invalid');
                 },
+                ...getFieldValidation('billing_address.postal_code', fieldValidation),
               }}
-              errorPosition="right"
+              errorPosition={errorPosition}
               variant="outlined"
               placeholder={t('payment.checkout.billing.postal_code')}
               InputProps={{
@@ -104,8 +118,9 @@ export default function AddressForm({ mode, stripe, sx = {} }: Props) {
                     const isValid = validatePostalCode(x, country);
                     return isValid ? true : t('payment.checkout.invalid');
                   },
+                  ...getFieldValidation('billing_address.postal_code', fieldValidation),
                 }}
-                errorPosition="right"
+                errorPosition={errorPosition}
                 variant="outlined"
                 placeholder={t('payment.checkout.billing.postal_code')}
                 wrapperStyle={{ height: '40px' }}

package/src/payment/form/index.tsx

@@ -5,7 +5,7 @@ import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 // import { useTheme } from '@arcblock/ux/lib/Theme';
 import Toast from '@arcblock/ux/lib/Toast';
 import type { TCheckoutSession, TCustomer, TPaymentIntent, TPaymentMethodExpanded } from '@blocklet/payment-types';
-import { Box, Button, CircularProgress, Divider, Fade, FormLabel, Stack, Typography } from '@mui/material';
+import { Box, Button, CircularProgress, Divider, Fade, FormLabel, Stack, Tooltip, Typography } from '@mui/material';
 import { useMemoizedFn, useSetState } from 'ahooks';
 import pWaitFor from 'p-wait-for';
 import { useEffect, useMemo, useRef } from 'react';
@@ -17,7 +17,7 @@ import { fromUnitToToken } from '@ocap/util';
 import DID from '@arcblock/ux/lib/DID';
 
 import isEmpty from 'lodash/isEmpty';
-import { HelpOutline } from '@mui/icons-material';
+import { HelpOutline, OpenInNew } from '@mui/icons-material';
 import FormInput from '../../components/input';
 import { usePaymentContext } from '../../contexts/payment';
 import { useSubscription } from '../../hooks/subscription';
@@ -28,6 +28,7 @@ import {
   formatQuantityInventory,
   getPrefix,
   getStatementDescriptor,
+  getTokenBalanceLink,
   isCrossOrigin,
 } from '../../libs/util';
 import type { CheckoutCallbacks, CheckoutContext } from '../../types';
@@ -41,6 +42,7 @@ import LoadingButton from '../../components/loading-button';
 import OverdueInvoicePayment from '../../components/over-due-invoice-payment';
 import { saveCurrencyPreference } from '../../libs/currency';
 import ConfirmDialog from '../../components/confirm';
+import { getFieldValidation } from '../../libs/validator';
 
 export const waitForCheckoutComplete = async (sessionId: string) => {
   let result: CheckoutContext;
@@ -175,6 +177,7 @@ export default function PaymentForm({
   const { isMobile } = useMobile();
   const { session, connect, payable } = usePaymentContext();
   const subscription = useSubscription('events');
+  const formErrorPosition = isMobile ? 'bottom' : 'right';
   const {
     control,
     getValues,
@@ -596,6 +599,7 @@ export default function PaymentForm({
     };
   }, [state.submitting, state.paying, state.stripePaying, quantityInventoryStatus, payable]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  const balanceLink = getTokenBalanceLink(method, state.fastCheckoutInfo?.payer || '');
   const FastCheckoutConfirmDialog = state.fastCheckoutInfo && (
     <ConfirmDialog
       onConfirm={handleFastCheckoutConfirm}
@@ -611,9 +615,24 @@ export default function PaymentForm({
               <Typography color="text.primary" sx={{ whiteSpace: 'nowrap' }}>
                 {t('payment.checkout.fastPay.payer')}
               </Typography>
-              <Typography>
+              <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
                 <DID did={state.fastCheckoutInfo.payer || ''} compact responsive={false} />
-              </Typography>
+                {balanceLink && (
+                  <Tooltip title={t('payment.checkout.fastPay.balanceLink')} placement="top">
+                    <OpenInNew
+                      sx={{
+                        color: 'text.lighter',
+                        fontSize: '0.85rem',
+                        cursor: 'pointer',
+                        '&:hover': { color: 'text.primary' },
+                      }}
+                      onClick={() => {
+                        window.open(balanceLink, '_blank');
+                      }}
+                    />
+                  </Tooltip>
+                )}
+              </Box>
             </Stack>
             <Stack flexDirection="row" alignItems="center" justifyContent="space-between">
               <Typography color="text.primary">{t('payment.checkout.fastPay.amount')}</Typography>
@@ -748,19 +767,25 @@ export default function PaymentForm({
               <FormInput
                 name="customer_name"
                 variant="outlined"
-                errorPosition="right"
+                errorPosition={formErrorPosition}
                 rules={{
                   required: t('payment.checkout.required'),
+                  ...getFieldValidation('customer_name', checkoutSession.metadata?.page_info?.field_validation, locale),
                 }}
               />
               <FormLabel className="base-label">{t('payment.checkout.customer.email')}</FormLabel>
               <FormInput
                 name="customer_email"
                 variant="outlined"
-                errorPosition="right"
+                errorPosition={formErrorPosition}
                 rules={{
                   required: t('payment.checkout.required'),
                   validate: (x) => (isEmail(x) ? true : t('payment.checkout.invalid')),
+                  ...getFieldValidation(
+                    'customer_email',
+                    checkoutSession.metadata?.page_info?.field_validation,
+                    locale
+                  ),
                 }}
               />
               {checkoutSession.phone_number_collection?.enabled && (
@@ -769,7 +794,7 @@ export default function PaymentForm({
                   <PhoneInput
                     name="customer_phone"
                     variant="outlined"
-                    errorPosition="right"
+                    errorPosition={formErrorPosition}
                     placeholder="Phone number"
                     rules={{
                       required: t('payment.checkout.required'),
@@ -777,6 +802,11 @@ export default function PaymentForm({
                         const isValid = await validatePhoneNumber(x);
                         return isValid ? true : t('payment.checkout.invalid');
                       },
+                      ...getFieldValidation(
+                        'customer_phone',
+                        checkoutSession.metadata?.page_info?.field_validation,
+                        locale
+                      ),
                     }}
                   />
                 </>
@@ -785,6 +815,8 @@ export default function PaymentForm({
                 mode={checkoutSession.billing_address_collection as string}
                 stripe={method?.type === 'stripe'}
                 sx={{ marginTop: '0 !important' }}
+                fieldValidation={checkoutSession.metadata?.page_info?.field_validation}
+                errorPosition={formErrorPosition}
               />
             </Stack>
           )}