@blocklet/payment-react 1.26.3 → 1.26.5

package/es/checkout-v2/components/dialogs/checkout-dialogs.js

@@ -50,7 +50,8 @@ export default function CheckoutDialogs() {
         },
         returnUrl: getRedirectUrl(session),
         onConfirm: submit.stripeConfirm,
-        onCancel: submit.stripeCancel
+        onCancel: submit.stripeCancel,
+        onSkip: stripeContext.noPaymentRequired && `${session?.metadata?.allow_skip_payment_method}` === "true" ? submit.stripeSkip : void 0
       }
     ),
     submit.status === "confirming_price" && submit.context?.type === "price_change" && /* @__PURE__ */ jsx(

package/es/checkout-v2/components/right/customer-info-card.js

@@ -36,6 +36,11 @@ export default function CustomerInfoCard({ form, isLoggedIn }) {
     [form.onChange]
     // eslint-disable-line react-hooks/exhaustive-deps
   );
+  useEffect(() => {
+    if (ready && !showEditForm && Object.keys(form.errors).length > 0) {
+      setShowEditForm(true);
+    }
+  }, [form.errors]);
   if (!isLoggedIn || !ready) return null;
   if (!showEditForm) {
     return /* @__PURE__ */ jsxs(Box, { sx: { mt: 2 }, children: [

package/es/checkout-v2/utils/format.d.ts

@@ -43,7 +43,7 @@ export declare const whiteTooltipSx: {
         };
     };
 };
-export declare function formatTrialText(t: (key: string) => string, days: number, interval: string): string;
+export declare function formatTrialText(t: (key: string, params?: Record<string, any>) => string, days: number, interval: string): string;
 type TFn = (key: string, params?: Record<string, any>) => string;
 export type ItemTypeBadge = 'subscription' | 'topup' | 'oneTime';
 interface ItemMeta {

package/es/checkout-v2/utils/format.js

@@ -86,8 +86,9 @@ export const whiteTooltipSx = {
   }
 };
 export function formatTrialText(t, days, interval) {
-  const intervalLabel = t(`common.${interval || "day"}`);
-  return `${days} ${intervalLabel}${days > 1 ? "s" : ""} free`;
+  const key = interval || "day";
+  const intervalKey = days > 1 ? `common.${key}s` : `common.${key}`;
+  return t("payment.checkout.free", { count: days, interval: t(intervalKey) });
 }
 export function getSessionHeaderMeta(t, session, product, items) {
   const mode = session?.mode || "payment";

package/es/components/service-suspended-dialog.js

@@ -10,12 +10,14 @@ export default function ServiceSuspendedDialog({ open, onClose }) {
     {
       open,
       onClose,
-      PaperProps: {
-        sx: {
-          borderRadius: 3,
-          maxWidth: 400,
-          mx: "auto",
-          overflow: "hidden"
+      slotProps: {
+        paper: {
+          sx: {
+            borderRadius: 3,
+            maxWidth: 400,
+            mx: "auto",
+            overflow: "hidden"
+          }
         }
       },
       children: /* @__PURE__ */ jsxs(DialogContent, { sx: { p: 0 }, children: [

package/es/libs/util.js

@@ -734,34 +734,23 @@ export function hasMultipleRecurringIntervals(items) {
 }
 export function getFreeTrialTime({ trialInDays, trialEnd }, locale = "en") {
   const now = dayjs().unix();
+  const plural = (singular, count) => t(`common.${count > 1 ? `${singular}s` : singular}`, locale);
   if (trialEnd > 0 && trialEnd > now) {
     if (trialEnd - now < 3600) {
-      return {
-        count: Math.ceil((trialEnd - now) / 60),
-        interval: t("common.minute", locale)
-      };
+      const count2 = Math.ceil((trialEnd - now) / 60);
+      return { count: count2, interval: plural("minute", count2) };
     }
     if (trialEnd - now < 86400) {
-      return {
-        count: Math.ceil((trialEnd - now) / 3600),
-        interval: t("common.hour", locale)
-      };
+      const count2 = Math.ceil((trialEnd - now) / 3600);
+      return { count: count2, interval: plural("hour", count2) };
     }
-    return {
-      count: Math.ceil((trialEnd - now) / 86400),
-      interval: t("common.day", locale)
-    };
+    const count = Math.ceil((trialEnd - now) / 86400);
+    return { count, interval: plural("day", count) };
   }
   if (trialInDays > 0) {
-    return {
-      count: trialInDays,
-      interval: t("common.day", locale)
-    };
+    return { count: trialInDays, interval: plural("day", trialInDays) };
   }
-  return {
-    count: 0,
-    interval: t("common.day", locale)
-  };
+  return { count: 0, interval: t("common.day", locale) };
 }
 export function formatCheckoutHeadlines(items, currency, { trialInDays, trialEnd }, locale = "en", { exchangeRate = null } = {}) {
   const brand = getStatementDescriptor(items);

package/es/locales/en.js

@@ -98,7 +98,7 @@ export default flat({
     continue: "Continue",
     qty: "Qty {count}",
     each: "{unit} each",
-    trial: "Free for {count} {interval}{count > 1 ? 's' : ''}",
+    trial: "Free for {count} {interval}",
     billed: "billed {rule}",
     metered: "based on usage",
     minute: "minute",
@@ -115,6 +115,7 @@ export default flat({
     month3: "every 3 months",
     month6: "every 6 months",
     recurring: "every {count} {interval}",
+    minutes: "minutes",
     hours: "hours",
     days: "days",
     weeks: "weeks",
@@ -265,6 +266,7 @@ export default flat({
         configTip: "Configure donation settings in Payment Kit"
       },
       cardPay: "{action} with bank card",
+      skipPaymentMethod: "Skip, bind later",
       empty: "Nothing to pay",
       per: "per",
       pay: "Pay {payee}",
@@ -275,7 +277,7 @@ export default flat({
       then: "Then {subscription} {recurring}",
       meteredThen: "Then {recurring} based on usage",
       metered: "{recurring} based on usage",
-      free: "{count} {interval}{count > 1 ? 's' : ''} free",
+      free: "{count} {interval} free",
       least: "continue with at least",
       completed: {
         payment: "Purchase successful",

package/es/locales/zh.js

@@ -115,6 +115,7 @@ export default flat({
     month3: "\u6BCF\u5B63\u5EA6",
     month6: "\u6BCF\u534A\u5E74",
     recurring: "\u6BCF{count}{interval}",
+    minutes: "\u5206\u949F",
     hours: "\u5C0F\u65F6",
     days: "\u5929",
     weeks: "\u5468",
@@ -265,6 +266,7 @@ export default flat({
         configTip: "\u524D\u5F80 Payment Kit \u914D\u7F6E\u6253\u8D4F\u9009\u9879"
       },
       cardPay: "\u4F7F\u7528\u94F6\u884C\u5361{action}",
+      skipPaymentMethod: "\u8DF3\u8FC7\uFF0C\u7A0D\u540E\u7ED1\u5B9A",
       empty: "\u6CA1\u6709\u53EF\u652F\u4ED8\u7684\u9879\u76EE",
       per: "\u6BCF",
       pay: "\u4ED8\u6B3E\u7ED9 {payee}",

package/es/payment/form/index.js

@@ -1451,16 +1451,7 @@ export default function PaymentForm({
         }
       }
     ),
-    state.serviceSuspended && /* @__PURE__ */ jsx(
-      ConfirmDialog,
-      {
-        onConfirm: () => setState({ serviceSuspended: false }),
-        onCancel: () => setState({ serviceSuspended: false }),
-        title: t("payment.checkout.stopAcceptingOrders.title"),
-        message: t("payment.checkout.stopAcceptingOrders.description"),
-        confirm: t("common.confirm")
-      }
-    ),
+    state.serviceSuspended && /* @__PURE__ */ jsx(ServiceSuspendedDialog, { open: true, onClose: () => setState({ serviceSuspended: false }) }),
     FastCheckoutConfirmDialog,
     CreditInsufficientDialog,
     PriceUpdatedDialog,

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

@@ -5,6 +5,7 @@ export type StripeCheckoutFormProps = {
     customer: TCustomer;
     mode: string;
     onConfirm: Function;
+    onSkip?: Function | null;
     returnUrl?: string;
     submitButtonText?: string;
 };
@@ -16,8 +17,9 @@ export type StripeCheckoutProps = {
     customer: TCustomer;
     onConfirm: Function;
     onCancel: Function;
+    onSkip?: Function | null;
     returnUrl?: string;
     title?: string;
     submitButtonText?: string;
 };
-export default function StripeCheckout({ clientSecret, intentType, publicKey, mode, customer, onConfirm, onCancel, returnUrl, title, submitButtonText, }: StripeCheckoutProps): import("react").JSX.Element;
+export default function StripeCheckout({ clientSecret, intentType, publicKey, mode, customer, onConfirm, onCancel, onSkip, returnUrl, title, submitButtonText, }: StripeCheckoutProps): import("react").JSX.Element;

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

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, 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";
@@ -23,6 +23,7 @@ function StripeCheckoutForm({
   customer,
   mode,
   onConfirm,
+  onSkip = null,
   returnUrl = "",
   submitButtonText = ""
 }) {
@@ -191,20 +192,34 @@ function StripeCheckoutForm({
       }
     ) }),
     (!stripe || !elements || !state.loaded) && /* @__PURE__ */ jsx(Center, { relative: "parent", children: /* @__PURE__ */ jsx(CircularProgress, {}) }),
-    stripe && elements && state.loaded && /* @__PURE__ */ jsx(
-      LoadingButton,
-      {
-        fullWidth: true,
-        sx: { mt: 2, mb: 1, borderRadius: 0, fontSize: "0.875rem" },
-        type: "submit",
-        disabled: state.confirming || !state.loaded,
-        loading: state.confirming,
-        variant: "contained",
-        color: "primary",
-        size: "large",
-        children: submitButtonText || t("payment.checkout.continue", { action: t(`payment.checkout.${mode}`) })
-      }
-    ),
+    stripe && elements && state.loaded && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        LoadingButton,
+        {
+          fullWidth: true,
+          sx: { mt: 2, mb: 1, borderRadius: 0, fontSize: "0.875rem" },
+          type: "submit",
+          disabled: state.confirming || !state.loaded,
+          loading: state.confirming,
+          variant: "contained",
+          color: "primary",
+          size: "large",
+          children: submitButtonText || t("payment.checkout.continue", { action: t(`payment.checkout.${mode}`) })
+        }
+      ),
+      onSkip && /* @__PURE__ */ jsx(
+        LoadingButton,
+        {
+          fullWidth: true,
+          sx: { mb: 1, borderRadius: 0, fontSize: "0.875rem", borderColor: "divider" },
+          disabled: state.confirming,
+          variant: "outlined",
+          color: "primary",
+          onClick: () => onSkip(),
+          children: t("payment.checkout.skipPaymentMethod", { defaultValue: "Skip, bind later" })
+        }
+      )
+    ] }),
     state.message && /* @__PURE__ */ jsx(Typography, { sx: { mt: 1, color: "error.main" }, children: state.message })
   ] });
 }
@@ -225,6 +240,7 @@ export default function StripeCheckout({
   customer,
   onConfirm,
   onCancel,
+  onSkip = null,
   returnUrl = "",
   title = "",
   submitButtonText = ""
@@ -300,6 +316,7 @@ export default function StripeCheckout({
               mode,
               customer,
               onConfirm,
+              onSkip,
               returnUrl,
               submitButtonText
             }

package/lib/checkout-v2/components/dialogs/checkout-dialogs.js

@@ -56,7 +56,8 @@ function CheckoutDialogs() {
       },
       returnUrl: getRedirectUrl(session),
       onConfirm: submit.stripeConfirm,
-      onCancel: submit.stripeCancel
+      onCancel: submit.stripeCancel,
+      onSkip: stripeContext.noPaymentRequired && `${session?.metadata?.allow_skip_payment_method}` === "true" ? submit.stripeSkip : void 0
     }), submit.status === "confirming_price" && submit.context?.type === "price_change" && /* @__PURE__ */(0, _jsxRuntime.jsx)(_priceChangeConfirm.default, {
       open: true,
       changePercent: submit.context.changePercent,

package/lib/checkout-v2/components/right/customer-info-card.js

@@ -46,6 +46,11 @@ function CustomerInfoCard({
   const handleChange = (0, _react.useCallback)((field, value) => form.onChange(field, value), [form.onChange]
   // eslint-disable-line react-hooks/exhaustive-deps
   );
+  (0, _react.useEffect)(() => {
+    if (ready && !showEditForm && Object.keys(form.errors).length > 0) {
+      setShowEditForm(true);
+    }
+  }, [form.errors]);
   if (!isLoggedIn || !ready) return null;
   if (!showEditForm) {
     return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {

package/lib/checkout-v2/utils/format.d.ts

@@ -43,7 +43,7 @@ export declare const whiteTooltipSx: {
         };
     };
 };
-export declare function formatTrialText(t: (key: string) => string, days: number, interval: string): string;
+export declare function formatTrialText(t: (key: string, params?: Record<string, any>) => string, days: number, interval: string): string;
 type TFn = (key: string, params?: Record<string, any>) => string;
 export type ItemTypeBadge = 'subscription' | 'topup' | 'oneTime';
 interface ItemMeta {

package/lib/checkout-v2/utils/format.js

@@ -116,8 +116,12 @@ const whiteTooltipSx = exports.whiteTooltipSx = {
   }
 };
 function formatTrialText(t, days, interval) {
-  const intervalLabel = t(`common.${interval || "day"}`);
-  return `${days} ${intervalLabel}${days > 1 ? "s" : ""} free`;
+  const key = interval || "day";
+  const intervalKey = days > 1 ? `common.${key}s` : `common.${key}`;
+  return t("payment.checkout.free", {
+    count: days,
+    interval: t(intervalKey)
+  });
 }
 function getSessionHeaderMeta(t, session, product, items) {
   const mode = session?.mode || "payment";

package/lib/components/service-suspended-dialog.js

@@ -20,12 +20,14 @@ function ServiceSuspendedDialog({
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Dialog, {
     open,
     onClose,
-    PaperProps: {
-      sx: {
-        borderRadius: 3,
-        maxWidth: 400,
-        mx: "auto",
-        overflow: "hidden"
+    slotProps: {
+      paper: {
+        sx: {
+          borderRadius: 3,
+          maxWidth: 400,
+          mx: "auto",
+          overflow: "hidden"
+        }
       }
     },
     children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.DialogContent, {

package/lib/libs/util.js

@@ -891,28 +891,32 @@ function getFreeTrialTime({
   trialEnd
 }, locale = "en") {
   const now = (0, _dayjs.default)().unix();
+  const plural = (singular, count) => (0, _locales.t)(`common.${count > 1 ? `${singular}s` : singular}`, locale);
   if (trialEnd > 0 && trialEnd > now) {
     if (trialEnd - now < 3600) {
+      const count2 = Math.ceil((trialEnd - now) / 60);
       return {
-        count: Math.ceil((trialEnd - now) / 60),
-        interval: (0, _locales.t)("common.minute", locale)
+        count: count2,
+        interval: plural("minute", count2)
       };
     }
     if (trialEnd - now < 86400) {
+      const count2 = Math.ceil((trialEnd - now) / 3600);
       return {
-        count: Math.ceil((trialEnd - now) / 3600),
-        interval: (0, _locales.t)("common.hour", locale)
+        count: count2,
+        interval: plural("hour", count2)
       };
     }
+    const count = Math.ceil((trialEnd - now) / 86400);
     return {
-      count: Math.ceil((trialEnd - now) / 86400),
-      interval: (0, _locales.t)("common.day", locale)
+      count,
+      interval: plural("day", count)
     };
   }
   if (trialInDays > 0) {
     return {
       count: trialInDays,
-      interval: (0, _locales.t)("common.day", locale)
+      interval: plural("day", trialInDays)
     };
   }
   return {

package/lib/locales/en.js

@@ -105,7 +105,7 @@ module.exports = (0, _flat.default)({
     continue: "Continue",
     qty: "Qty {count}",
     each: "{unit} each",
-    trial: "Free for {count} {interval}{count > 1 ? 's' : ''}",
+    trial: "Free for {count} {interval}",
     billed: "billed {rule}",
     metered: "based on usage",
     minute: "minute",
@@ -122,6 +122,7 @@ module.exports = (0, _flat.default)({
     month3: "every 3 months",
     month6: "every 6 months",
     recurring: "every {count} {interval}",
+    minutes: "minutes",
     hours: "hours",
     days: "days",
     weeks: "weeks",
@@ -272,6 +273,7 @@ module.exports = (0, _flat.default)({
         configTip: "Configure donation settings in Payment Kit"
       },
       cardPay: "{action} with bank card",
+      skipPaymentMethod: "Skip, bind later",
       empty: "Nothing to pay",
       per: "per",
       pay: "Pay {payee}",
@@ -282,7 +284,7 @@ module.exports = (0, _flat.default)({
       then: "Then {subscription} {recurring}",
       meteredThen: "Then {recurring} based on usage",
       metered: "{recurring} based on usage",
-      free: "{count} {interval}{count > 1 ? 's' : ''} free",
+      free: "{count} {interval} free",
       least: "continue with at least",
       completed: {
         payment: "Purchase successful",

package/lib/locales/zh.js

@@ -122,6 +122,7 @@ module.exports = (0, _flat.default)({
     month3: "\u6BCF\u5B63\u5EA6",
     month6: "\u6BCF\u534A\u5E74",
     recurring: "\u6BCF{count}{interval}",
+    minutes: "\u5206\u949F",
     hours: "\u5C0F\u65F6",
     days: "\u5929",
     weeks: "\u5468",
@@ -272,6 +273,7 @@ module.exports = (0, _flat.default)({
         configTip: "\u524D\u5F80 Payment Kit \u914D\u7F6E\u6253\u8D4F\u9009\u9879"
       },
       cardPay: "\u4F7F\u7528\u94F6\u884C\u5361{action}",
+      skipPaymentMethod: "\u8DF3\u8FC7\uFF0C\u7A0D\u540E\u7ED1\u5B9A",
       empty: "\u6CA1\u6709\u53EF\u652F\u4ED8\u7684\u9879\u76EE",
       per: "\u6BCF",
       pay: "\u4ED8\u6B3E\u7ED9 {payee}",

package/lib/payment/form/index.js

@@ -1630,16 +1630,11 @@ function PaymentForm({
         }),
         title: t("payment.customer.pastDue.alert.title")
       }
-    }), state.serviceSuspended && /* @__PURE__ */(0, _jsxRuntime.jsx)(_confirm.default, {
-      onConfirm: () => setState({
-        serviceSuspended: false
-      }),
-      onCancel: () => setState({
+    }), state.serviceSuspended && /* @__PURE__ */(0, _jsxRuntime.jsx)(_serviceSuspendedDialog.default, {
+      open: true,
+      onClose: () => setState({
         serviceSuspended: false
-      }),
-      title: t("payment.checkout.stopAcceptingOrders.title"),
-      message: t("payment.checkout.stopAcceptingOrders.description"),
-      confirm: t("common.confirm")
+      })
     }), FastCheckoutConfirmDialog, CreditInsufficientDialog, PriceUpdatedDialog, state.priceChangeConfirm?.open && /* @__PURE__ */(0, _jsxRuntime.jsx)(_priceChangeConfirm.default, {
       open: true,
       changePercent: state.priceChangeConfirm.changePercent,

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

@@ -5,6 +5,7 @@ export type StripeCheckoutFormProps = {
     customer: TCustomer;
     mode: string;
     onConfirm: Function;
+    onSkip?: Function | null;
     returnUrl?: string;
     submitButtonText?: string;
 };
@@ -16,8 +17,9 @@ export type StripeCheckoutProps = {
     customer: TCustomer;
     onConfirm: Function;
     onCancel: Function;
+    onSkip?: Function | null;
     returnUrl?: string;
     title?: string;
     submitButtonText?: string;
 };
-export default function StripeCheckout({ clientSecret, intentType, publicKey, mode, customer, onConfirm, onCancel, returnUrl, title, submitButtonText, }: StripeCheckoutProps): import("react").JSX.Element;
+export default function StripeCheckout({ clientSecret, intentType, publicKey, mode, customer, onConfirm, onCancel, onSkip, returnUrl, title, submitButtonText, }: StripeCheckoutProps): import("react").JSX.Element;

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

@@ -37,6 +37,7 @@ function StripeCheckoutForm({
   customer,
   mode,
   onConfirm,
+  onSkip = null,
   returnUrl = "",
   submitButtonText = ""
 }) {
@@ -234,23 +235,40 @@ function StripeCheckoutForm({
     }), (!stripe || !elements || !state.loaded) && /* @__PURE__ */(0, _jsxRuntime.jsx)(_Center.default, {
       relative: "parent",
       children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {})
-    }), stripe && elements && state.loaded && /* @__PURE__ */(0, _jsxRuntime.jsx)(_loadingButton.default, {
-      fullWidth: true,
-      sx: {
-        mt: 2,
-        mb: 1,
-        borderRadius: 0,
-        fontSize: "0.875rem"
-      },
-      type: "submit",
-      disabled: state.confirming || !state.loaded,
-      loading: state.confirming,
-      variant: "contained",
-      color: "primary",
-      size: "large",
-      children: submitButtonText || t("payment.checkout.continue", {
-        action: t(`payment.checkout.${mode}`)
-      })
+    }), stripe && elements && state.loaded && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_loadingButton.default, {
+        fullWidth: true,
+        sx: {
+          mt: 2,
+          mb: 1,
+          borderRadius: 0,
+          fontSize: "0.875rem"
+        },
+        type: "submit",
+        disabled: state.confirming || !state.loaded,
+        loading: state.confirming,
+        variant: "contained",
+        color: "primary",
+        size: "large",
+        children: submitButtonText || t("payment.checkout.continue", {
+          action: t(`payment.checkout.${mode}`)
+        })
+      }), onSkip && /* @__PURE__ */(0, _jsxRuntime.jsx)(_loadingButton.default, {
+        fullWidth: true,
+        sx: {
+          mb: 1,
+          borderRadius: 0,
+          fontSize: "0.875rem",
+          borderColor: "divider"
+        },
+        disabled: state.confirming,
+        variant: "outlined",
+        color: "primary",
+        onClick: () => onSkip(),
+        children: t("payment.checkout.skipPaymentMethod", {
+          defaultValue: "Skip, bind later"
+        })
+      })]
     }), state.message && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
       sx: {
         mt: 1,
@@ -277,6 +295,7 @@ function StripeCheckout({
   customer,
   onConfirm,
   onCancel,
+  onSkip = null,
   returnUrl = "",
   title = "",
   submitButtonText = ""
@@ -355,6 +374,7 @@ function StripeCheckout({
         mode,
         customer,
         onConfirm,
+        onSkip,
         returnUrl,
         submitButtonText
       })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.26.3",
+  "version": "1.26.5",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -59,7 +59,7 @@
     "@arcblock/react-hooks": "^3.5.1",
     "@arcblock/ux": "^3.5.1",
     "@arcblock/ws": "^1.28.5",
-    "@blocklet/payment-react-headless": "1.26.3",
+    "@blocklet/payment-react-headless": "1.26.5",
     "@blocklet/theme": "^3.5.1",
     "@blocklet/ui-react": "^3.5.1",
     "@mui/icons-material": "^7.1.2",
@@ -97,7 +97,7 @@
     "@babel/core": "^7.27.4",
     "@babel/preset-env": "^7.27.2",
     "@babel/preset-react": "^7.27.1",
-    "@blocklet/payment-types": "1.26.3",
+    "@blocklet/payment-types": "1.26.5",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -128,5 +128,5 @@
     "vite-plugin-babel": "^1.3.1",
     "vite-plugin-node-polyfills": "^0.23.0"
   },
-  "gitHead": "18c5d045139c572b52465e15c4c63b3e327efab5"
+  "gitHead": "2d208818d218494407989dd8cd460ab51d075952"
 }

package/src/checkout-v2/components/dialogs/checkout-dialogs.tsx

@@ -59,6 +59,12 @@ export default function CheckoutDialogs() {
           returnUrl={getRedirectUrl(session)}
           onConfirm={submit.stripeConfirm}
           onCancel={submit.stripeCancel}
+          onSkip={
+            stripeContext!.noPaymentRequired &&
+            `${(session?.metadata as Record<string, any>)?.allow_skip_payment_method}` === 'true'
+              ? submit.stripeSkip
+              : undefined
+          }
         />
       )}
 

package/src/checkout-v2/components/right/customer-info-card.tsx

@@ -65,6 +65,13 @@ export default function CustomerInfoCard({ form, isLoggedIn }: CustomerInfoCardP
     [form.onChange] // eslint-disable-line react-hooks/exhaustive-deps
   );
 
+  // Auto-expand to edit mode when validation errors appear (e.g. after submit click)
+  useEffect(() => {
+    if (ready && !showEditForm && Object.keys(form.errors).length > 0) {
+      setShowEditForm(true);
+    }
+  }, [form.errors]); // eslint-disable-line react-hooks/exhaustive-deps
+
   if (!isLoggedIn || !ready) return null;
 
   // Summary view

package/src/checkout-v2/layouts/checkout-layout.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/indent */
 import { Box } from '@mui/material';
 import { alpha, useTheme } from '@mui/material/styles';
 import Header from '@blocklet/ui-react/lib/Header';
@@ -34,19 +35,19 @@ const isSafari =
 
 const slideInFromRight = isSafari
   ? ({
-    '@keyframes panelFadeIn': {
-      from: { opacity: 0, transform: 'translateX(24px)' },
-      to: { opacity: 1, transform: 'none' },
-    },
-    animation: { xs: 'none', md: 'panelFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both' },
-  } as const)
+      '@keyframes panelFadeIn': {
+        from: { opacity: 0, transform: 'translateX(24px)' },
+        to: { opacity: 1, transform: 'none' },
+      },
+      animation: { xs: 'none', md: 'panelFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both' },
+    } as const)
   : ({
-    '@keyframes slideInRight': {
-      from: { transform: 'translateX(100%)' },
-      to: { transform: 'translateX(0)' },
-    },
-    animation: { xs: 'none', md: 'slideInRight 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards' },
-  } as const);
+      '@keyframes slideInRight': {
+        from: { transform: 'translateX(100%)' },
+        to: { transform: 'translateX(0)' },
+      },
+      animation: { xs: 'none', md: 'slideInRight 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards' },
+    } as const);
 
 interface CheckoutLayoutProps {
   left: React.ReactNode;

package/src/checkout-v2/utils/format.ts

@@ -136,9 +136,14 @@ export const whiteTooltipSx = {
 };
 
 // Helper: format trial text
-export function formatTrialText(t: (key: string) => string, days: number, interval: string): string {
-  const intervalLabel = t(`common.${interval || 'day'}`);
-  return `${days} ${intervalLabel}${days > 1 ? 's' : ''} free`;
+export function formatTrialText(
+  t: (key: string, params?: Record<string, any>) => string,
+  days: number,
+  interval: string
+): string {
+  const key = interval || 'day';
+  const intervalKey = days > 1 ? `common.${key}s` : `common.${key}`;
+  return t('payment.checkout.free', { count: days, interval: t(intervalKey) });
 }
 
 // ── Item meta: badge / title / subtitle for the header area ──

package/src/components/service-suspended-dialog.tsx

@@ -10,12 +10,14 @@ export default function ServiceSuspendedDialog({ open, onClose }: { open: boolea
     <Dialog
       open={open}
       onClose={onClose}
-      PaperProps={{
-        sx: {
-          borderRadius: 3,
-          maxWidth: 400,
-          mx: 'auto',
-          overflow: 'hidden',
+      slotProps={{
+        paper: {
+          sx: {
+            borderRadius: 3,
+            maxWidth: 400,
+            mx: 'auto',
+            overflow: 'hidden',
+          },
         },
       }}>
       <DialogContent sx={{ p: 0 }}>

package/src/libs/util.ts

@@ -1062,34 +1062,23 @@ export function getFreeTrialTime(
   interval: string;
 } {
   const now = dayjs().unix();
+  const plural = (singular: string, count: number) => t(`common.${count > 1 ? `${singular}s` : singular}`, locale);
   if (trialEnd > 0 && trialEnd > now) {
     if (trialEnd - now < 3600) {
-      return {
-        count: Math.ceil((trialEnd - now) / 60),
-        interval: t('common.minute', locale),
-      };
+      const count = Math.ceil((trialEnd - now) / 60);
+      return { count, interval: plural('minute', count) };
     }
     if (trialEnd - now < 86400) {
-      return {
-        count: Math.ceil((trialEnd - now) / 3600),
-        interval: t('common.hour', locale),
-      };
+      const count = Math.ceil((trialEnd - now) / 3600);
+      return { count, interval: plural('hour', count) };
     }
-    return {
-      count: Math.ceil((trialEnd - now) / 86400),
-      interval: t('common.day', locale),
-    };
+    const count = Math.ceil((trialEnd - now) / 86400);
+    return { count, interval: plural('day', count) };
   }
   if (trialInDays > 0) {
-    return {
-      count: trialInDays,
-      interval: t('common.day', locale),
-    };
+    return { count: trialInDays, interval: plural('day', trialInDays) };
   }
-  return {
-    count: 0,
-    interval: t('common.day', locale),
-  };
+  return { count: 0, interval: t('common.day', locale) };
 }
 export function formatCheckoutHeadlines(
   items: TLineItemExpanded[],

package/src/locales/en.tsx

@@ -100,7 +100,7 @@ export default flat({
     continue: 'Continue',
     qty: 'Qty {count}',
     each: '{unit} each',
-    trial: "Free for {count} {interval}{count > 1 ? 's' : ''}",
+    trial: 'Free for {count} {interval}',
     billed: 'billed {rule}',
     metered: 'based on usage',
     minute: 'minute',
@@ -117,6 +117,7 @@ export default flat({
     month3: 'every 3 months',
     month6: 'every 6 months',
     recurring: 'every {count} {interval}',
+    minutes: 'minutes',
     hours: 'hours',
     days: 'days',
     weeks: 'weeks',
@@ -271,6 +272,7 @@ export default flat({
         configTip: 'Configure donation settings in Payment Kit',
       },
       cardPay: '{action} with bank card',
+      skipPaymentMethod: 'Skip, bind later',
       empty: 'Nothing to pay',
       per: 'per',
       pay: 'Pay {payee}',
@@ -281,7 +283,7 @@ export default flat({
       then: 'Then {subscription} {recurring}',
       meteredThen: 'Then {recurring} based on usage',
       metered: '{recurring} based on usage',
-      free: "{count} {interval}{count > 1 ? 's' : ''} free",
+      free: '{count} {interval} free',
       least: 'continue with at least',
       completed: {
         payment: 'Purchase successful',

package/src/locales/zh.tsx

@@ -117,6 +117,7 @@ export default flat({
     month3: '每季度',
     month6: '每半年',
     recurring: '每{count}{interval}',
+    minutes: '分钟',
     hours: '小时',
     days: '天',
     weeks: '周',
@@ -267,6 +268,7 @@ export default flat({
         configTip: '前往 Payment Kit 配置打赏选项',
       },
       cardPay: '使用银行卡{action}',
+      skipPaymentMethod: '跳过，稍后绑定',
       empty: '没有可支付的项目',
       per: '每',
       pay: '付款给 {payee}',

package/src/payment/form/index.tsx

@@ -1759,15 +1759,7 @@ export default function PaymentForm({
           }}
         />
       )}
-      {state.serviceSuspended && (
-        <ConfirmDialog
-          onConfirm={() => setState({ serviceSuspended: false })}
-          onCancel={() => setState({ serviceSuspended: false })}
-          title={t('payment.checkout.stopAcceptingOrders.title')}
-          message={t('payment.checkout.stopAcceptingOrders.description')}
-          confirm={t('common.confirm')}
-        />
-      )}
+      {state.serviceSuspended && <ServiceSuspendedDialog open onClose={() => setState({ serviceSuspended: false })} />}
       {FastCheckoutConfirmDialog}
       {CreditInsufficientDialog}
       {PriceUpdatedDialog}

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

@@ -19,6 +19,7 @@ export type StripeCheckoutFormProps = {
   customer: TCustomer;
   mode: string;
   onConfirm: Function;
+  onSkip?: Function | null;
   returnUrl?: string;
   submitButtonText?: string;
 };
@@ -39,6 +40,7 @@ function StripeCheckoutForm({
   customer,
   mode,
   onConfirm,
+  onSkip = null,
   returnUrl = '',
   submitButtonText = '',
 }: StripeCheckoutFormProps) {
@@ -229,17 +231,30 @@ function StripeCheckoutForm({
         </Center>
       )}
       {stripe && elements && state.loaded && (
-        <LoadingButton
-          fullWidth
-          sx={{ mt: 2, mb: 1, borderRadius: 0, fontSize: '0.875rem' }}
-          type="submit"
-          disabled={state.confirming || !state.loaded}
-          loading={state.confirming}
-          variant="contained"
-          color="primary"
-          size="large">
-          {submitButtonText || t('payment.checkout.continue', { action: t(`payment.checkout.${mode}`) })}
-        </LoadingButton>
+        <>
+          <LoadingButton
+            fullWidth
+            sx={{ mt: 2, mb: 1, borderRadius: 0, fontSize: '0.875rem' }}
+            type="submit"
+            disabled={state.confirming || !state.loaded}
+            loading={state.confirming}
+            variant="contained"
+            color="primary"
+            size="large">
+            {submitButtonText || t('payment.checkout.continue', { action: t(`payment.checkout.${mode}`) })}
+          </LoadingButton>
+          {onSkip && (
+            <LoadingButton
+              fullWidth
+              sx={{ mb: 1, borderRadius: 0, fontSize: '0.875rem', borderColor: 'divider' }}
+              disabled={state.confirming}
+              variant="outlined"
+              color="primary"
+              onClick={() => onSkip()}>
+              {t('payment.checkout.skipPaymentMethod', { defaultValue: 'Skip, bind later' })}
+            </LoadingButton>
+          )}
+        </>
       )}
       {state.message && <Typography sx={{ mt: 1, color: 'error.main' }}>{state.message}</Typography>}
     </Content>
@@ -264,6 +279,7 @@ export type StripeCheckoutProps = {
   customer: TCustomer;
   onConfirm: Function;
   onCancel: Function;
+  onSkip?: Function | null;
   returnUrl?: string;
   title?: string;
   submitButtonText?: string;
@@ -276,6 +292,7 @@ export default function StripeCheckout({
   customer,
   onConfirm,
   onCancel,
+  onSkip = null,
   returnUrl = '',
   title = '',
   submitButtonText = '',
@@ -349,6 +366,7 @@ export default function StripeCheckout({
           mode={mode}
           customer={customer}
           onConfirm={onConfirm}
+          onSkip={onSkip}
           returnUrl={returnUrl}
           submitButtonText={submitButtonText}
         />