@blocklet/payment-react 1.18.16 → 1.18.17

package/es/checkout/donate.js

@@ -15,7 +15,7 @@ import {
 } from "@mui/material";
 import { useRequest, useSetState } from "ahooks";
 import omit from "lodash/omit";
-import uniqBy from "lodash/unionBy";
+import uniqBy from "lodash/uniqBy";
 import { useEffect, useRef, useState } from "react";
 import { Settings } from "@mui/icons-material";
 import api from "../libs/api.js";
@@ -111,11 +111,14 @@ export function DonateDetails({ supporters = [], currency, method }) {
                     Avatar,
                     {
                       src: getCustomerAvatar(x.customer?.did, x?.updated_at ? new Date(x.updated_at).toISOString() : "", 20),
-                      alt: x.customer?.name,
+                      alt: x.customer?.metadata?.anonymous ? "" : x.customer?.name,
                       variant: "circular",
                       sx: { width: 20, height: 20 },
                       onClick: (e) => {
                         e.stopPropagation();
+                        if (x.customer?.metadata?.anonymous) {
+                          return;
+                        }
                         if (x.customer?.did) {
                           window.open(getUserProfileLink(x.customer?.did, locale), "_blank");
                         }
@@ -135,6 +138,9 @@ export function DonateDetails({ supporters = [], currency, method }) {
                         textOverflow: "ellipsis"
                       },
                       onClick: (e) => {
+                        if (x.customer?.metadata?.anonymous) {
+                          return;
+                        }
                         e.stopPropagation();
                         if (x.customer?.did) {
                           window.open(getUserProfileLink(x.customer?.did, locale), "_blank");
@@ -175,7 +181,7 @@ function SupporterAvatar({
   showDonateDetails = false
 }) {
   const [open, setOpen] = useState(false);
-  const customers = uniqBy(supporters, "customer_did");
+  const customers = uniqBy(supporters, "customer_id");
   const customersNum = customers.length;
   if (customersNum === 0)
     return null;
@@ -186,7 +192,10 @@ function SupporterAvatar({
         max: 5,
         sx: {
           "& .MuiAvatar-root": {
-            backgroundColor: "background.paper"
+            backgroundColor: "background.paper",
+            "&.MuiAvatar-colorDefault": {
+              backgroundColor: "#bdbdbd"
+            }
           }
         },
         children: customers.slice(0, 5).map((supporter) => /* @__PURE__ */ jsx(
@@ -197,7 +206,7 @@ function SupporterAvatar({
               supporter?.updated_at ? new Date(supporter.updated_at).toISOString() : "",
               24
             ),
-            alt: supporter.customer?.name,
+            alt: supporter.customer?.metadata?.anonymous ? "" : supporter.customer?.name,
             sx: {
               width: "24px",
               height: "24px"
@@ -248,7 +257,7 @@ function SupporterAvatar({
   ] });
 }
 function SupporterTable({ supporters = [], totalAmount = "0", currency, method }) {
-  const customers = uniqBy(supporters, "customer_did");
+  const customers = uniqBy(supporters, "customer_id");
   const customersNum = customers.length;
   if (customersNum === 0)
     return null;
@@ -259,7 +268,7 @@ function SupporterTable({ supporters = [], totalAmount = "0", currency, method }
 }
 function SupporterSimple({ supporters = [], totalAmount = "0", currency, method }) {
   const { t } = useLocaleContext();
-  const customers = uniqBy(supporters, "customer_did");
+  const customers = uniqBy(supporters, "customer_id");
   const customersNum = customers.length;
   return /* @__PURE__ */ jsxs(
     Box,
@@ -281,7 +290,7 @@ function SupporterSimple({ supporters = [], totalAmount = "0", currency, method
           Avatar,
           {
             title: x.customer?.name,
-            alt: x.customer?.name,
+            alt: x.customer?.metadata?.anonymous ? "" : x.customer?.name,
             src: getCustomerAvatar(x.customer?.did, x?.updated_at ? new Date(x.updated_at).toISOString() : "", 48),
             variant: "circular",
             sx: { width: 24, height: 24 }

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

@@ -222,6 +222,12 @@ function OverdueInvoicePayment({
       }
     );
   };
+  const getMethodText = (method) => {
+    if (method.name && method.type !== "arcblock") {
+      return ` (${method.name})`;
+    }
+    return "";
+  };
   const getOverdueTitle = () => {
     if (subscriptionId && data.subscription) {
       if (summaryList.length === 1) {
@@ -229,7 +235,8 @@ function OverdueInvoicePayment({
           name: data.subscription?.description,
           count: data.invoices?.length,
           total: formatAmount(summaryList[0]?.amount, summaryList[0]?.currency?.decimal),
-          symbol: summaryList[0]?.currency?.symbol
+          symbol: summaryList[0]?.currency?.symbol,
+          method: getMethodText(summaryList[0]?.method)
         });
       }
       return t("payment.subscription.overdue.simpleTitle", {
@@ -243,7 +250,8 @@ function OverdueInvoicePayment({
           subscriptionCount: data.subscriptionCount || 0,
           count: data.invoices?.length,
           total: formatAmount(summaryList[0]?.amount, summaryList[0]?.currency?.decimal),
-          symbol: summaryList[0]?.currency?.symbol
+          symbol: summaryList[0]?.currency?.symbol,
+          method: getMethodText(summaryList[0]?.method)
         });
       }
       return t("payment.customer.overdue.simpleTitle", {
@@ -351,7 +359,8 @@ function OverdueInvoicePayment({
               children: [
                 /* @__PURE__ */ jsx(Typography, { children: t("payment.subscription.overdue.total", {
                   total: formatAmount(item?.amount, item?.currency?.decimal),
-                  currency: item?.currency?.symbol
+                  currency: item?.currency?.symbol,
+                  method: getMethodText(item?.method)
                 }) }),
                 renderPayButton(item, false, {
                   variant: "text",

package/es/history/invoice/list.d.ts

@@ -11,6 +11,7 @@ type Props = {
     action?: string;
     type?: 'list' | 'table';
     onTableDataChange?: Function;
+    relatedSubscription?: boolean;
 };
 declare function CustomerInvoiceList(props: Props): JSX.Element;
 declare namespace CustomerInvoiceList {
@@ -26,6 +27,7 @@ declare namespace CustomerInvoiceList {
         action: string;
         type: string;
         onTableDataChange: () => void;
+        relatedSubscription: boolean;
     };
 }
 export default CustomerInvoiceList;

package/es/history/invoice/list.js

@@ -72,7 +72,8 @@ const InvoiceTable = React.memo((props) => {
     include_staking,
     include_return_staking,
     include_recovered_from,
-    onTableDataChange
+    onTableDataChange,
+    relatedSubscription
   } = props;
   const listKey = "invoice-table";
   const { t, locale } = useLocaleContext();
@@ -135,6 +136,11 @@ const InvoiceTable = React.memo((props) => {
     const { link } = getInvoiceLink(invoice, action);
     handleNavigation(e, link, navigate, { target: link.external ? "_blank" : target });
   };
+  const handleRelatedSubscriptionClick = (e, invoice) => {
+    if (invoice.subscription_id) {
+      handleNavigation(e, createLink(`/customer/subscription/${invoice.subscription_id}`), navigate);
+    }
+  };
   const columns = [
     {
       label: t("common.amount"),
@@ -173,13 +179,36 @@ const InvoiceTable = React.memo((props) => {
         }
       }
     },
+    ...relatedSubscription ? [
+      {
+        label: t("common.relatedSubscription"),
+        name: "subscription",
+        options: {
+          customBodyRenderLite: (_, index) => {
+            const invoice = data?.list[index];
+            return invoice.subscription_id ? /* @__PURE__ */ jsx(
+              Box,
+              {
+                onClick: (e) => handleRelatedSubscriptionClick(e, invoice),
+                sx: { color: "text.link", cursor: "pointer" },
+                children: invoice.subscription?.description
+              }
+            ) : /* @__PURE__ */ jsx(Box, { onClick: (e) => handleLinkClick(e, invoice), sx: { ...linkStyle, color: "text.lighter" }, children: t("common.none") });
+          }
+        }
+      }
+    ] : [],
     {
       label: t("common.updatedAt"),
       name: "name",
       options: {
         customBodyRenderLite: (val, index) => {
           const invoice = data?.list[index];
-          return /* @__PURE__ */ jsx(Box, { onClick: (e) => handleLinkClick(e, invoice), sx: linkStyle, children: formatToDate(invoice.created_at, locale, "YYYY-MM-DD HH:mm:ss") });
+          return /* @__PURE__ */ jsx(Box, { onClick: (e) => handleLinkClick(e, invoice), sx: linkStyle, children: formatToDate(
+            invoice.created_at,
+            locale,
+            relatedSubscription ? "YYYY-MM-DD HH:mm" : "YYYY-MM-DD HH:mm:ss"
+          ) });
         }
       }
     },
@@ -489,7 +518,8 @@ CustomerInvoiceList.defaultProps = {
   action: "",
   type: "list",
   onTableDataChange: () => {
-  }
+  },
+  relatedSubscription: false
 };
 const Root = styled(Stack)`
   @media (max-width: ${({ theme }) => theme.breakpoints.values.md}px) {

package/es/locales/en.js

@@ -93,7 +93,8 @@ export default flat({
     saveAsDefaultPriceSuccess: "Set default price successfully",
     stakeAmount: "Stake Amount",
     slashStakeAmount: "Slash Stake Amount",
-    know: "I know"
+    know: "I know",
+    relatedSubscription: "Subscription"
   },
   payment: {
     checkout: {
@@ -316,7 +317,7 @@ export default flat({
         owner: "Subscription Owner"
       },
       overdue: {
-        title: "You have {count} due invoices for {subscriptionCount} subscriptions, totaling {total} {symbol}. Please pay immediately to avoid service disruption.",
+        title: "You have {count} due invoices for {subscriptionCount} subscriptions, totaling {total} {symbol}{method}. Please pay immediately to avoid service disruption.",
         simpleTitle: "You have {count} due invoices. Please pay now to ensure uninterrupted service.",
         empty: "Great! You have no due invoices."
       }
@@ -349,10 +350,10 @@ export default flat({
     subscription: {
       overdue: {
         simpleTitle: "There are {count} due invoices for your subscription {name}, you need to pay them to activate your subscription or before making new purchases.",
-        title: "There are {count} due invoices for your subscription {name}, the total due amount is {total} {symbol}, you need to pay them to activate your subscription or before making new purchases.",
+        title: "There are {count} due invoices for your subscription {name}, the total due amount is {total} {symbol}{method}, you need to pay them to activate your subscription or before making new purchases.",
         payNow: "Pay Now",
         notSupport: "This payment method is not supported",
-        total: "Total {total} {currency}",
+        total: "Total {total} {currency}{method}",
         view: "View Subscription Details",
         viewNow: "View Now",
         pastDue: "Past Due Invoices",

package/es/locales/zh.js

@@ -93,7 +93,8 @@ export default flat({
     saveAsDefaultPriceSuccess: "\u8BBE\u7F6E\u9ED8\u8BA4\u4EF7\u683C\u6210\u529F",
     stakeAmount: "\u8D28\u62BC\u91D1\u989D",
     slashStakeAmount: "\u7F5A\u6CA1\u91D1\u989D",
-    know: "\u6211\u77E5\u9053\u4E86"
+    know: "\u6211\u77E5\u9053\u4E86",
+    relatedSubscription: "\u8BA2\u9605"
   },
   payment: {
     checkout: {
@@ -316,7 +317,7 @@ export default flat({
         owner: "\u8BA2\u9605\u62E5\u6709\u8005"
       },
       overdue: {
-        title: "\u60A8\u6709 {count} \u5F20\u6B20\u8D39\u8D26\u5355\uFF0C\u6D89\u53CA {subscriptionCount} \u4E2A\u8BA2\u9605\uFF0C\u603B\u91D1\u989D {total} {symbol}\u3002\u8BF7\u7ACB\u5373\u652F\u4ED8\uFF0C\u4EE5\u514D\u5F71\u54CD\u60A8\u7684\u4F7F\u7528\u3002",
+        title: "\u60A8\u6709 {count} \u5F20\u6B20\u8D39\u8D26\u5355\uFF0C\u6D89\u53CA {subscriptionCount} \u4E2A\u8BA2\u9605\uFF0C\u603B\u91D1\u989D {total} {symbol}{method}\u3002\u8BF7\u7ACB\u5373\u652F\u4ED8\uFF0C\u4EE5\u514D\u5F71\u54CD\u60A8\u7684\u4F7F\u7528\u3002",
         simpleTitle: "\u60A8\u6709 {count} \u5F20\u6B20\u8D39\u8D26\u5355\uFF0C\u8BF7\u7ACB\u5373\u652F\u4ED8\uFF0C\u4EE5\u514D\u5F71\u54CD\u60A8\u7684\u4F7F\u7528\u3002",
         empty: "\u606D\u559C\uFF01\u60A8\u5F53\u524D\u6CA1\u6709\u6B20\u8D39\u8D26\u5355\u3002"
       }
@@ -348,11 +349,11 @@ export default flat({
     },
     subscription: {
       overdue: {
-        title: "\u60A8\u7684\u3010{name}\u3011\u8BA2\u9605\u5171\u6709 {count} \u5F20\u6B20\u8D39\u8D26\u5355\uFF0C\u603B\u8BA1 {total} {symbol}\uFF0C\u60A8\u9700\u8981\u652F\u4ED8\u8FD9\u4E9B\u8D26\u5355\u4EE5\u6FC0\u6D3B\u60A8\u7684\u8BA2\u9605\uFF0C\u6216\u5728\u8FDB\u884C\u65B0\u7684\u8D2D\u4E70\u4E4B\u524D\u5B8C\u6210\u652F\u4ED8\u3002",
+        title: "\u60A8\u7684\u3010{name}\u3011\u8BA2\u9605\u5171\u6709 {count} \u5F20\u6B20\u8D39\u8D26\u5355\uFF0C\u603B\u8BA1 {total} {symbol}{method}\uFF0C\u60A8\u9700\u8981\u652F\u4ED8\u8FD9\u4E9B\u8D26\u5355\u4EE5\u6FC0\u6D3B\u60A8\u7684\u8BA2\u9605\uFF0C\u6216\u5728\u8FDB\u884C\u65B0\u7684\u8D2D\u4E70\u4E4B\u524D\u5B8C\u6210\u652F\u4ED8\u3002",
         simpleTitle: "\u60A8\u7684\u3010{name}\u3011\u8BA2\u9605\u5171\u6709 {count} \u5F20\u6B20\u8D39\u8D26\u5355\uFF0C\u60A8\u9700\u8981\u652F\u4ED8\u8FD9\u4E9B\u8D26\u5355\u4EE5\u6FC0\u6D3B\u60A8\u7684\u8BA2\u9605\uFF0C\u6216\u5728\u8FDB\u884C\u65B0\u7684\u8D2D\u4E70\u4E4B\u524D\u5B8C\u6210\u652F\u4ED8\u3002",
         payNow: "\u7ACB\u5373\u652F\u4ED8",
         notSupport: "\u6682\u4E0D\u652F\u6301\u8BE5\u652F\u4ED8\u65B9\u5F0F",
-        total: "\u603B\u8BA1 {total} {currency}",
+        total: "\u603B\u8BA1 {total} {currency}{method}",
         view: "\u67E5\u770B\u8BA2\u9605\u8BE6\u60C5",
         pastDue: "\u6B20\u8D39\u8D26\u5355",
         viewNow: "\u7ACB\u5373\u67E5\u770B",

package/es/payment/donation-form.js

@@ -319,7 +319,8 @@ function PaymentInner({
                   onError,
                   mode,
                   action,
-                  onlyShowBtn: true
+                  onlyShowBtn: true,
+                  isDonation: true
                 }
               )
             ]

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

@@ -4,11 +4,13 @@ export declare const waitForCheckoutComplete: (sessionId: string) => Promise<Che
 export declare const hasDidWallet: (user: any) => any;
 type PageData = CheckoutContext & CheckoutCallbacks & {
     onlyShowBtn?: boolean;
+    isDonation?: boolean;
 };
-declare function PaymentForm({ checkoutSession, paymentMethods, paymentIntent, paymentLink, customer, onPaid, onError, action, currencyId, onlyShowBtn, }: PageData): import("react").JSX.Element;
+declare function PaymentForm({ checkoutSession, paymentMethods, paymentIntent, paymentLink, customer, onPaid, onError, action, currencyId, onlyShowBtn, isDonation, }: PageData): import("react").JSX.Element;
 declare namespace PaymentForm {
     var defaultProps: {
         onlyShowBtn: boolean;
+        isDonation: boolean;
     };
 }
 export default PaymentForm;

package/es/payment/form/index.js

@@ -54,7 +54,8 @@ export const hasDidWallet = (user) => {
   return connected.some((x) => x.provider === "wallet");
 };
 PaymentForm.defaultProps = {
-  onlyShowBtn: false
+  onlyShowBtn: false,
+  isDonation: false
 };
 export default function PaymentForm({
   checkoutSession,
@@ -67,7 +68,8 @@ export default function PaymentForm({
   // mode,
   action,
   currencyId,
-  onlyShowBtn
+  onlyShowBtn,
+  isDonation = false
 }) {
   const { t } = useLocaleContext();
   const { isMobile } = useMobile();
@@ -170,8 +172,9 @@ export default function PaymentForm({
   } else {
     buttonText = t(`payment.checkout.${checkoutSession.mode}`);
   }
-  buttonText = session?.user ? buttonText : t("payment.checkout.connect", { action: buttonText });
+  buttonText = session?.user || isDonation ? buttonText : t("payment.checkout.connect", { action: buttonText });
   const method = paymentMethods.find((x) => x.id === paymentMethod);
+  const isDonationMode = checkoutSession?.submit_type === "donate" && isDonation;
   const showForm = session?.user;
   const skipBindWallet = method.type === "stripe";
   const handleConnected = async () => {
@@ -228,7 +231,12 @@ export default function PaymentForm({
   const onFormSubmit = async (data) => {
     setState({ submitting: true });
     try {
-      const result = await api.put(`/api/checkout-sessions/${checkoutSession.id}/submit`, data);
+      let result;
+      if (isDonationMode) {
+        result = await api.put(`/api/checkout-sessions/${checkoutSession.id}/donate-submit`, data);
+      } else {
+        result = await api.put(`/api/checkout-sessions/${checkoutSession.id}/submit`, data);
+      }
       setState({
         paymentIntent: result.data.paymentIntent,
         stripeContext: result.data.stripeContext,
@@ -238,7 +246,7 @@ export default function PaymentForm({
       });
       if (["arcblock", "ethereum", "base"].includes(method.type)) {
         setState({ paying: true });
-        if (result.data.balance?.sufficient || result.data.delegation?.sufficient) {
+        if ((result.data.balance?.sufficient || result.data.delegation?.sufficient) && !isDonationMode) {
           await handleConnected();
         } else {
           connect.open({
@@ -314,6 +322,10 @@ export default function PaymentForm({
         });
       }
     } else {
+      if (isDonationMode) {
+        handleSubmit(onFormSubmit, onFormError)();
+        return;
+      }
       session?.login(() => {
         setState({ submitting: true });
         onUserLoggedIn().then(afterUserLoggedIn).catch((err) => {

package/lib/checkout/donate.js

@@ -11,7 +11,7 @@ var _context = require("@arcblock/ux/lib/Locale/context");
 var _material = require("@mui/material");
 var _ahooks = require("ahooks");
 var _omit = _interopRequireDefault(require("lodash/omit"));
-var _unionBy = _interopRequireDefault(require("lodash/unionBy"));
+var _uniqBy = _interopRequireDefault(require("lodash/uniqBy"));
 var _react = require("react");
 var _iconsMaterial = require("@mui/icons-material");
 var _api = _interopRequireDefault(require("../libs/api"));
@@ -104,7 +104,7 @@ function DonateDetails({
         },
         children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
           src: (0, _util.getCustomerAvatar)(x.customer?.did, x?.updated_at ? new Date(x.updated_at).toISOString() : "", 20),
-          alt: x.customer?.name,
+          alt: x.customer?.metadata?.anonymous ? "" : x.customer?.name,
           variant: "circular",
           sx: {
             width: 20,
@@ -112,6 +112,9 @@ function DonateDetails({
           },
           onClick: e => {
             e.stopPropagation();
+            if (x.customer?.metadata?.anonymous) {
+              return;
+            }
             if (x.customer?.did) {
               window.open((0, _util.getUserProfileLink)(x.customer?.did, locale), "_blank");
             }
@@ -126,6 +129,9 @@ function DonateDetails({
             textOverflow: "ellipsis"
           },
           onClick: e => {
+            if (x.customer?.metadata?.anonymous) {
+              return;
+            }
             e.stopPropagation();
             if (x.customer?.did) {
               window.open((0, _util.getUserProfileLink)(x.customer?.did, locale), "_blank");
@@ -172,7 +178,7 @@ function SupporterAvatar({
   showDonateDetails = false
 }) {
   const [open, setOpen] = (0, _react.useState)(false);
-  const customers = (0, _unionBy.default)(supporters, "customer_did");
+  const customers = (0, _uniqBy.default)(supporters, "customer_id");
   const customersNum = customers.length;
   if (customersNum === 0) return null;
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
@@ -183,12 +189,15 @@ function SupporterAvatar({
       max: 5,
       sx: {
         "& .MuiAvatar-root": {
-          backgroundColor: "background.paper"
+          backgroundColor: "background.paper",
+          "&.MuiAvatar-colorDefault": {
+            backgroundColor: "#bdbdbd"
+          }
         }
       },
       children: customers.slice(0, 5).map(supporter => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
         src: (0, _util.getCustomerAvatar)(supporter.customer?.did, supporter?.updated_at ? new Date(supporter.updated_at).toISOString() : "", 24),
-        alt: supporter.customer?.name,
+        alt: supporter.customer?.metadata?.anonymous ? "" : supporter.customer?.name,
         sx: {
           width: "24px",
           height: "24px"
@@ -238,7 +247,7 @@ function SupporterTable({
   currency,
   method
 }) {
-  const customers = (0, _unionBy.default)(supporters, "customer_did");
+  const customers = (0, _uniqBy.default)(supporters, "customer_id");
   const customersNum = customers.length;
   if (customersNum === 0) return null;
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
@@ -271,7 +280,7 @@ function SupporterSimple({
   const {
     t
   } = (0, _context.useLocaleContext)();
-  const customers = (0, _unionBy.default)(supporters, "customer_did");
+  const customers = (0, _uniqBy.default)(supporters, "customer_id");
   const customersNum = customers.length;
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
     display: "flex",
@@ -297,7 +306,7 @@ function SupporterSimple({
       max: 10,
       children: customers.map(x => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
         title: x.customer?.name,
-        alt: x.customer?.name,
+        alt: x.customer?.metadata?.anonymous ? "" : x.customer?.name,
         src: (0, _util.getCustomerAvatar)(x.customer?.did, x?.updated_at ? new Date(x.updated_at).toISOString() : "", 48),
         variant: "circular",
         sx: {
@@ -410,7 +419,7 @@ function CheckoutDonateInner({
     donateSettings,
     supportUpdateSettings
   } = useDonation(settings, livemode, mode);
-  const customers = (0, _unionBy.default)(supporters?.data?.supporters || [], "customer_did");
+  const customers = (0, _uniqBy.default)(supporters?.data?.supporters || [], "customer_did");
   const {
     t
   } = (0, _context.useLocaleContext)();

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

@@ -251,6 +251,12 @@ function OverdueInvoicePayment({
       children: t("payment.subscription.overdue.payNow")
     });
   };
+  const getMethodText = method => {
+    if (method.name && method.type !== "arcblock") {
+      return ` (${method.name})`;
+    }
+    return "";
+  };
   const getOverdueTitle = () => {
     if (subscriptionId && data.subscription) {
       if (summaryList.length === 1) {
@@ -258,7 +264,8 @@ function OverdueInvoicePayment({
           name: data.subscription?.description,
           count: data.invoices?.length,
           total: (0, _util.formatAmount)(summaryList[0]?.amount, summaryList[0]?.currency?.decimal),
-          symbol: summaryList[0]?.currency?.symbol
+          symbol: summaryList[0]?.currency?.symbol,
+          method: getMethodText(summaryList[0]?.method)
         });
       }
       return t("payment.subscription.overdue.simpleTitle", {
@@ -272,7 +279,8 @@ function OverdueInvoicePayment({
           subscriptionCount: data.subscriptionCount || 0,
           count: data.invoices?.length,
           total: (0, _util.formatAmount)(summaryList[0]?.amount, summaryList[0]?.currency?.decimal),
-          symbol: summaryList[0]?.currency?.symbol
+          symbol: summaryList[0]?.currency?.symbol,
+          method: getMethodText(summaryList[0]?.method)
         });
       }
       return t("payment.customer.overdue.simpleTitle", {
@@ -407,7 +415,8 @@ function OverdueInvoicePayment({
             children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
               children: t("payment.subscription.overdue.total", {
                 total: (0, _util.formatAmount)(item?.amount, item?.currency?.decimal),
-                currency: item?.currency?.symbol
+                currency: item?.currency?.symbol,
+                method: getMethodText(item?.method)
               })
             }), renderPayButton(item, false, {
               variant: "text",

package/lib/history/invoice/list.d.ts

@@ -11,6 +11,7 @@ type Props = {
     action?: string;
     type?: 'list' | 'table';
     onTableDataChange?: Function;
+    relatedSubscription?: boolean;
 };
 declare function CustomerInvoiceList(props: Props): JSX.Element;
 declare namespace CustomerInvoiceList {
@@ -26,6 +27,7 @@ declare namespace CustomerInvoiceList {
         action: string;
         type: string;
         onTableDataChange: () => void;
+        relatedSubscription: boolean;
     };
 }
 export default CustomerInvoiceList;

package/lib/history/invoice/list.js

@@ -73,7 +73,8 @@ const InvoiceTable = _react.default.memo(props => {
     include_staking,
     include_return_staking,
     include_recovered_from,
-    onTableDataChange
+    onTableDataChange,
+    relatedSubscription
   } = props;
   const listKey = "invoice-table";
   const {
@@ -141,6 +142,11 @@ const InvoiceTable = _react.default.memo(props => {
       target: link.external ? "_blank" : target
     });
   };
+  const handleRelatedSubscriptionClick = (e, invoice) => {
+    if (invoice.subscription_id) {
+      (0, _navigation.handleNavigation)(e, (0, _navigation.createLink)(`/customer/subscription/${invoice.subscription_id}`), navigate);
+    }
+  };
   const columns = [{
     label: t("common.amount"),
     name: "total",
@@ -190,7 +196,30 @@ const InvoiceTable = _react.default.memo(props => {
         });
       }
     }
-  }, {
+  }, ...(relatedSubscription ? [{
+    label: t("common.relatedSubscription"),
+    name: "subscription",
+    options: {
+      customBodyRenderLite: (_, index) => {
+        const invoice = data?.list[index];
+        return invoice.subscription_id ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          onClick: e => handleRelatedSubscriptionClick(e, invoice),
+          sx: {
+            color: "text.link",
+            cursor: "pointer"
+          },
+          children: invoice.subscription?.description
+        }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          onClick: e => handleLinkClick(e, invoice),
+          sx: {
+            ...linkStyle,
+            color: "text.lighter"
+          },
+          children: t("common.none")
+        });
+      }
+    }
+  }] : []), {
     label: t("common.updatedAt"),
     name: "name",
     options: {
@@ -199,7 +228,7 @@ const InvoiceTable = _react.default.memo(props => {
         return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
           onClick: e => handleLinkClick(e, invoice),
           sx: linkStyle,
-          children: (0, _util.formatToDate)(invoice.created_at, locale, "YYYY-MM-DD HH:mm:ss")
+          children: (0, _util.formatToDate)(invoice.created_at, locale, relatedSubscription ? "YYYY-MM-DD HH:mm" : "YYYY-MM-DD HH:mm:ss")
         });
       }
     }
@@ -651,7 +680,8 @@ CustomerInvoiceList.defaultProps = {
   target: "_self",
   action: "",
   type: "list",
-  onTableDataChange: () => {}
+  onTableDataChange: () => {},
+  relatedSubscription: false
 };
 const Root = (0, _system.styled)(_material.Stack)`
   @media (max-width: ${({

package/lib/locales/en.js

@@ -100,7 +100,8 @@ module.exports = (0, _flat.default)({
     saveAsDefaultPriceSuccess: "Set default price successfully",
     stakeAmount: "Stake Amount",
     slashStakeAmount: "Slash Stake Amount",
-    know: "I know"
+    know: "I know",
+    relatedSubscription: "Subscription"
   },
   payment: {
     checkout: {
@@ -323,7 +324,7 @@ module.exports = (0, _flat.default)({
         owner: "Subscription Owner"
       },
       overdue: {
-        title: "You have {count} due invoices for {subscriptionCount} subscriptions, totaling {total} {symbol}. Please pay immediately to avoid service disruption.",
+        title: "You have {count} due invoices for {subscriptionCount} subscriptions, totaling {total} {symbol}{method}. Please pay immediately to avoid service disruption.",
         simpleTitle: "You have {count} due invoices. Please pay now to ensure uninterrupted service.",
         empty: "Great! You have no due invoices."
       }
@@ -356,10 +357,10 @@ module.exports = (0, _flat.default)({
     subscription: {
       overdue: {
         simpleTitle: "There are {count} due invoices for your subscription {name}, you need to pay them to activate your subscription or before making new purchases.",
-        title: "There are {count} due invoices for your subscription {name}, the total due amount is {total} {symbol}, you need to pay them to activate your subscription or before making new purchases.",
+        title: "There are {count} due invoices for your subscription {name}, the total due amount is {total} {symbol}{method}, you need to pay them to activate your subscription or before making new purchases.",
         payNow: "Pay Now",
         notSupport: "This payment method is not supported",
-        total: "Total {total} {currency}",
+        total: "Total {total} {currency}{method}",
         view: "View Subscription Details",
         viewNow: "View Now",
         pastDue: "Past Due Invoices",

package/lib/locales/zh.js

@@ -100,7 +100,8 @@ module.exports = (0, _flat.default)({
     saveAsDefaultPriceSuccess: "\u8BBE\u7F6E\u9ED8\u8BA4\u4EF7\u683C\u6210\u529F",
     stakeAmount: "\u8D28\u62BC\u91D1\u989D",
     slashStakeAmount: "\u7F5A\u6CA1\u91D1\u989D",
-    know: "\u6211\u77E5\u9053\u4E86"
+    know: "\u6211\u77E5\u9053\u4E86",
+    relatedSubscription: "\u8BA2\u9605"
   },
   payment: {
     checkout: {
@@ -323,7 +324,7 @@ module.exports = (0, _flat.default)({
         owner: "\u8BA2\u9605\u62E5\u6709\u8005"
       },
       overdue: {
-        title: "\u60A8\u6709 {count} \u5F20\u6B20\u8D39\u8D26\u5355\uFF0C\u6D89\u53CA {subscriptionCount} \u4E2A\u8BA2\u9605\uFF0C\u603B\u91D1\u989D {total} {symbol}\u3002\u8BF7\u7ACB\u5373\u652F\u4ED8\uFF0C\u4EE5\u514D\u5F71\u54CD\u60A8\u7684\u4F7F\u7528\u3002",
+        title: "\u60A8\u6709 {count} \u5F20\u6B20\u8D39\u8D26\u5355\uFF0C\u6D89\u53CA {subscriptionCount} \u4E2A\u8BA2\u9605\uFF0C\u603B\u91D1\u989D {total} {symbol}{method}\u3002\u8BF7\u7ACB\u5373\u652F\u4ED8\uFF0C\u4EE5\u514D\u5F71\u54CD\u60A8\u7684\u4F7F\u7528\u3002",
         simpleTitle: "\u60A8\u6709 {count} \u5F20\u6B20\u8D39\u8D26\u5355\uFF0C\u8BF7\u7ACB\u5373\u652F\u4ED8\uFF0C\u4EE5\u514D\u5F71\u54CD\u60A8\u7684\u4F7F\u7528\u3002",
         empty: "\u606D\u559C\uFF01\u60A8\u5F53\u524D\u6CA1\u6709\u6B20\u8D39\u8D26\u5355\u3002"
       }
@@ -355,11 +356,11 @@ module.exports = (0, _flat.default)({
     },
     subscription: {
       overdue: {
-        title: "\u60A8\u7684\u3010{name}\u3011\u8BA2\u9605\u5171\u6709 {count} \u5F20\u6B20\u8D39\u8D26\u5355\uFF0C\u603B\u8BA1 {total} {symbol}\uFF0C\u60A8\u9700\u8981\u652F\u4ED8\u8FD9\u4E9B\u8D26\u5355\u4EE5\u6FC0\u6D3B\u60A8\u7684\u8BA2\u9605\uFF0C\u6216\u5728\u8FDB\u884C\u65B0\u7684\u8D2D\u4E70\u4E4B\u524D\u5B8C\u6210\u652F\u4ED8\u3002",
+        title: "\u60A8\u7684\u3010{name}\u3011\u8BA2\u9605\u5171\u6709 {count} \u5F20\u6B20\u8D39\u8D26\u5355\uFF0C\u603B\u8BA1 {total} {symbol}{method}\uFF0C\u60A8\u9700\u8981\u652F\u4ED8\u8FD9\u4E9B\u8D26\u5355\u4EE5\u6FC0\u6D3B\u60A8\u7684\u8BA2\u9605\uFF0C\u6216\u5728\u8FDB\u884C\u65B0\u7684\u8D2D\u4E70\u4E4B\u524D\u5B8C\u6210\u652F\u4ED8\u3002",
         simpleTitle: "\u60A8\u7684\u3010{name}\u3011\u8BA2\u9605\u5171\u6709 {count} \u5F20\u6B20\u8D39\u8D26\u5355\uFF0C\u60A8\u9700\u8981\u652F\u4ED8\u8FD9\u4E9B\u8D26\u5355\u4EE5\u6FC0\u6D3B\u60A8\u7684\u8BA2\u9605\uFF0C\u6216\u5728\u8FDB\u884C\u65B0\u7684\u8D2D\u4E70\u4E4B\u524D\u5B8C\u6210\u652F\u4ED8\u3002",
         payNow: "\u7ACB\u5373\u652F\u4ED8",
         notSupport: "\u6682\u4E0D\u652F\u6301\u8BE5\u652F\u4ED8\u65B9\u5F0F",
-        total: "\u603B\u8BA1 {total} {currency}",
+        total: "\u603B\u8BA1 {total} {currency}{method}",
         view: "\u67E5\u770B\u8BA2\u9605\u8BE6\u60C5",
         pastDue: "\u6B20\u8D39\u8D26\u5355",
         viewNow: "\u7ACB\u5373\u67E5\u770B",

package/lib/payment/donation-form.js

@@ -344,7 +344,8 @@ function PaymentInner({
               onError,
               mode,
               action,
-              onlyShowBtn: true
+              onlyShowBtn: true,
+              isDonation: true
             })]
           })]
         })]

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

@@ -4,11 +4,13 @@ export declare const waitForCheckoutComplete: (sessionId: string) => Promise<Che
 export declare const hasDidWallet: (user: any) => any;
 type PageData = CheckoutContext & CheckoutCallbacks & {
     onlyShowBtn?: boolean;
+    isDonation?: boolean;
 };
-declare function PaymentForm({ checkoutSession, paymentMethods, paymentIntent, paymentLink, customer, onPaid, onError, action, currencyId, onlyShowBtn, }: PageData): import("react").JSX.Element;
+declare function PaymentForm({ checkoutSession, paymentMethods, paymentIntent, paymentLink, customer, onPaid, onError, action, currencyId, onlyShowBtn, isDonation, }: PageData): import("react").JSX.Element;
 declare namespace PaymentForm {
     var defaultProps: {
         onlyShowBtn: boolean;
+        isDonation: boolean;
     };
 }
 export default PaymentForm;

package/lib/payment/form/index.js

@@ -59,7 +59,8 @@ const hasDidWallet = user => {
 };
 exports.hasDidWallet = hasDidWallet;
 PaymentForm.defaultProps = {
-  onlyShowBtn: false
+  onlyShowBtn: false,
+  isDonation: false
 };
 function PaymentForm({
   checkoutSession,
@@ -72,7 +73,8 @@ function PaymentForm({
   // mode,
   action,
   currencyId,
-  onlyShowBtn
+  onlyShowBtn,
+  isDonation = false
 }) {
   const {
     t
@@ -192,10 +194,11 @@ function PaymentForm({
   } else {
     buttonText = t(`payment.checkout.${checkoutSession.mode}`);
   }
-  buttonText = session?.user ? buttonText : t("payment.checkout.connect", {
+  buttonText = session?.user || isDonation ? buttonText : t("payment.checkout.connect", {
     action: buttonText
   });
   const method = paymentMethods.find(x => x.id === paymentMethod);
+  const isDonationMode = checkoutSession?.submit_type === "donate" && isDonation;
   const showForm = session?.user;
   const skipBindWallet = method.type === "stripe";
   const handleConnected = async () => {
@@ -263,7 +266,12 @@ function PaymentForm({
       submitting: true
     });
     try {
-      const result = await _api.default.put(`/api/checkout-sessions/${checkoutSession.id}/submit`, data);
+      let result;
+      if (isDonationMode) {
+        result = await _api.default.put(`/api/checkout-sessions/${checkoutSession.id}/donate-submit`, data);
+      } else {
+        result = await _api.default.put(`/api/checkout-sessions/${checkoutSession.id}/submit`, data);
+      }
       setState({
         paymentIntent: result.data.paymentIntent,
         stripeContext: result.data.stripeContext,
@@ -275,7 +283,7 @@ function PaymentForm({
         setState({
           paying: true
         });
-        if (result.data.balance?.sufficient || result.data.delegation?.sufficient) {
+        if ((result.data.balance?.sufficient || result.data.delegation?.sufficient) && !isDonationMode) {
           await handleConnected();
         } else {
           connect.open({
@@ -372,6 +380,10 @@ function PaymentForm({
         });
       }
     } else {
+      if (isDonationMode) {
+        handleSubmit(onFormSubmit, onFormError)();
+        return;
+      }
       session?.login(() => {
         setState({
           submitting: true

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.18.16",
+  "version": "1.18.17",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -54,10 +54,10 @@
     }
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.12.17",
-    "@arcblock/ux": "^2.12.17",
+    "@arcblock/did-connect": "^2.12.25",
+    "@arcblock/ux": "^2.12.25",
     "@arcblock/ws": "^1.19.15",
-    "@blocklet/ui-react": "^2.12.17",
+    "@blocklet/ui-react": "^2.12.25",
     "@mui/icons-material": "^5.16.6",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.6",
@@ -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.16",
+    "@blocklet/payment-types": "1.18.17",
     "@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": "676b921c6fc399d3a031b848bfbe0fbffee430a1"
+  "gitHead": "9d43381dd3744506455547260f5e621c6ad88e8f"
 }

package/src/checkout/donate.tsx

@@ -28,7 +28,7 @@ import {
 } from '@mui/material';
 import { useRequest, useSetState } from 'ahooks';
 import omit from 'lodash/omit';
-import uniqBy from 'lodash/unionBy';
+import uniqBy from 'lodash/uniqBy';
 import { useEffect, useRef, useState } from 'react';
 import { Settings } from '@mui/icons-material';
 
@@ -190,11 +190,14 @@ export function DonateDetails({ supporters = [], currency, method }: DonateHisto
             <Avatar
               key={x.id}
               src={getCustomerAvatar(x.customer?.did, x?.updated_at ? new Date(x.updated_at).toISOString() : '', 20)}
-              alt={x.customer?.name}
+              alt={x.customer?.metadata?.anonymous ? '' : x.customer?.name}
               variant="circular"
               sx={{ width: 20, height: 20 }}
               onClick={(e) => {
                 e.stopPropagation();
+                if (x.customer?.metadata?.anonymous) {
+                  return;
+                }
                 if (x.customer?.did) {
                   window.open(getUserProfileLink(x.customer?.did, locale), '_blank');
                 }
@@ -210,6 +213,9 @@ export function DonateDetails({ supporters = [], currency, method }: DonateHisto
                 textOverflow: 'ellipsis',
               }}
               onClick={(e) => {
+                if (x.customer?.metadata?.anonymous) {
+                  return;
+                }
                 e.stopPropagation();
                 if (x.customer?.did) {
                   window.open(getUserProfileLink(x.customer?.did, locale), '_blank');
@@ -244,7 +250,7 @@ function SupporterAvatar({
   showDonateDetails = false,
 }: DonateHistory & { showDonateDetails?: boolean }) {
   const [open, setOpen] = useState(false);
-  const customers = uniqBy(supporters, 'customer_did');
+  const customers = uniqBy(supporters, 'customer_id');
   const customersNum = customers.length;
   if (customersNum === 0) return null;
   return (
@@ -254,6 +260,9 @@ function SupporterAvatar({
         sx={{
           '& .MuiAvatar-root': {
             backgroundColor: 'background.paper',
+            '&.MuiAvatar-colorDefault': {
+              backgroundColor: '#bdbdbd',
+            },
           },
         }}>
         {customers.slice(0, 5).map((supporter) => (
@@ -263,7 +272,7 @@ function SupporterAvatar({
               supporter?.updated_at ? new Date(supporter.updated_at).toISOString() : '',
               24
             )}
-            alt={supporter.customer?.name}
+            alt={supporter.customer?.metadata?.anonymous ? '' : supporter.customer?.name}
             key={supporter.customer?.id}
             sx={{
               width: '24px',
@@ -312,7 +321,7 @@ function SupporterAvatar({
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 function SupporterTable({ supporters = [], totalAmount = '0', currency, method }: DonateHistory) {
-  const customers = uniqBy(supporters, 'customer_did');
+  const customers = uniqBy(supporters, 'customer_id');
   const customersNum = customers.length;
   if (customersNum === 0) return null;
   return (
@@ -326,7 +335,7 @@ function SupporterTable({ supporters = [], totalAmount = '0', currency, method }
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 function SupporterSimple({ supporters = [], totalAmount = '0', currency, method }: DonateHistory) {
   const { t } = useLocaleContext();
-  const customers = uniqBy(supporters, 'customer_did');
+  const customers = uniqBy(supporters, 'customer_id');
   const customersNum = customers.length;
 
   return (
@@ -354,7 +363,7 @@ function SupporterSimple({ supporters = [], totalAmount = '0', currency, method
           <Avatar
             key={x.id}
             title={x.customer?.name}
-            alt={x.customer?.name}
+            alt={x.customer?.metadata?.anonymous ? '' : x.customer?.name}
             src={getCustomerAvatar(x.customer?.did, x?.updated_at ? new Date(x.updated_at).toISOString() : '', 48)}
             variant="circular"
             sx={{ width: 24, height: 24 }}

package/src/components/over-due-invoice-payment.tsx

@@ -316,6 +316,13 @@ function OverdueInvoicePayment({
     );
   };
 
+  const getMethodText = (method: PaymentMethod) => {
+    if (method.name && method.type !== 'arcblock') {
+      return ` (${method.name})`;
+    }
+    return '';
+  };
+
   const getOverdueTitle = () => {
     if (subscriptionId && data.subscription) {
       if (summaryList.length === 1) {
@@ -324,6 +331,7 @@ function OverdueInvoicePayment({
           count: data.invoices?.length,
           total: formatAmount(summaryList[0]?.amount, summaryList[0]?.currency?.decimal),
           symbol: summaryList[0]?.currency?.symbol,
+          method: getMethodText(summaryList[0]?.method),
         });
       }
       return t('payment.subscription.overdue.simpleTitle', {
@@ -338,6 +346,7 @@ function OverdueInvoicePayment({
           count: data.invoices?.length,
           total: formatAmount(summaryList[0]?.amount, summaryList[0]?.currency?.decimal),
           symbol: summaryList[0]?.currency?.symbol,
+          method: getMethodText(summaryList[0]?.method),
         });
       }
       return t('payment.customer.overdue.simpleTitle', {
@@ -472,6 +481,7 @@ function OverdueInvoicePayment({
                       {t('payment.subscription.overdue.total', {
                         total: formatAmount(item?.amount, item?.currency?.decimal),
                         currency: item?.currency?.symbol,
+                        method: getMethodText(item?.method),
                       })}
                     </Typography>
                     {renderPayButton(item, false, {

package/src/history/invoice/list.tsx

@@ -69,6 +69,7 @@ type Props = {
   action?: string;
   type?: 'list' | 'table';
   onTableDataChange?: Function;
+  relatedSubscription?: boolean;
 };
 
 const getInvoiceLink = (invoice: TInvoiceExpanded, action?: string) => {
@@ -104,6 +105,7 @@ const InvoiceTable = React.memo((props: Props & { onPay: (invoiceId: string) =>
     include_return_staking,
     include_recovered_from,
     onTableDataChange,
+    relatedSubscription,
   } = props;
   const listKey = 'invoice-table';
   const { t, locale } = useLocaleContext();
@@ -177,6 +179,12 @@ const InvoiceTable = React.memo((props: Props & { onPay: (invoiceId: string) =>
     handleNavigation(e, link, navigate, { target: link.external ? '_blank' : target });
   };
 
+  const handleRelatedSubscriptionClick = (e: React.MouseEvent, invoice: TInvoiceExpanded) => {
+    if (invoice.subscription_id) {
+      handleNavigation(e, createLink(`/customer/subscription/${invoice.subscription_id}`), navigate);
+    }
+  };
+
   const columns = [
     {
       label: t('common.amount'),
@@ -226,6 +234,30 @@ const InvoiceTable = React.memo((props: Props & { onPay: (invoiceId: string) =>
         },
       },
     },
+    ...(relatedSubscription
+      ? [
+          {
+            label: t('common.relatedSubscription'),
+            name: 'subscription',
+            options: {
+              customBodyRenderLite: (_: string, index: number) => {
+                const invoice = data?.list[index] as TInvoiceExpanded;
+                return invoice.subscription_id ? (
+                  <Box
+                    onClick={(e) => handleRelatedSubscriptionClick(e, invoice)}
+                    sx={{ color: 'text.link', cursor: 'pointer' }}>
+                    {invoice.subscription?.description}
+                  </Box>
+                ) : (
+                  <Box onClick={(e) => handleLinkClick(e, invoice)} sx={{ ...linkStyle, color: 'text.lighter' }}>
+                    {t('common.none')}
+                  </Box>
+                );
+              },
+            },
+          },
+        ]
+      : []),
     {
       label: t('common.updatedAt'),
       name: 'name',
@@ -235,12 +267,17 @@ const InvoiceTable = React.memo((props: Props & { onPay: (invoiceId: string) =>
 
           return (
             <Box onClick={(e) => handleLinkClick(e, invoice)} sx={linkStyle}>
-              {formatToDate(invoice.created_at, locale, 'YYYY-MM-DD HH:mm:ss')}
+              {formatToDate(
+                invoice.created_at,
+                locale,
+                relatedSubscription ? 'YYYY-MM-DD HH:mm' : 'YYYY-MM-DD HH:mm:ss'
+              )}
             </Box>
           );
         },
       },
     },
+
     {
       label: t('common.description'),
       name: '',
@@ -621,6 +658,7 @@ CustomerInvoiceList.defaultProps = {
   action: '',
   type: 'list',
   onTableDataChange: () => {},
+  relatedSubscription: false,
 };
 
 const Root = styled(Stack)`

package/src/locales/en.tsx

@@ -96,6 +96,7 @@ export default flat({
     stakeAmount: 'Stake Amount',
     slashStakeAmount: 'Slash Stake Amount',
     know: 'I know',
+    relatedSubscription: 'Subscription',
   },
   payment: {
     checkout: {
@@ -329,7 +330,7 @@ export default flat({
       },
       overdue: {
         title:
-          'You have {count} due invoices for {subscriptionCount} subscriptions, totaling {total} {symbol}. Please pay immediately to avoid service disruption.',
+          'You have {count} due invoices for {subscriptionCount} subscriptions, totaling {total} {symbol}{method}. Please pay immediately to avoid service disruption.',
         simpleTitle: 'You have {count} due invoices. Please pay now to ensure uninterrupted service.',
         empty: 'Great! You have no due invoices.',
       },
@@ -364,10 +365,10 @@ export default flat({
         simpleTitle:
           'There are {count} due invoices for your subscription {name}, you need to pay them to activate your subscription or before making new purchases.',
         title:
-          'There are {count} due invoices for your subscription {name}, the total due amount is {total} {symbol}, you need to pay them to activate your subscription or before making new purchases.',
+          'There are {count} due invoices for your subscription {name}, the total due amount is {total} {symbol}{method}, you need to pay them to activate your subscription or before making new purchases.',
         payNow: 'Pay Now',
         notSupport: 'This payment method is not supported',
-        total: 'Total {total} {currency}',
+        total: 'Total {total} {currency}{method}',
         view: 'View Subscription Details',
         viewNow: 'View Now',
         pastDue: 'Past Due Invoices',

package/src/locales/zh.tsx

@@ -96,6 +96,7 @@ export default flat({
     stakeAmount: '质押金额',
     slashStakeAmount: '罚没金额',
     know: '我知道了',
+    relatedSubscription: '订阅',
   },
   payment: {
     checkout: {
@@ -320,7 +321,7 @@ export default flat({
       },
       overdue: {
         title:
-          '您有 {count} 张欠费账单，涉及 {subscriptionCount} 个订阅，总金额 {total} {symbol}。请立即支付，以免影响您的使用。',
+          '您有 {count} 张欠费账单，涉及 {subscriptionCount} 个订阅，总金额 {total} {symbol}{method}。请立即支付，以免影响您的使用。',
         simpleTitle: '您有 {count} 张欠费账单，请立即支付，以免影响您的使用。',
         empty: '恭喜！您当前没有欠费账单。',
       },
@@ -353,12 +354,12 @@ export default flat({
     subscription: {
       overdue: {
         title:
-          '您的【{name}】订阅共有 {count} 张欠费账单，总计 {total} {symbol}，您需要支付这些账单以激活您的订阅，或在进行新的购买之前完成支付。',
+          '您的【{name}】订阅共有 {count} 张欠费账单，总计 {total} {symbol}{method}，您需要支付这些账单以激活您的订阅，或在进行新的购买之前完成支付。',
         simpleTitle:
           '您的【{name}】订阅共有 {count} 张欠费账单，您需要支付这些账单以激活您的订阅，或在进行新的购买之前完成支付。',
         payNow: '立即支付',
         notSupport: '暂不支持该支付方式',
-        total: '总计 {total} {currency}',
+        total: '总计 {total} {currency}{method}',
         view: '查看订阅详情',
         pastDue: '欠费账单',
         viewNow: '立即查看',

package/src/payment/donation-form.tsx

@@ -343,6 +343,7 @@ function PaymentInner({
                     mode={mode}
                     action={action}
                     onlyShowBtn
+                    isDonation
                   />
                 </Box>
               )}

package/src/payment/form/index.tsx

@@ -80,10 +80,12 @@ export const hasDidWallet = (user: any) => {
 type PageData = CheckoutContext &
   CheckoutCallbacks & {
     onlyShowBtn?: boolean;
+    isDonation?: boolean;
   };
 
 PaymentForm.defaultProps = {
   onlyShowBtn: false,
+  isDonation: false,
 };
 
 // FIXME: https://stripe.com/docs/elements/address-element
@@ -103,6 +105,7 @@ export default function PaymentForm({
   action,
   currencyId,
   onlyShowBtn,
+  isDonation = false,
 }: PageData) {
   // const theme = useTheme();
   const { t } = useLocaleContext();
@@ -241,10 +244,10 @@ export default function PaymentForm({
   } else {
     buttonText = t(`payment.checkout.${checkoutSession.mode}`);
   }
-  buttonText = session?.user ? buttonText : t('payment.checkout.connect', { action: buttonText });
+  buttonText = session?.user || isDonation ? buttonText : t('payment.checkout.connect', { action: buttonText });
 
   const method = paymentMethods.find((x) => x.id === paymentMethod) as TPaymentMethodExpanded;
-
+  const isDonationMode = checkoutSession?.submit_type === 'donate' && isDonation;
   const showForm = session?.user;
   const skipBindWallet = method.type === 'stripe';
 
@@ -305,7 +308,12 @@ export default function PaymentForm({
   const onFormSubmit = async (data: any) => {
     setState({ submitting: true });
     try {
-      const result = await api.put(`/api/checkout-sessions/${checkoutSession.id}/submit`, data);
+      let result;
+      if (isDonationMode) {
+        result = await api.put(`/api/checkout-sessions/${checkoutSession.id}/donate-submit`, data);
+      } else {
+        result = await api.put(`/api/checkout-sessions/${checkoutSession.id}/submit`, data);
+      }
 
       setState({
         paymentIntent: result.data.paymentIntent,
@@ -317,7 +325,7 @@ export default function PaymentForm({
 
       if (['arcblock', 'ethereum', 'base'].includes(method.type)) {
         setState({ paying: true });
-        if (result.data.balance?.sufficient || result.data.delegation?.sufficient) {
+        if ((result.data.balance?.sufficient || result.data.delegation?.sufficient) && !isDonationMode) {
           await handleConnected();
         } else {
           connect.open({
@@ -396,6 +404,10 @@ export default function PaymentForm({
         });
       }
     } else {
+      if (isDonationMode) {
+        handleSubmit(onFormSubmit, onFormError)();
+        return;
+      }
       session?.login(() => {
         setState({ submitting: true });
         onUserLoggedIn()