@blocklet/payment-react 1.20.15 → 1.20.16

package/es/locales/en.js

@@ -220,9 +220,19 @@ export default flat({
         remove: "Remove from order"
       },
       credit: {
-        oneTimeInfo: "You will receive {amount} {symbol} credits after payment",
-        recurringInfo: "You will receive {amount} {symbol} credits {period}",
-        expiresIn: "credits have a validity period of {duration} {unit}"
+        normal: {
+          oneTime: "You will receive {amount} {symbol} after payment.",
+          oneTimeWithExpiry: "You will receive {amount} {symbol} after payment, valid for {duration} {unit}.",
+          recurring: "You will receive {amount} {symbol} {period}.",
+          recurringWithExpiry: "You will receive {amount} {symbol} {period}, valid for {duration} {unit}."
+        },
+        pending: {
+          notEnough: "Your outstanding balance is {amount} {symbol}. To settle it, a minimum purchase of {quantity} units is required.",
+          oneTimeEnough: "Your outstanding balance is {amount} {symbol}. Upon payment, you will receive {totalAmount} {symbol}, resulting in a net balance of {availableAmount} {symbol} after the deduction.",
+          oneTimeEnoughWithExpiry: "Your outstanding balance is {amount} {symbol}. Upon payment, you will receive {totalAmount} {symbol} (valid for {duration} {unit}), resulting in a net balance of {availableAmount} {symbol} after the deduction.",
+          recurringEnough: "Your outstanding balance is {amount} {symbol}. Upon payment, you will receive {totalAmount} {symbol} {period}, resulting in a net balance of {availableAmount} {symbol} after the deduction.",
+          recurringEnoughWithExpiry: "Your outstanding balance is {amount} {symbol}. Upon payment, you will receive {totalAmount} {symbol} {period} (valid for {duration} {unit}), resulting in a net balance of {availableAmount} {symbol} after the deduction."
+        }
       },
       expired: {
         title: "Expired Link",

package/es/locales/zh.js

@@ -257,9 +257,19 @@ export default flat({
         }
       },
       credit: {
-        oneTimeInfo: "\u4ED8\u6B3E\u5B8C\u6210\u540E\u60A8\u5C06\u83B7\u5F97 {amount} {symbol} \u989D\u5EA6",
-        recurringInfo: "\u60A8\u5C06{period}\u83B7\u5F97 {amount} {symbol} \u989D\u5EA6",
-        expiresIn: "\u989D\u5EA6\u6709\u6548\u671F\u4E3A {duration} {unit}"
+        normal: {
+          oneTime: "\u4ED8\u6B3E\u5B8C\u6210\u540E\u60A8\u5C06\u83B7\u5F97 {amount} {symbol} \u989D\u5EA6\u3002",
+          oneTimeWithExpiry: "\u4ED8\u6B3E\u5B8C\u6210\u540E\u60A8\u5C06\u83B7\u5F97 {amount} {symbol} \u989D\u5EA6\uFF0C\u6709\u6548\u671F {duration} {unit}\u3002",
+          recurring: "\u4ED8\u6B3E\u5B8C\u6210\u540E\uFF0C{period}\u60A8\u5C06\u83B7\u5F97 {amount} {symbol} \u989D\u5EA6\u3002",
+          recurringWithExpiry: "\u4ED8\u6B3E\u5B8C\u6210\u540E\uFF0C{period}\u60A8\u5C06\u83B7\u5F97 {amount} {symbol} \u989D\u5EA6\uFF0C\u6709\u6548\u671F {duration} {unit}\u3002"
+        },
+        pending: {
+          notEnough: "\u60A8\u5F53\u524D\u6B20\u8D39 {amount} {symbol}\uFF0C\u81F3\u5C11\u9700\u8981\u8D2D\u4E70 {quantity} \u6570\u91CF\u3002",
+          oneTimeEnough: "\u60A8\u5F53\u524D\u6B20\u8D39 {amount} {symbol}\uFF0C\u4ED8\u6B3E\u540E\u5C06\u83B7\u5F97 {totalAmount} {symbol} \u989D\u5EA6\uFF0C\u6263\u9664\u6B20\u8D39\u540E\u51C0\u4F59\u989D\u4E3A {availableAmount} {symbol}\u3002",
+          oneTimeEnoughWithExpiry: "\u60A8\u5F53\u524D\u6B20\u8D39 {amount} {symbol}\uFF0C\u4ED8\u6B3E\u540E\u5C06\u83B7\u5F97 {totalAmount} {symbol} \u989D\u5EA6\uFF08\u6709\u6548\u671F {duration} {unit}\uFF09\uFF0C\u6263\u9664\u6B20\u8D39\u540E\u51C0\u4F59\u989D\u4E3A {availableAmount} {symbol}\u3002",
+          recurringEnough: "\u60A8\u5F53\u524D\u6B20\u8D39 {amount} {symbol}\uFF0C\u4ED8\u6B3E\u540E{period}\u5C06\u83B7\u5F97 {totalAmount} {symbol} \u989D\u5EA6\uFF0C\u6263\u9664\u6B20\u8D39\u540E\u51C0\u4F59\u989D\u4E3A {availableAmount} {symbol}\u3002",
+          recurringEnoughWithExpiry: "\u60A8\u5F53\u524D\u6B20\u8D39 {amount} {symbol}\uFF0C\u4ED8\u6B3E\u540E{period}\u5C06\u83B7\u5F97 {totalAmount} {symbol} \u989D\u5EA6\uFF08\u6709\u6548\u671F {duration} {unit}\uFF09\uFF0C\u6263\u9664\u6B20\u8D39\u540E\u51C0\u4F59\u989D\u4E3A {availableAmount} {symbol}\u3002"
+        }
       },
       emptyItems: {
         title: "\u6CA1\u6709\u4EFB\u4F55\u8D2D\u4E70\u9879\u76EE",

package/es/payment/product-item.js

@@ -2,7 +2,9 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import { Box, Stack, Typography, IconButton, TextField, Alert, Chip } from "@mui/material";
 import { Add, Remove, LocalOffer } from "@mui/icons-material";
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
+import { useRequest } from "ahooks";
+import { BN, fromTokenToUnit } from "@ocap/util";
 import Status from "../components/status.js";
 import Switch from "../components/switch-button.js";
 import {
@@ -13,11 +15,37 @@ import {
   formatQuantityInventory,
   formatRecurring,
   formatUpsellSaving,
-  formatAmount
+  formatAmount,
+  formatBNStr
 } from "../libs/util.js";
 import ProductCard from "./product-card.js";
 import dayjs from "../libs/dayjs.js";
 import { usePaymentContext } from "../contexts/payment.js";
+const getRecommendedQuantityFromUrl = (priceId) => {
+  try {
+    const urlParams = new URLSearchParams(window.location.search);
+    const recommendedQuantity = urlParams.get(`qty_${priceId}`) || urlParams.get("qty");
+    return recommendedQuantity ? Math.max(1, parseInt(recommendedQuantity, 10)) : void 0;
+  } catch {
+    return void 0;
+  }
+};
+const getUserQuantityPreference = (userDid, priceId) => {
+  try {
+    const key = `quantity_preference_${userDid}_${priceId}`;
+    const stored = localStorage.getItem(key);
+    return stored ? Math.max(1, parseInt(stored, 10)) : void 0;
+  } catch {
+    return void 0;
+  }
+};
+const saveUserQuantityPreference = (userDid, priceId, quantity) => {
+  try {
+    const key = `quantity_preference_${userDid}_${priceId}`;
+    localStorage.setItem(key, quantity.toString());
+  } catch {
+  }
+};
 export default function ProductItem({
   item,
   items,
@@ -35,7 +63,7 @@ export default function ProductItem({
   showFeatures = false
 }) {
   const { t, locale } = useLocaleContext();
-  const { settings, setPayable } = usePaymentContext();
+  const { settings, setPayable, session, api } = usePaymentContext();
   const pricing = formatLineItemPricing(item, currency, { trialEnd, trialInDays }, locale);
   const saving = formatUpsellSaving(items, currency);
   const metered = item.price?.recurring?.usage_type === "metered" ? t("common.metered") : "";
@@ -45,12 +73,52 @@ export default function ProductItem({
   const creditCurrency = isCreditProduct ? findCurrency(settings.paymentMethods, item.price.metadata?.credit_config?.currency_id ?? "") : null;
   const validDuration = item.price.metadata?.credit_config?.valid_duration_value;
   const validDurationUnit = item.price.metadata?.credit_config?.valid_duration_unit || "days";
-  const [localQuantity, setLocalQuantity] = useState(item.quantity);
+  const userDid = session?.user?.did;
+  const { data: pendingAmount } = useRequest(
+    async () => {
+      if (!isCreditProduct || !userDid) return null;
+      try {
+        const { data } = await api.get("/api/meter-events/pending-amount", {
+          params: {
+            customer_id: userDid,
+            currency_id: creditCurrency?.id
+          }
+        });
+        return data?.[creditCurrency?.id || ""];
+      } catch (error) {
+        console.warn("Failed to fetch pending amount:", error);
+        return null;
+      }
+    },
+    {
+      refreshDeps: [isCreditProduct, userDid, creditCurrency?.id]
+    }
+  );
+  const getInitialQuantity = () => {
+    const urlQuantity = getRecommendedQuantityFromUrl(item.price.id);
+    if (urlQuantity && urlQuantity > 0) {
+      return urlQuantity;
+    }
+    if (userDid) {
+      const preferredQuantity = getUserQuantityPreference(userDid, item.price.id);
+      if (preferredQuantity && preferredQuantity > 0) {
+        return preferredQuantity;
+      }
+    }
+    return item.quantity;
+  };
+  const [localQuantity, setLocalQuantity] = useState(getInitialQuantity());
   const canAdjustQuantity = adjustableQuantity.enabled && mode === "normal";
   const minQuantity = Math.max(adjustableQuantity.minimum || 1, 1);
   const quantityAvailable = Math.min(item.price.quantity_limit_per_checkout, item.price.quantity_available);
   const maxQuantity = quantityAvailable ? Math.min(adjustableQuantity.maximum || Infinity, quantityAvailable) : adjustableQuantity.maximum || Infinity;
   const localQuantityNum = localQuantity || 0;
+  useEffect(() => {
+    const initialQuantity = getInitialQuantity();
+    if (initialQuantity !== item.quantity && initialQuantity && initialQuantity > 1) {
+      onQuantityChange(item.price_id, initialQuantity);
+    }
+  }, []);
   const handleQuantityChange = (newQuantity) => {
     if (!newQuantity) {
       setLocalQuantity(void 0);
@@ -64,6 +132,9 @@ export default function ProductItem({
       }
       setLocalQuantity(newQuantity);
       onQuantityChange(item.price_id, newQuantity);
+      if (userDid && newQuantity > 0) {
+        saveUserQuantityPreference(userDid, item.price.id, newQuantity);
+      }
     }
   };
   const handleQuantityIncrease = () => {
@@ -84,27 +155,59 @@ export default function ProductItem({
   };
   const formatCreditInfo = () => {
     if (!isCreditProduct) return null;
+    const totalCreditStr = formatNumber(creditAmount * (localQuantity || 0));
+    const currencySymbol = creditCurrency?.symbol || "Credits";
+    const hasPendingAmount = pendingAmount && new BN(pendingAmount || "0").gt(new BN(0));
     const isRecurring = item.price.type === "recurring";
-    const totalCredit = formatNumber(creditAmount * (localQuantity || 0));
-    let message = "";
-    if (isRecurring) {
-      message = t("payment.checkout.credit.recurringInfo", {
-        amount: totalCredit,
+    const hasExpiry = validDuration && validDuration > 0;
+    const buildBaseParams = () => ({
+      amount: totalCreditStr,
+      symbol: currencySymbol,
+      ...hasExpiry && {
+        duration: validDuration,
+        unit: t(`common.${validDurationUnit}`)
+      },
+      ...isRecurring && {
         period: formatRecurring(item.price.recurring, true, "per", locale)
-      });
-    } else {
-      message = t("payment.checkout.credit.oneTimeInfo", {
-        amount: totalCredit,
-        symbol: creditCurrency?.symbol || "Credits"
-      });
-    }
-    if (validDuration && validDuration > 0) {
-      message += `\uFF0C${t("payment.checkout.credit.expiresIn", {
+      }
+    });
+    const buildPendingParams = (pendingBN, availableAmount) => ({
+      amount: formatBNStr(pendingBN.toString(), creditCurrency?.decimal || 2),
+      symbol: currencySymbol,
+      totalAmount: totalCreditStr,
+      ...availableAmount && {
+        availableAmount: formatBNStr(availableAmount, creditCurrency?.decimal || 2)
+      },
+      ...hasExpiry && {
         duration: validDuration,
         unit: t(`common.${validDurationUnit}`)
-      })}`;
+      },
+      ...isRecurring && {
+        period: formatRecurring(item.price.recurring, true, "per", locale)
+      }
+    });
+    const getLocaleKey = (category, type2) => {
+      const suffix = hasExpiry ? "WithExpiry" : "";
+      return `payment.checkout.credit.${category}.${type2}${suffix}`;
+    };
+    if (!hasPendingAmount) {
+      const type2 = isRecurring ? "recurring" : "oneTime";
+      return t(getLocaleKey("normal", type2), buildBaseParams());
+    }
+    const pendingAmountBN = new BN(pendingAmount || "0");
+    const creditAmountBN = fromTokenToUnit(new BN(creditAmount), creditCurrency?.decimal || 2);
+    const minQuantityNeeded = Math.ceil(pendingAmountBN.mul(new BN(100)).div(creditAmountBN).toNumber() / 100);
+    const currentPurchaseCreditBN = creditAmountBN.mul(new BN(localQuantity || 0));
+    const actualAvailable = currentPurchaseCreditBN.sub(pendingAmountBN).toString();
+    if (!new BN(actualAvailable).gt(new BN(0))) {
+      return t("payment.checkout.credit.pending.notEnough", {
+        amount: formatBNStr(pendingAmountBN.toString(), creditCurrency?.decimal || 2),
+        symbol: currencySymbol,
+        quantity: formatNumber(minQuantityNeeded)
+      });
     }
-    return message;
+    const type = isRecurring ? "recurringEnough" : "oneTimeEnough";
+    return t(getLocaleKey("pending", type), buildPendingParams(pendingAmountBN, actualAvailable));
   };
   const primaryText = useMemo(() => {
     const price = item.upsell_price || item.price || {};

package/es/payment/success.js

@@ -228,7 +228,7 @@ const Div = styled("div")`
     content: '';
     height: 100px;
     position: absolute;
-    background: ${(props) => props.theme.palette.background.paper};
+    background: ${(props) => props.theme.palette.background.default};
     transform: rotate(-45deg);
   }
   .check-icon .icon-line {
@@ -272,7 +272,7 @@ const Div = styled("div")`
     height: 85px;
     position: absolute;
     transform: rotate(-45deg);
-    background-color: ${(props) => props.theme.palette.background.paper};
+    background-color: ${(props) => props.theme.palette.background.default};
   }
 
   @keyframes rotate-circle {

package/lib/locales/en.js

@@ -227,9 +227,19 @@ module.exports = (0, _flat.default)({
         remove: "Remove from order"
       },
       credit: {
-        oneTimeInfo: "You will receive {amount} {symbol} credits after payment",
-        recurringInfo: "You will receive {amount} {symbol} credits {period}",
-        expiresIn: "credits have a validity period of {duration} {unit}"
+        normal: {
+          oneTime: "You will receive {amount} {symbol} after payment.",
+          oneTimeWithExpiry: "You will receive {amount} {symbol} after payment, valid for {duration} {unit}.",
+          recurring: "You will receive {amount} {symbol} {period}.",
+          recurringWithExpiry: "You will receive {amount} {symbol} {period}, valid for {duration} {unit}."
+        },
+        pending: {
+          notEnough: "Your outstanding balance is {amount} {symbol}. To settle it, a minimum purchase of {quantity} units is required.",
+          oneTimeEnough: "Your outstanding balance is {amount} {symbol}. Upon payment, you will receive {totalAmount} {symbol}, resulting in a net balance of {availableAmount} {symbol} after the deduction.",
+          oneTimeEnoughWithExpiry: "Your outstanding balance is {amount} {symbol}. Upon payment, you will receive {totalAmount} {symbol} (valid for {duration} {unit}), resulting in a net balance of {availableAmount} {symbol} after the deduction.",
+          recurringEnough: "Your outstanding balance is {amount} {symbol}. Upon payment, you will receive {totalAmount} {symbol} {period}, resulting in a net balance of {availableAmount} {symbol} after the deduction.",
+          recurringEnoughWithExpiry: "Your outstanding balance is {amount} {symbol}. Upon payment, you will receive {totalAmount} {symbol} {period} (valid for {duration} {unit}), resulting in a net balance of {availableAmount} {symbol} after the deduction."
+        }
       },
       expired: {
         title: "Expired Link",

package/lib/locales/zh.js

@@ -264,9 +264,19 @@ module.exports = (0, _flat.default)({
         }
       },
       credit: {
-        oneTimeInfo: "\u4ED8\u6B3E\u5B8C\u6210\u540E\u60A8\u5C06\u83B7\u5F97 {amount} {symbol} \u989D\u5EA6",
-        recurringInfo: "\u60A8\u5C06{period}\u83B7\u5F97 {amount} {symbol} \u989D\u5EA6",
-        expiresIn: "\u989D\u5EA6\u6709\u6548\u671F\u4E3A {duration} {unit}"
+        normal: {
+          oneTime: "\u4ED8\u6B3E\u5B8C\u6210\u540E\u60A8\u5C06\u83B7\u5F97 {amount} {symbol} \u989D\u5EA6\u3002",
+          oneTimeWithExpiry: "\u4ED8\u6B3E\u5B8C\u6210\u540E\u60A8\u5C06\u83B7\u5F97 {amount} {symbol} \u989D\u5EA6\uFF0C\u6709\u6548\u671F {duration} {unit}\u3002",
+          recurring: "\u4ED8\u6B3E\u5B8C\u6210\u540E\uFF0C{period}\u60A8\u5C06\u83B7\u5F97 {amount} {symbol} \u989D\u5EA6\u3002",
+          recurringWithExpiry: "\u4ED8\u6B3E\u5B8C\u6210\u540E\uFF0C{period}\u60A8\u5C06\u83B7\u5F97 {amount} {symbol} \u989D\u5EA6\uFF0C\u6709\u6548\u671F {duration} {unit}\u3002"
+        },
+        pending: {
+          notEnough: "\u60A8\u5F53\u524D\u6B20\u8D39 {amount} {symbol}\uFF0C\u81F3\u5C11\u9700\u8981\u8D2D\u4E70 {quantity} \u6570\u91CF\u3002",
+          oneTimeEnough: "\u60A8\u5F53\u524D\u6B20\u8D39 {amount} {symbol}\uFF0C\u4ED8\u6B3E\u540E\u5C06\u83B7\u5F97 {totalAmount} {symbol} \u989D\u5EA6\uFF0C\u6263\u9664\u6B20\u8D39\u540E\u51C0\u4F59\u989D\u4E3A {availableAmount} {symbol}\u3002",
+          oneTimeEnoughWithExpiry: "\u60A8\u5F53\u524D\u6B20\u8D39 {amount} {symbol}\uFF0C\u4ED8\u6B3E\u540E\u5C06\u83B7\u5F97 {totalAmount} {symbol} \u989D\u5EA6\uFF08\u6709\u6548\u671F {duration} {unit}\uFF09\uFF0C\u6263\u9664\u6B20\u8D39\u540E\u51C0\u4F59\u989D\u4E3A {availableAmount} {symbol}\u3002",
+          recurringEnough: "\u60A8\u5F53\u524D\u6B20\u8D39 {amount} {symbol}\uFF0C\u4ED8\u6B3E\u540E{period}\u5C06\u83B7\u5F97 {totalAmount} {symbol} \u989D\u5EA6\uFF0C\u6263\u9664\u6B20\u8D39\u540E\u51C0\u4F59\u989D\u4E3A {availableAmount} {symbol}\u3002",
+          recurringEnoughWithExpiry: "\u60A8\u5F53\u524D\u6B20\u8D39 {amount} {symbol}\uFF0C\u4ED8\u6B3E\u540E{period}\u5C06\u83B7\u5F97 {totalAmount} {symbol} \u989D\u5EA6\uFF08\u6709\u6548\u671F {duration} {unit}\uFF09\uFF0C\u6263\u9664\u6B20\u8D39\u540E\u51C0\u4F59\u989D\u4E3A {availableAmount} {symbol}\u3002"
+        }
       },
       emptyItems: {
         title: "\u6CA1\u6709\u4EFB\u4F55\u8D2D\u4E70\u9879\u76EE",

package/lib/payment/product-item.js

@@ -9,13 +9,39 @@ var _context = require("@arcblock/ux/lib/Locale/context");
 var _material = require("@mui/material");
 var _iconsMaterial = require("@mui/icons-material");
 var _react = require("react");
+var _ahooks = require("ahooks");
+var _util = require("@ocap/util");
 var _status = _interopRequireDefault(require("../components/status"));
 var _switchButton = _interopRequireDefault(require("../components/switch-button"));
-var _util = require("../libs/util");
+var _util2 = require("../libs/util");
 var _productCard = _interopRequireDefault(require("./product-card"));
 var _dayjs = _interopRequireDefault(require("../libs/dayjs"));
 var _payment = require("../contexts/payment");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const getRecommendedQuantityFromUrl = priceId => {
+  try {
+    const urlParams = new URLSearchParams(window.location.search);
+    const recommendedQuantity = urlParams.get(`qty_${priceId}`) || urlParams.get("qty");
+    return recommendedQuantity ? Math.max(1, parseInt(recommendedQuantity, 10)) : void 0;
+  } catch {
+    return void 0;
+  }
+};
+const getUserQuantityPreference = (userDid, priceId) => {
+  try {
+    const key = `quantity_preference_${userDid}_${priceId}`;
+    const stored = localStorage.getItem(key);
+    return stored ? Math.max(1, parseInt(stored, 10)) : void 0;
+  } catch {
+    return void 0;
+  }
+};
+const saveUserQuantityPreference = (userDid, priceId, quantity) => {
+  try {
+    const key = `quantity_preference_${userDid}_${priceId}`;
+    localStorage.setItem(key, quantity.toString());
+  } catch {}
+};
 function ProductItem({
   item,
   items,
@@ -39,26 +65,69 @@ function ProductItem({
   } = (0, _context.useLocaleContext)();
   const {
     settings,
-    setPayable
+    setPayable,
+    session,
+    api
   } = (0, _payment.usePaymentContext)();
-  const pricing = (0, _util.formatLineItemPricing)(item, currency, {
+  const pricing = (0, _util2.formatLineItemPricing)(item, currency, {
     trialEnd,
     trialInDays
   }, locale);
-  const saving = (0, _util.formatUpsellSaving)(items, currency);
+  const saving = (0, _util2.formatUpsellSaving)(items, currency);
   const metered = item.price?.recurring?.usage_type === "metered" ? t("common.metered") : "";
   const canUpsell = mode === "normal" && items.length === 1;
   const isCreditProduct = item.price.product?.type === "credit" && item.price.metadata?.credit_config?.credit_amount;
   const creditAmount = isCreditProduct ? Number(item.price.metadata.credit_config.credit_amount) : 0;
-  const creditCurrency = isCreditProduct ? (0, _util.findCurrency)(settings.paymentMethods, item.price.metadata?.credit_config?.currency_id ?? "") : null;
+  const creditCurrency = isCreditProduct ? (0, _util2.findCurrency)(settings.paymentMethods, item.price.metadata?.credit_config?.currency_id ?? "") : null;
   const validDuration = item.price.metadata?.credit_config?.valid_duration_value;
   const validDurationUnit = item.price.metadata?.credit_config?.valid_duration_unit || "days";
-  const [localQuantity, setLocalQuantity] = (0, _react.useState)(item.quantity);
+  const userDid = session?.user?.did;
+  const {
+    data: pendingAmount
+  } = (0, _ahooks.useRequest)(async () => {
+    if (!isCreditProduct || !userDid) return null;
+    try {
+      const {
+        data
+      } = await api.get("/api/meter-events/pending-amount", {
+        params: {
+          customer_id: userDid,
+          currency_id: creditCurrency?.id
+        }
+      });
+      return data?.[creditCurrency?.id || ""];
+    } catch (error) {
+      console.warn("Failed to fetch pending amount:", error);
+      return null;
+    }
+  }, {
+    refreshDeps: [isCreditProduct, userDid, creditCurrency?.id]
+  });
+  const getInitialQuantity = () => {
+    const urlQuantity = getRecommendedQuantityFromUrl(item.price.id);
+    if (urlQuantity && urlQuantity > 0) {
+      return urlQuantity;
+    }
+    if (userDid) {
+      const preferredQuantity = getUserQuantityPreference(userDid, item.price.id);
+      if (preferredQuantity && preferredQuantity > 0) {
+        return preferredQuantity;
+      }
+    }
+    return item.quantity;
+  };
+  const [localQuantity, setLocalQuantity] = (0, _react.useState)(getInitialQuantity());
   const canAdjustQuantity = adjustableQuantity.enabled && mode === "normal";
   const minQuantity = Math.max(adjustableQuantity.minimum || 1, 1);
   const quantityAvailable = Math.min(item.price.quantity_limit_per_checkout, item.price.quantity_available);
   const maxQuantity = quantityAvailable ? Math.min(adjustableQuantity.maximum || Infinity, quantityAvailable) : adjustableQuantity.maximum || Infinity;
   const localQuantityNum = localQuantity || 0;
+  (0, _react.useEffect)(() => {
+    const initialQuantity = getInitialQuantity();
+    if (initialQuantity !== item.quantity && initialQuantity && initialQuantity > 1) {
+      onQuantityChange(item.price_id, initialQuantity);
+    }
+  }, []);
   const handleQuantityChange = newQuantity => {
     if (!newQuantity) {
       setLocalQuantity(void 0);
@@ -67,11 +136,14 @@ function ProductItem({
     }
     setPayable(true);
     if (newQuantity >= minQuantity && newQuantity <= maxQuantity) {
-      if ((0, _util.formatQuantityInventory)(item.price, newQuantity, locale)) {
+      if ((0, _util2.formatQuantityInventory)(item.price, newQuantity, locale)) {
         return;
       }
       setLocalQuantity(newQuantity);
       onQuantityChange(item.price_id, newQuantity);
+      if (userDid && newQuantity > 0) {
+        saveUserQuantityPreference(userDid, item.price.id, newQuantity);
+      }
     }
   };
   const handleQuantityIncrease = () => {
@@ -92,38 +164,70 @@ function ProductItem({
   };
   const formatCreditInfo = () => {
     if (!isCreditProduct) return null;
+    const totalCreditStr = (0, _util2.formatNumber)(creditAmount * (localQuantity || 0));
+    const currencySymbol = creditCurrency?.symbol || "Credits";
+    const hasPendingAmount = pendingAmount && new _util.BN(pendingAmount || "0").gt(new _util.BN(0));
     const isRecurring = item.price.type === "recurring";
-    const totalCredit = (0, _util.formatNumber)(creditAmount * (localQuantity || 0));
-    let message = "";
-    if (isRecurring) {
-      message = t("payment.checkout.credit.recurringInfo", {
-        amount: totalCredit,
-        period: (0, _util.formatRecurring)(item.price.recurring, true, "per", locale)
-      });
-    } else {
-      message = t("payment.checkout.credit.oneTimeInfo", {
-        amount: totalCredit,
-        symbol: creditCurrency?.symbol || "Credits"
-      });
-    }
-    if (validDuration && validDuration > 0) {
-      message += `\uFF0C${t("payment.checkout.credit.expiresIn", {
+    const hasExpiry = validDuration && validDuration > 0;
+    const buildBaseParams = () => ({
+      amount: totalCreditStr,
+      symbol: currencySymbol,
+      ...(hasExpiry && {
         duration: validDuration,
         unit: t(`common.${validDurationUnit}`)
-      })}`;
+      }),
+      ...(isRecurring && {
+        period: (0, _util2.formatRecurring)(item.price.recurring, true, "per", locale)
+      })
+    });
+    const buildPendingParams = (pendingBN, availableAmount) => ({
+      amount: (0, _util2.formatBNStr)(pendingBN.toString(), creditCurrency?.decimal || 2),
+      symbol: currencySymbol,
+      totalAmount: totalCreditStr,
+      ...(availableAmount && {
+        availableAmount: (0, _util2.formatBNStr)(availableAmount, creditCurrency?.decimal || 2)
+      }),
+      ...(hasExpiry && {
+        duration: validDuration,
+        unit: t(`common.${validDurationUnit}`)
+      }),
+      ...(isRecurring && {
+        period: (0, _util2.formatRecurring)(item.price.recurring, true, "per", locale)
+      })
+    });
+    const getLocaleKey = (category, type2) => {
+      const suffix = hasExpiry ? "WithExpiry" : "";
+      return `payment.checkout.credit.${category}.${type2}${suffix}`;
+    };
+    if (!hasPendingAmount) {
+      const type2 = isRecurring ? "recurring" : "oneTime";
+      return t(getLocaleKey("normal", type2), buildBaseParams());
+    }
+    const pendingAmountBN = new _util.BN(pendingAmount || "0");
+    const creditAmountBN = (0, _util.fromTokenToUnit)(new _util.BN(creditAmount), creditCurrency?.decimal || 2);
+    const minQuantityNeeded = Math.ceil(pendingAmountBN.mul(new _util.BN(100)).div(creditAmountBN).toNumber() / 100);
+    const currentPurchaseCreditBN = creditAmountBN.mul(new _util.BN(localQuantity || 0));
+    const actualAvailable = currentPurchaseCreditBN.sub(pendingAmountBN).toString();
+    if (!new _util.BN(actualAvailable).gt(new _util.BN(0))) {
+      return t("payment.checkout.credit.pending.notEnough", {
+        amount: (0, _util2.formatBNStr)(pendingAmountBN.toString(), creditCurrency?.decimal || 2),
+        symbol: currencySymbol,
+        quantity: (0, _util2.formatNumber)(minQuantityNeeded)
+      });
     }
-    return message;
+    const type = isRecurring ? "recurringEnough" : "oneTimeEnough";
+    return t(getLocaleKey("pending", type), buildPendingParams(pendingAmountBN, actualAvailable));
   };
   const primaryText = (0, _react.useMemo)(() => {
     const price = item.upsell_price || item.price || {};
     const isRecurring = price?.type === "recurring" && price?.recurring;
     const trial = trialInDays > 0 || trialEnd > (0, _dayjs.default)().unix();
     if (isRecurring && !trial && price?.recurring?.usage_type !== "metered") {
-      return `${pricing.primary} ${price.recurring ? (0, _util.formatRecurring)(price.recurring, false, "slash", locale) : ""}`;
+      return `${pricing.primary} ${price.recurring ? (0, _util2.formatRecurring)(price.recurring, false, "slash", locale) : ""}`;
     }
     return pricing.primary;
   }, [trialInDays, trialEnd, pricing, item, locale]);
-  const quantityInventoryError = (0, _util.formatQuantityInventory)(item.price, localQuantityNum, locale);
+  const quantityInventoryError = (0, _util2.formatQuantityInventory)(item.price, localQuantityNum, locale);
   const features = item.price.product?.features || [];
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
     direction: "column",
@@ -158,7 +262,7 @@ function ProductItem({
               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}`
+              rule: `${(0, _util2.formatRecurring)(item.upsell_price?.recurring || item.price.recurring, true, "per", locale)} ${metered}`
             })].filter(Boolean).join(", ") : pricing.quantity
           })
         }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
@@ -214,7 +318,7 @@ function ProductItem({
               sx: {
                 fontSize: "0.75rem"
               },
-              children: ["(-", (0, _util.formatAmount)(discountAmount.amount || "0", currency.decimal), " ", currency.symbol, ")"]
+              children: ["(-", (0, _util2.formatAmount)(discountAmount.amount || "0", currency.decimal), " ", currency.symbol, ")"]
             })]
           }),
           size: "small",
@@ -375,7 +479,7 @@ function ProductItem({
           checked: false,
           onChange: () => onUpsell(item.price_id, item.price.upsell?.upsells_to_id)
         }), t("payment.checkout.upsell.save", {
-          recurring: (0, _util.formatRecurring)(item.price.upsell.upsells_to.recurring, true, "per", locale)
+          recurring: (0, _util2.formatRecurring)(item.price.upsell.upsells_to.recurring, true, "per", locale)
         }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_status.default, {
           label: t("payment.checkout.upsell.off", {
             saving
@@ -393,7 +497,7 @@ function ProductItem({
         sx: {
           fontSize: 12
         },
-        children: (0, _util.formatPrice)(item.price.upsell.upsells_to, currency, item.price.product?.unit_label, 1, true, locale)
+        children: (0, _util2.formatPrice)(item.price.upsell.upsells_to, currency, item.price.product?.unit_label, 1, true, locale)
       })]
     }), canUpsell && item.upsell_price_id && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
       direction: "row",
@@ -420,14 +524,14 @@ function ProductItem({
           checked: true,
           onChange: () => onDownsell(item.upsell_price_id)
         }), t("payment.checkout.upsell.revert", {
-          recurring: t(`common.${(0, _util.formatRecurring)(item.price.recurring)}`)
+          recurring: t(`common.${(0, _util2.formatRecurring)(item.price.recurring)}`)
         })]
       }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
         component: "span",
         sx: {
           fontSize: 12
         },
-        children: (0, _util.formatPrice)(item.price, currency, item.price.product?.unit_label, 1, true, locale)
+        children: (0, _util2.formatPrice)(item.price, currency, item.price.product?.unit_label, 1, true, locale)
       })]
     })]
   });

package/lib/payment/success.js

@@ -246,7 +246,7 @@ const Div = (0, _material.styled)("div")`
     content: '';
     height: 100px;
     position: absolute;
-    background: ${props => props.theme.palette.background.paper};
+    background: ${props => props.theme.palette.background.default};
     transform: rotate(-45deg);
   }
   .check-icon .icon-line {
@@ -290,7 +290,7 @@ const Div = (0, _material.styled)("div")`
     height: 85px;
     position: absolute;
     transform: rotate(-45deg);
-    background-color: ${props => props.theme.palette.background.paper};
+    background-color: ${props => props.theme.palette.background.default};
   }
 
   @keyframes rotate-circle {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.20.15",
+  "version": "1.20.16",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -56,14 +56,14 @@
   "dependencies": {
     "@arcblock/did-connect-react": "^3.1.41",
     "@arcblock/ux": "^3.1.41",
-    "@arcblock/ws": "^1.25.1",
+    "@arcblock/ws": "^1.25.3",
     "@blocklet/theme": "^3.1.41",
     "@blocklet/ui-react": "^3.1.41",
     "@mui/icons-material": "^7.1.2",
     "@mui/lab": "7.0.0-beta.14",
     "@mui/material": "^7.1.2",
     "@mui/system": "^7.1.1",
-    "@ocap/util": "^1.25.1",
+    "@ocap/util": "^1.25.3",
     "@stripe/react-stripe-js": "^2.9.0",
     "@stripe/stripe-js": "^2.4.0",
     "@vitejs/plugin-legacy": "^7.0.0",
@@ -94,7 +94,7 @@
     "@babel/core": "^7.27.4",
     "@babel/preset-env": "^7.27.2",
     "@babel/preset-react": "^7.27.1",
-    "@blocklet/payment-types": "1.20.15",
+    "@blocklet/payment-types": "1.20.16",
     "@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.3.1",
     "vite-plugin-node-polyfills": "^0.23.0"
   },
-  "gitHead": "d205c3b1ec7d2b819e375ed2eb8b70c9d48f0bcb"
+  "gitHead": "ebf0677dd4414d4abc4129d6663a7e9ddb415281"
 }

package/src/locales/en.tsx

@@ -226,9 +226,24 @@ export default flat({
         remove: 'Remove from order',
       },
       credit: {
-        oneTimeInfo: 'You will receive {amount} {symbol} credits after payment',
-        recurringInfo: 'You will receive {amount} {symbol} credits {period}',
-        expiresIn: 'credits have a validity period of {duration} {unit}',
+        normal: {
+          oneTime: 'You will receive {amount} {symbol} after payment.',
+          oneTimeWithExpiry: 'You will receive {amount} {symbol} after payment, valid for {duration} {unit}.',
+          recurring: 'You will receive {amount} {symbol} {period}.',
+          recurringWithExpiry: 'You will receive {amount} {symbol} {period}, valid for {duration} {unit}.',
+        },
+        pending: {
+          notEnough:
+            'Your outstanding balance is {amount} {symbol}. To settle it, a minimum purchase of {quantity} units is required.',
+          oneTimeEnough:
+            'Your outstanding balance is {amount} {symbol}. Upon payment, you will receive {totalAmount} {symbol}, resulting in a net balance of {availableAmount} {symbol} after the deduction.',
+          oneTimeEnoughWithExpiry:
+            'Your outstanding balance is {amount} {symbol}. Upon payment, you will receive {totalAmount} {symbol} (valid for {duration} {unit}), resulting in a net balance of {availableAmount} {symbol} after the deduction.',
+          recurringEnough:
+            'Your outstanding balance is {amount} {symbol}. Upon payment, you will receive {totalAmount} {symbol} {period}, resulting in a net balance of {availableAmount} {symbol} after the deduction.',
+          recurringEnoughWithExpiry:
+            'Your outstanding balance is {amount} {symbol}. Upon payment, you will receive {totalAmount} {symbol} {period} (valid for {duration} {unit}), resulting in a net balance of {availableAmount} {symbol} after the deduction.',
+        },
       },
       expired: {
         title: 'Expired Link',

package/src/locales/zh.tsx

@@ -260,9 +260,23 @@ export default flat({
         },
       },
       credit: {
-        oneTimeInfo: '付款完成后您将获得 {amount} {symbol} 额度',
-        recurringInfo: '您将{period}获得 {amount} {symbol} 额度',
-        expiresIn: '额度有效期为 {duration} {unit}',
+        normal: {
+          oneTime: '付款完成后您将获得 {amount} {symbol} 额度。',
+          oneTimeWithExpiry: '付款完成后您将获得 {amount} {symbol} 额度，有效期 {duration} {unit}。',
+          recurring: '付款完成后，{period}您将获得 {amount} {symbol} 额度。',
+          recurringWithExpiry: '付款完成后，{period}您将获得 {amount} {symbol} 额度，有效期 {duration} {unit}。',
+        },
+        pending: {
+          notEnough: '您当前欠费 {amount} {symbol}，至少需要购买 {quantity} 数量。',
+          oneTimeEnough:
+            '您当前欠费 {amount} {symbol}，付款后将获得 {totalAmount} {symbol} 额度，扣除欠费后净余额为 {availableAmount} {symbol}。',
+          oneTimeEnoughWithExpiry:
+            '您当前欠费 {amount} {symbol}，付款后将获得 {totalAmount} {symbol} 额度（有效期 {duration} {unit}），扣除欠费后净余额为 {availableAmount} {symbol}。',
+          recurringEnough:
+            '您当前欠费 {amount} {symbol}，付款后{period}将获得 {totalAmount} {symbol} 额度，扣除欠费后净余额为 {availableAmount} {symbol}。',
+          recurringEnoughWithExpiry:
+            '您当前欠费 {amount} {symbol}，付款后{period}将获得 {totalAmount} {symbol} 额度（有效期 {duration} {unit}），扣除欠费后净余额为 {availableAmount} {symbol}。',
+        },
       },
       emptyItems: {
         title: '没有任何购买项目',

package/src/payment/product-item.tsx

@@ -3,7 +3,9 @@ import type { PriceRecurring, TLineItemExpanded, TPaymentCurrency } from '@block
 import { Box, Stack, Typography, IconButton, TextField, Alert, Chip } from '@mui/material';
 import { Add, Remove, LocalOffer } from '@mui/icons-material';
 
-import React, { useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
+import { useRequest } from 'ahooks';
+import { BN, fromTokenToUnit } from '@ocap/util';
 import Status from '../components/status';
 import Switch from '../components/switch-button';
 import {
@@ -15,6 +17,7 @@ import {
   formatRecurring,
   formatUpsellSaving,
   formatAmount,
+  formatBNStr,
 } from '../libs/util';
 import ProductCard from './product-card';
 import dayjs from '../libs/dayjs';
@@ -41,6 +44,35 @@ type Props = {
   showFeatures?: boolean;
 };
 
+const getRecommendedQuantityFromUrl = (priceId: string): number | undefined => {
+  try {
+    const urlParams = new URLSearchParams(window.location.search);
+    const recommendedQuantity = urlParams.get(`qty_${priceId}`) || urlParams.get('qty');
+    return recommendedQuantity ? Math.max(1, parseInt(recommendedQuantity, 10)) : undefined;
+  } catch {
+    return undefined;
+  }
+};
+
+const getUserQuantityPreference = (userDid: string, priceId: string): number | undefined => {
+  try {
+    const key = `quantity_preference_${userDid}_${priceId}`;
+    const stored = localStorage.getItem(key);
+    return stored ? Math.max(1, parseInt(stored, 10)) : undefined;
+  } catch {
+    return undefined;
+  }
+};
+
+const saveUserQuantityPreference = (userDid: string, priceId: string, quantity: number): void => {
+  try {
+    const key = `quantity_preference_${userDid}_${priceId}`;
+    localStorage.setItem(key, quantity.toString());
+  } catch {
+    // Silently fail if localStorage is not available
+  }
+};
+
 export default function ProductItem({
   item,
   items,
@@ -57,7 +89,7 @@ export default function ProductItem({
   showFeatures = false,
 }: Props) {
   const { t, locale } = useLocaleContext();
-  const { settings, setPayable } = usePaymentContext();
+  const { settings, setPayable, session, api } = usePaymentContext();
   const pricing = formatLineItemPricing(item, currency, { trialEnd, trialInDays }, locale);
   const saving = formatUpsellSaving(items, currency);
   const metered = item.price?.recurring?.usage_type === 'metered' ? t('common.metered') : '';
@@ -71,7 +103,47 @@ export default function ProductItem({
   const validDuration = item.price.metadata?.credit_config?.valid_duration_value;
   const validDurationUnit = item.price.metadata?.credit_config?.valid_duration_unit || 'days';
 
-  const [localQuantity, setLocalQuantity] = useState<number | undefined>(item.quantity);
+  const userDid = session?.user?.did;
+
+  const { data: pendingAmount } = useRequest(
+    async () => {
+      if (!isCreditProduct || !userDid) return null;
+      try {
+        const { data } = await api.get('/api/meter-events/pending-amount', {
+          params: {
+            customer_id: userDid,
+            currency_id: creditCurrency?.id,
+          },
+        });
+        return data?.[creditCurrency?.id || ''];
+      } catch (error) {
+        console.warn('Failed to fetch pending amount:', error);
+        return null;
+      }
+    },
+    {
+      refreshDeps: [isCreditProduct, userDid, creditCurrency?.id],
+    }
+  );
+
+  // calculate initial quantity: priority URL recommendation > user preference > item.quantity
+  const getInitialQuantity = (): number | undefined => {
+    const urlQuantity = getRecommendedQuantityFromUrl(item.price.id);
+    if (urlQuantity && urlQuantity > 0) {
+      return urlQuantity;
+    }
+
+    if (userDid) {
+      const preferredQuantity = getUserQuantityPreference(userDid, item.price.id);
+      if (preferredQuantity && preferredQuantity > 0) {
+        return preferredQuantity;
+      }
+    }
+
+    return item.quantity;
+  };
+
+  const [localQuantity, setLocalQuantity] = useState<number | undefined>(getInitialQuantity());
   const canAdjustQuantity = adjustableQuantity.enabled && mode === 'normal';
   const minQuantity = Math.max(adjustableQuantity.minimum || 1, 1);
   const quantityAvailable = Math.min(item.price.quantity_limit_per_checkout, item.price.quantity_available);
@@ -80,6 +152,15 @@ export default function ProductItem({
     : adjustableQuantity.maximum || Infinity;
   const localQuantityNum = localQuantity || 0;
 
+  useEffect(() => {
+    const initialQuantity = getInitialQuantity();
+    if (initialQuantity !== item.quantity && initialQuantity && initialQuantity > 1) {
+      // need update checkout session
+      onQuantityChange(item.price_id, initialQuantity);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const handleQuantityChange = (newQuantity: number) => {
     if (!newQuantity) {
       setLocalQuantity(undefined);
@@ -93,6 +174,10 @@ export default function ProductItem({
       }
       setLocalQuantity(newQuantity);
       onQuantityChange(item.price_id, newQuantity);
+
+      if (userDid && newQuantity > 0) {
+        saveUserQuantityPreference(userDid, item.price.id, newQuantity);
+      }
     }
   };
 
@@ -119,30 +204,66 @@ export default function ProductItem({
   const formatCreditInfo = () => {
     if (!isCreditProduct) return null;
 
+    const totalCreditStr = formatNumber(creditAmount * (localQuantity || 0));
+    const currencySymbol = creditCurrency?.symbol || 'Credits';
+    const hasPendingAmount = pendingAmount && new BN(pendingAmount || '0').gt(new BN(0));
     const isRecurring = item.price.type === 'recurring';
-    const totalCredit = formatNumber(creditAmount * (localQuantity || 0));
+    const hasExpiry = validDuration && validDuration > 0;
 
-    let message = '';
-    if (isRecurring) {
-      message = t('payment.checkout.credit.recurringInfo', {
-        amount: totalCredit,
+    const buildBaseParams = () => ({
+      amount: totalCreditStr,
+      symbol: currencySymbol,
+      ...(hasExpiry && {
+        duration: validDuration,
+        unit: t(`common.${validDurationUnit}`),
+      }),
+      ...(isRecurring && {
         period: formatRecurring(item.price.recurring!, true, 'per', locale),
-      });
-    } else {
-      message = t('payment.checkout.credit.oneTimeInfo', {
-        amount: totalCredit,
-        symbol: creditCurrency?.symbol || 'Credits',
-      });
-    }
+      }),
+    });
 
-    if (validDuration && validDuration > 0) {
-      message += `，${t('payment.checkout.credit.expiresIn', {
+    const buildPendingParams = (pendingBN: BN, availableAmount?: string) => ({
+      amount: formatBNStr(pendingBN.toString(), creditCurrency?.decimal || 2),
+      symbol: currencySymbol,
+      totalAmount: totalCreditStr,
+      ...(availableAmount && {
+        availableAmount: formatBNStr(availableAmount, creditCurrency?.decimal || 2),
+      }),
+      ...(hasExpiry && {
         duration: validDuration,
         unit: t(`common.${validDurationUnit}`),
-      })}`;
+      }),
+      ...(isRecurring && {
+        period: formatRecurring(item.price.recurring!, true, 'per', locale),
+      }),
+    });
+
+    const getLocaleKey = (category: 'normal' | 'pending', type: string) => {
+      const suffix = hasExpiry ? 'WithExpiry' : '';
+      return `payment.checkout.credit.${category}.${type}${suffix}`;
+    };
+
+    if (!hasPendingAmount) {
+      const type = isRecurring ? 'recurring' : 'oneTime';
+      return t(getLocaleKey('normal', type), buildBaseParams());
+    }
+
+    const pendingAmountBN = new BN(pendingAmount || '0');
+    const creditAmountBN = fromTokenToUnit(new BN(creditAmount), creditCurrency?.decimal || 2);
+    const minQuantityNeeded = Math.ceil(pendingAmountBN.mul(new BN(100)).div(creditAmountBN).toNumber() / 100);
+    const currentPurchaseCreditBN = creditAmountBN.mul(new BN(localQuantity || 0));
+    const actualAvailable = currentPurchaseCreditBN.sub(pendingAmountBN).toString();
+
+    if (!new BN(actualAvailable).gt(new BN(0))) {
+      return t('payment.checkout.credit.pending.notEnough', {
+        amount: formatBNStr(pendingAmountBN.toString(), creditCurrency?.decimal || 2),
+        symbol: currencySymbol,
+        quantity: formatNumber(minQuantityNeeded),
+      });
     }
 
-    return message;
+    const type = isRecurring ? 'recurringEnough' : 'oneTimeEnough';
+    return t(getLocaleKey('pending', type), buildPendingParams(pendingAmountBN, actualAvailable));
   };
 
   const primaryText = useMemo(() => {

package/src/payment/success.tsx

@@ -271,7 +271,7 @@ const Div = styled('div')`
     content: '';
     height: 100px;
     position: absolute;
-    background: ${(props) => props.theme.palette.background.paper};
+    background: ${(props) => props.theme.palette.background.default};
     transform: rotate(-45deg);
   }
   .check-icon .icon-line {
@@ -315,7 +315,7 @@ const Div = styled('div')`
     height: 85px;
     position: absolute;
     transform: rotate(-45deg);
-    background-color: ${(props) => props.theme.palette.background.paper};
+    background-color: ${(props) => props.theme.palette.background.default};
   }
 
   @keyframes rotate-circle {