@blocklet/payment-react 1.20.8 → 1.20.10

package/es/libs/util.js

@@ -311,6 +311,8 @@ export function getPayoutStatusColor(status) {
   switch (status) {
     case "paid":
       return "success";
+    case "deferred":
+      return "warning";
     case "failed":
       return "warning";
     case "canceled":

package/es/locales/en.js

@@ -184,7 +184,7 @@ export default flat({
         progress: "Progress {progress}%",
         delivered: "Installation completed",
         failed: "Processing failed",
-        pending: "Waiting for processing"
+        failedMsg: "An exception occurred during installation. We will automatically process a refund for you. We apologize for the inconvenience caused. Thank you for your understanding!"
       },
       confirm: {
         withStake: "By confirming, you allow {payee} to charge your account for future payments and, if necessary, slash your stake. You can cancel your subscription or withdraw your stake at any time.",

package/es/locales/zh.js

@@ -184,7 +184,7 @@ export default flat({
         progress: "\u8FDB\u5EA6 {progress}%",
         delivered: "\u5B89\u88C5\u6210\u529F",
         failed: "\u5B89\u88C5\u5931\u8D25",
-        pending: "\u51C6\u5907\u5B89\u88C5"
+        failedMsg: "\u5F88\u62B1\u6B49\uFF0C\u5B89\u88C5\u8FC7\u7A0B\u4E2D\u9047\u5230\u4E86\u4E00\u4E9B\u95EE\u9898\u3002\u6211\u4EEC\u6B63\u5728\u5904\u7406\u8FD9\u4E2A\u95EE\u9898\uFF0C\u7A0D\u540E\u4F1A\u81EA\u52A8\u4E3A\u60A8\u9000\u6B3E\u3002\u611F\u8C22\u60A8\u7684\u8010\u5FC3\u7B49\u5F85\uFF01"
       },
       confirm: {
         withStake: "\u786E\u8BA4\u8BA2\u9605\uFF0C\u5373\u8868\u793A\u60A8\u6388\u6743 {payee} \u4ECE\u60A8\u7684\u8D26\u6237\u6263\u53D6\u672A\u6765\u6B3E\u9879\uFF0C\u5E76\u5728\u5FC5\u8981\u65F6\u7F5A\u6CA1\u8D28\u62BC\u3002\u60A8\u53EF\u968F\u65F6\u53D6\u6D88\u8BA2\u9605\u6216\u64A4\u9500\u8D28\u62BC\u3002",

package/es/payment/index.js

@@ -211,6 +211,7 @@ function PaymentInner({
     trialInDays = 0;
     trialEnd = 0;
   }
+  const showFeatures = `${paymentLink?.metadata?.show_product_features}` === "true";
   return /* @__PURE__ */ jsx(FormProvider, { ...methods, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-container", sx: { gap: { sm: mode === "standalone" ? 0 : mode === "inline" ? 4 : 8 } }, children: [
     !hideSummaryCard && /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { className: "base-card cko-overview", direction: "column", children: [
       /* @__PURE__ */ jsx(
@@ -236,7 +237,8 @@ function PaymentInner({
           crossSellBehavior: state.checkoutSession.cross_sell_behavior,
           donationSettings: paymentLink?.donation_settings,
           action,
-          completed
+          completed,
+          showFeatures
         }
       ),
       mode === "standalone" && !isMobile && /* @__PURE__ */ jsx(CheckoutFooter, { className: "cko-footer", sx: { color: "text.lighter" } })

package/es/payment/product-item.d.ts

@@ -17,6 +17,7 @@ type Props = {
     };
     onQuantityChange?: (itemId: string, quantity: number) => void;
     completed?: boolean;
+    showFeatures?: boolean;
 };
-export default function ProductItem({ item, items, trialInDays, trialEnd, currency, mode, children, onUpsell, onDownsell, completed, adjustableQuantity, onQuantityChange, }: Props): JSX.Element;
+export default function ProductItem({ item, items, trialInDays, trialEnd, currency, mode, children, onUpsell, onDownsell, completed, adjustableQuantity, onQuantityChange, showFeatures, }: Props): JSX.Element;
 export {};

package/es/payment/product-item.js

@@ -30,7 +30,8 @@ export default function ProductItem({
   completed = false,
   adjustableQuantity = { enabled: false },
   onQuantityChange = () => {
-  }
+  },
+  showFeatures = false
 }) {
   const { t, locale } = useLocaleContext();
   const { settings, setPayable } = usePaymentContext();
@@ -114,6 +115,7 @@ export default function ProductItem({
     return pricing.primary;
   }, [trialInDays, trialEnd, pricing, item, locale]);
   const quantityInventoryError = formatQuantityInventory(item.price, localQuantityNum, locale);
+  const features = item.price.product?.features || [];
   return /* @__PURE__ */ jsxs(
     Stack,
     {
@@ -181,6 +183,66 @@ export default function ProductItem({
                   ]
                 }
               ),
+              showFeatures && features.length > 0 && /* @__PURE__ */ jsx(
+                Box,
+                {
+                  sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "flex-start",
+                    flexWrap: "wrap",
+                    gap: 1.5,
+                    width: "100%",
+                    mt: 1.5
+                  },
+                  children: features.map((feature) => /* @__PURE__ */ jsxs(
+                    Box,
+                    {
+                      sx: {
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        gap: 0.5,
+                        px: 1,
+                        py: 0.5,
+                        bgcolor: "action.hover",
+                        borderRadius: 1,
+                        border: "1px solid",
+                        borderColor: "divider"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          Box,
+                          {
+                            sx: {
+                              bgcolor: "success.main",
+                              width: 4,
+                              height: 4,
+                              borderRadius: "50%"
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Typography,
+                          {
+                            component: "span",
+                            variant: "caption",
+                            sx: {
+                              color: "text.primary",
+                              fontSize: "0.75rem",
+                              fontWeight: 500,
+                              textTransform: "capitalize",
+                              whiteSpace: "nowrap"
+                            },
+                            children: feature.name
+                          }
+                        )
+                      ]
+                    },
+                    feature.name
+                  ))
+                }
+              ),
               quantityInventoryError ? /* @__PURE__ */ jsx(
                 Status,
                 {

package/es/payment/progress-item.d.ts

@@ -1,5 +1,7 @@
 interface VendorStatus {
     success: boolean;
+    name?: string;
+    key?: string;
     status: 'delivered' | 'pending' | 'failed';
     progress: number;
     message: string;

package/es/payment/progress-item.js

@@ -50,11 +50,37 @@ export function VendorProgressItem({ vendor }) {
       }
     };
   }, [startAnimation]);
-  const isCompleted = displayProgress >= 80;
+  const isCompleted = displayProgress >= 100;
+  const isFailed = vendor.status === "failed";
+  const nameText = vendor.name || vendor.title;
+  if (isFailed) {
+    return /* @__PURE__ */ jsxs(Box, { sx: { mb: 2 }, children: [
+      /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 1 }, children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { color: "text.secondary" }, children: nameText ? `${nameText} - ${t("payment.checkout.vendor.failed")}` : t("payment.checkout.vendor.failed") }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { color: "error.main", fontWeight: 500 }, children: t("payment.checkout.vendor.progress", { progress: 0 }) })
+      ] }),
+      /* @__PURE__ */ jsx(
+        LinearProgress,
+        {
+          variant: "determinate",
+          value: 100,
+          sx: {
+            height: 8,
+            borderRadius: 4,
+            backgroundColor: "grey.200",
+            "& .MuiLinearProgress-bar": {
+              borderRadius: 4,
+              backgroundColor: "error.main"
+            }
+          }
+        }
+      )
+    ] });
+  }
   const statusText = isCompleted ? t("payment.checkout.vendor.delivered") : t("payment.checkout.vendor.processing");
   return /* @__PURE__ */ jsxs(Box, { sx: { mb: 2 }, children: [
     /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 1 }, children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { color: "text.secondary" }, children: vendor.title ? `${vendor.title} - ${statusText}` : statusText }),
+      /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { color: "text.secondary" }, children: nameText ? `${nameText} - ${statusText}` : statusText }),
       /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { color: "text.secondary", fontWeight: 500 }, children: t("payment.checkout.vendor.progress", { progress: displayProgress }) })
     ] }),
     /* @__PURE__ */ jsx(

package/es/payment/success.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import { Box, Grow, Link, Paper, Stack, styled, Typography } from "@mui/material";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { joinURL } from "ufo";
 import { Button } from "@arcblock/ux";
 import { usePaymentContext } from "../contexts/payment.js";
@@ -22,17 +22,24 @@ export default function PaymentSuccess({
   const { prefix, api } = usePaymentContext();
   const [vendorStatus, setVendorStatus] = useState(null);
   const [isAllCompleted, setIsAllCompleted] = useState(false);
+  const [hasFailed, setHasFailed] = useState(false);
+  const timerRef = useRef(Date.now());
   let next = null;
   useEffect(() => {
     if (!hasVendor || !sessionId) return void 0;
     const fetchVendorStatus = async (interval2) => {
       try {
         const response = await api.get(joinURL(prefix, `/api/vendors/order/${sessionId}/status`), {});
-        const allCompleted = response.data?.vendors?.every((vendor) => vendor.progress >= 80);
-        if (allCompleted) {
+        const needCheckError = Date.now() - timerRef.current > 6 * 1e3;
+        const allCompleted = response.data?.vendors?.every((vendor) => vendor.progress >= 100);
+        const hasAnyFailed = response.data?.vendors?.some(
+          (vendor) => vendor.status === "failed" || needCheckError && !!vendor.error
+        );
+        if (hasAnyFailed || allCompleted) {
           clearInterval(interval2);
         }
-        setIsAllCompleted(allCompleted);
+        setHasFailed(hasAnyFailed);
+        setIsAllCompleted(!hasAnyFailed && allCompleted);
         setVendorStatus(response.data);
       } catch (error) {
         console.error("Failed to fetch vendor status:", error);
@@ -62,6 +69,7 @@ export default function PaymentSuccess({
         },
         children: [
           vendorStatus.vendors?.map((vendor, index) => /* @__PURE__ */ jsx(VendorProgressItem, { vendor }, vendor.title || `vendor-${index}`)),
+          hasFailed ? /* @__PURE__ */ jsx(Typography, { variant: "h6", sx: { color: "warning.main", mb: 1 }, children: t("payment.checkout.vendor.failedMsg") }) : null,
           pageInfo?.success_message?.[locale] && isAllCompleted ? /* @__PURE__ */ jsx(Typography, { variant: "h6", sx: { color: "text.primary", mb: 1 }, children: pageInfo?.success_message?.[locale] }) : null
         ]
       }

package/es/payment/summary.d.ts

@@ -17,6 +17,7 @@ type Props = {
     donationSettings?: DonationSettings;
     action?: string;
     completed?: boolean;
+    showFeatures?: boolean;
 };
-export default function PaymentSummary({ items, currency, trialInDays, billingThreshold, onUpsell, onDownsell, onQuantityChange, onApplyCrossSell, onCancelCrossSell, onChangeAmount, checkoutSessionId, crossSellBehavior, showStaking, donationSettings, action, trialEnd, completed, ...rest }: Props): import("react").JSX.Element;
+export default function PaymentSummary({ items, currency, trialInDays, billingThreshold, onUpsell, onDownsell, onQuantityChange, onApplyCrossSell, onCancelCrossSell, onChangeAmount, checkoutSessionId, crossSellBehavior, showStaking, donationSettings, action, trialEnd, completed, showFeatures, ...rest }: Props): import("react").JSX.Element;
 export {};

package/es/payment/summary.js

@@ -84,6 +84,7 @@ export default function PaymentSummary({
   action = "",
   trialEnd = 0,
   completed = false,
+  showFeatures = false,
   ...rest
 }) {
   const { t, locale } = useLocaleContext();
@@ -174,6 +175,7 @@ export default function PaymentSummary({
               onDownsell: handleDownsell,
               adjustableQuantity: x.adjustable_quantity,
               completed,
+              showFeatures,
               onQuantityChange: handleQuantityChange,
               children: x.cross_sell && /* @__PURE__ */ jsxs(
                 Stack,

package/lib/libs/util.js

@@ -410,6 +410,8 @@ function getPayoutStatusColor(status) {
   switch (status) {
     case "paid":
       return "success";
+    case "deferred":
+      return "warning";
     case "failed":
       return "warning";
     case "canceled":

package/lib/locales/en.js

@@ -191,7 +191,7 @@ module.exports = (0, _flat.default)({
         progress: "Progress {progress}%",
         delivered: "Installation completed",
         failed: "Processing failed",
-        pending: "Waiting for processing"
+        failedMsg: "An exception occurred during installation. We will automatically process a refund for you. We apologize for the inconvenience caused. Thank you for your understanding!"
       },
       confirm: {
         withStake: "By confirming, you allow {payee} to charge your account for future payments and, if necessary, slash your stake. You can cancel your subscription or withdraw your stake at any time.",

package/lib/locales/zh.js

@@ -191,7 +191,7 @@ module.exports = (0, _flat.default)({
         progress: "\u8FDB\u5EA6 {progress}%",
         delivered: "\u5B89\u88C5\u6210\u529F",
         failed: "\u5B89\u88C5\u5931\u8D25",
-        pending: "\u51C6\u5907\u5B89\u88C5"
+        failedMsg: "\u5F88\u62B1\u6B49\uFF0C\u5B89\u88C5\u8FC7\u7A0B\u4E2D\u9047\u5230\u4E86\u4E00\u4E9B\u95EE\u9898\u3002\u6211\u4EEC\u6B63\u5728\u5904\u7406\u8FD9\u4E2A\u95EE\u9898\uFF0C\u7A0D\u540E\u4F1A\u81EA\u52A8\u4E3A\u60A8\u9000\u6B3E\u3002\u611F\u8C22\u60A8\u7684\u8010\u5FC3\u7B49\u5F85\uFF01"
       },
       confirm: {
         withStake: "\u786E\u8BA4\u8BA2\u9605\uFF0C\u5373\u8868\u793A\u60A8\u6388\u6743 {payee} \u4ECE\u60A8\u7684\u8D26\u6237\u6263\u53D6\u672A\u6765\u6B3E\u9879\uFF0C\u5E76\u5728\u5FC5\u8981\u65F6\u7F5A\u6CA1\u8D28\u62BC\u3002\u60A8\u53EF\u968F\u65F6\u53D6\u6D88\u8BA2\u9605\u6216\u64A4\u9500\u8D28\u62BC\u3002",

package/lib/payment/index.js

@@ -257,6 +257,7 @@ function PaymentInner({
     trialInDays = 0;
     trialEnd = 0;
   }
+  const showFeatures = `${paymentLink?.metadata?.show_product_features}` === "true";
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactHookForm.FormProvider, {
     ...methods,
     children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
@@ -290,7 +291,8 @@ function PaymentInner({
             crossSellBehavior: state.checkoutSession.cross_sell_behavior,
             donationSettings: paymentLink?.donation_settings,
             action,
-            completed
+            completed,
+            showFeatures
           }), mode === "standalone" && !isMobile && /* @__PURE__ */(0, _jsxRuntime.jsx)(_footer.default, {
             className: "cko-footer",
             sx: {

package/lib/payment/product-item.d.ts

@@ -17,6 +17,7 @@ type Props = {
     };
     onQuantityChange?: (itemId: string, quantity: number) => void;
     completed?: boolean;
+    showFeatures?: boolean;
 };
-export default function ProductItem({ item, items, trialInDays, trialEnd, currency, mode, children, onUpsell, onDownsell, completed, adjustableQuantity, onQuantityChange, }: Props): JSX.Element;
+export default function ProductItem({ item, items, trialInDays, trialEnd, currency, mode, children, onUpsell, onDownsell, completed, adjustableQuantity, onQuantityChange, showFeatures, }: Props): JSX.Element;
 export {};

package/lib/payment/product-item.js

@@ -30,7 +30,8 @@ function ProductItem({
   adjustableQuantity = {
     enabled: false
   },
-  onQuantityChange = () => {}
+  onQuantityChange = () => {},
+  showFeatures = false
 }) {
   const {
     t,
@@ -123,6 +124,7 @@ function ProductItem({
     return pricing.primary;
   }, [trialInDays, trialEnd, pricing, item, locale]);
   const quantityInventoryError = (0, _util.formatQuantityInventory)(item.price, localQuantityNum, locale);
+  const features = item.price.product?.features || [];
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
     direction: "column",
     spacing: 1,
@@ -181,6 +183,49 @@ function ProductItem({
             children: pricing.secondary
           })]
         })]
+      }), showFeatures && features.length > 0 && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "flex-start",
+          flexWrap: "wrap",
+          gap: 1.5,
+          width: "100%",
+          mt: 1.5
+        },
+        children: features.map(feature => /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: 0.5,
+            px: 1,
+            py: 0.5,
+            bgcolor: "action.hover",
+            borderRadius: 1,
+            border: "1px solid",
+            borderColor: "divider"
+          },
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+            sx: {
+              bgcolor: "success.main",
+              width: 4,
+              height: 4,
+              borderRadius: "50%"
+            }
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+            component: "span",
+            variant: "caption",
+            sx: {
+              color: "text.primary",
+              fontSize: "0.75rem",
+              fontWeight: 500,
+              textTransform: "capitalize",
+              whiteSpace: "nowrap"
+            },
+            children: feature.name
+          })]
+        }, feature.name))
       }), quantityInventoryError ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_status.default, {
         label: quantityInventoryError,
         variant: "outlined",

package/lib/payment/progress-item.d.ts

@@ -1,5 +1,7 @@
 interface VendorStatus {
     success: boolean;
+    name?: string;
+    key?: string;
     status: 'delivered' | 'pending' | 'failed';
     progress: number;
     message: string;

package/lib/payment/progress-item.js

@@ -60,7 +60,52 @@ function VendorProgressItem({
       }
     };
   }, [startAnimation]);
-  const isCompleted = displayProgress >= 80;
+  const isCompleted = displayProgress >= 100;
+  const isFailed = vendor.status === "failed";
+  const nameText = vendor.name || vendor.title;
+  if (isFailed) {
+    return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+      sx: {
+        mb: 2
+      },
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+        sx: {
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          mb: 1
+        },
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          variant: "body2",
+          sx: {
+            color: "text.secondary"
+          },
+          children: nameText ? `${nameText} - ${t("payment.checkout.vendor.failed")}` : t("payment.checkout.vendor.failed")
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          variant: "body2",
+          sx: {
+            color: "error.main",
+            fontWeight: 500
+          },
+          children: t("payment.checkout.vendor.progress", {
+            progress: 0
+          })
+        })]
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.LinearProgress, {
+        variant: "determinate",
+        value: 100,
+        sx: {
+          height: 8,
+          borderRadius: 4,
+          backgroundColor: "grey.200",
+          "& .MuiLinearProgress-bar": {
+            borderRadius: 4,
+            backgroundColor: "error.main"
+          }
+        }
+      })]
+    });
+  }
   const statusText = isCompleted ? t("payment.checkout.vendor.delivered") : t("payment.checkout.vendor.processing");
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
     sx: {
@@ -78,7 +123,7 @@ function VendorProgressItem({
         sx: {
           color: "text.secondary"
         },
-        children: vendor.title ? `${vendor.title} - ${statusText}` : statusText
+        children: nameText ? `${nameText} - ${statusText}` : statusText
       }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
         variant: "body2",
         sx: {

package/lib/payment/success.js

@@ -34,17 +34,22 @@ function PaymentSuccess({
   } = (0, _payment.usePaymentContext)();
   const [vendorStatus, setVendorStatus] = (0, _react.useState)(null);
   const [isAllCompleted, setIsAllCompleted] = (0, _react.useState)(false);
+  const [hasFailed, setHasFailed] = (0, _react.useState)(false);
+  const timerRef = (0, _react.useRef)(Date.now());
   let next = null;
   (0, _react.useEffect)(() => {
     if (!hasVendor || !sessionId) return void 0;
     const fetchVendorStatus = async interval2 => {
       try {
         const response = await api.get((0, _ufo.joinURL)(prefix, `/api/vendors/order/${sessionId}/status`), {});
-        const allCompleted = response.data?.vendors?.every(vendor => vendor.progress >= 80);
-        if (allCompleted) {
+        const needCheckError = Date.now() - timerRef.current > 6 * 1e3;
+        const allCompleted = response.data?.vendors?.every(vendor => vendor.progress >= 100);
+        const hasAnyFailed = response.data?.vendors?.some(vendor => vendor.status === "failed" || needCheckError && !!vendor.error);
+        if (hasAnyFailed || allCompleted) {
           clearInterval(interval2);
         }
-        setIsAllCompleted(allCompleted);
+        setHasFailed(hasAnyFailed);
+        setIsAllCompleted(!hasAnyFailed && allCompleted);
         setVendorStatus(response.data);
       } catch (error) {
         console.error("Failed to fetch vendor status:", error);
@@ -72,7 +77,14 @@ function PaymentSuccess({
       },
       children: [vendorStatus.vendors?.map((vendor, index) => /* @__PURE__ */(0, _jsxRuntime.jsx)(_progressItem.VendorProgressItem, {
         vendor
-      }, vendor.title || `vendor-${index}`)), pageInfo?.success_message?.[locale] && isAllCompleted ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+      }, vendor.title || `vendor-${index}`)), hasFailed ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        variant: "h6",
+        sx: {
+          color: "warning.main",
+          mb: 1
+        },
+        children: t("payment.checkout.vendor.failedMsg")
+      }) : null, pageInfo?.success_message?.[locale] && isAllCompleted ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
         variant: "h6",
         sx: {
           color: "text.primary",

package/lib/payment/summary.d.ts

@@ -17,6 +17,7 @@ type Props = {
     donationSettings?: DonationSettings;
     action?: string;
     completed?: boolean;
+    showFeatures?: boolean;
 };
-export default function PaymentSummary({ items, currency, trialInDays, billingThreshold, onUpsell, onDownsell, onQuantityChange, onApplyCrossSell, onCancelCrossSell, onChangeAmount, checkoutSessionId, crossSellBehavior, showStaking, donationSettings, action, trialEnd, completed, ...rest }: Props): import("react").JSX.Element;
+export default function PaymentSummary({ items, currency, trialInDays, billingThreshold, onUpsell, onDownsell, onQuantityChange, onApplyCrossSell, onCancelCrossSell, onChangeAmount, checkoutSessionId, crossSellBehavior, showStaking, donationSettings, action, trialEnd, completed, showFeatures, ...rest }: Props): import("react").JSX.Element;
 export {};

package/lib/payment/summary.js

@@ -101,6 +101,7 @@ function PaymentSummary({
   action = "",
   trialEnd = 0,
   completed = false,
+  showFeatures = false,
   ...rest
 }) {
   const {
@@ -204,6 +205,7 @@ function PaymentSummary({
         onDownsell: handleDownsell,
         adjustableQuantity: x.adjustable_quantity,
         completed,
+        showFeatures,
         onQuantityChange: handleQuantityChange,
         children: x.cross_sell && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
           direction: "row",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.20.8",
+  "version": "1.20.10",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -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.8",
+    "@blocklet/payment-types": "1.20.10",
     "@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": "804fbe22b7f12af2fc58134679161be52a464582"
+  "gitHead": "1659d63120ced92167ec8681e51db96801b910ec"
 }

package/src/libs/util.ts

@@ -432,6 +432,8 @@ export function getPayoutStatusColor(status: string) {
   switch (status) {
     case 'paid':
       return 'success';
+    case 'deferred':
+      return 'warning';
     case 'failed':
       return 'warning';
     case 'canceled':

package/src/locales/en.tsx

@@ -187,7 +187,8 @@ export default flat({
         progress: 'Progress {progress}%',
         delivered: 'Installation completed',
         failed: 'Processing failed',
-        pending: 'Waiting for processing',
+        failedMsg:
+          'An exception occurred during installation. We will automatically process a refund for you. We apologize for the inconvenience caused. Thank you for your understanding!',
       },
       confirm: {
         withStake:

package/src/locales/zh.tsx

@@ -186,7 +186,7 @@ export default flat({
         progress: '进度 {progress}%',
         delivered: '安装成功',
         failed: '安装失败',
-        pending: '准备安装',
+        failedMsg: '很抱歉，安装过程中遇到了一些问题。我们正在处理这个问题，稍后会自动为您退款。感谢您的耐心等待！',
       },
       confirm: {
         withStake:

package/src/payment/index.tsx

@@ -262,6 +262,8 @@ function PaymentInner({
     trialEnd = 0;
   }
 
+  const showFeatures = `${paymentLink?.metadata?.show_product_features}` === 'true';
+
   return (
     <FormProvider {...methods}>
       <Stack className="cko-container" sx={{ gap: { sm: mode === 'standalone' ? 0 : mode === 'inline' ? 4 : 8 } }}>
@@ -290,6 +292,7 @@ function PaymentInner({
                 donationSettings={paymentLink?.donation_settings}
                 action={action}
                 completed={completed}
+                showFeatures={showFeatures}
               />
               {mode === 'standalone' && !isMobile && (
                 <CheckoutFooter className="cko-footer" sx={{ color: 'text.lighter' }} />

package/src/payment/product-item.tsx

@@ -37,6 +37,7 @@ type Props = {
   };
   onQuantityChange?: (itemId: string, quantity: number) => void;
   completed?: boolean;
+  showFeatures?: boolean;
 };
 
 export default function ProductItem({
@@ -52,6 +53,7 @@ export default function ProductItem({
   completed = false,
   adjustableQuantity = { enabled: false },
   onQuantityChange = () => {},
+  showFeatures = false,
 }: Props) {
   const { t, locale } = useLocaleContext();
   const { settings, setPayable } = usePaymentContext();
@@ -153,6 +155,7 @@ export default function ProductItem({
   }, [trialInDays, trialEnd, pricing, item, locale]);
 
   const quantityInventoryError = formatQuantityInventory(item.price, localQuantityNum, locale);
+  const features = item.price.product?.features || [];
 
   return (
     <Stack
@@ -182,7 +185,7 @@ export default function ProductItem({
           <ProductCard
             logo={item.price.product?.images[0]}
             name={item.price.product?.name}
-            // description={item.price.product?.description}
+            // description={showDescription ? item.price.product?.description : undefined}
             extra={
               <Box
                 sx={{
@@ -209,6 +212,56 @@ export default function ProductItem({
             )}
           </Stack>
         </Stack>
+        {showFeatures && features.length > 0 && (
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'flex-start',
+              flexWrap: 'wrap',
+              gap: 1.5,
+              width: '100%',
+              mt: 1.5,
+            }}>
+            {features.map((feature) => (
+              <Box
+                key={feature.name}
+                sx={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  gap: 0.5,
+                  px: 1,
+                  py: 0.5,
+                  bgcolor: 'action.hover',
+                  borderRadius: 1,
+                  border: '1px solid',
+                  borderColor: 'divider',
+                }}>
+                <Box
+                  sx={{
+                    bgcolor: 'success.main',
+                    width: 4,
+                    height: 4,
+                    borderRadius: '50%',
+                  }}
+                />
+                <Typography
+                  component="span"
+                  variant="caption"
+                  sx={{
+                    color: 'text.primary',
+                    fontSize: '0.75rem',
+                    fontWeight: 500,
+                    textTransform: 'capitalize',
+                    whiteSpace: 'nowrap',
+                  }}>
+                  {feature.name}
+                </Typography>
+              </Box>
+            ))}
+          </Box>
+        )}
         {quantityInventoryError ? (
           <Status
             label={quantityInventoryError}

package/src/payment/progress-item.tsx

@@ -4,6 +4,8 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 
 interface VendorStatus {
   success: boolean;
+  name?: string;
+  key?: string;
   status: 'delivered' | 'pending' | 'failed';
   progress: number;
   message: string;
@@ -75,14 +77,46 @@ export function VendorProgressItem({ vendor }: { vendor: VendorStatus }) {
     };
   }, [startAnimation]);
 
-  const isCompleted = displayProgress >= 80;
-  const statusText = isCompleted ? t('payment.checkout.vendor.delivered') : t('payment.checkout.vendor.processing');
+  const isCompleted = displayProgress >= 100;
+  const isFailed = vendor.status === 'failed';
+
+  const nameText = vendor.name || vendor.title;
+
+  // 如果是失败状态，显示错误 UI
+  if (isFailed) {
+    return (
+      <Box sx={{ mb: 2 }}>
+        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1 }}>
+          <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+            {nameText ? `${nameText} - ${t('payment.checkout.vendor.failed')}` : t('payment.checkout.vendor.failed')}
+          </Typography>
+          <Typography variant="body2" sx={{ color: 'error.main', fontWeight: 500 }}>
+            {t('payment.checkout.vendor.progress', { progress: 0 })}
+          </Typography>
+        </Box>
+        <LinearProgress
+          variant="determinate"
+          value={100}
+          sx={{
+            height: 8,
+            borderRadius: 4,
+            backgroundColor: 'grey.200',
+            '& .MuiLinearProgress-bar': {
+              borderRadius: 4,
+              backgroundColor: 'error.main',
+            },
+          }}
+        />
+      </Box>
+    );
+  }
 
+  const statusText = isCompleted ? t('payment.checkout.vendor.delivered') : t('payment.checkout.vendor.processing');
   return (
     <Box sx={{ mb: 2 }}>
       <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1 }}>
         <Typography variant="body2" sx={{ color: 'text.secondary' }}>
-          {vendor.title ? `${vendor.title} - ${statusText}` : statusText}
+          {nameText ? `${nameText} - ${statusText}` : statusText}
         </Typography>
         <Typography variant="body2" sx={{ color: 'text.secondary', fontWeight: 500 }}>
           {t('payment.checkout.vendor.progress', { progress: displayProgress })}

package/src/payment/success.tsx

@@ -1,6 +1,6 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { Box, Grow, Link, Paper, Stack, styled, Typography } from '@mui/material';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { joinURL } from 'ufo';
 
 import { Button } from '@arcblock/ux';
@@ -52,6 +52,8 @@ export default function PaymentSuccess({
   const { prefix, api } = usePaymentContext();
   const [vendorStatus, setVendorStatus] = useState<VendorResponse | null>(null);
   const [isAllCompleted, setIsAllCompleted] = useState(false);
+  const [hasFailed, setHasFailed] = useState(false);
+  const timerRef = useRef(Date.now());
   let next: any = null;
 
   // Fetch vendor status when hasVendor is true
@@ -61,11 +63,18 @@ export default function PaymentSuccess({
     const fetchVendorStatus = async (interval?: NodeJS.Timeout) => {
       try {
         const response = await api.get(joinURL(prefix, `/api/vendors/order/${sessionId}/status`), {});
-        const allCompleted = response.data?.vendors?.every((vendor: any) => vendor.progress >= 80);
-        if (allCompleted) {
+        const needCheckError = Date.now() - timerRef.current > 6 * 1000;
+
+        const allCompleted = response.data?.vendors?.every((vendor: any) => vendor.progress >= 100);
+        const hasAnyFailed = response.data?.vendors?.some(
+          (vendor: any) => vendor.status === 'failed' || (needCheckError && !!vendor.error)
+        );
+        if (hasAnyFailed || allCompleted) {
           clearInterval(interval);
         }
-        setIsAllCompleted(allCompleted);
+
+        setHasFailed(hasAnyFailed);
+        setIsAllCompleted(!hasAnyFailed && allCompleted);
         setVendorStatus(response.data);
       } catch (error) {
         console.error('Failed to fetch vendor status:', error);
@@ -102,6 +111,11 @@ export default function PaymentSuccess({
         {vendorStatus.vendors?.map((vendor, index) => (
           <VendorProgressItem key={vendor.title || `vendor-${index}`} vendor={vendor} />
         ))}
+        {hasFailed ? (
+          <Typography variant="h6" sx={{ color: 'warning.main', mb: 1 }}>
+            {t('payment.checkout.vendor.failedMsg')}
+          </Typography>
+        ) : null}
         {pageInfo?.success_message?.[locale] && isAllCompleted ? (
           <Typography variant="h6" sx={{ color: 'text.primary', mb: 1 }}>
             {pageInfo?.success_message?.[locale]}

package/src/payment/summary.tsx

@@ -71,6 +71,7 @@ type Props = {
   donationSettings?: DonationSettings; // only include backend part
   action?: string;
   completed?: boolean;
+  showFeatures?: boolean;
 };
 
 async function fetchCrossSell(id: string) {
@@ -138,6 +139,7 @@ export default function PaymentSummary({
   action = '',
   trialEnd = 0,
   completed = false,
+  showFeatures = false,
   ...rest
 }: Props) {
   const { t, locale } = useLocaleContext();
@@ -233,6 +235,7 @@ export default function PaymentSummary({
               onDownsell={handleDownsell}
               adjustableQuantity={x.adjustable_quantity}
               completed={completed}
+              showFeatures={showFeatures}
               onQuantityChange={handleQuantityChange}>
               {x.cross_sell && (
                 <Stack