@blocklet/payment-react 1.18.33 → 1.18.35

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";
@@ -10,7 +10,10 @@ import { Controller, useFormContext, useWatch } from "react-hook-form";
 import { joinURL } from "ufo";
 import { dispatch } from "use-bus";
 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, OpenInNew } from "@mui/icons-material";
 import FormInput from "../../components/input.js";
 import { usePaymentContext } from "../../contexts/payment.js";
 import { useSubscription } from "../../hooks/subscription.js";
@@ -21,6 +24,7 @@ import {
   formatQuantityInventory,
   getPrefix,
   getStatementDescriptor,
+  getTokenBalanceLink,
   isCrossOrigin
 } from "../../libs/util.js";
 import AddressForm from "./address.js";
@@ -32,6 +36,8 @@ import { formatPhone, validatePhoneNumber } from "../../libs/phone-validator.js"
 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(
@@ -96,10 +102,11 @@ export default function PaymentForm({
   onlyShowBtn,
   isDonation = false
 }) {
-  const { t } = useLocaleContext();
+  const { t, locale } = useLocaleContext();
   const { isMobile } = useMobile();
   const { session, connect, payable } = usePaymentContext();
   const subscription = useSubscription("events");
+  const formErrorPosition = isMobile ? "bottom" : "right";
   const {
     control,
     getValues,
@@ -126,7 +133,8 @@ export default function PaymentForm({
     stripeContext: void 0,
     customer,
     customerLimited: false,
-    stripePaying: false
+    stripePaying: false,
+    fastCheckoutInfo: null
   });
   const currencies = flattenPaymentMethods(paymentMethods);
   const onCheckoutComplete = useMemoizedFn(async ({ response }) => {
@@ -204,6 +212,7 @@ export default function PaymentForm({
     initUserInfo();
   }, [session?.user, checkoutSession.phone_number_collection?.enabled]);
   const paymentMethod = useWatch({ control, name: "payment_method" });
+  const paymentCurrencyId = useWatch({ control, name: "payment_currency" });
   const afterUserLoggedIn = useMemoizedFn(() => {
     if (hasDidWallet(session.user) || skipBindWallet) {
       handleSubmit(onFormSubmit, onFormError)();
@@ -228,6 +237,8 @@ export default function PaymentForm({
   }
   buttonText = session?.user || isDonation ? buttonText : t("payment.checkout.connect", { action: buttonText });
   const method = paymentMethods.find((x) => x.id === paymentMethod);
+  const paymentCurrency = currencies.find((x) => x.id === paymentCurrencyId);
+  const showStake = method.type === "arcblock" && !checkoutSession.subscription_data?.no_stake;
   const isDonationMode = checkoutSession?.submit_type === "donate" && isDonation;
   const showForm = !!session?.user;
   const skipBindWallet = method.type === "stripe";
@@ -261,6 +272,80 @@ export default function PaymentForm({
       });
     }
   };
+  const handleFastCheckoutConfirm = async () => {
+    if (!state.fastCheckoutInfo)
+      return;
+    setState({
+      fastCheckoutInfo: {
+        ...state.fastCheckoutInfo,
+        loading: true
+      }
+    });
+    try {
+      const result = await api.post(`/api/checkout-sessions/${checkoutSession.id}/fast-checkout-confirm`);
+      if (result.data.fastPaid) {
+        setState({
+          fastCheckoutInfo: null,
+          paying: true
+        });
+        await handleConnected();
+      } else {
+        Toast.error(t("payment.checkout.fastPay.failed"));
+        setState({
+          fastCheckoutInfo: null,
+          paying: true
+        });
+        openConnect();
+      }
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+      setState({
+        fastCheckoutInfo: null
+      });
+    }
+  };
+  const handleFastCheckoutCancel = () => {
+    setState({ fastCheckoutInfo: null });
+  };
+  const openConnect = () => {
+    try {
+      if (!["arcblock", "ethereum", "base"].includes(method.type)) {
+        return;
+      }
+      setState({ paying: true });
+      connect.open({
+        locale,
+        containerEl: void 0,
+        action: checkoutSession.mode,
+        prefix: joinURL(getPrefix(), "/api/did"),
+        saveConnect: false,
+        useSocket: isCrossOrigin() === false,
+        extraParams: { checkoutSessionId: checkoutSession.id, sessionUserDid: session?.user?.did },
+        onSuccess: async () => {
+          connect.close();
+          await handleConnected();
+        },
+        onClose: () => {
+          connect.close();
+          setState({ submitting: false, paying: false });
+        },
+        onError: (err) => {
+          console.error(err);
+          setState({ submitting: false, paying: false });
+          onError(err);
+        },
+        messages: {
+          title: t("payment.checkout.connectModal.title", { action: buttonText }),
+          scan: t("payment.checkout.connectModal.scan"),
+          confirm: t("payment.checkout.connectModal.confirm"),
+          cancel: t("payment.checkout.connectModal.cancel")
+        }
+      });
+    } catch (err) {
+      Toast.error(formatError(err));
+    }
+  };
   const onFormSubmit = async (data) => {
     setState({ submitting: true });
     try {
@@ -278,36 +363,18 @@ export default function PaymentForm({
         customerLimited: false
       });
       if (["arcblock", "ethereum", "base"].includes(method.type)) {
-        setState({ paying: true });
-        if ((result.data.balance?.sufficient || result.data.delegation?.sufficient) && !isDonationMode) {
-          await handleConnected();
-        } else {
-          connect.open({
-            containerEl: void 0,
-            action: checkoutSession.mode,
-            prefix: joinURL(getPrefix(), "/api/did"),
-            saveConnect: false,
-            useSocket: isCrossOrigin() === false,
-            extraParams: { checkoutSessionId: checkoutSession.id, sessionUserDid: session?.user?.did },
-            onSuccess: async () => {
-              connect.close();
-              await handleConnected();
-            },
-            onClose: () => {
-              connect.close();
-              setState({ submitting: false, paying: false });
-            },
-            onError: (err) => {
-              console.error(err);
-              setState({ submitting: false, paying: false });
-              onError(err);
-            },
-            messages: {
-              title: "DID Connect",
-              scan: "Use following methods to complete this payment",
-              confirm: "Confirm"
+        if ((result.data.balance?.sufficient || result.data.delegation?.sufficient) && !isDonationMode && result.data.fastPayInfo) {
+          setState({
+            fastCheckoutInfo: {
+              open: true,
+              loading: false,
+              sourceType: result.data.fastPayInfo.type,
+              amount: result.data.fastPayInfo.amount,
+              payer: result.data.fastPayInfo.payer
             }
           });
+        } else {
+          openConnect();
         }
       }
       if (["stripe"].includes(method.type)) {
@@ -392,6 +459,52 @@ 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,
+    {
+      onConfirm: handleFastCheckoutConfirm,
+      onCancel: handleFastCheckoutCancel,
+      title: t("payment.checkout.fastPay.title"),
+      message: /* @__PURE__ */ jsxs(Stack, { children: [
+        /* @__PURE__ */ jsx(Typography, { children: t("payment.checkout.fastPay.autoPaymentReason") }),
+        /* @__PURE__ */ jsx(Typography, { children: t("payment.checkout.fastPay.confirmPrompt") }),
+        /* @__PURE__ */ jsx(Divider, { sx: { mt: 1.5, mb: 1.5 } }),
+        /* @__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__ */ 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") }),
+            /* @__PURE__ */ jsxs(Typography, { children: [
+              fromUnitToToken(state.fastCheckoutInfo.amount, paymentCurrency?.decimal || 18).toString(),
+              " ",
+              paymentCurrency?.symbol
+            ] })
+          ] })
+        ] })
+      ] }),
+      loading: state.fastCheckoutInfo.loading,
+      color: "primary"
+    }
+  );
   if (onlyShowBtn) {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(Box, { className: "cko-payment-submit-btn", children: /* @__PURE__ */ jsxs(
@@ -443,7 +556,8 @@ export default function PaymentForm({
             title: t("payment.customer.pastDue.alert.title")
           }
         }
-      )
+      ),
+      FastCheckoutConfirmDialog
     ] });
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -515,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)
                 }
               }
             ),
@@ -527,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
+                  )
                 }
               }
             ),
@@ -541,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
+                    )
                   }
                 }
               )
@@ -558,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
               }
             )
           ]
@@ -583,7 +710,11 @@ export default function PaymentForm({
           children: state.submitting || state.paying ? t("payment.checkout.processing") : buttonText
         }
       ) }),
-      ["subscription", "setup"].includes(checkoutSession.mode) && /* @__PURE__ */ jsx(Typography, { sx: { mt: 2.5, color: "text.lighter", fontSize: "0.7875rem", lineHeight: "0.9625rem" }, children: t("payment.checkout.confirm", { payee }) })
+      ["subscription", "setup"].includes(checkoutSession.mode) && /* @__PURE__ */ jsx(Typography, { sx: { mt: 2.5, color: "text.lighter", fontSize: "0.7875rem", lineHeight: "0.9625rem" }, children: showStake ? t("payment.checkout.confirm.withStake", { payee }) : t("payment.checkout.confirm.withoutStake", { payee }) }),
+      checkoutSession.metadata?.page_info?.form_purpose_description && /* @__PURE__ */ jsxs(Box, { sx: { mt: 1, display: "flex", alignItems: "center", gap: 0.5 }, children: [
+        /* @__PURE__ */ jsx(HelpOutline, { sx: { color: "text.lighter", fontSize: "0.75rem" } }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { fontSize: "0.75rem", color: "text.lighter" }, children: locale === "zh" ? checkoutSession.metadata.page_info.form_purpose_description.zh : checkoutSession.metadata.page_info.form_purpose_description.en })
+      ] })
     ] }) }),
     state.customerLimited && /* @__PURE__ */ jsx(
       OverdueInvoicePayment,
@@ -610,6 +741,7 @@ export default function PaymentForm({
           title: t("payment.customer.pastDue.alert.title")
         }
       }
-    )
+    ),
+    FastCheckoutConfirmDialog
   ] });
 }

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

@@ -49,7 +49,8 @@ function OverdueInvoicePayment({
   authToken
 }) {
   const {
-    t
+    t,
+    locale
   } = (0, _context.useLocaleContext)();
   const {
     connect,
@@ -193,12 +194,18 @@ function OverdueInvoicePayment({
         extraParams.customerId = effectiveCustomerId;
       }
       connect.open({
+        locale,
         containerEl: void 0,
         saveConnect: false,
         action: "collect-batch",
         prefix: (0, _ufo.joinURL)((0, _util.getPrefix)(), "/api/did"),
         useSocket: !isCrossOriginRequest,
         extraParams,
+        messages: {
+          scan: t("common.connect.defaultScan"),
+          title: t("payment.customer.invoice.payBatch"),
+          confirm: t("common.connect.confirm")
+        },
         onSuccess: () => {
           connect.close();
           handleConnected();

package/lib/history/invoice/list.js

@@ -609,7 +609,8 @@ function CustomerInvoiceList(props) {
     type
   } = props;
   const {
-    t
+    t,
+    locale
   } = (0, _context.useLocaleContext)();
   const {
     connect
@@ -627,6 +628,7 @@ function CustomerInvoiceList(props) {
     connect.open({
       action: "collect",
       saveConnect: false,
+      locale,
       useSocket: (0, _util.isCrossOrigin)() === false,
       messages: {
         scan: "",

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

@@ -101,7 +101,13 @@ module.exports = (0, _flat.default)({
     stakeAmount: "Stake Amount",
     slashStakeAmount: "Slash Stake Amount",
     know: "I know",
-    relatedSubscription: "Subscription"
+    relatedSubscription: "Subscription",
+    connect: {
+      defaultScan: "Use following methods to complete this action",
+      scan: "Use following methods to complete this {action}",
+      confirm: "Confirm",
+      cancel: "Cancel"
+    }
   },
   payment: {
     checkout: {
@@ -173,7 +179,10 @@ module.exports = (0, _flat.default)({
         donate: "Thanks for your tip",
         tip: "A payment to {payee} has been completed. You can view the details of this payment in your account."
       },
-      confirm: "Confirming allows {payee} to charge or reduce your staking. You can cancel or revoke staking anytime.",
+      confirm: {
+        withStake: "By confirming, you allow {payee} to charge your account for future payments and, if necessary, slash your stake. You can cancel your subscription or withdraw your stake at any time.",
+        withoutStake: "By confirming, you allow {payee} to charge your account for future payments. You can cancel your subscription at any time."
+      },
       required: "Required",
       invalid: "Invalid",
       billing: {
@@ -216,7 +225,23 @@ module.exports = (0, _flat.default)({
       },
       orderSummary: "Order Summary",
       paymentDetails: "Payment Details",
-      productListTotal: "Includes {total} items"
+      productListTotal: "Includes {total} items",
+      connectModal: {
+        title: "{action}",
+        scan: "Use following methods to complete this payment",
+        confirm: "Confirm",
+        cancel: "Cancel"
+      },
+      fastPay: {
+        title: "Confirm Payment",
+        confirmMessage: "You will pay {amount} {symbol} from {sourceType}.",
+        autoPaymentReason: "This payment will be processed automatically due to prior delegation or sufficient balance.",
+        confirmPrompt: "Please confirm the details before proceeding.",
+        payer: "Account",
+        amount: "Amount",
+        failed: "Account changed, please pay manually.",
+        balanceLink: "View Balance"
+      }
     },
     customer: {
       payments: "Payment History",
@@ -282,7 +307,8 @@ module.exports = (0, _flat.default)({
         select: "Select payment method",
         submit: "Confirm change",
         confirm: "By confirming this change, you allow {payee} to charge {symbol} from your account for future payments in accordance with their terms. You can always change your payment method.",
-        completed: "Your payment method has been successfully updated, all future payments will use the new payment method unless you change it again."
+        completed: "Your payment method has been successfully updated, all future payments will use the new payment method unless you change it again.",
+        title: "Payment Method Change"
       },
       invoice: {
         summary: "Summary",
@@ -303,7 +329,8 @@ module.exports = (0, _flat.default)({
         next: "No invoices yet, next invoice will be generated on {date}",
         invoiceNumber: "Invoice Number",
         emptyList: "No Invoice",
-        noPaymentRequired: "No Payment Required"
+        noPaymentRequired: "No Payment Required",
+        payBatch: "Pay Due Invoices"
       },
       payment: {
         empty: "There are no payments",

package/lib/locales/zh.js

@@ -101,7 +101,13 @@ module.exports = (0, _flat.default)({
     stakeAmount: "\u8D28\u62BC\u91D1\u989D",
     slashStakeAmount: "\u7F5A\u6CA1\u91D1\u989D",
     know: "\u6211\u77E5\u9053\u4E86",
-    relatedSubscription: "\u8BA2\u9605"
+    relatedSubscription: "\u8BA2\u9605",
+    connect: {
+      defaultScan: "\u4F7F\u7528\u4EE5\u4E0B\u65B9\u5F0F\u5B8C\u6210\u672C\u6B21\u64CD\u4F5C",
+      scan: "\u4F7F\u7528\u4EE5\u4E0B\u65B9\u5F0F\u5B8C\u6210\u672C\u6B21{action}",
+      confirm: "\u786E\u8BA4",
+      cancel: "\u53D6\u6D88"
+    }
   },
   payment: {
     checkout: {
@@ -173,7 +179,10 @@ module.exports = (0, _flat.default)({
         donate: "\u611F\u8C22\u60A8\u7684\u652F\u6301",
         tip: "\u5411{payee}\u7684\u4ED8\u6B3E\u5DF2\u5B8C\u6210\u3002\u60A8\u53EF\u4EE5\u5728\u60A8\u7684\u8D26\u6237\u4E2D\u67E5\u770B\u6B64\u4ED8\u6B3E\u7684\u8BE6\u7EC6\u4FE1\u606F\u3002"
       },
-      confirm: "\u786E\u8BA4\u5141\u8BB8{payee}\u5BF9\u60A8\u7684\u8D26\u6237\u8FDB\u884C\u4ED8\u6B3E\u6216\u8005\u7F5A\u6CA1\u60A8\u7684\u8D28\u62BC\u3002\u60A8\u968F\u65F6\u53EF\u4EE5\u53D6\u6D88\u60A8\u7684\u8BA2\u9605\uFF0C\u6216\u8005\u64A4\u9500\u8D28\u62BC\u3002",
+      confirm: {
+        withStake: "\u786E\u8BA4\u8BA2\u9605\uFF0C\u5373\u8868\u793A\u60A8\u6388\u6743 {payee} \u4ECE\u60A8\u7684\u8D26\u6237\u6263\u53D6\u672A\u6765\u6B3E\u9879\uFF0C\u5E76\u5728\u5FC5\u8981\u65F6\u7F5A\u6CA1\u8D28\u62BC\u3002\u60A8\u53EF\u968F\u65F6\u53D6\u6D88\u8BA2\u9605\u6216\u64A4\u9500\u8D28\u62BC\u3002",
+        withoutStake: "\u786E\u8BA4\u8BA2\u9605\uFF0C\u5373\u8868\u793A\u60A8\u6388\u6743 {payee} \u4ECE\u60A8\u7684\u8D26\u6237\u6263\u53D6\u672A\u6765\u6B3E\u9879\u3002\u60A8\u53EF\u968F\u65F6\u53D6\u6D88\u8BA2\u9605\u3002"
+      },
       required: "\u5FC5\u586B\u9879",
       invalid: "\u65E0\u6548",
       billing: {
@@ -216,7 +225,23 @@ module.exports = (0, _flat.default)({
       },
       orderSummary: "\u8BA2\u5355\u6982\u89C8",
       paymentDetails: "\u652F\u4ED8\u4FE1\u606F",
-      productListTotal: "\u5305\u62EC {total} \u9879"
+      productListTotal: "\u5305\u62EC {total} \u9879",
+      connectModal: {
+        title: "{action}",
+        scan: "\u4F7F\u7528\u4EE5\u4E0B\u65B9\u5F0F\u5B8C\u6210\u672C\u6B21\u652F\u4ED8",
+        confirm: "\u786E\u8BA4",
+        cancel: "\u53D6\u6D88"
+      },
+      fastPay: {
+        title: "\u786E\u8BA4\u652F\u4ED8",
+        confirmMessage: "\u60A8\u5C06\u652F\u4ED8 {amount} {symbol}\uFF0C\u4ECE{sourceType}\u6263\u9664\u3002",
+        autoPaymentReason: "\u7531\u4E8E\u6388\u6743\u6216\u4F59\u989D\u5145\u8DB3\uFF0C\u7CFB\u7EDF\u5C06\u65E0\u9700\u94B1\u5305\u786E\u8BA4\u81EA\u52A8\u5B8C\u6210\u652F\u4ED8\u3002",
+        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",
+        balanceLink: "\u67E5\u770B\u4F59\u989D"
+      }
     },
     customer: {
       payments: "\u652F\u4ED8\u5386\u53F2",
@@ -283,7 +308,8 @@ module.exports = (0, _flat.default)({
         select: "\u9009\u62E9\u652F\u4ED8\u65B9\u5F0F",
         submit: "\u786E\u8BA4\u53D8\u66F4",
         confirm: "\u786E\u8BA4\u53D8\u66F4\u65B9\u5F0F\u610F\u5473\u7740\u4F60\u5141\u8BB8 {payee} \u4F7F\u7528\u65B0\u7684\u652F\u4ED8\u65B9\u5F0F\u652F\u4ED8\u4F60\u7684\u672A\u6765\u8D26\u5355\u3002\u4F60\u53EF\u4EE5\u968F\u65F6\u518D\u6B21\u53D8\u66F4\u652F\u4ED8\u65B9\u5F0F\u3002",
-        completed: "\u4F60\u7684\u652F\u4ED8\u65B9\u5F0F \u5DF2\u7ECF\u66F4\u65B0\u6210\u529F\u3002\u4F60\u53EF\u4EE5\u5728\u4F60\u7684\u8D26\u6237\u4E2D\u67E5\u770B\u6B64\u652F\u4ED8\u65B9\u5F0F\u7684\u8BE6\u7EC6\u4FE1\u606F\u3002"
+        completed: "\u4F60\u7684\u652F\u4ED8\u65B9\u5F0F \u5DF2\u7ECF\u66F4\u65B0\u6210\u529F\u3002\u4F60\u53EF\u4EE5\u5728\u4F60\u7684\u8D26\u6237\u4E2D\u67E5\u770B\u6B64\u652F\u4ED8\u65B9\u5F0F\u7684\u8BE6\u7EC6\u4FE1\u606F\u3002",
+        title: "\u652F\u4ED8\u65B9\u5F0F\u53D8\u66F4"
       },
       invoice: {
         summary: "\u6458\u8981",
@@ -304,7 +330,8 @@ module.exports = (0, _flat.default)({
         next: "\u8FD8\u6CA1\u6709\u8D26\u5355\uFF0C\u4E0B\u6B21\u8D26\u5355\u5C06\u5728 {date} \u751F\u6210",
         invoiceNumber: "\u8D26\u5355\u7F16\u53F7",
         emptyList: "\u6CA1\u6709\u8D26\u5355",
-        noPaymentRequired: "\u65E0\u9700\u652F\u4ED8"
+        noPaymentRequired: "\u65E0\u9700\u652F\u4ED8",
+        payBatch: "\u652F\u4ED8\u6B20\u6B3E"
       },
       payment: {
         empty: "\u6CA1\u6709\u652F\u4ED8\u8BB0\u5F55",

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;