@blocklet/payment-react 1.19.18 → 1.19.19

package/lib/components/auto-topup/product-card.d.ts

@@ -0,0 +1,13 @@
+import type { TPaymentCurrency } from '@blocklet/payment-types';
+interface AutoTopupProductCardProps {
+    product: any;
+    price: any;
+    currency: TPaymentCurrency;
+    quantity: number;
+    onQuantityChange: (quantity: number) => void;
+    maxQuantity?: number;
+    minQuantity?: number;
+    creditCurrency: TPaymentCurrency;
+}
+export default function AutoTopupProductCard({ product, price, currency, quantity, onQuantityChange, maxQuantity, minQuantity, creditCurrency, }: AutoTopupProductCardProps): import("react").JSX.Element;
+export {};

package/lib/components/auto-topup/product-card.js

@@ -0,0 +1,149 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = AutoTopupProductCard;
+var _jsxRuntime = require("react/jsx-runtime");
+var _material = require("@mui/material");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _react = require("react");
+var _productCard = _interopRequireDefault(require("../../payment/product-card"));
+var _util = require("../../libs/util");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function AutoTopupProductCard({
+  product,
+  price,
+  currency,
+  quantity,
+  onQuantityChange,
+  maxQuantity = 99,
+  minQuantity = 1,
+  creditCurrency
+}) {
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const [localQuantity, setLocalQuantity] = (0, _react.useState)(quantity);
+  const localQuantityNum = Number(localQuantity) || 0;
+  const handleQuantityChange = newQuantity => {
+    if (!newQuantity) {
+      setLocalQuantity(void 0);
+      return;
+    }
+    if (newQuantity >= minQuantity && newQuantity <= maxQuantity) {
+      setLocalQuantity(newQuantity);
+      onQuantityChange(newQuantity);
+    }
+  };
+  const handleQuantityInputChange = event => {
+    const value = parseInt(event.target.value || "0", 10);
+    if (!Number.isNaN(value)) {
+      handleQuantityChange(value);
+    }
+  };
+  const creditUnitAmount = Number(price.metadata?.credit_config?.credit_amount || 0);
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Card, {
+    variant: "outlined",
+    sx: {
+      p: 2
+    },
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+      direction: "row",
+      spacing: 2,
+      sx: {
+        flexDirection: {
+          xs: "column",
+          sm: "row"
+        },
+        alignItems: {
+          xs: "flex-start",
+          sm: "center"
+        },
+        justifyContent: {
+          xs: "flex-start",
+          sm: "space-between"
+        }
+      },
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
+        direction: "row",
+        spacing: 2,
+        sx: {
+          alignItems: "center",
+          flex: 1
+        },
+        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_productCard.default, {
+          name: product?.name || "",
+          description: t("payment.autoTopup.creditsIncluded", {
+            name: creditCurrency?.name,
+            num: (0, _util.formatNumber)(creditUnitAmount * localQuantityNum)
+          }),
+          logo: product?.images?.[0],
+          size: 40
+        })
+      }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        direction: "row",
+        spacing: 1,
+        sx: {
+          alignItems: "center",
+          alignSelf: {
+            xs: "flex-end",
+            sm: "center"
+          }
+        },
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+          variant: "body2",
+          sx: {
+            color: "text.secondary",
+            minWidth: "fit-content"
+          },
+          children: [t("common.quantity"), ":"]
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TextField, {
+          size: "small",
+          value: localQuantity,
+          onChange: handleQuantityInputChange,
+          type: "number",
+          sx: {
+            "& .MuiInputBase-root": {
+              height: 32
+            }
+          },
+          slotProps: {
+            htmlInput: {
+              min: 0,
+              max: maxQuantity,
+              style: {
+                textAlign: "center",
+                padding: "4px 8px"
+              }
+            }
+          }
+        })]
+      })]
+    }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+      direction: "row",
+      sx: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        mt: 2,
+        pt: 2,
+        borderTop: "1px solid",
+        borderColor: "divider"
+      },
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        variant: "body2",
+        sx: {
+          color: "text.secondary"
+        },
+        children: t("payment.autoTopup.rechargeAmount")
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        variant: "h6",
+        sx: {
+          fontWeight: 600,
+          color: "text.primary"
+        },
+        children: (0, _util.formatPrice)(price, currency, product?.unit_label, localQuantity, true)
+      })]
+    })]
+  });
+}

package/lib/components/collapse.d.ts

@@ -0,0 +1,13 @@
+type Props = {
+    trigger: string | ((expanded: boolean) => React.ReactNode) | React.ReactNode;
+    children?: React.ReactNode;
+    expanded?: boolean;
+    addons?: React.ReactNode;
+    style?: Record<string, any>;
+    value?: string;
+    onChange?: (value: string, expanded: boolean) => void;
+    lazy?: boolean;
+    card?: boolean;
+};
+export default function IconCollapse(rawProps: Props): import("react").JSX.Element;
+export {};

package/lib/components/collapse.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = IconCollapse;
+var _jsxRuntime = require("react/jsx-runtime");
+var _iconsMaterial = require("@mui/icons-material");
+var _material = require("@mui/material");
+var _react = require("react");
+function IconCollapse(rawProps) {
+  const props = Object.assign({
+    value: "",
+    onChange: () => {},
+    children: null,
+    expanded: false,
+    addons: null,
+    style: {},
+    lazy: true,
+    card: false
+  }, rawProps);
+  const [expanded, setExpanded] = (0, _react.useState)(props.expanded || false);
+  const toggleExpanded = () => {
+    const newExpanded = !expanded;
+    setExpanded(newExpanded);
+  };
+  (0, _react.useEffect)(() => {
+    setExpanded(props.expanded || false);
+  }, [props.expanded]);
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+      direction: "row",
+      onClick: e => {
+        e.stopPropagation();
+        props.onChange?.(props.value || "", !expanded);
+        toggleExpanded();
+      },
+      sx: {
+        alignItems: "center",
+        justifyContent: "space-between",
+        width: 1,
+        cursor: "pointer",
+        fontWeight: 500,
+        color: "text.primary",
+        "& :hover": {
+          color: "primary.main"
+        },
+        ...(props.card && {
+          borderRadius: 1,
+          padding: 1,
+          pl: 2,
+          backgroundColor: "grey.100"
+        }),
+        ...props.style
+      },
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+        children: typeof props.trigger === "function" ? props.trigger(expanded) : props.trigger
+      }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        direction: "row",
+        spacing: 2,
+        sx: {
+          alignItems: "center"
+        },
+        children: [props.addons, " ", expanded ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.ExpandLessOutlined, {}) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.ExpandMoreOutlined, {})]
+      })]
+    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Collapse, {
+      in: expanded,
+      sx: {
+        width: "100%"
+      },
+      children: expanded || props.lazy ? props.children : null
+    })]
+  });
+}

package/lib/components/input.d.ts

@@ -11,8 +11,9 @@ type InputProps = TextFieldProps & {
     required?: boolean;
     tooltip?: ReactNode | string;
     description?: ReactNode | string;
+    layout?: 'vertical' | 'horizontal';
 };
-export default function FormInput({ ref, name, label, placeholder, rules, errorPosition, wrapperStyle, inputProps, required, tooltip, description, ...rest }: InputProps & {
+export default function FormInput({ ref, name, label, placeholder, rules, errorPosition, wrapperStyle, inputProps, required, tooltip, description, layout, slotProps, ...rest }: InputProps & {
     ref?: React.RefObject<HTMLInputElement | null>;
     inputProps?: TextFieldProps['inputProps'];
 }): JSX.Element;

package/lib/components/input.js

@@ -35,51 +35,93 @@ function FormInput({
   required = false,
   tooltip = "",
   description = "",
+  layout = "vertical",
+  slotProps,
   ...rest
 }) {
   const {
     control,
     formState
   } = (0, _reactHookForm.useFormContext)();
+  const theme = (0, _material.useTheme)();
+  const isMobile = (0, _material.useMediaQuery)(theme.breakpoints.down("sm"));
   const inputRef = (0, _react.useRef)(null);
   (0, _react.useImperativeHandle)(ref, () => {
     return inputRef.current;
   });
   const error = (0, _get.default)(formState.errors, name)?.message;
+  const isHorizontal = layout === "horizontal" && !isMobile;
+  const mergedSlotProps = {
+    htmlInput: {
+      ...inputProps,
+      ...slotProps?.htmlInput
+    },
+    input: Object.assign(rest.InputProps || {}, slotProps?.input || {}, errorPosition === "right" && error ? {
+      endAdornment: /* @__PURE__ */(0, _jsxRuntime.jsx)(FormInputError, {
+        error
+      })
+    } : {})
+  };
+  const renderLabel = () => {
+    if (!label) return null;
+    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_label.default, {
+      required,
+      tooltip,
+      description,
+      boxSx: isHorizontal ? {
+        width: "fit-content",
+        whiteSpace: "nowrap",
+        minWidth: "fit-content"
+      } : void 0,
+      children: label
+    });
+  };
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
     name,
     control,
     rules,
     render: ({
       field
-    }) => /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+    }) => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
       sx: {
         width: "100%",
         ...wrapperStyle
       },
-      children: [!!label && /* @__PURE__ */(0, _jsxRuntime.jsx)(_label.default, {
-        required,
-        tooltip,
-        description,
-        children: label
-      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TextField, {
-        fullWidth: true,
-        error: !!(0, _get.default)(formState.errors, name),
-        helperText: errorPosition === "bottom" && error ? error : "",
-        placeholder,
-        size: "small",
-        ...field,
-        ...rest,
-        inputRef,
-        slotProps: {
-          htmlInput: inputProps,
-          input: Object.assign(rest.InputProps || {}, errorPosition === "right" && error ? {
-            endAdornment: /* @__PURE__ */(0, _jsxRuntime.jsx)(FormInputError, {
-              error
-            })
-          } : {})
-        }
-      })]
+      children: isHorizontal ? /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        direction: "row",
+        spacing: 2,
+        sx: {
+          alignItems: "center",
+          justifyContent: "space-between"
+        },
+        children: [renderLabel(), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TextField, {
+          fullWidth: false,
+          error: !!error,
+          helperText: errorPosition === "bottom" && error ? error : "",
+          placeholder,
+          size: "small",
+          ...field,
+          ...rest,
+          inputRef,
+          slotProps: mergedSlotProps,
+          sx: {
+            flex: 1,
+            ...rest.sx
+          }
+        })]
+      }) : /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [renderLabel(), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TextField, {
+          fullWidth: true,
+          error: !!error,
+          helperText: errorPosition === "bottom" && error ? error : "",
+          placeholder,
+          size: "small",
+          ...field,
+          ...rest,
+          inputRef,
+          slotProps: mergedSlotProps
+        })]
+      })
     })
   });
 }

package/lib/components/label.d.ts

@@ -1,7 +1,8 @@
 import type { FormLabelProps } from '@mui/material';
 import type { ReactNode } from 'react';
-export default function CustomFormLabel({ children, required, tooltip, description, ...props }: FormLabelProps & {
+export default function CustomFormLabel({ children, required, tooltip, description, boxSx, ...props }: FormLabelProps & {
     required?: boolean;
     tooltip?: ReactNode | string;
     description?: ReactNode | string;
+    boxSx?: React.CSSProperties;
 }): import("react").JSX.Element;

package/lib/components/label.js

@@ -12,12 +12,14 @@ function CustomFormLabel({
   required = false,
   tooltip = "",
   description = "",
+  boxSx = {},
   ...props
 }) {
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
     sx: {
       mb: 1,
-      width: "100%"
+      width: "100%",
+      ...boxSx
     },
     children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.FormLabel, {
       ...props,

package/lib/index.d.ts

@@ -36,6 +36,9 @@ import PaymentBeneficiaries from './components/payment-beneficiaries';
 import LoadingButton from './components/loading-button';
 import ResumeSubscription from './components/resume-subscription';
 import DateRangePicker from './components/date-range-picker';
+import AutoTopupModal from './components/auto-topup/modal';
+import AutoTopup from './components/auto-topup';
+import Collapse from './components/collapse';
 export { PaymentThemeProvider } from './theme';
 export * from './libs/util';
 export * from './libs/connect';
@@ -50,4 +53,4 @@ export * from './hooks/scroll';
 export * from './hooks/keyboard';
 export * from './libs/validator';
 export { translations, createTranslator } from './locales';
-export { createLazyComponent, api, dayjs, FormInput, FormLabel, 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, ResumeSubscription, CreditGrantsList, CreditTransactionsList, DateRangePicker, CreditStatusChip, };
+export { createLazyComponent, api, dayjs, FormInput, FormLabel, 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, ResumeSubscription, CreditGrantsList, CreditTransactionsList, DateRangePicker, CreditStatusChip, AutoTopupModal, AutoTopup, Collapse, };

package/lib/index.js

@@ -44,6 +44,9 @@ var _exportNames = {
   LoadingButton: true,
   ResumeSubscription: true,
   DateRangePicker: true,
+  AutoTopupModal: true,
+  AutoTopup: true,
+  Collapse: true,
   PaymentThemeProvider: true,
   translations: true,
   createTranslator: true
@@ -60,6 +63,18 @@ Object.defineProperty(exports, "Amount", {
     return _amount.default;
   }
 });
+Object.defineProperty(exports, "AutoTopup", {
+  enumerable: true,
+  get: function () {
+    return _autoTopup.default;
+  }
+});
+Object.defineProperty(exports, "AutoTopupModal", {
+  enumerable: true,
+  get: function () {
+    return _modal.default;
+  }
+});
 Object.defineProperty(exports, "CheckoutDonate", {
   enumerable: true,
   get: function () {
@@ -78,6 +93,12 @@ Object.defineProperty(exports, "CheckoutTable", {
     return _table.default;
   }
 });
+Object.defineProperty(exports, "Collapse", {
+  enumerable: true,
+  get: function () {
+    return _collapse.default;
+  }
+});
 Object.defineProperty(exports, "ConfirmDialog", {
   enumerable: true,
   get: function () {
@@ -344,6 +365,9 @@ var _paymentBeneficiaries = _interopRequireDefault(require("./components/payment
 var _loadingButton = _interopRequireDefault(require("./components/loading-button"));
 var _resumeSubscription = _interopRequireDefault(require("./components/resume-subscription"));
 var _dateRangePicker = _interopRequireDefault(require("./components/date-range-picker"));
+var _modal = _interopRequireDefault(require("./components/auto-topup/modal"));
+var _autoTopup = _interopRequireDefault(require("./components/auto-topup"));
+var _collapse = _interopRequireDefault(require("./components/collapse"));
 var _theme = require("./theme");
 var _util = require("./libs/util");
 Object.keys(_util).forEach(function (key) {

package/lib/libs/util.js

@@ -1151,7 +1151,8 @@ function getInvoiceDescriptionAndReason(invoice, locale = "en") {
     return_stake: (0, _locales.t)("payment.invoice.reason.returnStake", locale),
     recharge: (0, _locales.t)("payment.invoice.reason.recharge", locale),
     stake_overdraft_protection: (0, _locales.t)("payment.invoice.reason.stake", locale),
-    overdraft_protection: (0, _locales.t)("payment.invoice.reason.fee", locale)
+    overdraft_protection: (0, _locales.t)("payment.invoice.reason.fee", locale),
+    auto_recharge: (0, _locales.t)("payment.invoice.reason.recharge", locale)
   };
   let invoiceType = (0, _locales.t)("payment.invoice.reason.payment", locale);
   if (reason.includes("stake") || reason.includes("recharge") || reason === "overdraft_protection") {

package/lib/locales/en.js

@@ -36,6 +36,8 @@ module.exports = (0, _flat.default)({
     removed: "Resource removed",
     confirm: "Confirm",
     clear: "Clear",
+    show: "Show",
+    hide: "Hide",
     selectTimeRange: "Select time range",
     startDate: "Start date",
     endDate: "End date",
@@ -260,6 +262,60 @@ module.exports = (0, _flat.default)({
         }
       }
     },
+    autoTopup: {
+      title: "Auto Top-Up",
+      enableLabel: "Auto Top-Up",
+      purchaseConfig: "Credit Purchase Configuration",
+      triggerThreshold: "When credits are below",
+      thresholdPlaceholder: "Enter threshold amount",
+      thresholdDescription: "Credits remaining to trigger auto top-up",
+      thresholdMinError: "Threshold must be greater than 0",
+      thresholdFormatError: "Please enter a valid number",
+      creditsIncluded: "{num} {name} included",
+      purchaseBelow: "Purchase this package",
+      perPackage: "per package",
+      quantity: "Quantity",
+      selectPaymentMethod: "Select payment method",
+      paymentInformation: "Payment Information",
+      saveConfiguration: "Save Configuration",
+      saveSuccess: "Auto top-up configuration saved successfully",
+      disableSuccess: "Auto top-up disabled successfully",
+      authorizationRequired: "Payment authorization is required to complete the setup",
+      cryptoAuthorizationNote: "You will need to authorize payments from your wallet to enable automatic top-ups",
+      tip: "With auto top-up enabled, the system automatically buys the specified credit package when your balance drops below the threshold.",
+      authTitle: "Auto Top-Up Authorization",
+      authTip: "Please complete the authorization process to enable automatic top-up",
+      rechargeAmount: "Top-up Amount per Time",
+      currentPaymentMethod: "Current Payment Method",
+      changePaymentMethod: "Change Payment Method",
+      keepCurrent: "Keep Current",
+      changePaymentMethodTip: "You will be redirected to set up a new payment method when saving.",
+      noPaymentMethodSetup: "No payment method configured. Please set up a payment method first.",
+      addFunds: "Add Funds",
+      advanced: "Advanced Options",
+      enabled: "Enabled",
+      disabled: "Disabled",
+      notConfigured: "Auto Top-Up not configured",
+      setup: "Enable Auto Top-Up",
+      ruleDisplay: "When balance < {threshold}, top-up {amount} to get {credits} credits",
+      activeDescription: "Auto top-up is enabled. When Credits drop below {threshold}, the system will automatically purchase {credits} Credits for {amount}",
+      activeDescriptionWithCredits: "Auto top-up is enabled. When Credits drop below {threshold}, the system will automatically purchase {credits}.",
+      purchaseAmount: "Purchase Amount",
+      paymentMethod: "Payment Method",
+      walletBalance: "Wallet Balance",
+      paymentAddress: "Payment Address",
+      inactiveDescription: "Enable auto top-up to automatically renew when {name} are insufficient, effectively avoiding service interruptions.",
+      showDetails: "Show Method",
+      hideDetails: "Hide Method",
+      dailyLimits: {
+        maxAmount: "Daily Top-up Amount Limit",
+        maxAmountPlaceholder: "0 means unlimited",
+        maxAmountDescription: "The maximum amount of top-up you can make each day, 0 means unlimited",
+        maxAttempts: "Daily Top-up Attempts Limit",
+        maxAttemptsPlaceholder: "0 means unlimited",
+        maxAttemptsDescription: "The maximum number of top-up attempts you can make each day, 0 means unlimited"
+      }
+    },
     customer: {
       payments: "Payment History",
       invoices: "Invoice History",

package/lib/locales/zh.js

@@ -39,6 +39,8 @@ module.exports = (0, _flat.default)({
     confirm: "\u786E\u8BA4",
     cancel: "\u53D6\u6D88",
     clear: "\u6E05\u7A7A",
+    show: "\u663E\u793A",
+    hide: "\u9690\u85CF",
     selectTimeRange: "\u9009\u62E9\u65F6\u95F4\u8303\u56F4",
     startDate: "\u5F00\u59CB\u65E5\u671F",
     endDate: "\u7ED3\u675F\u65E5\u671F",
@@ -260,6 +262,60 @@ module.exports = (0, _flat.default)({
         }
       }
     },
+    autoTopup: {
+      title: "\u81EA\u52A8\u5145\u503C",
+      enableLabel: "\u81EA\u52A8\u5145\u503C",
+      purchaseConfig: "\u8D2D\u4E70\u914D\u7F6E",
+      triggerThreshold: "\u5F53\u989D\u5EA6\u4F4E\u4E8E",
+      thresholdPlaceholder: "\u8F93\u5165\u89E6\u53D1\u9608\u503C",
+      thresholdDescription: "\u89E6\u53D1\u81EA\u52A8\u5145\u503C\u7684\u5269\u4F59\u989D\u5EA6",
+      thresholdMinError: "\u9608\u503C\u5FC5\u987B\u5927\u4E8E0",
+      thresholdFormatError: "\u8BF7\u8F93\u5165\u6709\u6548\u6570\u5B57",
+      creditsIncluded: "\u5305\u542B {num} {name}",
+      purchaseBelow: "\u8D2D\u4E70\u6B64\u5957\u9910",
+      perPackage: "\u6BCF\u5305",
+      quantity: "\u6570\u91CF",
+      selectPaymentMethod: "\u9009\u62E9\u652F\u4ED8\u65B9\u5F0F",
+      paymentInformation: "\u652F\u4ED8\u4FE1\u606F",
+      saveConfiguration: "\u4FDD\u5B58\u914D\u7F6E",
+      saveSuccess: "\u81EA\u52A8\u5145\u503C\u914D\u7F6E\u4FDD\u5B58\u6210\u529F",
+      disableSuccess: "\u5DF2\u5173\u95ED\u81EA\u52A8\u5145\u503C",
+      stripeSetupRequired: "\u9700\u8981\u4FE1\u7528\u5361\u6388\u6743\u4EE5\u8FDB\u884C\u81EA\u52A8\u652F\u4ED8",
+      cryptoAuthorizationNote: "\u60A8\u9700\u8981\u4ECE\u94B1\u5305\u6388\u6743\u652F\u4ED8\u4EE5\u542F\u7528\u81EA\u52A8\u5145\u503C",
+      tip: "\u542F\u7528\u81EA\u52A8\u5145\u503C\u540E\uFF0C\u5F53\u60A8\u7684\u989D\u5EA6\u4F4E\u4E8E\u9608\u503C\u65F6\uFF0C\u7CFB\u7EDF\u5C06\u81EA\u52A8\u8D2D\u4E70\u6307\u5B9A\u6570\u91CF\u7684\u989D\u5EA6\u5957\u9910\u3002",
+      authTitle: "\u81EA\u52A8\u5145\u503C\u6388\u6743",
+      authTip: "\u8BF7\u5B8C\u6210\u6388\u6743\u6D41\u7A0B\u4EE5\u542F\u7528\u81EA\u52A8\u5145\u503C",
+      rechargeAmount: "\u6BCF\u6B21\u5145\u503C\u91D1\u989D",
+      currentPaymentMethod: "\u5F53\u524D\u652F\u4ED8\u65B9\u5F0F",
+      changePaymentMethod: "\u66F4\u6362\u652F\u4ED8\u65B9\u5F0F",
+      keepCurrent: "\u4FDD\u6301\u5F53\u524D",
+      changePaymentMethodTip: "\u4FDD\u5B58\u65F6\u5C06\u5F15\u5BFC\u60A8\u8BBE\u7F6E\u65B0\u7684\u652F\u4ED8\u65B9\u5F0F\u3002",
+      noPaymentMethodSetup: "\u672A\u914D\u7F6E\u652F\u4ED8\u65B9\u5F0F\uFF0C\u8BF7\u5148\u8BBE\u7F6E\u652F\u4ED8\u65B9\u5F0F\u3002",
+      addFunds: "\u5145\u503C",
+      advanced: "\u9AD8\u7EA7\u9009\u9879",
+      enabled: "\u5DF2\u542F\u7528",
+      disabled: "\u5DF2\u7981\u7528",
+      notConfigured: "\u5C1A\u672A\u914D\u7F6E\u81EA\u52A8\u5145\u503C",
+      setup: "\u53BB\u542F\u7528",
+      ruleDisplay: "\u989D\u5EA6\u4F4E\u4E8E{threshold}\u65F6\uFF0C\u5145\u503C{amount}\u53EF\u83B7\u5F97{credits}\u989D\u5EA6",
+      activeDescription: "\u81EA\u52A8\u5145\u503C\u5DF2\u542F\u7528\uFF0C\u5F53 Credits \u4F4E\u4E8E {threshold} \u65F6\uFF0C\u7CFB\u7EDF\u4F1A\u81EA\u52A8\u5145\u503C\u8D2D\u4E70 {credits} Credits\uFF0C\u652F\u4ED8\u91D1\u989D\u4E3A {amount}",
+      activeDescriptionWithCredits: "\u81EA\u52A8\u5145\u503C\u5DF2\u542F\u7528\uFF0C\u5F53 Credits \u4F4E\u4E8E {threshold} \u65F6\uFF0C\u7CFB\u7EDF\u4F1A\u81EA\u52A8\u8D2D\u4E70 {credits} \u989D\u5EA6\u3002",
+      purchaseAmount: "\u8D2D\u4E70\u6240\u9700\u91D1\u989D",
+      paymentMethod: "\u652F\u4ED8\u65B9\u5F0F",
+      walletBalance: "\u94B1\u5305\u4F59\u989D",
+      paymentAddress: "\u652F\u4ED8\u5730\u5740",
+      inactiveDescription: "\u5F00\u542F\u81EA\u52A8\u5145\u503C\uFF0C\u5373\u53EF\u5728 {name} \u4E0D\u8DB3\u65F6\u81EA\u52A8\u7EED\u8D39\uFF0C\u6709\u6548\u907F\u514D\u670D\u52A1\u4E2D\u65AD\u3002",
+      showDetails: "\u5C55\u5F00\u652F\u4ED8\u4FE1\u606F",
+      hideDetails: "\u6536\u8D77",
+      dailyLimits: {
+        maxAmount: "\u6BCF\u65E5\u5145\u503C\u91D1\u989D\u4E0A\u9650",
+        maxAmountPlaceholder: "0\u8868\u793A\u65E0\u9650\u5236",
+        maxAmountDescription: "\u6BCF\u65E5\u53EF\u5145\u503C\u7684\u6700\u5927\u603B\u91D1\u989D\uFF0C0 \u8868\u793A\u65E0\u9650\u5236",
+        maxAttempts: "\u6BCF\u65E5\u5145\u503C\u6B21\u6570\u4E0A\u9650",
+        maxAttemptsPlaceholder: "0\u8868\u793A\u65E0\u9650\u5236",
+        maxAttemptsDescription: "\u6BCF\u65E5\u53EF\u5145\u503C\u7684\u6700\u5927\u6B21\u6570\uFF0C0 \u8868\u793A\u65E0\u9650\u5236"
+      }
+    },
     customer: {
       payments: "\u652F\u4ED8\u5386\u53F2",
       invoices: "\u8D26\u5355\u5386\u53F2",

package/lib/payment/form/index.js

@@ -136,6 +136,7 @@ function PaymentForm({
     trigger
   } = (0, _reactHookForm.useFormContext)();
   const errorRef = (0, _react.useRef)(null);
+  const processingRef = (0, _react.useRef)(false);
   const quantityInventoryStatus = (0, _react.useMemo)(() => {
     let status = true;
     for (const item of checkoutSession.line_items) {
@@ -287,6 +288,10 @@ function PaymentForm({
     return true;
   }, [session?.user, method, checkoutSession]);
   const handleConnected = async () => {
+    if (processingRef.current) {
+      return;
+    }
+    processingRef.current = true;
     setState({
       paying: true
     });
@@ -305,6 +310,7 @@ function PaymentForm({
       setState({
         paying: false
       });
+      processingRef.current = false;
     }
   };
   (0, _react.useEffect)(() => {