@blocklet/payment-react 1.18.56 → 1.19.1

package/lib/locales/zh.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 
 var _flat = _interopRequireDefault(require("flat"));
 var _constant = require("../libs/constant");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 module.exports = (0, _flat.default)({
   common: {
     id: "ID",
@@ -38,6 +38,10 @@ module.exports = (0, _flat.default)({
     change: "\u66F4\u6362",
     confirm: "\u786E\u8BA4",
     cancel: "\u53D6\u6D88",
+    clear: "\u6E05\u7A7A",
+    selectTimeRange: "\u9009\u62E9\u65F6\u95F4\u8303\u56F4",
+    startDate: "\u5F00\u59CB\u65E5\u671F",
+    endDate: "\u7ED3\u675F\u65E5\u671F",
     close: "\u5173\u95ED",
     back: "\u8FD4\u56DE",
     every: "\u6BCF",
@@ -107,7 +111,8 @@ module.exports = (0, _flat.default)({
       scan: "\u4F7F\u7528\u4EE5\u4E0B\u65B9\u5F0F\u5B8C\u6210\u672C\u6B21{action}",
       confirm: "\u786E\u8BA4",
       cancel: "\u53D6\u6D88"
-    }
+    },
+    paymentMethod: "\u652F\u4ED8\u65B9\u5F0F"
   },
   payment: {
     checkout: {
@@ -219,6 +224,11 @@ module.exports = (0, _flat.default)({
         add: "\u6DFB\u52A0\u5230\u8BA2\u5355",
         remove: "\u4ECE\u8BA2\u5355\u79FB\u9664"
       },
+      credit: {
+        oneTimeInfo: "\u4ED8\u6B3E\u5B8C\u6210\u540E\u60A8\u5C06\u83B7\u5F97 {amount} {symbol} \u989D\u5EA6",
+        recurringInfo: "\u60A8\u5C06{period}\u83B7\u5F97 {amount} {symbol} \u989D\u5EA6",
+        expiresIn: "\u989D\u5EA6\u6709\u6548\u671F\u4E3A {duration} {unit}"
+      },
       emptyItems: {
         title: "\u6CA1\u6709\u4EFB\u4F55\u8D2D\u4E70\u9879\u76EE",
         description: "\u53EF\u80FD\u8FD9\u4E2A\u4ED8\u6B3E\u94FE\u63A5\u6CA1\u6709\u6B63\u786E\u914D\u7F6E"
@@ -239,7 +249,15 @@ module.exports = (0, _flat.default)({
         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"
+        balanceLink: "\u67E5\u770B\u4F59\u989D",
+        credit: {
+          title: "\u786E\u8BA4\u989D\u5EA6\u652F\u4ED8",
+          availableAmount: "\u53EF\u7528\u989D\u5EA6\uFF1A{amount}",
+          confirmMessage: "\u60A8\u5C06\u4F7F\u7528 {amount} \u989D\u5EA6\u6765\u8BA2\u9605\u6B64\u670D\u52A1\u3002",
+          meteringSubscriptionMessage: "\u6B64\u8BA2\u9605\u670D\u52A1\u5C06\u6839\u636E\u5B9E\u9645\u4F7F\u7528\u60C5\u51B5\u5B9E\u65F6\u6263\u9664\u989D\u5EA6\u3002\u60A8\u5F53\u524D\u53EF\u7528\u989D\u5EA6\u4E3A {available}\uFF0C\u786E\u8BA4\u662F\u5426\u7EE7\u7EED\uFF1F",
+          insufficientTitle: "\u989D\u5EA6\u4E0D\u8DB3",
+          insufficientMessage: "\u6B64\u8BA2\u9605\u670D\u52A1\u5C06\u6839\u636E\u5B9E\u9645\u4F7F\u7528\u60C5\u51B5\u5B9E\u65F6\u6263\u9664\u989D\u5EA6\u3002\u60A8\u5F53\u524D\u53EF\u7528\u989D\u5EA6\u4E0D\u8DB3\uFF0C\u8BF7\u5148\u5145\u503C\u989D\u5EA6\u3002"
+        }
       }
     },
     customer: {

package/lib/payment/amount.d.ts

@@ -2,10 +2,5 @@ import type { TypographyProps } from '@mui/material';
 type Props = {
     amount: string;
 } & TypographyProps;
-declare function PaymentAmount({ amount, sx }: Props): import("react").JSX.Element;
-declare namespace PaymentAmount {
-    var defaultProps: {
-        sx: {};
-    };
-}
-export default PaymentAmount;
+export default function PaymentAmount({ amount, sx }: Props): import("react").JSX.Element;
+export {};

package/lib/payment/amount.js

@@ -8,7 +8,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _material = require("@mui/material");
 function PaymentAmount({
   amount,
-  sx
+  sx = {}
 }) {
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
     component: "div",
@@ -22,8 +22,4 @@ function PaymentAmount({
     },
     children: amount
   });
-}
-PaymentAmount.defaultProps = {
-  // eslint-disable-next-line react/default-props-match-prop-types
-  sx: {}
-};
+}

package/lib/payment/donation-form.d.ts

@@ -8,17 +8,9 @@ type Props = CheckoutContext & CheckoutCallbacks & {
     formRender?: Record<string, any>;
     id: string;
 };
-declare function DonationForm({ checkoutSession, paymentMethods, paymentIntent, paymentLink, customer, completed, error, mode, onPaid, onError, onChange, goBack, action, showCheckoutSummary, formRender, id, }: Props): import("react").JSX.Element;
-declare namespace DonationForm {
-    var defaultProps: {
-        completed: boolean;
-        error: null;
-        showCheckoutSummary: boolean;
-        formRender: {};
-    };
-}
-export default DonationForm;
+export default function DonationForm({ checkoutSession, paymentMethods, paymentIntent, paymentLink, customer, completed, error, mode, onPaid, onError, onChange, goBack, action, showCheckoutSummary, formRender, id, }: Props): import("react").JSX.Element;
 type RootProps = {
     mode: LiteralUnion<'standalone' | 'inline' | 'popup', string>;
 } & BoxProps;
 export declare const Root: React.FC<RootProps>;
+export {};

package/lib/payment/donation-form.js

@@ -29,31 +29,26 @@ var _confirm = _interopRequireDefault(require("../components/confirm"));
 var _paymentBeneficiaries = _interopRequireDefault(require("../components/payment-beneficiaries"));
 var _donation = _interopRequireDefault(require("./skeleton/donation"));
 var _phoneValidator = require("../libs/phone-validator");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const getBenefits = async (id, url) => {
   const {
     data
   } = await _api.default.get(`/api/payment-links/${id}/benefits?${url ? `url=${url}` : ""}`);
   return data;
 };
-PaymentInner.defaultProps = {
-  completed: false,
-  showCheckoutSummary: true,
-  formRender: {}
-};
 function PaymentInner({
   checkoutSession,
   paymentMethods,
   paymentLink,
   paymentIntent,
   customer,
-  completed,
+  completed = false,
   mode,
   onPaid,
   onError,
   onChange,
   action,
-  formRender,
+  formRender = {},
   benefits
 }) {
   const {
@@ -214,10 +209,12 @@ function PaymentInner({
           }
         }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
           direction: "row",
-          justifyContent: "flex-end",
-          alignItems: "center",
-          flexWrap: "wrap",
-          gap: 1,
+          sx: {
+            justifyContent: "flex-end",
+            alignItems: "center",
+            flexWrap: "wrap",
+            gap: 1
+          },
           children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
             variant: "outlined",
             size: "large",
@@ -240,9 +237,9 @@ function PaymentInner({
           },
           children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
             direction: "row",
-            justifyContent: "space-between",
-            alignItems: "center",
             sx: {
+              justifyContent: "space-between",
+              alignItems: "center",
               mb: 2
             },
             children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
@@ -299,10 +296,12 @@ function PaymentInner({
           }
         }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
           direction: "row",
-          justifyContent: "space-between",
-          alignItems: "center",
-          flexWrap: "wrap",
-          gap: 1,
+          sx: {
+            justifyContent: "space-between",
+            alignItems: "center",
+            flexWrap: "wrap",
+            gap: 1
+          },
           children: [benefits && benefits.length > 0 && (benefitsState.open ? /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
             onClick: () => setBenefitsState({
               open: false
@@ -324,13 +323,13 @@ function PaymentInner({
               }
             }), t("common.back")]
           }) : /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-            display: "flex",
-            gap: 0.5,
-            alignItems: "center",
             onClick: () => setBenefitsState({
               open: true
             }),
             sx: {
+              display: "flex",
+              gap: 0.5,
+              alignItems: "center",
               color: "text.secondary",
               cursor: "pointer",
               "& .benefits-arrow": {
@@ -360,9 +359,9 @@ function PaymentInner({
               }
             })]
           })), benefitsState.open ? null : /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-            display: "flex",
-            gap: 2,
             sx: {
+              display: "flex",
+              gap: 2,
               flex: {
                 xs: 1,
                 md: "auto"
@@ -399,20 +398,14 @@ function PaymentInner({
     })
   });
 }
-DonationForm.defaultProps = {
-  completed: false,
-  error: null,
-  showCheckoutSummary: true,
-  formRender: {}
-};
 function DonationForm({
   checkoutSession,
   paymentMethods,
   paymentIntent,
   paymentLink,
   customer,
-  completed,
-  error,
+  completed = false,
+  error = null,
   mode,
   onPaid,
   onError,
@@ -420,7 +413,7 @@ function DonationForm({
   goBack,
   action,
   showCheckoutSummary = true,
-  formRender,
+  formRender = {},
   id
 }) {
   const {
@@ -476,10 +469,12 @@ function DonationForm({
         }
       }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
         direction: "row",
-        justifyContent: "flex-end",
-        alignItems: "center",
-        flexWrap: "wrap",
-        gap: 1,
+        sx: {
+          justifyContent: "flex-end",
+          alignItems: "center",
+          flexWrap: "wrap",
+          gap: 1
+        },
         children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
           variant: "outlined",
           size: "large",
@@ -540,9 +535,9 @@ function DonationForm({
     });
   };
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-    display: "flex",
-    flexDirection: "column",
     sx: {
+      display: "flex",
+      flexDirection: "column",
       height: mode === "standalone" ? "100vh" : "auto",
       overflow: isMobileSafariEnv ? "visible" : "hidden"
     },

package/lib/payment/error.d.ts

@@ -6,11 +6,5 @@ type Props = {
     button?: string | React.ReactNode;
     mode?: ModeType;
 };
-declare function PaymentError({ title, description, button, mode }: Props): import("react").JSX.Element;
-declare namespace PaymentError {
-    var defaultProps: {
-        button: string;
-        mode: string;
-    };
-}
-export default PaymentError;
+export default function PaymentError({ title, description, button, mode }: Props): import("react").JSX.Element;
+export {};

package/lib/payment/error.js

@@ -13,6 +13,7 @@ function getHeightStyle(mode) {
         height: "100vh",
         maxHeight: "100%"
       };
+    // 独立模式下，高度为100vh
     default:
       return {
         height: "auto",
@@ -23,21 +24,22 @@ function getHeightStyle(mode) {
 function PaymentError({
   title,
   description,
-  button,
-  mode
+  button = "Back",
+  mode = "standalone"
 }) {
   const heightStyle = getHeightStyle(mode);
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
-    sx: heightStyle,
-    alignItems: "center",
-    justifyContent: "center",
+    sx: [{
+      alignItems: "center",
+      justifyContent: "center"
+    }, ...(Array.isArray(heightStyle) ? heightStyle : [heightStyle])],
     children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+      direction: "column",
       sx: {
+        alignItems: "center",
+        justifyContent: "center",
         width: "280px"
       },
-      direction: "column",
-      alignItems: "center",
-      justifyContent: "center",
       children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
         variant: "h5",
         sx: {
@@ -63,8 +65,4 @@ function PaymentError({
       }) : button]
     })
   });
-}
-PaymentError.defaultProps = {
-  button: "Back",
-  mode: "standalone"
-};
+}

package/lib/payment/footer.d.ts

@@ -1,3 +1,2 @@
-export default function CheckoutFooter({ ...props }: {
-    [x: string]: any;
-}): import("react").JSX.Element;
+import { TypographyProps } from '@mui/material';
+export default function CheckoutFooter(props: TypographyProps): import("react").JSX.Element;

package/lib/payment/footer.js

@@ -6,13 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 module.exports = CheckoutFooter;
 var _jsxRuntime = require("react/jsx-runtime");
 var _material = require("@mui/material");
-function CheckoutFooter({
-  ...props
-}) {
+function CheckoutFooter(props) {
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
-    color: "text.lighter",
-    fontSize: 12,
     ...props,
+    sx: [{
+      color: "text.lighter",
+      fontSize: 12
+    }, ...(Array.isArray(props.sx) ? props.sx : [props.sx])],
     children: ["Powered by", " ", /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
       component: "span",
       sx: {

package/lib/payment/form/addon.js

@@ -10,7 +10,7 @@ var _context = require("@arcblock/ux/lib/Locale/context");
 var _selector = _interopRequireDefault(require("@arcblock/ux/lib/Locale/selector"));
 var _material = require("@mui/material");
 var _payment = require("../../contexts/payment");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function UserButtons() {
   const {
     t
@@ -20,8 +20,10 @@ function UserButtons() {
   } = (0, _payment.usePaymentContext)();
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
     direction: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
+    sx: {
+      alignItems: "center",
+      justifyContent: "space-between"
+    },
     children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_selector.default, {
       showText: false
     }), session?.user ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_SessionManager.default, {

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

@@ -6,12 +6,5 @@ type Props = {
     fieldValidation?: Record<string, any>;
     errorPosition?: 'right' | 'bottom';
 };
-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;
+export default function AddressForm({ mode, stripe, sx, fieldValidation, errorPosition }: Props): import("react").JSX.Element | null;
+export {};

package/lib/payment/form/address.js

@@ -11,18 +11,13 @@ var _reactHookForm = require("react-hook-form");
 var _input = _interopRequireDefault(require("../../components/input"));
 var _countrySelect = _interopRequireDefault(require("../../components/country-select"));
 var _validator = require("../../libs/validator");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-AddressForm.defaultProps = {
-  sx: {},
-  fieldValidation: {},
-  errorPosition: "right"
-};
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function AddressForm({
   mode,
   stripe,
   sx = {},
-  fieldValidation,
-  errorPosition
+  fieldValidation = {},
+  errorPosition = "right"
 }) {
   const {
     t,
@@ -111,6 +106,7 @@ function AddressForm({
                     field
                   }) => /* @__PURE__ */(0, _jsxRuntime.jsx)(_countrySelect.default, {
                     ...field,
+                    ref: field.ref,
                     sx: {
                       "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
                         borderColor: "transparent"
@@ -168,6 +164,7 @@ function AddressForm({
                       field
                     }) => /* @__PURE__ */(0, _jsxRuntime.jsx)(_countrySelect.default, {
                       ...field,
+                      ref: field.ref,
                       sx: {
                         ".MuiOutlinedInput-notchedOutline": {
                           borderColor: "transparent !important"

package/lib/payment/form/currency.js

@@ -29,8 +29,8 @@ function CurrencySelector({
         className: selected ? "cko-payment-card" : "cko-payment-card-unselect",
         children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
           direction: "row",
-          alignItems: "center",
           sx: {
+            alignItems: "center",
             position: "relative"
           },
           children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
@@ -52,11 +52,11 @@ function CurrencySelector({
               },
               children: x.symbol
             }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+              gutterBottom: true,
               sx: {
+                color: "text.lighter",
                 fontSize: 14
               },
-              color: "text.lighter",
-              gutterBottom: true,
               children: x.method.name
             })]
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Radio, {

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

@@ -6,11 +6,5 @@ type PageData = CheckoutContext & CheckoutCallbacks & {
     onlyShowBtn?: boolean;
     isDonation?: boolean;
 };
-declare function PaymentForm({ checkoutSession, paymentMethods, paymentIntent, paymentLink, customer, onPaid, onError, action, onlyShowBtn, isDonation, }: PageData): import("react").JSX.Element;
-declare namespace PaymentForm {
-    var defaultProps: {
-        onlyShowBtn: boolean;
-        isDonation: boolean;
-    };
-}
-export default PaymentForm;
+export default function PaymentForm({ checkoutSession, paymentMethods, paymentIntent, paymentLink, customer, onPaid, onError, action, onlyShowBtn, isDonation, }: PageData): import("react").JSX.Element;
+export {};

package/lib/payment/form/index.js

@@ -37,7 +37,7 @@ var _overDueInvoicePayment = _interopRequireDefault(require("../../components/ov
 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 }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const waitForCheckoutComplete = async sessionId => {
   let result;
   await (0, _pWaitFor.default)(async () => {
@@ -97,10 +97,6 @@ const setUserFormValues = (userInfo, currentValues, setValue, options = {}) => {
     }
   });
 };
-PaymentForm.defaultProps = {
-  onlyShowBtn: false,
-  isDonation: false
-};
 function PaymentForm({
   checkoutSession,
   paymentMethods,
@@ -111,7 +107,7 @@ function PaymentForm({
   onError,
   // mode,
   action,
-  onlyShowBtn,
+  onlyShowBtn = false,
   isDonation = false
 }) {
   const {
@@ -158,7 +154,8 @@ function PaymentForm({
     customer,
     customerLimited: false,
     stripePaying: false,
-    fastCheckoutInfo: null
+    fastCheckoutInfo: null,
+    creditInsufficientInfo: null
   });
   const currencies = (0, _util2.flattenPaymentMethods)(paymentMethods);
   const onCheckoutComplete = (0, _ahooks.useMemoizedFn)(async ({
@@ -350,6 +347,11 @@ function PaymentForm({
       fastCheckoutInfo: null
     });
   };
+  const handleCreditInsufficientClose = () => {
+    setState({
+      creditInsufficientInfo: null
+    });
+  };
   const openConnect = () => {
     try {
       if (!["arcblock", "ethereum", "base"].includes(method.type)) {
@@ -420,7 +422,27 @@ function PaymentForm({
         customerLimited: false
       });
       if (["arcblock", "ethereum", "base"].includes(method.type)) {
-        if ((result.data.balance?.sufficient || result.data.delegation?.sufficient) && !isDonationMode && result.data.fastPayInfo) {
+        if (paymentCurrency?.type === "credit") {
+          if (result.data.creditSufficient === true) {
+            setState({
+              fastCheckoutInfo: {
+                open: true,
+                loading: false,
+                sourceType: "credit",
+                amount: result.data.fastPayInfo?.amount || "0",
+                payer: result.data.fastPayInfo?.payer,
+                availableCredit: result.data.fastPayInfo?.amount || "0",
+                balance: result.data.fastPayInfo?.token?.balance || "0"
+              }
+            });
+          } else {
+            setState({
+              creditInsufficientInfo: {
+                open: true
+              }
+            });
+          }
+        } else if ((result.data.balance?.sufficient || result.data.delegation?.sufficient) && !isDonationMode && result.data.fastPayInfo) {
           setState({
             fastCheckoutInfo: {
               open: true,
@@ -529,8 +551,12 @@ function PaymentForm({
   const FastCheckoutConfirmDialog = state.fastCheckoutInfo && /* @__PURE__ */(0, _jsxRuntime.jsx)(_confirm.default, {
     onConfirm: handleFastCheckoutConfirm,
     onCancel: handleFastCheckoutCancel,
-    title: t("payment.checkout.fastPay.title"),
-    message: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+    title: state.fastCheckoutInfo.sourceType === "credit" ? t("payment.checkout.fastPay.credit.title") : t("payment.checkout.fastPay.title"),
+    message: state.fastCheckoutInfo.sourceType === "credit" ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+      children: t("payment.checkout.fastPay.credit.meteringSubscriptionMessage", {
+        available: `${(0, _util.fromUnitToToken)(state.fastCheckoutInfo?.balance || "0", paymentCurrency?.decimal || 18).toString()} ${paymentCurrency?.symbol}`
+      })
+    }) : /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
       children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
         children: t("payment.checkout.fastPay.autoPaymentReason")
       }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Divider, {
@@ -541,12 +567,14 @@ function PaymentForm({
       }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
         spacing: 1,
         children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-          flexDirection: "row",
-          alignItems: "center",
-          justifyContent: "space-between",
+          sx: {
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "space-between"
+          },
           children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-            color: "text.primary",
             sx: {
+              color: "text.primary",
               whiteSpace: "nowrap"
             },
             children: t("payment.checkout.fastPay.payer")
@@ -579,11 +607,15 @@ function PaymentForm({
             })]
           })]
         }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-          flexDirection: "row",
-          alignItems: "center",
-          justifyContent: "space-between",
+          sx: {
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "space-between"
+          },
           children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-            color: "text.primary",
+            sx: {
+              color: "text.primary"
+            },
             children: t("payment.checkout.fastPay.amount")
           }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
             children: [(0, _util.fromUnitToToken)(state.fastCheckoutInfo.amount, paymentCurrency?.decimal || 18).toString(), " ", paymentCurrency?.symbol]
@@ -594,6 +626,15 @@ function PaymentForm({
     loading: state.fastCheckoutInfo.loading,
     color: "primary"
   });
+  const CreditInsufficientDialog = state.creditInsufficientInfo && /* @__PURE__ */(0, _jsxRuntime.jsx)(_confirm.default, {
+    onConfirm: handleCreditInsufficientClose,
+    onCancel: handleCreditInsufficientClose,
+    title: t("payment.checkout.fastPay.credit.insufficientTitle"),
+    message: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+      children: t("payment.checkout.fastPay.credit.insufficientMessage")
+    }),
+    confirm: t("common.confirm")
+  });
   if (onlyShowBtn) {
     return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
@@ -644,7 +685,7 @@ function PaymentForm({
           }),
           title: t("payment.customer.pastDue.alert.title")
         }
-      }), FastCheckoutConfirmDialog]
+      }), FastCheckoutConfirmDialog, CreditInsufficientDialog]
     });
   }
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
@@ -669,8 +710,10 @@ function PaymentForm({
           in: true,
           children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
             direction: "column",
-            alignItems: "flex-start",
             className: "cko-payment-methods",
+            sx: {
+              alignItems: "flex-start"
+            },
             children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
               direction: "row",
               sx: {
@@ -848,6 +891,6 @@ function PaymentForm({
         }),
         title: t("payment.customer.pastDue.alert.title")
       }
-    }), FastCheckoutConfirmDialog]
+    }), FastCheckoutConfirmDialog, CreditInsufficientDialog]
   });
 }