@blocklet/payment-react 1.13.301 → 1.13.302

package/es/checkout/donate.js

@@ -47,6 +47,9 @@ const fetchSupporters = (target, livemode = true) => {
   }
   return supporterCache[target];
 };
+const emojiFont = {
+  fontFamily: 'Avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
+};
 function SupporterAvatar({ supporters = [], totalAmount = "0", currency, method }) {
   const { t } = useLocaleContext();
   const customers = uniqBy(supporters, "customer_did");
@@ -68,7 +71,7 @@ function SupporterAvatar({ supporters = [], totalAmount = "0", currency, method
         sm: 1
       },
       children: [
-        /* @__PURE__ */ jsx(Typography, { component: "p", color: "text.secondary", children: customersNum === 0 ? t("payment.checkout.donation.empty") : t("payment.checkout.donation.summary", {
+        /* @__PURE__ */ jsx(Typography, { component: "p", color: "text.secondary", children: customersNum === 0 ? /* @__PURE__ */ jsx("span", { style: emojiFont, children: t("payment.checkout.donation.empty") }) : t("payment.checkout.donation.summary", {
           total: customersNum,
           symbol: currency.symbol,
           totalAmount: formatAmount(totalAmount || "0", currency.decimal)
@@ -92,7 +95,7 @@ function SupporterTable({ supporters = [], totalAmount = "0", currency, method }
   const customers = uniqBy(supporters, "customer_did");
   const customersNum = customers.length;
   return /* @__PURE__ */ jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "center", gap: { xs: 0.5, sm: 1 }, children: [
-    /* @__PURE__ */ jsx(Typography, { component: "p", color: "text.secondary", children: customersNum === 0 ? t("payment.checkout.donation.empty") : t("payment.checkout.donation.summary", {
+    /* @__PURE__ */ jsx(Typography, { component: "p", color: "text.secondary", children: customersNum === 0 ? /* @__PURE__ */ jsx("span", { style: emojiFont, children: t("payment.checkout.donation.empty") }) : t("payment.checkout.donation.summary", {
       total: customersNum,
       symbol: currency.symbol,
       totalAmount: formatAmount(totalAmount || "0", currency.decimal)
@@ -150,7 +153,7 @@ function SupporterSimple({ supporters = [], totalAmount = "0", currency, method
         sm: 1
       },
       children: [
-        /* @__PURE__ */ jsx(Typography, { component: "p", color: "text.secondary", children: customersNum === 0 ? t("payment.checkout.donation.empty") : t("payment.checkout.donation.summary", {
+        /* @__PURE__ */ jsx(Typography, { component: "p", color: "text.secondary", children: customersNum === 0 ? /* @__PURE__ */ jsx("span", { style: emojiFont, children: t("payment.checkout.donation.empty") }) : t("payment.checkout.donation.summary", {
           total: customersNum,
           symbol: currency.symbol,
           totalAmount: formatAmount(totalAmount || "0", currency.decimal)

package/es/libs/util.d.ts

@@ -76,3 +76,4 @@ export declare function formatTotalPrice({ product, quantity, priceId, locale, }
     priceId?: string;
     locale: string;
 }): PricingRenderProps;
+export declare function formatQuantityInventory(price: TPrice, quantity: string | number, locale?: string): string;

package/es/libs/util.js

@@ -672,3 +672,18 @@ export function formatTotalPrice({
     totalAmount: unitValue.mul(new BN(quantity)).toString()
   };
 }
+export function formatQuantityInventory(price, quantity, locale = "en") {
+  const q = Number(quantity);
+  const {
+    quantity_available: quantityAvailable = 0,
+    quantity_sold: quantitySold = 0,
+    quantity_limit_per_checkout: quantityLimitPerCheckout = 0
+  } = price || {};
+  if (quantityAvailable > 0 && quantitySold + q > quantityAvailable) {
+    return t("common.quantityNotEnough", locale);
+  }
+  if (quantityLimitPerCheckout > 0 && quantityLimitPerCheckout < q) {
+    return t("common.quantityLimitPerCheckout", locale);
+  }
+  return "";
+}

package/es/locales/en.js

@@ -82,7 +82,9 @@ export default flat({
     months: "months",
     years: "years",
     type: "type",
-    donation: "Donation"
+    donation: "Donation",
+    quantityLimitPerCheckout: "Exceed purchase limit",
+    quantityNotEnough: "Exceed inventory"
   },
   payment: {
     checkout: {

package/es/locales/zh.js

@@ -82,7 +82,9 @@ export default flat({
     months: "\u6708",
     years: "\u5E74",
     type: "\u7C7B\u578B",
-    donation: "\u6253\u8D4F"
+    donation: "\u6253\u8D4F",
+    quantityLimitPerCheckout: "\u8D85\u51FA\u8D2D\u4E70\u9650\u5236",
+    quantityNotEnough: "\u5E93\u5B58\u4E0D\u8DB3"
   },
   payment: {
     checkout: {

package/es/payment/form/index.js

@@ -8,7 +8,7 @@ import { Fade, InputAdornment, Stack, Typography } from "@mui/material";
 import { useCreation, useMemoizedFn, useSetState, useSize } from "ahooks";
 import { PhoneNumberUtil } from "google-libphonenumber";
 import pWaitFor from "p-wait-for";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { Controller, useFormContext, useWatch } from "react-hook-form";
 import { joinURL } from "ufo";
 import { dispatch } from "use-bus";
@@ -18,7 +18,14 @@ import FormInput from "../../components/input.js";
 import { usePaymentContext } from "../../contexts/payment.js";
 import { useSubscription } from "../../hooks/subscription.js";
 import api from "../../libs/api.js";
-import { flattenPaymentMethods, formatError, getPrefix, getQueryParams, getStatementDescriptor } from "../../libs/util.js";
+import {
+  flattenPaymentMethods,
+  formatError,
+  formatQuantityInventory,
+  getPrefix,
+  getQueryParams,
+  getStatementDescriptor
+} from "../../libs/util.js";
 import UserButtons from "./addon.js";
 import AddressForm from "./address.js";
 import CurrencySelector from "./currency.js";
@@ -61,6 +68,16 @@ export default function PaymentForm({
   const { session, connect } = usePaymentContext();
   const subscription = useSubscription("events");
   const { control, getValues, setValue, handleSubmit } = useFormContext();
+  const quantityInventoryStatus = useMemo(() => {
+    let status = true;
+    for (const item of checkoutSession.line_items) {
+      if (formatQuantityInventory(item.price, item.quantity)) {
+        status = false;
+        break;
+      }
+    }
+    return status;
+  }, [checkoutSession]);
   const [state, setState] = useSetState({
     submitting: false,
     paying: false,
@@ -386,7 +403,7 @@ export default function PaymentForm({
           className: "cko-submit-button",
           onClick: onAction,
           fullWidth: true,
-          disabled: state.submitting || state.paying || state.stripePaying,
+          disabled: state.submitting || state.paying || state.stripePaying || !quantityInventoryStatus,
           loading: state.submitting || state.paying,
           children: state.submitting || state.paying ? t("payment.checkout.processing") : buttonText
         }

package/es/payment/product-item.js

@@ -1,9 +1,15 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import { Stack, Typography } from "@mui/material";
+import { Box, Stack, Typography } from "@mui/material";
 import Status from "../components/status.js";
 import Switch from "../components/switch-button.js";
-import { formatLineItemPricing, formatPrice, formatRecurring, formatUpsellSaving } from "../libs/util.js";
+import {
+  formatLineItemPricing,
+  formatPrice,
+  formatQuantityInventory,
+  formatRecurring,
+  formatUpsellSaving
+} from "../libs/util.js";
 import ProductCard from "./product-card.js";
 ProductItem.defaultProps = {
   mode: "normal",
@@ -41,7 +47,14 @@ export default function ProductItem({
                 logo: item.price.product?.images[0],
                 name: item.price.product?.name,
                 description: item.price.product?.description,
-                extra: item.price.type === "recurring" && item.price.recurring ? [pricing.quantity, t("common.billed", { rule: `${formatRecurring(item.upsell_price?.recurring || item.price.recurring, true, "per", locale)} ${metered}` })].filter(Boolean).join(", ") : pricing.quantity
+                extra: /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", children: [
+                  item.price.type === "recurring" && item.price.recurring ? [pricing.quantity, t("common.billed", { rule: `${formatRecurring(item.upsell_price?.recurring || item.price.recurring, true, "per", locale)} ${metered}` })].filter(Boolean).join(", ") : pricing.quantity,
+                  formatQuantityInventory(item.price, item.quantity, locale) ? /* @__PURE__ */ jsxs(Typography, { sx: { fontSize: "0.85rem", color: "red" }, children: [
+                    "\uFF08",
+                    formatQuantityInventory(item.price, item.quantity, locale),
+                    "\uFF09"
+                  ] }) : ""
+                ] })
               }
             ),
             /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "flex-end", flex: 1, children: [

package/lib/checkout/donate.js

@@ -44,6 +44,9 @@ const fetchSupporters = (target, livemode = true) => {
   }
   return supporterCache[target];
 };
+const emojiFont = {
+  fontFamily: 'Avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
+};
 function SupporterAvatar({
   supporters = [],
   totalAmount = "0",
@@ -72,7 +75,10 @@ function SupporterAvatar({
     children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
       component: "p",
       color: "text.secondary",
-      children: customersNum === 0 ? t("payment.checkout.donation.empty") : t("payment.checkout.donation.summary", {
+      children: customersNum === 0 ? /* @__PURE__ */(0, _jsxRuntime.jsx)("span", {
+        style: emojiFont,
+        children: t("payment.checkout.donation.empty")
+      }) : t("payment.checkout.donation.summary", {
         total: customersNum,
         symbol: currency.symbol,
         totalAmount: (0, _util.formatAmount)(totalAmount || "0", currency.decimal)
@@ -114,7 +120,10 @@ function SupporterTable({
     children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
       component: "p",
       color: "text.secondary",
-      children: customersNum === 0 ? t("payment.checkout.donation.empty") : t("payment.checkout.donation.summary", {
+      children: customersNum === 0 ? /* @__PURE__ */(0, _jsxRuntime.jsx)("span", {
+        style: emojiFont,
+        children: t("payment.checkout.donation.empty")
+      }) : t("payment.checkout.donation.summary", {
         total: customersNum,
         symbol: currency.symbol,
         totalAmount: (0, _util.formatAmount)(totalAmount || "0", currency.decimal)
@@ -216,7 +225,10 @@ function SupporterSimple({
     children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
       component: "p",
       color: "text.secondary",
-      children: customersNum === 0 ? t("payment.checkout.donation.empty") : t("payment.checkout.donation.summary", {
+      children: customersNum === 0 ? /* @__PURE__ */(0, _jsxRuntime.jsx)("span", {
+        style: emojiFont,
+        children: t("payment.checkout.donation.empty")
+      }) : t("payment.checkout.donation.summary", {
         total: customersNum,
         symbol: currency.symbol,
         totalAmount: (0, _util.formatAmount)(totalAmount || "0", currency.decimal)

package/lib/libs/util.d.ts

@@ -76,3 +76,4 @@ export declare function formatTotalPrice({ product, quantity, priceId, locale, }
     priceId?: string;
     locale: string;
 }): PricingRenderProps;
+export declare function formatQuantityInventory(price: TPrice, quantity: string | number, locale?: string): string;

package/lib/libs/util.js

@@ -15,6 +15,7 @@ exports.formatLineItemPricing = formatLineItemPricing;
 exports.formatLocale = void 0;
 exports.formatNumber = formatNumber;
 exports.formatPriceAmount = exports.formatPrice = exports.formatPrettyMsLocale = void 0;
+exports.formatQuantityInventory = formatQuantityInventory;
 exports.formatRecurring = formatRecurring;
 exports.formatSubscriptionProduct = formatSubscriptionProduct;
 exports.formatTime = formatTime;
@@ -805,4 +806,19 @@ function formatTotalPrice({
     }),
     totalAmount: unitValue.mul(new _util.BN(quantity)).toString()
   };
+}
+function formatQuantityInventory(price, quantity, locale = "en") {
+  const q = Number(quantity);
+  const {
+    quantity_available: quantityAvailable = 0,
+    quantity_sold: quantitySold = 0,
+    quantity_limit_per_checkout: quantityLimitPerCheckout = 0
+  } = price || {};
+  if (quantityAvailable > 0 && quantitySold + q > quantityAvailable) {
+    return (0, _locales.t)("common.quantityNotEnough", locale);
+  }
+  if (quantityLimitPerCheckout > 0 && quantityLimitPerCheckout < q) {
+    return (0, _locales.t)("common.quantityLimitPerCheckout", locale);
+  }
+  return "";
 }

package/lib/locales/en.js

@@ -89,7 +89,9 @@ module.exports = (0, _flat.default)({
     months: "months",
     years: "years",
     type: "type",
-    donation: "Donation"
+    donation: "Donation",
+    quantityLimitPerCheckout: "Exceed purchase limit",
+    quantityNotEnough: "Exceed inventory"
   },
   payment: {
     checkout: {

package/lib/locales/zh.js

@@ -89,7 +89,9 @@ module.exports = (0, _flat.default)({
     months: "\u6708",
     years: "\u5E74",
     type: "\u7C7B\u578B",
-    donation: "\u6253\u8D4F"
+    donation: "\u6253\u8D4F",
+    quantityLimitPerCheckout: "\u8D85\u51FA\u8D2D\u4E70\u9650\u5236",
+    quantityNotEnough: "\u5E93\u5B58\u4E0D\u8DB3"
   },
   payment: {
     checkout: {

package/lib/payment/form/index.js

@@ -80,6 +80,16 @@ function PaymentForm({
     setValue,
     handleSubmit
   } = (0, _reactHookForm.useFormContext)();
+  const quantityInventoryStatus = (0, _react.useMemo)(() => {
+    let status = true;
+    for (const item of checkoutSession.line_items) {
+      if ((0, _util.formatQuantityInventory)(item.price, item.quantity)) {
+        status = false;
+        break;
+      }
+    }
+    return status;
+  }, [checkoutSession]);
   const [state, setState] = (0, _ahooks.useSetState)({
     submitting: false,
     paying: false,
@@ -472,7 +482,7 @@ function PaymentForm({
           className: "cko-submit-button",
           onClick: onAction,
           fullWidth: true,
-          disabled: state.submitting || state.paying || state.stripePaying,
+          disabled: state.submitting || state.paying || state.stripePaying || !quantityInventoryStatus,
           loading: state.submitting || state.paying,
           children: state.submitting || state.paying ? t("payment.checkout.processing") : buttonText
         }), ["subscription", "setup"].includes(checkoutSession.mode) && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {

package/lib/payment/product-item.js

@@ -59,9 +59,19 @@ function ProductItem({
           logo: item.price.product?.images[0],
           name: item.price.product?.name,
           description: item.price.product?.description,
-          extra: item.price.type === "recurring" && item.price.recurring ? [pricing.quantity, t("common.billed", {
-            rule: `${(0, _util.formatRecurring)(item.upsell_price?.recurring || item.price.recurring, true, "per", locale)} ${metered}`
-          })].filter(Boolean).join(", ") : pricing.quantity
+          extra: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+            display: "flex",
+            alignItems: "center",
+            children: [item.price.type === "recurring" && item.price.recurring ? [pricing.quantity, t("common.billed", {
+              rule: `${(0, _util.formatRecurring)(item.upsell_price?.recurring || item.price.recurring, true, "per", locale)} ${metered}`
+            })].filter(Boolean).join(", ") : pricing.quantity, (0, _util.formatQuantityInventory)(item.price, item.quantity, locale) ? /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+              sx: {
+                fontSize: "0.85rem",
+                color: "red"
+              },
+              children: ["\uFF08", (0, _util.formatQuantityInventory)(item.price, item.quantity, locale), "\uFF09"]
+            }) : ""]
+          })
         }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
           direction: "column",
           alignItems: "flex-end",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.13.301",
+  "version": "1.13.302",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -91,7 +91,7 @@
     "@babel/core": "^7.24.7",
     "@babel/preset-env": "^7.24.7",
     "@babel/preset-react": "^7.24.7",
-    "@blocklet/payment-types": "1.13.301",
+    "@blocklet/payment-types": "1.13.302",
     "@storybook/addon-essentials": "^7.6.19",
     "@storybook/addon-interactions": "^7.6.19",
     "@storybook/addon-links": "^7.6.19",
@@ -120,5 +120,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "51232b3901a744f8340c345dc738552f9df899a2"
+  "gitHead": "366468bdbb1c5e8837a3baff852067fa041609a1"
 }

package/src/checkout/donate.tsx

@@ -92,6 +92,11 @@ const fetchSupporters = (target: string, livemode: boolean = true): Promise<Dona
   return supporterCache[target];
 };
 
+const emojiFont = {
+  fontFamily:
+    'Avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+};
+
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 function SupporterAvatar({ supporters = [], totalAmount = '0', currency, method }: DonateHistory) {
   const { t } = useLocaleContext();
@@ -113,13 +118,15 @@ function SupporterAvatar({ supporters = [], totalAmount = '0', currency, method
         sm: 1,
       }}>
       <Typography component="p" color="text.secondary">
-        {customersNum === 0
-          ? t('payment.checkout.donation.empty')
-          : t('payment.checkout.donation.summary', {
-              total: customersNum,
-              symbol: currency.symbol,
-              totalAmount: formatAmount(totalAmount || '0', currency.decimal),
-            })}
+        {customersNum === 0 ? (
+          <span style={emojiFont}>{t('payment.checkout.donation.empty')}</span>
+        ) : (
+          t('payment.checkout.donation.summary', {
+            total: customersNum,
+            symbol: currency.symbol,
+            totalAmount: formatAmount(totalAmount || '0', currency.decimal),
+          })
+        )}
       </Typography>
       <AvatarGroup total={customersNum} max={20}>
         {customers.map((x) => (
@@ -144,13 +151,15 @@ function SupporterTable({ supporters = [], totalAmount = '0', currency, method }
   return (
     <Box display="flex" flexDirection="column" alignItems="center" gap={{ xs: 0.5, sm: 1 }}>
       <Typography component="p" color="text.secondary">
-        {customersNum === 0
-          ? t('payment.checkout.donation.empty')
-          : t('payment.checkout.donation.summary', {
-              total: customersNum,
-              symbol: currency.symbol,
-              totalAmount: formatAmount(totalAmount || '0', currency.decimal),
-            })}
+        {customersNum === 0 ? (
+          <span style={emojiFont}>{t('payment.checkout.donation.empty')}</span>
+        ) : (
+          t('payment.checkout.donation.summary', {
+            total: customersNum,
+            symbol: currency.symbol,
+            totalAmount: formatAmount(totalAmount || '0', currency.decimal),
+          })
+        )}
       </Typography>
       <Table size="small" sx={{ width: '100%', overflow: 'hidden' }}>
         <TableBody>
@@ -220,13 +229,15 @@ function SupporterSimple({ supporters = [], totalAmount = '0', currency, method
         sm: 1,
       }}>
       <Typography component="p" color="text.secondary">
-        {customersNum === 0
-          ? t('payment.checkout.donation.empty')
-          : t('payment.checkout.donation.summary', {
-              total: customersNum,
-              symbol: currency.symbol,
-              totalAmount: formatAmount(totalAmount || '0', currency.decimal),
-            })}
+        {customersNum === 0 ? (
+          <span style={emojiFont}>{t('payment.checkout.donation.empty')}</span>
+        ) : (
+          t('payment.checkout.donation.summary', {
+            total: customersNum,
+            symbol: currency.symbol,
+            totalAmount: formatAmount(totalAmount || '0', currency.decimal),
+          })
+        )}
       </Typography>
       <AvatarGroup total={customersNum} max={10}>
         {customers.map((x) => (

package/src/libs/util.ts

@@ -872,3 +872,19 @@ export function formatTotalPrice({
     totalAmount: unitValue.mul(new BN(quantity)).toString(),
   };
 }
+
+export function formatQuantityInventory(price: TPrice, quantity: string | number, locale = 'en') {
+  const q = Number(quantity);
+  const {
+    quantity_available: quantityAvailable = 0,
+    quantity_sold: quantitySold = 0,
+    quantity_limit_per_checkout: quantityLimitPerCheckout = 0,
+  } = price || {};
+  if (quantityAvailable > 0 && quantitySold + q > quantityAvailable) {
+    return t('common.quantityNotEnough', locale);
+  }
+  if (quantityLimitPerCheckout > 0 && quantityLimitPerCheckout < q) {
+    return t('common.quantityLimitPerCheckout', locale);
+  }
+  return '';
+}

package/src/locales/en.tsx

@@ -85,6 +85,8 @@ export default flat({
     years: 'years',
     type: 'type',
     donation: 'Donation',
+    quantityLimitPerCheckout: 'Exceed purchase limit',
+    quantityNotEnough: 'Exceed inventory',
   },
   payment: {
     checkout: {

package/src/locales/zh.tsx

@@ -85,6 +85,8 @@ export default flat({
     years: '年',
     type: '类型',
     donation: '打赏',
+    quantityLimitPerCheckout: '超出购买限制',
+    quantityNotEnough: '库存不足',
   },
   payment: {
     checkout: {

package/src/payment/form/index.tsx

@@ -15,7 +15,7 @@ import { Fade, InputAdornment, Stack, Typography } from '@mui/material';
 import { useCreation, useMemoizedFn, useSetState, useSize } from 'ahooks';
 import { PhoneNumberUtil } from 'google-libphonenumber';
 import pWaitFor from 'p-wait-for';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { Controller, useFormContext, useWatch } from 'react-hook-form';
 import { joinURL } from 'ufo';
 import { dispatch } from 'use-bus';
@@ -26,7 +26,14 @@ import FormInput from '../../components/input';
 import { usePaymentContext } from '../../contexts/payment';
 import { useSubscription } from '../../hooks/subscription';
 import api from '../../libs/api';
-import { flattenPaymentMethods, formatError, getPrefix, getQueryParams, getStatementDescriptor } from '../../libs/util';
+import {
+  flattenPaymentMethods,
+  formatError,
+  formatQuantityInventory,
+  getPrefix,
+  getQueryParams,
+  getStatementDescriptor,
+} from '../../libs/util';
 import { CheckoutCallbacks, CheckoutContext } from '../../types';
 import UserButtons from './addon';
 import AddressForm from './address';
@@ -94,6 +101,16 @@ export default function PaymentForm({
   const { session, connect } = usePaymentContext();
   const subscription = useSubscription('events');
   const { control, getValues, setValue, handleSubmit } = useFormContext();
+  const quantityInventoryStatus = useMemo(() => {
+    let status = true;
+    for (const item of checkoutSession.line_items) {
+      if (formatQuantityInventory(item.price, item.quantity)) {
+        status = false;
+        break;
+      }
+    }
+    return status;
+  }, [checkoutSession]);
   const [state, setState] = useSetState<{
     submitting: boolean;
     paying: boolean;
@@ -455,7 +472,7 @@ export default function PaymentForm({
             className="cko-submit-button"
             onClick={onAction}
             fullWidth
-            disabled={state.submitting || state.paying || state.stripePaying}
+            disabled={state.submitting || state.paying || state.stripePaying || !quantityInventoryStatus}
             loading={state.submitting || state.paying}>
             {state.submitting || state.paying ? t('payment.checkout.processing') : buttonText}
           </LoadingButton>

package/src/payment/product-item.tsx

@@ -1,10 +1,16 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import type { PriceRecurring, TLineItemExpanded, TPaymentCurrency } from '@blocklet/payment-types';
-import { Stack, Typography } from '@mui/material';
+import { Box, Stack, Typography } from '@mui/material';
 
 import Status from '../components/status';
 import Switch from '../components/switch-button';
-import { formatLineItemPricing, formatPrice, formatRecurring, formatUpsellSaving } from '../libs/util';
+import {
+  formatLineItemPricing,
+  formatPrice,
+  formatQuantityInventory,
+  formatRecurring,
+  formatUpsellSaving,
+} from '../libs/util';
 import ProductCard from './product-card';
 
 type Props = {
@@ -52,9 +58,19 @@ export default function ProductItem({
             name={item.price.product?.name}
             description={item.price.product?.description}
             extra={
-              item.price.type === 'recurring' && item.price.recurring
-                ? [pricing.quantity, t('common.billed', { rule: `${formatRecurring(item.upsell_price?.recurring || item.price.recurring, true, 'per', locale)} ${metered}` })].filter(Boolean).join(', ') // prettier-ignore
-                : pricing.quantity
+              <Box display="flex" alignItems="center">
+                {item.price.type === 'recurring' && item.price.recurring
+                  ? [pricing.quantity, t('common.billed', { rule: `${formatRecurring(item.upsell_price?.recurring || item.price.recurring, true, 'per', locale)} ${metered}` })].filter(Boolean).join(', ') // prettier-ignore
+                  : pricing.quantity}
+
+                {formatQuantityInventory(item.price, item.quantity, locale) ? (
+                  <Typography sx={{ fontSize: '0.85rem', color: 'red' }}>
+                    （{formatQuantityInventory(item.price, item.quantity, locale)}）
+                  </Typography>
+                ) : (
+                  ''
+                )}
+              </Box>
             }
           />
           <Stack direction="column" alignItems="flex-end" flex={1}>