@blocklet/payment-react 1.13.260 → 1.13.262

package/es/checkout/table.js

@@ -56,11 +56,34 @@ export default function CheckoutTable({ id, mode, onPaid, onError, onChange, ext
   }
   if (!sessionId && !hashSessionId) {
     if (mode === "standalone") {
-      return /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "center", spacing: 4, children: [
-        /* @__PURE__ */ jsxs(Typography, { variant: "h4", color: "text.primary", fontWeight: 600, children: [
-          data.name,
-          !data.livemode && /* @__PURE__ */ jsx(Livemode, {})
-        ] }),
+      return /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "center", children: [
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            sx: {
+              display: "flex",
+              flexDirection: "column",
+              fontSize: "24px",
+              margin: "20px 90px !important",
+              textAlign: "center"
+            },
+            children: [
+              !data.livemode && /* @__PURE__ */ jsx(Livemode, { sx: { display: "flex", marginBottom: "8px" } }),
+              /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  color: "text.primary",
+                  fontWeight: 600,
+                  sx: {
+                    lineHeight: "32px",
+                    fontSize: "24px"
+                  },
+                  children: data.name
+                }
+              )
+            ]
+          }
+        ),
         /* @__PURE__ */ jsx(PricingTable, { table: data, onSelect: handleSelect })
       ] });
     }

package/es/components/livemode.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="react" />
+import { ChipOwnProps } from '@mui/material';
 type Props = {
     color?: string;
     backgroundColor?: string;
-};
-declare function Livemode({ color, backgroundColor }: Props): import("react").JSX.Element;
+} & ChipOwnProps;
+declare function Livemode({ color, backgroundColor, sx }: Props): import("react").JSX.Element;
 declare namespace Livemode {
     var defaultProps: {
         color: string;

package/es/components/livemode.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import { Chip } from "@mui/material";
-export default function Livemode({ color, backgroundColor }) {
+export default function Livemode({ color, backgroundColor, sx }) {
   const { t } = useLocaleContext();
   return /* @__PURE__ */ jsx(
     Chip,
@@ -17,7 +17,8 @@ export default function Livemode({ color, backgroundColor }) {
         fontWeight: "bold",
         borderRadius: "4px",
         backgroundColor,
-        color
+        color,
+        ...sx
       }
     }
   );

package/es/components/pricing-table.js

@@ -60,13 +60,13 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
     }
     @media (min-width: ${({ theme }) => theme.breakpoints.values.md}px) {
       .price-table-wrap:has(> div:nth-child(1)) {
-        width: 320px !important;
+        max-width: 360px !important;
       }
       .price-table-wrap:has(> div:nth-child(2)) {
-        width: 720px !important;
+        max-width: 720px !important;
       }
       .price-table-wrap:has(> div:nth-child(3)) {
-        width: 960px !important;
+        max-width: 1080px !important;
       }
       .price-table-wrap:has(> div:nth-child(1)) > .price-table-item {
         width: 90% !important;
@@ -85,10 +85,6 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
       direction: "column",
       alignItems: alignItems === "center" ? "center" : "flex-start",
       sx: {
-        pt: {
-          xs: 4,
-          sm: 2
-        },
         gap: {
           xs: 3,
           sm: mode === "select" ? 3 : 5
@@ -98,16 +94,42 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
         Object.keys(recurring).length > 1 && /* @__PURE__ */ jsx(
           ToggleButtonGroup,
           {
-            color: "primary",
             size: "small",
             value: state.interval,
+            sx: {
+              padding: "4px",
+              borderRadius: "36px",
+              height: "40px",
+              boxSizing: "border-box",
+              backgroundColor: "#f1f3f5",
+              border: 0
+            },
             onChange: (_, value) => {
               if (value !== null) {
                 setState({ interval: value });
               }
             },
             exclusive: true,
-            children: Object.keys(recurring).map((x) => /* @__PURE__ */ jsx(ToggleButton, { size: "small", value: x, sx: { textTransform: "capitalize" }, children: formatRecurring(recurring[x], true, "", locale) }, x))
+            children: Object.keys(recurring).map((x) => /* @__PURE__ */ jsx(
+              ToggleButton,
+              {
+                size: "small",
+                value: x,
+                sx: {
+                  textTransform: "capitalize",
+                  padding: "5px 12px",
+                  fontSize: "13px",
+                  backgroundColor: x === state.interval ? "#fff !important" : "#f1f3f5 !important",
+                  border: "0px",
+                  "&.Mui-selected": {
+                    borderRadius: "9999px !important",
+                    border: "1px solid #e5e7eb"
+                  }
+                },
+                children: formatRecurring(recurring[x], true, "", locale)
+              },
+              x
+            ))
           }
         ),
         /* @__PURE__ */ jsx(
@@ -115,7 +137,7 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
           {
             flexWrap: "wrap",
             direction: "row",
-            gap: "calc(10px + 3%)",
+            gap: "20px",
             justifyContent: alignItems === "center" ? "center" : "flex-start",
             className: "price-table-wrap",
             children: grouped[state.interval]?.map(
@@ -130,7 +152,7 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                     padding: 4,
                     spacing: 2,
                     direction: "column",
-                    alignItems: "center",
+                    alignItems: "flex-start",
                     className: "price-table-item",
                     justifyContent: "flex-start",
                     sx: {
@@ -138,37 +160,119 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                       borderWidth: "1px",
                       borderStyle: "solid",
                       borderColor: mode === "select" && x.is_selected ? "primary.main" : "#eee",
-                      borderRadius: 1,
+                      borderRadius: 2,
                       transition: "border-color 0.3s ease 0s, box-shadow 0.3s ease 0s",
-                      boxShadow: "0 4px 8px rgba(0, 0, 0, 20%)",
+                      boxShadow: "0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 1px 2px -1px rgba(3, 7, 18, 0.08), 0px 2px 4px rgba(3, 7, 18, 0.04)",
                       "&:hover": {
                         borderColor: mode === "select" && x.is_selected ? "primary.main" : "#ddd",
                         boxShadow: "0 8px 16px rgba(0, 0, 0, 20%)"
-                      }
+                      },
+                      padding: "20px",
+                      position: "relative"
                     },
                     children: [
-                      /* @__PURE__ */ jsxs(Box, { textAlign: "center", children: [
-                        /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "center", spacing: 1, children: [
-                          /* @__PURE__ */ jsx(Typography, { variant: "h5", color: "text.primary", fontWeight: 600, children: x.product.name }),
-                          x.is_highlight && /* @__PURE__ */ jsx(Chip, { label: x.highlight_text, color: "default", size: "small" })
-                        ] }),
-                        /* @__PURE__ */ jsx(Typography, { color: "text.secondary", children: x.product.description })
-                      ] }),
-                      /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [
-                        /* @__PURE__ */ jsx(Amount, { amount: formatPriceAmount(x.price, table.currency, x.product.unit_label) }),
-                        /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "flex-start", children: [
-                          /* @__PURE__ */ jsx(Typography, { component: "span", color: "text.secondary", fontSize: "0.8rem", children: t("payment.checkout.per") }),
-                          /* @__PURE__ */ jsx(Typography, { component: "span", color: "text.secondary", fontSize: "0.8rem", children: formatRecurring(x.price.recurring, false, "", locale) })
-                        ] })
-                      ] }),
-                      /* @__PURE__ */ jsx(Loading, { x, action, onSelect }),
-                      x.product.features.length > 0 && /* @__PURE__ */ jsxs(Box, { children: [
-                        /* @__PURE__ */ jsx(Typography, { children: t("payment.checkout.include") }),
-                        /* @__PURE__ */ jsx(List, { dense: true, children: x.product.features.map((f) => /* @__PURE__ */ jsxs(ListItem, { disableGutters: true, disablePadding: true, children: [
-                          /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 25 }, children: /* @__PURE__ */ jsx(CheckOutlined, { color: "success", fontSize: "small" }) }),
-                          /* @__PURE__ */ jsx(ListItemText, { primary: f.name })
-                        ] }, f.name)) })
-                      ] })
+                      /* @__PURE__ */ jsx(Box, { textAlign: "center", children: /* @__PURE__ */ jsxs(
+                        Stack,
+                        {
+                          direction: "column",
+                          justifyContent: "center",
+                          alignItems: "flex-start",
+                          spacing: 1,
+                          sx: { gap: "12px" },
+                          children: [
+                            /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+                              /* @__PURE__ */ jsx(
+                                Typography,
+                                {
+                                  color: "text.primary",
+                                  fontWeight: 600,
+                                  sx: {
+                                    color: "#4B5563",
+                                    fontSize: "18px !important",
+                                    fontWeight: "600"
+                                  },
+                                  children: x.product.name
+                                }
+                              ),
+                              x.is_highlight && /* @__PURE__ */ jsx(
+                                Chip,
+                                {
+                                  label: x.highlight_text,
+                                  color: "default",
+                                  size: "small",
+                                  sx: {
+                                    position: "absolute",
+                                    top: "20px",
+                                    right: "20px"
+                                  }
+                                }
+                              )
+                            ] }),
+                            /* @__PURE__ */ jsx(
+                              Amount,
+                              {
+                                amount: formatPriceAmount(x.price, table.currency, x.product.unit_label),
+                                sx: { my: 0, marginTop: "0px !important", fontSize: "48px", fontWeight: "bold" }
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              Typography,
+                              {
+                                color: "text.secondary",
+                                sx: {
+                                  marginTop: "0px !important",
+                                  color: "#4b5563",
+                                  fontWeight: "400",
+                                  fontSize: "16px",
+                                  textAlign: "left"
+                                },
+                                children: x.product.description
+                              }
+                            )
+                          ]
+                        }
+                      ) }),
+                      x.product.features.length > 0 && /* @__PURE__ */ jsx(Box, { sx: { width: "100%" }, children: /* @__PURE__ */ jsxs(List, { dense: true, sx: { display: "flex", flexDirection: "column", gap: "16px", padding: "0px" }, children: [
+                        /* @__PURE__ */ jsx(
+                          Box,
+                          {
+                            sx: {
+                              width: "100%",
+                              position: "relative",
+                              borderTop: "1px solid #e5e7eb",
+                              boxSizing: "border-box",
+                              height: "1px"
+                            }
+                          }
+                        ),
+                        x.product.features.map((f) => /* @__PURE__ */ jsxs(ListItem, { disableGutters: true, disablePadding: true, sx: { fontSize: "16px !important" }, children: [
+                          /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 25, color: "#059669", fontSize: "64px" }, children: /* @__PURE__ */ jsx(
+                            CheckOutlined,
+                            {
+                              color: "success",
+                              fontSize: "small",
+                              sx: {
+                                color: "#059669",
+                                fontSize: "18px"
+                              }
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx(
+                            ListItemText,
+                            {
+                              sx: {
+                                ".MuiListItemText-primary": {
+                                  fontSize: "16px",
+                                  color: "#030712",
+                                  fontWeight: "500"
+                                }
+                              },
+                              primary: f.name
+                            }
+                          )
+                        ] }, f.name))
+                      ] }) }),
+                      /* @__PURE__ */ jsx(Subscribe, { x, action, onSelect })
                     ]
                   },
                   x?.price_id
@@ -181,7 +285,7 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
     }
   ) });
 }
-function Loading({ x, action, onSelect }) {
+function Subscribe({ x, action, onSelect }) {
   const [state, setState] = useState({ loading: "", loaded: false });
   const handleSelect = async (priceId) => {
     try {
@@ -196,10 +300,10 @@ function Loading({ x, action, onSelect }) {
     LoadingButton,
     {
       fullWidth: true,
-      size: "large",
-      variant: x.is_highlight || x.is_selected ? "contained" : "outlined",
+      size: "medium",
+      variant: "contained",
       color: x.is_highlight || x.is_selected ? "primary" : "info",
-      sx: { fontSize: "1.2rem" },
+      sx: { fontSize: "16px", padding: "10px 20px", lineHeight: "28px" },
       loading: state.loading === x.price_id && !state.loaded,
       disabled: x.is_disabled,
       onClick: () => handleSelect(x.price_id),

package/es/libs/util.js

@@ -64,6 +64,9 @@ export const formatLocale = (locale = "en") => {
 };
 export const formatPrettyMsLocale = (locale) => locale === "zh" ? "zh_CN" : "en_US";
 export const formatError = (err) => {
+  if (!err) {
+    return "Unknown error";
+  }
   const { details, errors, response } = err;
   if (Array.isArray(errors)) {
     return errors.map((x) => x.message).join("\n");
@@ -77,7 +80,7 @@ export const formatError = (err) => {
     return `Validate failed: ${formatted.join(";")}`;
   }
   if (response) {
-    return response.data.error || `${err.message}: ${JSON.stringify(response.data)}`;
+    return response.data?.error || `${err.message}: ${JSON.stringify(response.data)}`;
   }
   return err.message;
 };

package/es/payment/amount.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
+import { TypographyProps } from '@mui/material';
 type Props = {
     amount: string;
-    sx?: any;
-};
+} & TypographyProps;
 declare function PaymentAmount({ amount, sx }: Props): import("react").JSX.Element;
 declare namespace PaymentAmount {
     var defaultProps: {

package/es/payment/amount.js

@@ -18,5 +18,6 @@ export default function PaymentAmount({ amount, sx }) {
   );
 }
 PaymentAmount.defaultProps = {
+  // eslint-disable-next-line react/default-props-match-prop-types
   sx: {}
 };

package/lib/checkout/table.js

@@ -88,12 +88,28 @@ function CheckoutTable({
       return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
         direction: "column",
         alignItems: "center",
-        spacing: 4,
-        children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
-          variant: "h4",
-          color: "text.primary",
-          fontWeight: 600,
-          children: [data.name, !data.livemode && /* @__PURE__ */(0, _jsxRuntime.jsx)(_livemode.default, {})]
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_system.Box, {
+          sx: {
+            display: "flex",
+            flexDirection: "column",
+            fontSize: "24px",
+            margin: "20px 90px !important",
+            textAlign: "center"
+          },
+          children: [!data.livemode && /* @__PURE__ */(0, _jsxRuntime.jsx)(_livemode.default, {
+            sx: {
+              display: "flex",
+              marginBottom: "8px"
+            }
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+            color: "text.primary",
+            fontWeight: 600,
+            sx: {
+              lineHeight: "32px",
+              fontSize: "24px"
+            },
+            children: data.name
+          })]
         }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_pricingTable.default, {
           table: data,
           onSelect: handleSelect

package/lib/components/livemode.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="react" />
+import { ChipOwnProps } from '@mui/material';
 type Props = {
     color?: string;
     backgroundColor?: string;
-};
-declare function Livemode({ color, backgroundColor }: Props): import("react").JSX.Element;
+} & ChipOwnProps;
+declare function Livemode({ color, backgroundColor, sx }: Props): import("react").JSX.Element;
 declare namespace Livemode {
     var defaultProps: {
         color: string;

package/lib/components/livemode.js

@@ -9,7 +9,8 @@ var _context = require("@arcblock/ux/lib/Locale/context");
 var _material = require("@mui/material");
 function Livemode({
   color,
-  backgroundColor
+  backgroundColor,
+  sx
 }) {
   const {
     t
@@ -26,7 +27,8 @@ function Livemode({
       fontWeight: "bold",
       borderRadius: "4px",
       backgroundColor,
-      color
+      color,
+      ...sx
     }
   });
 }

package/lib/components/pricing-table.js

@@ -79,13 +79,13 @@ function PricingTable({
     theme
   }) => theme.breakpoints.values.md}px) {
       .price-table-wrap:has(> div:nth-child(1)) {
-        width: 320px !important;
+        max-width: 360px !important;
       }
       .price-table-wrap:has(> div:nth-child(2)) {
-        width: 720px !important;
+        max-width: 720px !important;
       }
       .price-table-wrap:has(> div:nth-child(3)) {
-        width: 960px !important;
+        max-width: 1080px !important;
       }
       .price-table-wrap:has(> div:nth-child(1)) > .price-table-item {
         width: 90% !important;
@@ -103,19 +103,22 @@ function PricingTable({
       direction: "column",
       alignItems: alignItems === "center" ? "center" : "flex-start",
       sx: {
-        pt: {
-          xs: 4,
-          sm: 2
-        },
         gap: {
           xs: 3,
           sm: mode === "select" ? 3 : 5
         }
       },
       children: [Object.keys(recurring).length > 1 && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.ToggleButtonGroup, {
-        color: "primary",
         size: "small",
         value: state.interval,
+        sx: {
+          padding: "4px",
+          borderRadius: "36px",
+          height: "40px",
+          boxSizing: "border-box",
+          backgroundColor: "#f1f3f5",
+          border: 0
+        },
         onChange: (_, value) => {
           if (value !== null) {
             setState({
@@ -128,14 +131,22 @@ function PricingTable({
           size: "small",
           value: x,
           sx: {
-            textTransform: "capitalize"
+            textTransform: "capitalize",
+            padding: "5px 12px",
+            fontSize: "13px",
+            backgroundColor: x === state.interval ? "#fff !important" : "#f1f3f5 !important",
+            border: "0px",
+            "&.Mui-selected": {
+              borderRadius: "9999px !important",
+              border: "1px solid #e5e7eb"
+            }
           },
           children: (0, _util.formatRecurring)(recurring[x], true, "", locale)
         }, x))
       }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
         flexWrap: "wrap",
         direction: "row",
-        gap: "calc(10px + 3%)",
+        gap: "20px",
         justifyContent: alignItems === "center" ? "center" : "flex-start",
         className: "price-table-wrap",
         children: grouped[state.interval]?.map(x => {
@@ -147,7 +158,7 @@ function PricingTable({
             padding: 4,
             spacing: 2,
             direction: "column",
-            alignItems: "center",
+            alignItems: "flex-start",
             className: "price-table-item",
             justifyContent: "flex-start",
             sx: {
@@ -155,81 +166,127 @@ function PricingTable({
               borderWidth: "1px",
               borderStyle: "solid",
               borderColor: mode === "select" && x.is_selected ? "primary.main" : "#eee",
-              borderRadius: 1,
+              borderRadius: 2,
               transition: "border-color 0.3s ease 0s, box-shadow 0.3s ease 0s",
-              boxShadow: "0 4px 8px rgba(0, 0, 0, 20%)",
+              boxShadow: "0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 1px 2px -1px rgba(3, 7, 18, 0.08), 0px 2px 4px rgba(3, 7, 18, 0.04)",
               "&:hover": {
                 borderColor: mode === "select" && x.is_selected ? "primary.main" : "#ddd",
                 boxShadow: "0 8px 16px rgba(0, 0, 0, 20%)"
-              }
+              },
+              padding: "20px",
+              position: "relative"
             },
-            children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
               textAlign: "center",
-              children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-                direction: "row",
-                alignItems: "center",
-                justifyContent: "center",
-                spacing: 1,
-                children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-                  variant: "h5",
-                  color: "text.primary",
-                  fontWeight: 600,
-                  children: x.product.name
-                }), x.is_highlight && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Chip, {
-                  label: x.highlight_text,
-                  color: "default",
-                  size: "small"
-                })]
-              }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-                color: "text.secondary",
-                children: x.product.description
-              })]
-            }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-              direction: "row",
-              alignItems: "center",
-              spacing: 1,
-              children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_amount.default, {
-                amount: (0, _util.formatPriceAmount)(x.price, table.currency, x.product.unit_label)
-              }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+              children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
                 direction: "column",
+                justifyContent: "center",
                 alignItems: "flex-start",
-                children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-                  component: "span",
-                  color: "text.secondary",
-                  fontSize: "0.8rem",
-                  children: t("payment.checkout.per")
+                spacing: 1,
+                sx: {
+                  gap: "12px"
+                },
+                children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+                  sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between"
+                  },
+                  children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+                    color: "text.primary",
+                    fontWeight: 600,
+                    sx: {
+                      color: "#4B5563",
+                      fontSize: "18px !important",
+                      fontWeight: "600"
+                    },
+                    children: x.product.name
+                  }), x.is_highlight && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Chip, {
+                    label: x.highlight_text,
+                    color: "default",
+                    size: "small",
+                    sx: {
+                      position: "absolute",
+                      top: "20px",
+                      right: "20px"
+                    }
+                  })]
+                }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_amount.default, {
+                  amount: (0, _util.formatPriceAmount)(x.price, table.currency, x.product.unit_label),
+                  sx: {
+                    my: 0,
+                    marginTop: "0px !important",
+                    fontSize: "48px",
+                    fontWeight: "bold"
+                  }
                 }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-                  component: "span",
                   color: "text.secondary",
-                  fontSize: "0.8rem",
-                  children: (0, _util.formatRecurring)(x.price.recurring, false, "", locale)
+                  sx: {
+                    marginTop: "0px !important",
+                    color: "#4b5563",
+                    fontWeight: "400",
+                    fontSize: "16px",
+                    textAlign: "left"
+                  },
+                  children: x.product.description
                 })]
-              })]
-            }), /* @__PURE__ */(0, _jsxRuntime.jsx)(Loading, {
-              x,
-              action,
-              onSelect
-            }), x.product.features.length > 0 && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-              children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-                children: t("payment.checkout.include")
-              }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.List, {
+              })
+            }), x.product.features.length > 0 && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+              sx: {
+                width: "100%"
+              },
+              children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.List, {
                 dense: true,
-                children: x.product.features.map(f => /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.ListItem, {
+                sx: {
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: "16px",
+                  padding: "0px"
+                },
+                children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+                  sx: {
+                    width: "100%",
+                    position: "relative",
+                    borderTop: "1px solid #e5e7eb",
+                    boxSizing: "border-box",
+                    height: "1px"
+                  }
+                }), x.product.features.map(f => /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.ListItem, {
                   disableGutters: true,
                   disablePadding: true,
+                  sx: {
+                    fontSize: "16px !important"
+                  },
                   children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
                     sx: {
-                      minWidth: 25
+                      minWidth: 25,
+                      color: "#059669",
+                      fontSize: "64px"
                     },
                     children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.CheckOutlined, {
                       color: "success",
-                      fontSize: "small"
+                      fontSize: "small",
+                      sx: {
+                        color: "#059669",
+                        fontSize: "18px"
+                      }
                     })
                   }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.ListItemText, {
+                    sx: {
+                      ".MuiListItemText-primary": {
+                        fontSize: "16px",
+                        color: "#030712",
+                        fontWeight: "500"
+                      }
+                    },
                     primary: f.name
                   })]
-                }, f.name))
-              })]
+                }, f.name))]
+              })
+            }), /* @__PURE__ */(0, _jsxRuntime.jsx)(Subscribe, {
+              x,
+              action,
+              onSelect
             })]
           }, x?.price_id);
         })
@@ -237,7 +294,7 @@ function PricingTable({
     })
   });
 }
-function Loading({
+function Subscribe({
   x,
   action,
   onSelect
@@ -260,11 +317,13 @@ function Loading({
   };
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(_lab.LoadingButton, {
     fullWidth: true,
-    size: "large",
-    variant: x.is_highlight || x.is_selected ? "contained" : "outlined",
+    size: "medium",
+    variant: "contained",
     color: x.is_highlight || x.is_selected ? "primary" : "info",
     sx: {
-      fontSize: "1.2rem"
+      fontSize: "16px",
+      padding: "10px 20px",
+      lineHeight: "28px"
     },
     loading: state.loading === x.price_id && !state.loaded,
     disabled: x.is_disabled,

package/lib/libs/util.js

@@ -111,6 +111,9 @@ exports.formatLocale = formatLocale;
 const formatPrettyMsLocale = locale => locale === "zh" ? "zh_CN" : "en_US";
 exports.formatPrettyMsLocale = formatPrettyMsLocale;
 const formatError = err => {
+  if (!err) {
+    return "Unknown error";
+  }
   const {
     details,
     errors,
@@ -128,7 +131,7 @@ const formatError = err => {
     return `Validate failed: ${formatted.join(";")}`;
   }
   if (response) {
-    return response.data.error || `${err.message}: ${JSON.stringify(response.data)}`;
+    return response.data?.error || `${err.message}: ${JSON.stringify(response.data)}`;
   }
   return err.message;
 };

package/lib/payment/amount.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
+import { TypographyProps } from '@mui/material';
 type Props = {
     amount: string;
-    sx?: any;
-};
+} & TypographyProps;
 declare function PaymentAmount({ amount, sx }: Props): import("react").JSX.Element;
 declare namespace PaymentAmount {
     var defaultProps: {

package/lib/payment/amount.js

@@ -24,5 +24,6 @@ function PaymentAmount({
   });
 }
 PaymentAmount.defaultProps = {
+  // eslint-disable-next-line react/default-props-match-prop-types
   sx: {}
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.13.260",
+  "version": "1.13.262",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -52,15 +52,15 @@
     }
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.9.79",
-    "@arcblock/ux": "^2.9.79",
-    "@arcblock/ws": "^1.18.117",
-    "@mui/icons-material": "^5.15.17",
+    "@arcblock/did-connect": "^2.9.80",
+    "@arcblock/ux": "^2.9.80",
+    "@arcblock/ws": "^1.18.120",
+    "@mui/icons-material": "^5.15.18",
     "@mui/lab": "^5.0.0-alpha.170",
-    "@mui/material": "^5.15.17",
-    "@mui/styles": "^5.15.17",
+    "@mui/material": "^5.15.18",
+    "@mui/styles": "^5.15.18",
     "@mui/system": "^5.15.15",
-    "@ocap/util": "^1.18.117",
+    "@ocap/util": "^1.18.120",
     "@stripe/react-stripe-js": "^2.7.1",
     "@stripe/stripe-js": "^2.4.0",
     "@vitejs/plugin-legacy": "^5.4.0",
@@ -91,7 +91,7 @@
     "@babel/core": "^7.24.5",
     "@babel/preset-env": "^7.24.5",
     "@babel/preset-react": "^7.24.1",
-    "@blocklet/payment-types": "1.13.260",
+    "@blocklet/payment-types": "1.13.262",
     "@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": "57b412a5be95152201bf70fe5a826984a277c4c9"
+  "gitHead": "223f9f888bc1cf70b8ed7ae367a5c27c341df6f3"
 }

package/src/checkout/table.tsx

@@ -73,11 +73,26 @@ export default function CheckoutTable({ id, mode, onPaid, onError, onChange, ext
   if (!sessionId && !hashSessionId) {
     if (mode === 'standalone') {
       return (
-        <Stack direction="column" alignItems="center" spacing={4}>
-          <Typography variant="h4" color="text.primary" fontWeight={600}>
-            {data.name}
-            {!data.livemode && <Livemode />}
-          </Typography>
+        <Stack direction="column" alignItems="center">
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              fontSize: '24px',
+              margin: '20px 90px !important',
+              textAlign: 'center',
+            }}>
+            {!data.livemode && <Livemode sx={{ display: 'flex', marginBottom: '8px' }} />}
+            <Typography
+              color="text.primary"
+              fontWeight={600}
+              sx={{
+                lineHeight: '32px',
+                fontSize: '24px',
+              }}>
+              {data.name}
+            </Typography>
+          </Box>
           <PricingTable table={data} onSelect={handleSelect} />
         </Stack>
       );

package/src/components/livemode.tsx

@@ -1,12 +1,12 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { Chip } from '@mui/material';
+import { Chip, ChipOwnProps } from '@mui/material';
 
 type Props = {
   color?: string;
   backgroundColor?: string;
-};
+} & ChipOwnProps;
 
-export default function Livemode({ color, backgroundColor }: Props) {
+export default function Livemode({ color, backgroundColor, sx }: Props) {
   const { t } = useLocaleContext();
   return (
     <Chip
@@ -22,6 +22,7 @@ export default function Livemode({ color, backgroundColor }: Props) {
         borderRadius: '4px',
         backgroundColor,
         color,
+        ...sx,
       }}
     />
   );

package/src/components/pricing-table.tsx

@@ -81,13 +81,13 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
     }
     @media (min-width: ${({ theme }) => theme.breakpoints.values.md}px) {
       .price-table-wrap:has(> div:nth-child(1)) {
-        width: 320px !important;
+        max-width: 360px !important;
       }
       .price-table-wrap:has(> div:nth-child(2)) {
-        width: 720px !important;
+        max-width: 720px !important;
       }
       .price-table-wrap:has(> div:nth-child(3)) {
-        width: 960px !important;
+        max-width: 1080px !important;
       }
       .price-table-wrap:has(> div:nth-child(1)) > .price-table-item {
         width: 90% !important;
@@ -106,10 +106,6 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
         direction="column"
         alignItems={alignItems === 'center' ? 'center' : 'flex-start'}
         sx={{
-          pt: {
-            xs: 4,
-            sm: 2,
-          },
           gap: {
             xs: 3,
             sm: mode === 'select' ? 3 : 5,
@@ -117,9 +113,16 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
         }}>
         {Object.keys(recurring).length > 1 && (
           <ToggleButtonGroup
-            color="primary"
             size="small"
             value={state.interval}
+            sx={{
+              padding: '4px',
+              borderRadius: '36px',
+              height: '40px',
+              boxSizing: 'border-box',
+              backgroundColor: '#f1f3f5',
+              border: 0,
+            }}
             onChange={(_, value) => {
               if (value !== null) {
                 setState({ interval: value });
@@ -127,7 +130,21 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
             }}
             exclusive>
             {Object.keys(recurring).map((x) => (
-              <ToggleButton size="small" key={x} value={x} sx={{ textTransform: 'capitalize' }}>
+              <ToggleButton
+                size="small"
+                key={x}
+                value={x}
+                sx={{
+                  textTransform: 'capitalize',
+                  padding: '5px 12px',
+                  fontSize: '13px',
+                  backgroundColor: x === state.interval ? '#fff !important' : '#f1f3f5 !important',
+                  border: '0px',
+                  '&.Mui-selected': {
+                    borderRadius: '9999px !important',
+                    border: '1px solid #e5e7eb',
+                  },
+                }}>
                 {formatRecurring(recurring[x] as PriceRecurring, true, '', locale)}
               </ToggleButton>
             ))}
@@ -136,12 +153,12 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
         <Stack
           flexWrap="wrap"
           direction="row"
-          gap="calc(10px + 3%)"
+          gap="20px"
           justifyContent={alignItems === 'center' ? 'center' : 'flex-start'}
           className="price-table-wrap">
           {grouped[state.interval as string]?.map(
             (x: TPricingTableItem & { is_selected?: boolean; is_disabled?: boolean }) => {
-              let action = x.subscription_data?.trial_period_days
+              let action: string = x.subscription_data?.trial_period_days
                 ? t('payment.checkout.try')
                 : t('payment.checkout.subscription');
               if (mode === 'select') {
@@ -154,7 +171,7 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                   padding={4}
                   spacing={2}
                   direction="column"
-                  alignItems="center"
+                  alignItems="flex-start"
                   className="price-table-item"
                   justifyContent="flex-start"
                   sx={{
@@ -162,50 +179,106 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                     borderWidth: '1px',
                     borderStyle: 'solid',
                     borderColor: mode === 'select' && x.is_selected ? 'primary.main' : '#eee',
-                    borderRadius: 1,
+                    borderRadius: 2,
                     transition: 'border-color 0.3s ease 0s, box-shadow 0.3s ease 0s',
-                    boxShadow: '0 4px 8px rgba(0, 0, 0, 20%)',
+                    boxShadow:
+                      '0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 1px 2px -1px rgba(3, 7, 18, 0.08), 0px 2px 4px rgba(3, 7, 18, 0.04)',
                     '&:hover': {
                       borderColor: mode === 'select' && x.is_selected ? 'primary.main' : '#ddd',
                       boxShadow: '0 8px 16px rgba(0, 0, 0, 20%)',
                     },
+
+                    padding: '20px',
+                    position: 'relative',
                   }}>
                   <Box textAlign="center">
-                    <Stack direction="row" alignItems="center" justifyContent="center" spacing={1}>
-                      <Typography variant="h5" color="text.primary" fontWeight={600}>
-                        {x.product.name}
+                    <Stack
+                      direction="column"
+                      justifyContent="center"
+                      alignItems="flex-start"
+                      spacing={1}
+                      sx={{ gap: '12px' }}>
+                      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                        <Typography
+                          color="text.primary"
+                          fontWeight={600}
+                          sx={{
+                            color: '#4B5563',
+                            fontSize: '18px !important',
+                            fontWeight: '600',
+                          }}>
+                          {x.product.name}
+                        </Typography>
+                        {x.is_highlight && (
+                          <Chip
+                            label={x.highlight_text}
+                            color="default"
+                            size="small"
+                            sx={{
+                              position: 'absolute',
+                              top: '20px',
+                              right: '20px',
+                            }}
+                          />
+                        )}
+                      </Box>
+                      <Amount
+                        amount={formatPriceAmount(x.price, table.currency, x.product.unit_label)}
+                        sx={{ my: 0, marginTop: '0px !important', fontSize: '48px', fontWeight: 'bold' }}
+                      />
+                      <Typography
+                        color="text.secondary"
+                        sx={{
+                          marginTop: '0px !important',
+                          color: '#4b5563',
+                          fontWeight: '400',
+                          fontSize: '16px',
+                          textAlign: 'left',
+                        }}>
+                        {x.product.description}
                       </Typography>
-                      {x.is_highlight && <Chip label={x.highlight_text} color="default" size="small" />}
                     </Stack>
-                    <Typography color="text.secondary">{x.product.description}</Typography>
                   </Box>
-                  <Stack direction="row" alignItems="center" spacing={1}>
-                    <Amount amount={formatPriceAmount(x.price, table.currency, x.product.unit_label)} />
-                    <Stack direction="column" alignItems="flex-start">
-                      <Typography component="span" color="text.secondary" fontSize="0.8rem">
-                        {t('payment.checkout.per')}
-                      </Typography>
-                      <Typography component="span" color="text.secondary" fontSize="0.8rem">
-                        {formatRecurring(x.price.recurring as PriceRecurring, false, '', locale)}
-                      </Typography>
-                    </Stack>
-                  </Stack>
-                  <Loading x={x} action={action} onSelect={onSelect} />
                   {x.product.features.length > 0 && (
-                    <Box>
-                      <Typography>{t('payment.checkout.include')}</Typography>
-                      <List dense>
+                    <Box sx={{ width: '100%' }}>
+                      <List dense sx={{ display: 'flex', flexDirection: 'column', gap: '16px', padding: '0px' }}>
+                        <Box
+                          sx={{
+                            width: '100%',
+                            position: 'relative',
+                            borderTop: '1px solid #e5e7eb',
+                            boxSizing: 'border-box',
+                            height: '1px',
+                          }}
+                        />
                         {x.product.features.map((f: any) => (
-                          <ListItem key={f.name} disableGutters disablePadding>
-                            <ListItemIcon sx={{ minWidth: 25 }}>
-                              <CheckOutlined color="success" fontSize="small" />
+                          <ListItem key={f.name} disableGutters disablePadding sx={{ fontSize: '16px !important' }}>
+                            <ListItemIcon sx={{ minWidth: 25, color: '#059669', fontSize: '64px' }}>
+                              <CheckOutlined
+                                color="success"
+                                fontSize="small"
+                                sx={{
+                                  color: '#059669',
+                                  fontSize: '18px',
+                                }}
+                              />
                             </ListItemIcon>
-                            <ListItemText primary={f.name} />
+                            <ListItemText
+                              sx={{
+                                '.MuiListItemText-primary': {
+                                  fontSize: '16px',
+                                  color: '#030712',
+                                  fontWeight: '500',
+                                },
+                              }}
+                              primary={f.name}
+                            />
                           </ListItem>
                         ))}
                       </List>
                     </Box>
                   )}
+                  <Subscribe x={x} action={action} onSelect={onSelect} />
                 </Stack>
               );
             }
@@ -216,7 +289,7 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
   );
 }
 
-function Loading({ x, action, onSelect }: any) {
+function Subscribe({ x, action, onSelect }: any) {
   const [state, setState] = useState({ loading: '', loaded: false });
 
   const handleSelect = async (priceId: string) => {
@@ -232,10 +305,10 @@ function Loading({ x, action, onSelect }: any) {
   return (
     <LoadingButton
       fullWidth
-      size="large"
-      variant={x.is_highlight || x.is_selected ? 'contained' : 'outlined'}
+      size="medium"
+      variant="contained"
       color={x.is_highlight || x.is_selected ? 'primary' : 'info'}
-      sx={{ fontSize: '1.2rem' }}
+      sx={{ fontSize: '16px', padding: '10px 20px', lineHeight: '28px' }}
       loading={state.loading === x.price_id && !state.loaded}
       disabled={x.is_disabled}
       onClick={() => handleSelect(x.price_id)}

package/src/libs/util.ts

@@ -96,6 +96,10 @@ export const formatLocale = (locale = 'en') => {
 export const formatPrettyMsLocale = (locale: string) => (locale === 'zh' ? 'zh_CN' : 'en_US');
 
 export const formatError = (err: any) => {
+  if (!err) {
+    return 'Unknown error';
+  }
+
   const { details, errors, response } = err;
 
   // graphql error
@@ -116,7 +120,7 @@ export const formatError = (err: any) => {
 
   // axios error
   if (response) {
-    return response.data.error || `${err.message}: ${JSON.stringify(response.data)}`;
+    return response.data?.error || `${err.message}: ${JSON.stringify(response.data)}`;
   }
 
   return err.message;

package/src/payment/amount.tsx

@@ -1,6 +1,6 @@
-import { Typography } from '@mui/material';
+import { Typography, TypographyProps } from '@mui/material';
 
-type Props = { amount: string; sx?: any };
+type Props = { amount: string } & TypographyProps;
 
 export default function PaymentAmount({ amount, sx }: Props) {
   return (
@@ -20,5 +20,6 @@ export default function PaymentAmount({ amount, sx }: Props) {
 }
 
 PaymentAmount.defaultProps = {
+  // eslint-disable-next-line react/default-props-match-prop-types
   sx: {},
 };