@blocklet/payment-react 1.18.47 → 1.18.49

package/README.md

@@ -321,6 +321,56 @@ function DonationPage() {
 
 ### Subscription Management Example
 
+- `ResumeSubscription` component
+  - Resume subscription, with support for re-stake if needed
+  - Props:
+    - `subscriptionId`: [Required] The subscription ID to resume
+    - `onResumed`: [Optional] Callback function called after successful resume, receives `(subscription)`
+    - `dialogProps`: [Optional] Dialog properties, default is `{ open: true }`
+    - `successToast`: [Optional] Whether to show success toast, default is `true`
+    - `authToken`: [Optional] Authentication token for API requests
+
+```tsx
+import {
+  PaymentProvider,
+  ResumeSubscription,
+  CustomerInvoiceList,
+  Amount
+} from '@blocklet/payment-react';
+
+function SubscriptionPage({ subscriptionId }) {
+  return (
+    <PaymentProvider session={session}>
+      <ResumeSubscription
+        subscriptionId={subscriptionId}
+        onResumed={(subscription) => {
+          // Refresh subscription status
+          refetchSubscription();
+        }}
+      />
+
+      {/* Custom dialog props */}
+      <ResumeSubscription
+        subscriptionId={subscriptionId}
+        dialogProps={{
+          open: true,
+          title: 'Resume Your Subscription',
+          onClose: () => {
+            // Handle dialog close
+          }
+        }}
+      />
+
+      {/* With auth token */}
+      <ResumeSubscription
+        subscriptionId={subscriptionId}
+        authToken="your-auth-token"
+      />
+    </PaymentProvider>
+  );
+}
+```
+
 - `OverdueInvoicePayment` component
   - Display overdue invoices for a subscription, and support batch payment
   - Props:

package/es/components/loading-button.js

@@ -44,7 +44,7 @@ const LoadingButton = forwardRef(
       Button,
       {
         ref,
-        disabled: props.disabled,
+        disabled: props.disabled || loading,
         onClick: handleClick,
         sx: {
           position: "relative",

package/es/components/resume-subscription.d.ts

@@ -0,0 +1,25 @@
+import type { Subscription, TSubscriptionExpanded } from '@blocklet/payment-types';
+type DialogProps = {
+    open?: boolean;
+    onClose?: () => void;
+    title?: string;
+};
+type Props = {
+    subscriptionId: string;
+    onResumed?: (subscription: Subscription | TSubscriptionExpanded) => void;
+    dialogProps?: DialogProps;
+    successToast?: boolean;
+    authToken?: string;
+};
+declare function RecoverSubscription({ subscriptionId, dialogProps, onResumed, successToast, authToken, }: Props): import("react").JSX.Element | null;
+declare namespace RecoverSubscription {
+    var defaultProps: {
+        onResumed: () => void;
+        dialogProps: {
+            open: boolean;
+        };
+        successToast: boolean;
+        authToken: undefined;
+    };
+}
+export default RecoverSubscription;

package/es/components/resume-subscription.js

@@ -0,0 +1,158 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Button, Typography, Stack, Alert } from "@mui/material";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import Toast from "@arcblock/ux/lib/Toast";
+import { joinURL } from "ufo";
+import { useRequest } from "ahooks";
+import { Dialog } from "@arcblock/ux";
+import { usePaymentContext } from "../contexts/payment.js";
+import { formatError, formatToDate, getPrefix, isCrossOrigin } from "../libs/util.js";
+import api from "../libs/api.js";
+import LoadingButton from "./loading-button.js";
+const fetchSubscriptionDetail = async (params) => {
+  const url = `/api/subscriptions/${params.subscriptionId}`;
+  const res = await api.get(params.authToken ? joinURL(url, `?authToken=${params.authToken}`) : url);
+  return res.data;
+};
+const fetchRecoverInfo = async (params) => {
+  const url = `/api/subscriptions/${params.subscriptionId}/recover-info`;
+  const res = await api.get(params.authToken ? joinURL(url, `?authToken=${params.authToken}`) : url);
+  return res.data;
+};
+const recoverSubscription = async (params) => {
+  const url = `/api/subscriptions/${params.subscriptionId}/recover`;
+  const res = await api.put(params.authToken ? joinURL(url, `?authToken=${params.authToken}`) : url);
+  return res.data;
+};
+function RecoverSubscription({
+  subscriptionId,
+  dialogProps = {},
+  onResumed = () => {
+  },
+  successToast = true,
+  authToken
+}) {
+  const { t, locale } = useLocaleContext();
+  const { connect } = usePaymentContext();
+  const [recoverLoading, setRecoverLoading] = useState(false);
+  const [dialogOpen, setDialogOpen] = useState(dialogProps.open || false);
+  const { data, error, loading } = useRequest(() => fetchRecoverInfo({ subscriptionId, authToken }), {
+    ready: !!subscriptionId
+  });
+  const isCrossOriginRequest = isCrossOrigin();
+  const needStake = data?.needStake ?? false;
+  const handleSuccess = async () => {
+    try {
+      const subscription = await fetchSubscriptionDetail({ subscriptionId, authToken });
+      if (successToast) {
+        Toast.success(t("payment.customer.recover.success"));
+      }
+      setDialogOpen(false);
+      onResumed(subscription);
+      setRecoverLoading(false);
+    } catch (err) {
+      console.error("Failed to fetch updated subscription:", err);
+      Toast.error(formatError(err));
+      setRecoverLoading(false);
+    }
+  };
+  const handleRecoverWithStake = () => {
+    setRecoverLoading(true);
+    try {
+      connect.open({
+        locale,
+        containerEl: void 0,
+        saveConnect: false,
+        action: "re-stake",
+        prefix: joinURL(getPrefix(), "/api/did"),
+        useSocket: !isCrossOriginRequest,
+        extraParams: { subscriptionId },
+        messages: {
+          scan: t("common.connect.defaultScan"),
+          title: t("payment.customer.recover.reStakeTitle"),
+          confirm: t("common.connect.confirm")
+        },
+        onSuccess: handleSuccess,
+        onClose: () => {
+          connect.close();
+          setRecoverLoading(false);
+        },
+        onError: (err) => {
+          Toast.error(formatError(err));
+          setRecoverLoading(false);
+        }
+      });
+    } catch (err) {
+      Toast.error(formatError(err));
+      setRecoverLoading(false);
+    }
+  };
+  const handleDirectRecover = async () => {
+    setRecoverLoading(true);
+    try {
+      const result = await recoverSubscription({ subscriptionId, authToken });
+      if (result.needStake) {
+        handleRecoverWithStake();
+        return;
+      }
+      const { subscription } = result;
+      if (successToast) {
+        Toast.success(t("payment.customer.recover.success"));
+      }
+      setDialogOpen(false);
+      onResumed(subscription);
+      setRecoverLoading(false);
+    } catch (err) {
+      Toast.error(formatError(err));
+      setRecoverLoading(false);
+    }
+  };
+  const handleRecover = () => {
+    if (needStake) {
+      handleRecoverWithStake();
+    } else {
+      handleDirectRecover();
+    }
+  };
+  const handleClose = () => {
+    setDialogOpen(false);
+    dialogProps.onClose?.();
+  };
+  if (loading) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      PaperProps: {
+        style: { minHeight: "auto" }
+      },
+      ...dialogProps || {},
+      open: dialogOpen,
+      title: dialogProps?.title || t("payment.customer.recover.title"),
+      sx: { "& .MuiDialogContent-root": { pt: 0 } },
+      onClose: handleClose,
+      children: error ? /* @__PURE__ */ jsx(Alert, { severity: "error", children: error.message }) : /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
+        /* @__PURE__ */ jsx(Typography, { color: "text.secondary", variant: "body2", children: t("payment.customer.recover.description", {
+          date: formatToDate(Number(data?.subscription?.current_period_end || "0") * 1e3)
+        }) }),
+        needStake && /* @__PURE__ */ jsx(Alert, { severity: "warning", children: t("payment.customer.recover.stakeRequiredDescription") }),
+        /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "flex-end", gap: 2, mt: 2, children: [
+          /* @__PURE__ */ jsx(Button, { variant: "outlined", color: "primary", onClick: handleClose, children: t("common.cancel") }),
+          /* @__PURE__ */ jsx(LoadingButton, { variant: "contained", size: "small", loading: recoverLoading, onClick: handleRecover, children: t("common.confirm") })
+        ] })
+      ] })
+    }
+  );
+}
+RecoverSubscription.defaultProps = {
+  onResumed: () => {
+  },
+  dialogProps: {
+    open: true
+  },
+  successToast: true,
+  authToken: void 0
+};
+export default RecoverSubscription;

package/es/index.d.ts

@@ -31,6 +31,7 @@ import { createLazyComponent } from './components/lazy-loader';
 import OverdueInvoicePayment from './components/over-due-invoice-payment';
 import PaymentBeneficiaries from './components/payment-beneficiaries';
 import LoadingButton from './components/loading-button';
+import ResumeSubscription from './components/resume-subscription';
 export { PaymentThemeProvider } from './theme';
 export * from './libs/util';
 export * from './libs/connect';
@@ -45,4 +46,4 @@ export * from './hooks/scroll';
 export * from './hooks/keyboard';
 export * from './libs/validator';
 export { translations, createTranslator } from './locales';
-export { createLazyComponent, api, dayjs, FormInput, 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, };
+export { createLazyComponent, api, dayjs, FormInput, 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, };

package/es/index.js

@@ -31,6 +31,7 @@ import { createLazyComponent } from "./components/lazy-loader.js";
 import OverdueInvoicePayment from "./components/over-due-invoice-payment.js";
 import PaymentBeneficiaries from "./components/payment-beneficiaries.js";
 import LoadingButton from "./components/loading-button.js";
+import ResumeSubscription from "./components/resume-subscription.js";
 export { PaymentThemeProvider } from "./theme/index.js";
 export * from "./libs/util.js";
 export * from "./libs/connect.js";
@@ -79,5 +80,6 @@ export {
   OverdueInvoicePayment,
   PaymentBeneficiaries,
   LoadingButton,
-  DonateDetails
+  DonateDetails,
+  ResumeSubscription
 };

package/es/libs/util.js

@@ -943,7 +943,8 @@ export function getInvoiceDescriptionAndReason(invoice, locale = "en") {
     "Stake for subscription overdraft protection": t(
       "payment.invoice.reason.stakeForSubscriptionOverdraftProtection",
       locale
-    )
+    ),
+    "Re-stake to resume subscription": t("payment.invoice.reason.reStakeToResumeSubscription", locale)
   };
   return {
     description: descMap[description] || description,

package/es/locales/en.js

@@ -248,8 +248,8 @@ export default flat({
         button: "Unsubscribe",
         title: "Cancel your subscription",
         comment: "Any additional feedback?",
-        description: "Your subscription will be canceled, but it is still available until the end of your current billing period on {date}",
-        trialDescription: "Free trial subscriptions will be canceled immediately and no longer available, confirm to continue",
+        description: "Your subscription will be canceled, but it is still available until the end of your current billing period on {date}.",
+        trialDescription: "Free trial subscriptions will be canceled immediately and no longer available, confirm to continue.",
         feedback: {
           tip: "We would love your feedback, it will help us improve our service",
           too_expensive: "The service is too expensive",
@@ -276,7 +276,11 @@ export default flat({
       recover: {
         button: "Resume Subscription",
         title: "Resume Your Subscription",
-        description: "Your subscription will not be canceled and will be automatically renewed on {date}, please confirm to continue"
+        description: "Your subscription will not be canceled and will be automatically renewed on {date}, please confirm to continue.",
+        success: "Subscription resumed successfully",
+        reStakeTitle: "Re-stake to resume subscription",
+        stakeRequiredDescription: "Your previous stake has been revoked. You need to re-stake to resume your subscription.",
+        stakeWarning: "Please ensure you have sufficient balance for staking before proceeding."
       },
       changePlan: {
         button: "Change Plan",
@@ -373,6 +377,7 @@ export default flat({
         rechargeForSubscription: "Add funds for subscription",
         overdraftProtection: "SubGuard\u2122 Fee",
         stakeForSubscriptionOverdraftProtection: "SubGuard\u2122",
+        reStakeToResumeSubscription: "Subscription resume",
         gas: "Gas",
         fee: "Fee"
       }

package/es/locales/zh.js

@@ -248,8 +248,8 @@ export default flat({
         button: "\u53D6\u6D88\u8BA2\u9605",
         title: "\u53D6\u6D88\u60A8\u7684\u8BA2\u9605",
         comment: "\u4F60\u8FD8\u6709\u5176\u4ED6\u53CD\u9988\u4E48\uFF1F",
-        description: "\u60A8\u7684\u8BA2\u9605\u5C06\u88AB\u53D6\u6D88\uFF0C\u4F46\u4ECD\u7136\u53EF\u7528\u76F4\u5230\u60A8\u5F53\u524D\u8BA1\u8D39\u5468\u671F\u7ED3\u675F\u4E8E{date}",
-        trialDescription: "\u514D\u8D39\u8BD5\u7528\u7684\u8BA2\u9605\u5C06\u88AB\u7ACB\u5373\u53D6\u6D88\uFF0C\u4E0D\u518D\u53EF\u7528\uFF0C\u786E\u8BA4\u662F\u5426\u7EE7\u7EED",
+        description: "\u60A8\u7684\u8BA2\u9605\u5C06\u88AB\u53D6\u6D88\uFF0C\u4F46\u4ECD\u7136\u53EF\u7528\u76F4\u5230\u60A8\u5F53\u524D\u8BA1\u8D39\u5468\u671F\u7ED3\u675F\u4E8E{date}\u3002",
+        trialDescription: "\u514D\u8D39\u8BD5\u7528\u7684\u8BA2\u9605\u5C06\u88AB\u7ACB\u5373\u53D6\u6D88\uFF0C\u4E0D\u518D\u53EF\u7528\uFF0C\u786E\u8BA4\u662F\u5426\u7EE7\u7EED\u3002",
         feedback: {
           tip: "\u6211\u4EEC\u5E0C\u671B\u542C\u5230\u60A8\u7684\u53CD\u9988\uFF0C\u8FD9\u5C06\u5E2E\u52A9\u6211\u4EEC\u6539\u8FDB\u6211\u4EEC\u7684\u670D\u52A1",
           too_expensive: "\u670D\u52A1\u8D39\u7528\u592A\u9AD8",
@@ -277,7 +277,10 @@ export default flat({
       recover: {
         button: "\u6062\u590D\u8BA2\u9605",
         title: "\u6062\u590D\u60A8\u7684\u8BA2\u9605",
-        description: "\u60A8\u7684\u8BA2\u9605\u5C06\u4E0D\u4F1A\u88AB\u53D6\u6D88\uFF0C\u5E76\u5C06\u5728{date}\u81EA\u52A8\u7EED\u8BA2\uFF0C\u8BF7\u786E\u8BA4\u662F\u5426\u7EE7\u7EED"
+        description: "\u60A8\u7684\u8BA2\u9605\u5C06\u4E0D\u4F1A\u88AB\u53D6\u6D88\uFF0C\u5E76\u5C06\u5728{date}\u81EA\u52A8\u7EED\u8BA2\uFF0C\u8BF7\u786E\u8BA4\u662F\u5426\u7EE7\u7EED\u3002",
+        success: "\u8BA2\u9605\u6062\u590D\u6210\u529F",
+        reStakeTitle: "\u91CD\u65B0\u8D28\u62BC\u4EE5\u6062\u590D\u8BA2\u9605",
+        stakeRequiredDescription: "\u60A8\u4E4B\u524D\u7684\u8D28\u62BC\u5DF2\u88AB\u7533\u8BF7\u53D6\u56DE\uFF0C\u9700\u8981\u91CD\u65B0\u8D28\u62BC\u624D\u80FD\u6062\u590D\u8BA2\u9605\u3002"
       },
       changePlan: {
         button: "\u5207\u6362\u5957\u9910",
@@ -374,6 +377,7 @@ export default flat({
         rechargeForSubscription: "\u8BA2\u9605\u5145\u503C",
         overdraftProtection: "\u8BA2\u9605\u5B88\u62A4\u670D\u52A1\u8D39",
         stakeForSubscriptionOverdraftProtection: "\u8BA2\u9605\u5B88\u62A4\u670D\u52A1",
+        reStakeToResumeSubscription: "\u8BA2\u9605\u6062\u590D",
         gas: "\u624B\u7EED\u8D39",
         fee: "\u670D\u52A1\u8D39"
       }

package/es/payment/form/stripe/form.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import Center from "@arcblock/ux/lib/Center";
 import Dialog from "@arcblock/ux/lib/Dialog";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import { CircularProgress, Typography } from "@mui/material";
+import { CircularProgress, Typography, useTheme } from "@mui/material";
 import { styled } from "@mui/system";
 import { useSetState } from "ahooks";
 import { useEffect, useCallback } from "react";
@@ -28,6 +28,7 @@ function StripeCheckoutForm({
   const stripe = useStripe();
   const elements = useElements();
   const { t } = useLocaleContext();
+  const theme = useTheme();
   const [state, setState] = useSetState({
     message: "",
     confirming: false,
@@ -171,6 +172,16 @@ function StripeCheckoutForm({
               email: customer.email,
               address: customer.address
             }
+          },
+          appearance: {
+            theme: theme.palette.mode,
+            variables: {
+              colorPrimary: theme.palette.primary.main,
+              colorBackground: theme.palette.background.paper,
+              colorText: theme.palette.text.primary,
+              colorDanger: theme.palette.error.main,
+              borderRadius: "4px"
+            }
           }
         },
         onChange: handlePaymentMethodChange,
@@ -217,6 +228,7 @@ export default function StripeCheckout({
   const stripePromise = loadStripe(publicKey);
   const { isMobile } = useMobile();
   const { t, locale } = useLocaleContext();
+  const theme = useTheme();
   const [state, setState] = useSetState({
     open: true,
     closable: true
@@ -243,6 +255,15 @@ export default function StripeCheckout({
         },
         form: {
           justifyContent: "flex-start"
+        },
+        ".StripeElement--focus": {
+          borderColor: theme.palette.primary.main
+        },
+        ".StripeElement--invalid": {
+          borderColor: theme.palette.error.main
+        },
+        ".StripeElement--complete": {
+          borderColor: theme.palette.success.main
         }
       },
       PaperProps: {
@@ -255,7 +276,16 @@ export default function StripeCheckout({
         {
           options: {
             clientSecret,
-            locale: locale === "zh" ? "zh-CN" : "en"
+            locale: locale === "zh" ? "zh-CN" : "en",
+            appearance: {
+              theme: theme.palette.mode,
+              variables: {
+                colorPrimary: theme.palette.primary.main,
+                colorBackground: theme.palette.background.paper,
+                colorText: theme.palette.text.primary,
+                colorDanger: theme.palette.error.main
+              }
+            }
           },
           stripe: stripePromise,
           children: /* @__PURE__ */ jsx(

package/lib/components/loading-button.js

@@ -57,7 +57,7 @@ const LoadingButton = (0, _react.forwardRef)(({
   });
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Button, {
     ref,
-    disabled: props.disabled,
+    disabled: props.disabled || loading,
     onClick: handleClick,
     sx: {
       position: "relative",

package/lib/components/resume-subscription.d.ts

@@ -0,0 +1,25 @@
+import type { Subscription, TSubscriptionExpanded } from '@blocklet/payment-types';
+type DialogProps = {
+    open?: boolean;
+    onClose?: () => void;
+    title?: string;
+};
+type Props = {
+    subscriptionId: string;
+    onResumed?: (subscription: Subscription | TSubscriptionExpanded) => void;
+    dialogProps?: DialogProps;
+    successToast?: boolean;
+    authToken?: string;
+};
+declare function RecoverSubscription({ subscriptionId, dialogProps, onResumed, successToast, authToken, }: Props): import("react").JSX.Element | null;
+declare namespace RecoverSubscription {
+    var defaultProps: {
+        onResumed: () => void;
+        dialogProps: {
+            open: boolean;
+        };
+        successToast: boolean;
+        authToken: undefined;
+    };
+}
+export default RecoverSubscription;

package/lib/components/resume-subscription.js

@@ -0,0 +1,211 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+var _material = require("@mui/material");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
+var _ufo = require("ufo");
+var _ahooks = require("ahooks");
+var _ux = require("@arcblock/ux");
+var _payment = require("../contexts/payment");
+var _util = require("../libs/util");
+var _api = _interopRequireDefault(require("../libs/api"));
+var _loadingButton = _interopRequireDefault(require("./loading-button"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const fetchSubscriptionDetail = async params => {
+  const url = `/api/subscriptions/${params.subscriptionId}`;
+  const res = await _api.default.get(params.authToken ? (0, _ufo.joinURL)(url, `?authToken=${params.authToken}`) : url);
+  return res.data;
+};
+const fetchRecoverInfo = async params => {
+  const url = `/api/subscriptions/${params.subscriptionId}/recover-info`;
+  const res = await _api.default.get(params.authToken ? (0, _ufo.joinURL)(url, `?authToken=${params.authToken}`) : url);
+  return res.data;
+};
+const recoverSubscription = async params => {
+  const url = `/api/subscriptions/${params.subscriptionId}/recover`;
+  const res = await _api.default.put(params.authToken ? (0, _ufo.joinURL)(url, `?authToken=${params.authToken}`) : url);
+  return res.data;
+};
+function RecoverSubscription({
+  subscriptionId,
+  dialogProps = {},
+  onResumed = () => {},
+  successToast = true,
+  authToken
+}) {
+  const {
+    t,
+    locale
+  } = (0, _context.useLocaleContext)();
+  const {
+    connect
+  } = (0, _payment.usePaymentContext)();
+  const [recoverLoading, setRecoverLoading] = (0, _react.useState)(false);
+  const [dialogOpen, setDialogOpen] = (0, _react.useState)(dialogProps.open || false);
+  const {
+    data,
+    error,
+    loading
+  } = (0, _ahooks.useRequest)(() => fetchRecoverInfo({
+    subscriptionId,
+    authToken
+  }), {
+    ready: !!subscriptionId
+  });
+  const isCrossOriginRequest = (0, _util.isCrossOrigin)();
+  const needStake = data?.needStake ?? false;
+  const handleSuccess = async () => {
+    try {
+      const subscription = await fetchSubscriptionDetail({
+        subscriptionId,
+        authToken
+      });
+      if (successToast) {
+        _Toast.default.success(t("payment.customer.recover.success"));
+      }
+      setDialogOpen(false);
+      onResumed(subscription);
+      setRecoverLoading(false);
+    } catch (err) {
+      console.error("Failed to fetch updated subscription:", err);
+      _Toast.default.error((0, _util.formatError)(err));
+      setRecoverLoading(false);
+    }
+  };
+  const handleRecoverWithStake = () => {
+    setRecoverLoading(true);
+    try {
+      connect.open({
+        locale,
+        containerEl: void 0,
+        saveConnect: false,
+        action: "re-stake",
+        prefix: (0, _ufo.joinURL)((0, _util.getPrefix)(), "/api/did"),
+        useSocket: !isCrossOriginRequest,
+        extraParams: {
+          subscriptionId
+        },
+        messages: {
+          scan: t("common.connect.defaultScan"),
+          title: t("payment.customer.recover.reStakeTitle"),
+          confirm: t("common.connect.confirm")
+        },
+        onSuccess: handleSuccess,
+        onClose: () => {
+          connect.close();
+          setRecoverLoading(false);
+        },
+        onError: err => {
+          _Toast.default.error((0, _util.formatError)(err));
+          setRecoverLoading(false);
+        }
+      });
+    } catch (err) {
+      _Toast.default.error((0, _util.formatError)(err));
+      setRecoverLoading(false);
+    }
+  };
+  const handleDirectRecover = async () => {
+    setRecoverLoading(true);
+    try {
+      const result = await recoverSubscription({
+        subscriptionId,
+        authToken
+      });
+      if (result.needStake) {
+        handleRecoverWithStake();
+        return;
+      }
+      const {
+        subscription
+      } = result;
+      if (successToast) {
+        _Toast.default.success(t("payment.customer.recover.success"));
+      }
+      setDialogOpen(false);
+      onResumed(subscription);
+      setRecoverLoading(false);
+    } catch (err) {
+      _Toast.default.error((0, _util.formatError)(err));
+      setRecoverLoading(false);
+    }
+  };
+  const handleRecover = () => {
+    if (needStake) {
+      handleRecoverWithStake();
+    } else {
+      handleDirectRecover();
+    }
+  };
+  const handleClose = () => {
+    setDialogOpen(false);
+    dialogProps.onClose?.();
+  };
+  if (loading) {
+    return null;
+  }
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_ux.Dialog, {
+    PaperProps: {
+      style: {
+        minHeight: "auto"
+      }
+    },
+    ...(dialogProps || {}),
+    open: dialogOpen,
+    title: dialogProps?.title || t("payment.customer.recover.title"),
+    sx: {
+      "& .MuiDialogContent-root": {
+        pt: 0
+      }
+    },
+    onClose: handleClose,
+    children: error ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Alert, {
+      severity: "error",
+      children: error.message
+    }) : /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+      gap: 2,
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        color: "text.secondary",
+        variant: "body2",
+        children: t("payment.customer.recover.description", {
+          date: (0, _util.formatToDate)(Number(data?.subscription?.current_period_end || "0") * 1e3)
+        })
+      }), needStake && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Alert, {
+        severity: "warning",
+        children: t("payment.customer.recover.stakeRequiredDescription")
+      }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        direction: "row",
+        justifyContent: "flex-end",
+        gap: 2,
+        mt: 2,
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+          variant: "outlined",
+          color: "primary",
+          onClick: handleClose,
+          children: t("common.cancel")
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_loadingButton.default, {
+          variant: "contained",
+          size: "small",
+          loading: recoverLoading,
+          onClick: handleRecover,
+          children: t("common.confirm")
+        })]
+      })]
+    })
+  });
+}
+RecoverSubscription.defaultProps = {
+  onResumed: () => {},
+  dialogProps: {
+    open: true
+  },
+  successToast: true,
+  authToken: void 0
+};
+module.exports = RecoverSubscription;

package/lib/index.d.ts

@@ -31,6 +31,7 @@ import { createLazyComponent } from './components/lazy-loader';
 import OverdueInvoicePayment from './components/over-due-invoice-payment';
 import PaymentBeneficiaries from './components/payment-beneficiaries';
 import LoadingButton from './components/loading-button';
+import ResumeSubscription from './components/resume-subscription';
 export { PaymentThemeProvider } from './theme';
 export * from './libs/util';
 export * from './libs/connect';
@@ -45,4 +46,4 @@ export * from './hooks/scroll';
 export * from './hooks/keyboard';
 export * from './libs/validator';
 export { translations, createTranslator } from './locales';
-export { createLazyComponent, api, dayjs, FormInput, 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, };
+export { createLazyComponent, api, dayjs, FormInput, 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, };

package/lib/index.js

@@ -38,6 +38,7 @@ var _exportNames = {
   OverdueInvoicePayment: true,
   PaymentBeneficiaries: true,
   LoadingButton: true,
+  ResumeSubscription: true,
   PaymentThemeProvider: true,
   translations: true,
   createTranslator: true
@@ -186,6 +187,12 @@ Object.defineProperty(exports, "ProductSkeleton", {
     return _productSkeleton.default;
   }
 });
+Object.defineProperty(exports, "ResumeSubscription", {
+  enumerable: true,
+  get: function () {
+    return _resumeSubscription.default;
+  }
+});
 Object.defineProperty(exports, "SafeGuard", {
   enumerable: true,
   get: function () {
@@ -297,6 +304,7 @@ var _lazyLoader = require("./components/lazy-loader");
 var _overDueInvoicePayment = _interopRequireDefault(require("./components/over-due-invoice-payment"));
 var _paymentBeneficiaries = _interopRequireDefault(require("./components/payment-beneficiaries"));
 var _loadingButton = _interopRequireDefault(require("./components/loading-button"));
+var _resumeSubscription = _interopRequireDefault(require("./components/resume-subscription"));
 var _theme = require("./theme");
 var _util = require("./libs/util");
 Object.keys(_util).forEach(function (key) {

package/lib/libs/util.js

@@ -1172,7 +1172,8 @@ function getInvoiceDescriptionAndReason(invoice, locale = "en") {
     "Recharge for subscription": (0, _locales.t)("payment.invoice.reason.rechargeForSubscription", locale),
     "Add funds for subscription": (0, _locales.t)("payment.invoice.reason.rechargeForSubscription", locale),
     "Overdraft protection": (0, _locales.t)("payment.invoice.reason.overdraftProtection", locale),
-    "Stake for subscription overdraft protection": (0, _locales.t)("payment.invoice.reason.stakeForSubscriptionOverdraftProtection", locale)
+    "Stake for subscription overdraft protection": (0, _locales.t)("payment.invoice.reason.stakeForSubscriptionOverdraftProtection", locale),
+    "Re-stake to resume subscription": (0, _locales.t)("payment.invoice.reason.reStakeToResumeSubscription", locale)
   };
   return {
     description: descMap[description] || description,

package/lib/locales/en.js

@@ -255,8 +255,8 @@ module.exports = (0, _flat.default)({
         button: "Unsubscribe",
         title: "Cancel your subscription",
         comment: "Any additional feedback?",
-        description: "Your subscription will be canceled, but it is still available until the end of your current billing period on {date}",
-        trialDescription: "Free trial subscriptions will be canceled immediately and no longer available, confirm to continue",
+        description: "Your subscription will be canceled, but it is still available until the end of your current billing period on {date}.",
+        trialDescription: "Free trial subscriptions will be canceled immediately and no longer available, confirm to continue.",
         feedback: {
           tip: "We would love your feedback, it will help us improve our service",
           too_expensive: "The service is too expensive",
@@ -283,7 +283,11 @@ module.exports = (0, _flat.default)({
       recover: {
         button: "Resume Subscription",
         title: "Resume Your Subscription",
-        description: "Your subscription will not be canceled and will be automatically renewed on {date}, please confirm to continue"
+        description: "Your subscription will not be canceled and will be automatically renewed on {date}, please confirm to continue.",
+        success: "Subscription resumed successfully",
+        reStakeTitle: "Re-stake to resume subscription",
+        stakeRequiredDescription: "Your previous stake has been revoked. You need to re-stake to resume your subscription.",
+        stakeWarning: "Please ensure you have sufficient balance for staking before proceeding."
       },
       changePlan: {
         button: "Change Plan",
@@ -380,6 +384,7 @@ module.exports = (0, _flat.default)({
         rechargeForSubscription: "Add funds for subscription",
         overdraftProtection: "SubGuard\u2122 Fee",
         stakeForSubscriptionOverdraftProtection: "SubGuard\u2122",
+        reStakeToResumeSubscription: "Subscription resume",
         gas: "Gas",
         fee: "Fee"
       }

package/lib/locales/zh.js

@@ -255,8 +255,8 @@ module.exports = (0, _flat.default)({
         button: "\u53D6\u6D88\u8BA2\u9605",
         title: "\u53D6\u6D88\u60A8\u7684\u8BA2\u9605",
         comment: "\u4F60\u8FD8\u6709\u5176\u4ED6\u53CD\u9988\u4E48\uFF1F",
-        description: "\u60A8\u7684\u8BA2\u9605\u5C06\u88AB\u53D6\u6D88\uFF0C\u4F46\u4ECD\u7136\u53EF\u7528\u76F4\u5230\u60A8\u5F53\u524D\u8BA1\u8D39\u5468\u671F\u7ED3\u675F\u4E8E{date}",
-        trialDescription: "\u514D\u8D39\u8BD5\u7528\u7684\u8BA2\u9605\u5C06\u88AB\u7ACB\u5373\u53D6\u6D88\uFF0C\u4E0D\u518D\u53EF\u7528\uFF0C\u786E\u8BA4\u662F\u5426\u7EE7\u7EED",
+        description: "\u60A8\u7684\u8BA2\u9605\u5C06\u88AB\u53D6\u6D88\uFF0C\u4F46\u4ECD\u7136\u53EF\u7528\u76F4\u5230\u60A8\u5F53\u524D\u8BA1\u8D39\u5468\u671F\u7ED3\u675F\u4E8E{date}\u3002",
+        trialDescription: "\u514D\u8D39\u8BD5\u7528\u7684\u8BA2\u9605\u5C06\u88AB\u7ACB\u5373\u53D6\u6D88\uFF0C\u4E0D\u518D\u53EF\u7528\uFF0C\u786E\u8BA4\u662F\u5426\u7EE7\u7EED\u3002",
         feedback: {
           tip: "\u6211\u4EEC\u5E0C\u671B\u542C\u5230\u60A8\u7684\u53CD\u9988\uFF0C\u8FD9\u5C06\u5E2E\u52A9\u6211\u4EEC\u6539\u8FDB\u6211\u4EEC\u7684\u670D\u52A1",
           too_expensive: "\u670D\u52A1\u8D39\u7528\u592A\u9AD8",
@@ -284,7 +284,10 @@ module.exports = (0, _flat.default)({
       recover: {
         button: "\u6062\u590D\u8BA2\u9605",
         title: "\u6062\u590D\u60A8\u7684\u8BA2\u9605",
-        description: "\u60A8\u7684\u8BA2\u9605\u5C06\u4E0D\u4F1A\u88AB\u53D6\u6D88\uFF0C\u5E76\u5C06\u5728{date}\u81EA\u52A8\u7EED\u8BA2\uFF0C\u8BF7\u786E\u8BA4\u662F\u5426\u7EE7\u7EED"
+        description: "\u60A8\u7684\u8BA2\u9605\u5C06\u4E0D\u4F1A\u88AB\u53D6\u6D88\uFF0C\u5E76\u5C06\u5728{date}\u81EA\u52A8\u7EED\u8BA2\uFF0C\u8BF7\u786E\u8BA4\u662F\u5426\u7EE7\u7EED\u3002",
+        success: "\u8BA2\u9605\u6062\u590D\u6210\u529F",
+        reStakeTitle: "\u91CD\u65B0\u8D28\u62BC\u4EE5\u6062\u590D\u8BA2\u9605",
+        stakeRequiredDescription: "\u60A8\u4E4B\u524D\u7684\u8D28\u62BC\u5DF2\u88AB\u7533\u8BF7\u53D6\u56DE\uFF0C\u9700\u8981\u91CD\u65B0\u8D28\u62BC\u624D\u80FD\u6062\u590D\u8BA2\u9605\u3002"
       },
       changePlan: {
         button: "\u5207\u6362\u5957\u9910",
@@ -381,6 +384,7 @@ module.exports = (0, _flat.default)({
         rechargeForSubscription: "\u8BA2\u9605\u5145\u503C",
         overdraftProtection: "\u8BA2\u9605\u5B88\u62A4\u670D\u52A1\u8D39",
         stakeForSubscriptionOverdraftProtection: "\u8BA2\u9605\u5B88\u62A4\u670D\u52A1",
+        reStakeToResumeSubscription: "\u8BA2\u9605\u6062\u590D",
         gas: "\u624B\u7EED\u8D39",
         fee: "\u670D\u52A1\u8D39"
       }

package/lib/payment/form/stripe/form.js

@@ -44,6 +44,7 @@ function StripeCheckoutForm({
   const {
     t
   } = (0, _context.useLocaleContext)();
+  const theme = (0, _material.useTheme)();
   const [state, setState] = (0, _ahooks.useSetState)({
     message: "",
     confirming: false,
@@ -212,6 +213,16 @@ function StripeCheckoutForm({
               email: customer.email,
               address: customer.address
             }
+          },
+          appearance: {
+            theme: theme.palette.mode,
+            variables: {
+              colorPrimary: theme.palette.primary.main,
+              colorBackground: theme.palette.background.paper,
+              colorText: theme.palette.text.primary,
+              colorDanger: theme.palette.error.main,
+              borderRadius: "4px"
+            }
           }
         },
         onChange: handlePaymentMethodChange,
@@ -275,6 +286,7 @@ function StripeCheckout({
     t,
     locale
   } = (0, _context.useLocaleContext)();
+  const theme = (0, _material.useTheme)();
   const [state, setState] = (0, _ahooks.useSetState)({
     open: true,
     closable: true
@@ -303,6 +315,15 @@ function StripeCheckout({
       },
       form: {
         justifyContent: "flex-start"
+      },
+      ".StripeElement--focus": {
+        borderColor: theme.palette.primary.main
+      },
+      ".StripeElement--invalid": {
+        borderColor: theme.palette.error.main
+      },
+      ".StripeElement--complete": {
+        borderColor: theme.palette.success.main
       }
     },
     PaperProps: {
@@ -313,7 +334,16 @@ function StripeCheckout({
     children: /* @__PURE__ */(0, _jsxRuntime.jsx)(Elements, {
       options: {
         clientSecret,
-        locale: locale === "zh" ? "zh-CN" : "en"
+        locale: locale === "zh" ? "zh-CN" : "en",
+        appearance: {
+          theme: theme.palette.mode,
+          variables: {
+            colorPrimary: theme.palette.primary.main,
+            colorBackground: theme.palette.background.paper,
+            colorText: theme.palette.text.primary,
+            colorDanger: theme.palette.error.main
+          }
+        }
       },
       stripe: stripePromise,
       children: /* @__PURE__ */(0, _jsxRuntime.jsx)(StripeCheckoutForm, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.18.47",
+  "version": "1.18.49",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -54,11 +54,11 @@
     }
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.13.47",
-    "@arcblock/ux": "^2.13.47",
+    "@arcblock/did-connect": "^2.13.54",
+    "@arcblock/ux": "^2.13.54",
     "@arcblock/ws": "^1.20.11",
-    "@blocklet/theme": "^2.13.47",
-    "@blocklet/ui-react": "^2.13.47",
+    "@blocklet/theme": "^2.13.54",
+    "@blocklet/ui-react": "^2.13.54",
     "@mui/icons-material": "^5.16.6",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.6",
@@ -94,7 +94,7 @@
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.2",
     "@babel/preset-react": "^7.24.7",
-    "@blocklet/payment-types": "1.18.47",
+    "@blocklet/payment-types": "1.18.49",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -125,5 +125,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "e781286c5a20e54ef0eb7e029505f32c00cb33e2"
+  "gitHead": "05028e0b605756db083baa56b1faa36ef9431042"
 }

package/src/components/loading-button.tsx

@@ -68,7 +68,7 @@ const LoadingButton = forwardRef<HTMLButtonElement, LoadingButtonProps>(
     return (
       <Button
         ref={ref}
-        disabled={props.disabled}
+        disabled={props.disabled || loading}
         onClick={handleClick}
         sx={{
           position: 'relative',

package/src/components/resume-subscription.tsx

@@ -0,0 +1,217 @@
+import { useState } from 'react';
+import { Button, Typography, Stack, Alert } from '@mui/material';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import { joinURL } from 'ufo';
+import type { Subscription, TSubscriptionExpanded } from '@blocklet/payment-types';
+import { useRequest } from 'ahooks';
+import { Dialog } from '@arcblock/ux';
+import { usePaymentContext } from '../contexts/payment';
+import { formatError, formatToDate, getPrefix, isCrossOrigin } from '../libs/util';
+import api from '../libs/api';
+import LoadingButton from './loading-button';
+
+type DialogProps = {
+  open?: boolean;
+  onClose?: () => void;
+  title?: string;
+};
+
+type Props = {
+  subscriptionId: string;
+  onResumed?: (subscription: Subscription | TSubscriptionExpanded) => void;
+  dialogProps?: DialogProps;
+  successToast?: boolean;
+  authToken?: string;
+};
+
+type RecoverInfo = {
+  subscription: Subscription;
+  needStake?: boolean;
+};
+
+const fetchSubscriptionDetail = async (params: {
+  subscriptionId: string;
+  authToken?: string;
+}): Promise<TSubscriptionExpanded> => {
+  const url = `/api/subscriptions/${params.subscriptionId}`;
+  const res = await api.get(params.authToken ? joinURL(url, `?authToken=${params.authToken}`) : url);
+  return res.data;
+};
+
+const fetchRecoverInfo = async (params: { subscriptionId: string; authToken?: string }): Promise<RecoverInfo> => {
+  const url = `/api/subscriptions/${params.subscriptionId}/recover-info`;
+  const res = await api.get(params.authToken ? joinURL(url, `?authToken=${params.authToken}`) : url);
+  return res.data;
+};
+
+const recoverSubscription = async (params: {
+  subscriptionId: string;
+  authToken?: string;
+}): Promise<{
+  subscription: Subscription;
+  needStake?: boolean;
+}> => {
+  const url = `/api/subscriptions/${params.subscriptionId}/recover`;
+  const res = await api.put(params.authToken ? joinURL(url, `?authToken=${params.authToken}`) : url);
+  return res.data;
+};
+
+function RecoverSubscription({
+  subscriptionId,
+  dialogProps = {},
+  onResumed = () => {},
+  successToast = true,
+  authToken,
+}: Props) {
+  const { t, locale } = useLocaleContext();
+  const { connect } = usePaymentContext();
+  const [recoverLoading, setRecoverLoading] = useState(false);
+  const [dialogOpen, setDialogOpen] = useState(dialogProps.open || false);
+
+  const { data, error, loading } = useRequest(() => fetchRecoverInfo({ subscriptionId, authToken }), {
+    ready: !!subscriptionId,
+  });
+
+  const isCrossOriginRequest = isCrossOrigin();
+  const needStake = data?.needStake ?? false;
+
+  const handleSuccess = async () => {
+    try {
+      // 获取最新的订阅数据
+      const subscription = await fetchSubscriptionDetail({ subscriptionId, authToken });
+
+      if (successToast) {
+        Toast.success(t('payment.customer.recover.success'));
+      }
+
+      setDialogOpen(false);
+      onResumed(subscription);
+      setRecoverLoading(false);
+    } catch (err) {
+      console.error('Failed to fetch updated subscription:', err);
+      Toast.error(formatError(err));
+      setRecoverLoading(false);
+    }
+  };
+
+  const handleRecoverWithStake = () => {
+    setRecoverLoading(true);
+
+    try {
+      connect.open({
+        locale: locale as 'en' | 'zh',
+        containerEl: undefined as unknown as Element,
+        saveConnect: false,
+        action: 're-stake',
+        prefix: joinURL(getPrefix(), '/api/did'),
+        useSocket: !isCrossOriginRequest,
+        extraParams: { subscriptionId },
+        messages: {
+          scan: t('common.connect.defaultScan'),
+          title: t('payment.customer.recover.reStakeTitle'),
+          confirm: t('common.connect.confirm'),
+        } as any,
+        onSuccess: handleSuccess,
+        onClose: () => {
+          connect.close();
+          setRecoverLoading(false);
+        },
+        onError: (err: any) => {
+          Toast.error(formatError(err));
+          setRecoverLoading(false);
+        },
+      });
+    } catch (err) {
+      Toast.error(formatError(err));
+      setRecoverLoading(false);
+    }
+  };
+
+  const handleDirectRecover = async () => {
+    setRecoverLoading(true);
+
+    try {
+      const result = await recoverSubscription({ subscriptionId, authToken });
+
+      if (result.needStake) {
+        handleRecoverWithStake();
+        return;
+      }
+      const { subscription } = result;
+      if (successToast) {
+        Toast.success(t('payment.customer.recover.success'));
+      }
+
+      setDialogOpen(false);
+      onResumed(subscription);
+      setRecoverLoading(false);
+    } catch (err: any) {
+      Toast.error(formatError(err));
+      setRecoverLoading(false);
+    }
+  };
+
+  const handleRecover = () => {
+    if (needStake) {
+      handleRecoverWithStake();
+    } else {
+      handleDirectRecover();
+    }
+  };
+
+  const handleClose = () => {
+    setDialogOpen(false);
+    dialogProps.onClose?.();
+  };
+
+  if (loading) {
+    return null;
+  }
+
+  return (
+    <Dialog
+      PaperProps={{
+        style: { minHeight: 'auto' },
+      }}
+      {...(dialogProps || {})}
+      open={dialogOpen}
+      title={dialogProps?.title || t('payment.customer.recover.title')}
+      sx={{ '& .MuiDialogContent-root': { pt: 0 } }}
+      onClose={handleClose}>
+      {error ? (
+        <Alert severity="error">{error.message}</Alert>
+      ) : (
+        <Stack gap={2}>
+          <Typography color="text.secondary" variant="body2">
+            {t('payment.customer.recover.description', {
+              date: formatToDate(Number(data?.subscription?.current_period_end || '0') * 1000),
+            })}
+          </Typography>
+
+          {needStake && <Alert severity="warning">{t('payment.customer.recover.stakeRequiredDescription')}</Alert>}
+
+          <Stack direction="row" justifyContent="flex-end" gap={2} mt={2}>
+            <Button variant="outlined" color="primary" onClick={handleClose}>
+              {t('common.cancel')}
+            </Button>
+            <LoadingButton variant="contained" size="small" loading={recoverLoading} onClick={handleRecover}>
+              {t('common.confirm')}
+            </LoadingButton>
+          </Stack>
+        </Stack>
+      )}
+    </Dialog>
+  );
+}
+
+RecoverSubscription.defaultProps = {
+  onResumed: () => {},
+  dialogProps: {
+    open: true,
+  },
+  successToast: true,
+  authToken: undefined,
+};
+
+export default RecoverSubscription;

package/src/index.ts

@@ -31,6 +31,7 @@ import { createLazyComponent } from './components/lazy-loader';
 import OverdueInvoicePayment from './components/over-due-invoice-payment';
 import PaymentBeneficiaries from './components/payment-beneficiaries';
 import LoadingButton from './components/loading-button';
+import ResumeSubscription from './components/resume-subscription';
 
 export { PaymentThemeProvider } from './theme';
 
@@ -84,4 +85,5 @@ export {
   PaymentBeneficiaries,
   LoadingButton,
   DonateDetails,
+  ResumeSubscription,
 };

package/src/libs/util.ts

@@ -1214,6 +1214,7 @@ export function getInvoiceDescriptionAndReason(invoice: TInvoiceExpanded, locale
       'payment.invoice.reason.stakeForSubscriptionOverdraftProtection',
       locale
     ),
+    'Re-stake to resume subscription': t('payment.invoice.reason.reStakeToResumeSubscription', locale),
   };
 
   return {

package/src/locales/en.tsx

@@ -257,9 +257,9 @@ export default flat({
         title: 'Cancel your subscription',
         comment: 'Any additional feedback?',
         description:
-          'Your subscription will be canceled, but it is still available until the end of your current billing period on {date}',
+          'Your subscription will be canceled, but it is still available until the end of your current billing period on {date}.',
         trialDescription:
-          'Free trial subscriptions will be canceled immediately and no longer available, confirm to continue',
+          'Free trial subscriptions will be canceled immediately and no longer available, confirm to continue.',
         feedback: {
           tip: 'We would love your feedback, it will help us improve our service',
           too_expensive: 'The service is too expensive',
@@ -287,7 +287,12 @@ export default flat({
         button: 'Resume Subscription',
         title: 'Resume Your Subscription',
         description:
-          'Your subscription will not be canceled and will be automatically renewed on {date}, please confirm to continue',
+          'Your subscription will not be canceled and will be automatically renewed on {date}, please confirm to continue.',
+        success: 'Subscription resumed successfully',
+        reStakeTitle: 'Re-stake to resume subscription',
+        stakeRequiredDescription:
+          'Your previous stake has been revoked. You need to re-stake to resume your subscription.',
+        stakeWarning: 'Please ensure you have sufficient balance for staking before proceeding.',
       },
       changePlan: {
         button: 'Change Plan',
@@ -388,6 +393,7 @@ export default flat({
         rechargeForSubscription: 'Add funds for subscription',
         overdraftProtection: 'SubGuard™ Fee',
         stakeForSubscriptionOverdraftProtection: 'SubGuard™',
+        reStakeToResumeSubscription: 'Subscription resume',
         gas: 'Gas',
         fee: 'Fee',
       },

package/src/locales/zh.tsx

@@ -251,8 +251,8 @@ export default flat({
         button: '取消订阅',
         title: '取消您的订阅',
         comment: '你还有其他反馈么？',
-        description: '您的订阅将被取消，但仍然可用直到您当前计费周期结束于{date}',
-        trialDescription: '免费试用的订阅将被立即取消，不再可用，确认是否继续',
+        description: '您的订阅将被取消，但仍然可用直到您当前计费周期结束于{date}。',
+        trialDescription: '免费试用的订阅将被立即取消，不再可用，确认是否继续。',
         feedback: {
           tip: '我们希望听到您的反馈，这将帮助我们改进我们的服务',
           too_expensive: '服务费用太高',
@@ -280,7 +280,10 @@ export default flat({
       recover: {
         button: '恢复订阅',
         title: '恢复您的订阅',
-        description: '您的订阅将不会被取消，并将在{date}自动续订，请确认是否继续',
+        description: '您的订阅将不会被取消，并将在{date}自动续订，请确认是否继续。',
+        success: '订阅恢复成功',
+        reStakeTitle: '重新质押以恢复订阅',
+        stakeRequiredDescription: '您之前的质押已被申请取回，需要重新质押才能恢复订阅。',
       },
       changePlan: {
         button: '切换套餐',
@@ -378,6 +381,7 @@ export default flat({
         rechargeForSubscription: '订阅充值',
         overdraftProtection: '订阅守护服务费',
         stakeForSubscriptionOverdraftProtection: '订阅守护服务',
+        reStakeToResumeSubscription: '订阅恢复',
         gas: '手续费',
         fee: '服务费',
       },

package/src/payment/form/stripe/form.tsx

@@ -3,7 +3,7 @@ import Center from '@arcblock/ux/lib/Center';
 import Dialog from '@arcblock/ux/lib/Dialog';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import type { TCustomer } from '@blocklet/payment-types';
-import { CircularProgress, Typography } from '@mui/material';
+import { CircularProgress, Typography, useTheme } from '@mui/material';
 import { styled } from '@mui/system';
 import { useSetState } from 'ahooks';
 import { useEffect, useCallback } from 'react';
@@ -43,6 +43,7 @@ function StripeCheckoutForm({
   const stripe = useStripe();
   const elements = useElements();
   const { t } = useLocaleContext();
+  const theme = useTheme();
 
   const [state, setState] = useSetState({
     message: '',
@@ -204,6 +205,16 @@ function StripeCheckoutForm({
                 address: customer.address,
               },
             },
+            appearance: {
+              theme: theme.palette.mode,
+              variables: {
+                colorPrimary: theme.palette.primary.main,
+                colorBackground: theme.palette.background.paper,
+                colorText: theme.palette.text.primary,
+                colorDanger: theme.palette.error.main,
+                borderRadius: '4px',
+              },
+            },
           }}
           onChange={handlePaymentMethodChange}
           onReady={() => setState({ loaded: true })}
@@ -266,6 +277,7 @@ export default function StripeCheckout({
   const stripePromise = loadStripe(publicKey);
   const { isMobile } = useMobile();
   const { t, locale } = useLocaleContext();
+  const theme = useTheme();
   const [state, setState] = useSetState({
     open: true,
     closable: true,
@@ -295,6 +307,15 @@ export default function StripeCheckout({
         form: {
           justifyContent: 'flex-start',
         },
+        '.StripeElement--focus': {
+          borderColor: theme.palette.primary.main,
+        },
+        '.StripeElement--invalid': {
+          borderColor: theme.palette.error.main,
+        },
+        '.StripeElement--complete': {
+          borderColor: theme.palette.success.main,
+        },
       }}
       PaperProps={{
         style: {
@@ -305,6 +326,15 @@ export default function StripeCheckout({
         options={{
           clientSecret,
           locale: locale === 'zh' ? 'zh-CN' : 'en',
+          appearance: {
+            theme: theme.palette.mode,
+            variables: {
+              colorPrimary: theme.palette.primary.main,
+              colorBackground: theme.palette.background.paper,
+              colorText: theme.palette.text.primary,
+              colorDanger: theme.palette.error.main,
+            },
+          },
         }}
         stripe={stripePromise}>
         <StripeCheckoutForm