@blocklet/payment-react 1.14.27 → 1.14.28

package/es/checkout/form.js

@@ -70,7 +70,7 @@ export default function CheckoutForm({
         paymentLink: data?.paymentLink,
         customer: data?.customer,
         completed: state.completed,
-        error: apiError || state.appError,
+        error: apiError,
         onPaid: handlePaid,
         onError: handleError,
         onChange,
@@ -91,7 +91,7 @@ export default function CheckoutForm({
         paymentLink: data?.paymentLink,
         customer: data?.customer,
         completed: state.completed,
-        error: apiError || state.appError,
+        error: apiError,
         onPaid: handlePaid,
         onError: handleError,
         onChange,
@@ -111,7 +111,7 @@ export default function CheckoutForm({
       paymentLink: data?.paymentLink,
       customer: data?.customer,
       completed: state.completed,
-      error: apiError || state.appError,
+      error: apiError,
       onPaid: handlePaid,
       onError: handleError,
       onChange,

package/es/checkout/table.js

@@ -65,7 +65,7 @@ function CheckoutTableInner({ id, mode, onPaid, onError, onChange, extraParams,
   }
   if (!sessionId && !hashSessionId) {
     if (mode === "standalone") {
-      return /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "center", children: [
+      return /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "center", p: 2.5, children: [
         /* @__PURE__ */ jsxs(
           Box,
           {
@@ -73,11 +73,19 @@ function CheckoutTableInner({ id, mode, onPaid, onError, onChange, extraParams,
               display: "flex",
               flexDirection: "column",
               fontSize: "24px",
-              margin: "20px 90px !important",
+              alignItems: "center",
+              margin: {
+                xs: "20px 0",
+                md: "20px 20px"
+              },
+              maxWidth: {
+                xs: "100%",
+                md: 400
+              },
               textAlign: "center"
             },
             children: [
-              !data.livemode && /* @__PURE__ */ jsx(Livemode, { sx: { display: "flex", marginBottom: "8px" } }),
+              !data.livemode && /* @__PURE__ */ jsx(Livemode, { sx: { display: "flex", marginBottom: "8px", width: "fit-content" } }),
               /* @__PURE__ */ jsx(
                 Typography,
                 {

package/es/components/pricing-table.js

@@ -21,6 +21,7 @@ import { styled } from "@mui/system";
 import { useSetState } from "ahooks";
 import { useEffect, useMemo, useState } from "react";
 import { BN } from "@ocap/util";
+import { isEmpty } from "lodash";
 import { usePaymentContext } from "../contexts/payment.js";
 import {
   formatError,
@@ -30,12 +31,19 @@ import {
   getPriceUintAmountByCurrency
 } from "../libs/util.js";
 import Amount from "../payment/amount.js";
+import { useMobile } from "../hooks/mobile.js";
+const sortOrder = {
+  year: 1,
+  month: 2,
+  day: 3,
+  hour: 4
+};
 const groupItemsByRecurring = (items, currency) => {
   const grouped = {};
   const recurring = {};
   items.forEach((x) => {
     const key = [x.price.recurring?.interval, x.price.recurring?.interval_count].join("-");
-    if (x.price.currency_options.find((c) => c.currency_id === currency.id)) {
+    if (x.price.currency_options?.find((c) => c.currency_id === currency.id)) {
       recurring[key] = x.price.recurring;
     }
     if (!grouped[key]) {
@@ -52,11 +60,28 @@ PricingTable.defaultProps = {
 };
 export default function PricingTable({ table, alignItems, interval, mode, onSelect }) {
   const { t, locale } = useLocaleContext();
+  const { isMobile } = useMobile();
   const {
     settings: { paymentMethods = [] }
   } = usePaymentContext();
   const [currency, setCurrency] = useState(table.currency || {});
   const { recurring, grouped } = useMemo(() => groupItemsByRecurring(table.items, currency), [table.items, currency]);
+  const recurringKeysList = useMemo(() => {
+    if (isEmpty(recurring)) {
+      return [];
+    }
+    return Object.keys(recurring).sort((a, b) => {
+      const [aType, aValue] = a.split("-");
+      const [bType, bValue] = b.split("-");
+      if (sortOrder[aType] !== sortOrder[bType]) {
+        return sortOrder[aType] - sortOrder[bType];
+      }
+      if (aValue && bValue) {
+        return bValue - aValue;
+      }
+      return b - a;
+    });
+  }, [recurring]);
   const [state, setState] = useSetState({ interval });
   const currencyMap = useMemo(() => {
     if (!paymentMethods || paymentMethods.length === 0) {
@@ -114,12 +139,12 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
       gap: 20px;
     }
     @media (max-width: ${({ theme }) => theme.breakpoints.values.sm}px) {
-      .price-table-item {
-        width: 90% !important;
-      }
-      .btn-row {
-        padding: 0 20px;
-      }
+      // .price-table-item {
+      //   width: 90% !important;
+      // }
+      // .btn-row {
+      //   padding: 0 20px;
+      // }
     }
     @media (min-width: ${({ theme }) => theme.breakpoints.values.md}px) {
       .price-table-wrap:has(> div:nth-child(1)) {
@@ -145,8 +170,17 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
         }
       },
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "btn-row", children: [
-          Object.keys(recurring).length > 0 && /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs(Stack, { className: "btn-row", flexDirection: "row", children: [
+          recurringKeysList.length > 0 && /* @__PURE__ */ jsx(Box, { children: isMobile && recurringKeysList.length > 1 ? /* @__PURE__ */ jsx(
+            Select,
+            {
+              value: state.interval,
+              onChange: (e) => setState({ interval: e.target.value }),
+              size: "small",
+              sx: { m: 1 },
+              children: recurringKeysList.map((x) => /* @__PURE__ */ jsx(MenuItem, { value: x, children: /* @__PURE__ */ jsx(Typography, { color: x === state.interval ? "text.primary" : "text.secondary", children: formatRecurring(recurring[x], true, "", locale) }) }, x))
+            }
+          ) : /* @__PURE__ */ jsx(
             ToggleButtonGroup,
             {
               size: "small",
@@ -165,7 +199,7 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                 }
               },
               exclusive: true,
-              children: Object.keys(recurring).map((x) => /* @__PURE__ */ jsx(
+              children: recurringKeysList.map((x) => /* @__PURE__ */ jsx(
                 ToggleButton,
                 {
                   size: "small",
@@ -186,7 +220,7 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                 x
               ))
             }
-          ),
+          ) }),
           currencyList.length > 0 && /* @__PURE__ */ jsx(
             Select,
             {
@@ -232,7 +266,10 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                       borderColor: mode === "select" && x.is_selected ? "primary.main" : "#ddd",
                       boxShadow: "0 8px 16px rgba(0, 0, 0, 20%)"
                     },
-                    width: "320px",
+                    width: {
+                      xs: "100%",
+                      md: "320px"
+                    },
                     maxWidth: "360px",
                     padding: "20px",
                     position: "relative"
@@ -366,8 +403,12 @@ function Subscribe({ x, action, onSelect, currencyId }) {
       fullWidth: true,
       size: "medium",
       variant: "contained",
-      color: x.is_highlight || x.is_selected ? "primary" : "info",
-      sx: { fontSize: "16px", padding: "10px 20px", lineHeight: "28px" },
+      color: x.is_highlight || x.is_selected ? "info" : "primary",
+      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.d.ts

@@ -104,3 +104,4 @@ export declare function formatTotalPrice({ product, quantity, priceId, locale, }
 export declare function formatQuantityInventory(price: TPrice, quantity: string | number, locale?: string): string;
 export declare function formatSubscriptionStatus(status: string): string;
 export declare function formatAmountPrecisionLimit(amount: string, locale?: string, precision?: number): string;
+export declare function getWordBreakStyle(value: any): 'break-word' | 'break-all';

package/es/libs/util.js

@@ -799,3 +799,9 @@ export function formatAmountPrecisionLimit(amount, locale = "en", precision = 6)
   }
   return "";
 }
+export function getWordBreakStyle(value) {
+  if (typeof value === "string" && /\s/.test(value)) {
+    return "break-word";
+  }
+  return "break-all";
+}

package/es/locales/en.js

@@ -193,7 +193,7 @@ export default flat({
       invoices: "Invoice History",
       details: "Details",
       summary: "Summary",
-      specifics: "Specifics",
+      products: "Products",
       update: "Update Information",
       empty: "Seems you do not have any subscriptions or payments here",
       cancel: {

package/es/locales/zh.js

@@ -110,9 +110,9 @@ export default flat({
         subscription: "\u67E5\u770B\u8BA2\u9605",
         invoice: "\u67E5\u770B\u8D26\u5355"
       },
-      paymentRequired: "\u652F\u4ED8\u6570\u91CF",
+      paymentRequired: "\u652F\u4ED8\u91D1\u989D",
       staking: {
-        title: "\u8D28\u62BC\u6570\u91CF",
+        title: "\u8D28\u62BC\u91D1\u989D",
         tooltip: "\u8D28\u62BC\u76F8\u5F53\u4E8E\u4FDD\u8BC1\u91D1\uFF0C\u7528\u4E8E\u786E\u4FDD\u672A\u6765\u7684\u8D26\u5355\u80FD\u591F\u6B63\u5E38\u6263\u6B3E\uFF0C\u5982\u679C\u4F60\u4ECE DID Wallet \u64A4\u9500\u8D28\u62BC\uFF0C\u8BA2\u9605\u4E5F\u4F1A\u88AB\u53D6\u6D88\u3002"
       },
       stakingConfirm: "\u5728\u6B64\u652F\u4ED8\u4E2D\uFF0C\u8D28\u62BC\u91D1\u989D\u4E0E\u4EA7\u54C1\u8D39\u7528\u5206\u5F00",
@@ -193,7 +193,7 @@ export default flat({
       invoices: "\u8D26\u5355\u5386\u53F2",
       details: "\u8D26\u6237\u8BE6\u60C5",
       summary: "\u8BA1\u8D39\u6458\u8981",
-      specifics: "\u5177\u4F53\u4FE1\u606F",
+      products: "\u4EA7\u54C1\u4FE1\u606F",
       update: "\u66F4\u65B0\u5BA2\u6237\u4FE1\u606F",
       empty: "\u770B\u8D77\u6765\u60A8\u5728\u8FD9\u91CC\u6CA1\u6709\u4EFB\u4F55\u8BA2\u9605\u6216\u652F\u4ED8",
       cancel: {

package/es/payment/form/address.js

@@ -23,7 +23,7 @@ export default function AddressForm({ mode, stripe, sx = {} }) {
             variant: "outlined",
             placeholder: t("payment.checkout.billing.postal_code"),
             InputProps: {
-              startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(
+              startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", style: { marginRight: "2px", marginLeft: "-8px" }, children: /* @__PURE__ */ jsx(
                 Controller,
                 {
                   name: "billing_address.country",

package/es/payment/index.d.ts

@@ -6,7 +6,7 @@ type Props = CheckoutContext & CheckoutCallbacks & {
     error?: any;
     showCheckoutSummary?: boolean;
 };
-declare function Payment({ checkoutSession, paymentMethods, paymentIntent, paymentLink, customer, completed, mode, onPaid, onError, onChange, goBack, action, showCheckoutSummary, }: Props): import("react").JSX.Element;
+declare function Payment({ checkoutSession, paymentMethods, paymentIntent, paymentLink, customer, completed, error, mode, onPaid, onError, onChange, goBack, action, showCheckoutSummary, }: Props): import("react").JSX.Element;
 declare namespace Payment {
     var defaultProps: {
         completed: boolean;

package/es/payment/index.js

@@ -209,7 +209,7 @@ export default function Payment({
   paymentLink,
   customer,
   completed,
-  // error,
+  error,
   mode,
   onPaid,
   onError,
@@ -238,6 +238,9 @@ export default function Payment({
     }
   }, [checkoutSession, livemode, setLivemode, refresh]);
   const renderContent = () => {
+    if (error) {
+      return /* @__PURE__ */ jsx(PaymentError, { mode, title: "Oops", description: formatError(error) });
+    }
     if (!checkoutSession || !delay) {
       return /* @__PURE__ */ jsxs(Stack, { className: "cko-container", sx: { gap: { sm: mode === "standalone" ? 0 : mode === "inline" ? 4 : 8 } }, children: [
         !hideSummaryCard && /* @__PURE__ */ jsx(Stack, { className: "base-card cko-overview", children: /* @__PURE__ */ jsx(Box, { className: "cko-product", children: /* @__PURE__ */ jsx(OverviewSkeleton, {}) }) }),

package/es/payment/skeleton/overview.js

@@ -2,12 +2,9 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Fade, Skeleton, Stack, Typography } from "@mui/material";
 export default function OverviewSkeleton() {
   return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { direction: "column", children: [
-    /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 2, children: [
-      /* @__PURE__ */ jsx(Skeleton, { variant: "circular", width: 32, height: 32 }),
-      /* @__PURE__ */ jsx(Skeleton, { variant: "text", sx: { fontSize: "2rem", width: "40%" } })
-    ] }),
+    /* @__PURE__ */ jsx(Stack, { direction: "row", alignItems: "center", spacing: 2, children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", sx: { fontSize: "2rem", width: "40%" } }) }),
+    /* @__PURE__ */ jsx(Skeleton, { sx: { mt: 2 }, variant: "rounded", height: 100 }),
     /* @__PURE__ */ jsx(Typography, { mt: 2, component: "div", variant: "h4", children: /* @__PURE__ */ jsx(Skeleton, {}) }),
-    /* @__PURE__ */ jsx(Typography, { component: "div", variant: "h2", children: /* @__PURE__ */ jsx(Skeleton, {}) }),
-    /* @__PURE__ */ jsx(Skeleton, { sx: { mt: 2 }, variant: "rounded", width: 200, height: 200 })
+    /* @__PURE__ */ jsx(Typography, { component: "div", variant: "h2", children: /* @__PURE__ */ jsx(Skeleton, {}) })
   ] }) });
 }

package/es/payment/skeleton/payment.js

@@ -1,16 +1,17 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Box, Fade, Skeleton, Stack, Typography } from "@mui/material";
 export default function PaymentSkeleton() {
-  return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { direction: "column", spacing: 2, children: [
+  return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { direction: "column", children: [
     /* @__PURE__ */ jsx(Skeleton, { variant: "text", sx: { fontSize: "2rem", width: "40%" } }),
-    /* @__PURE__ */ jsxs(Box, { children: [
-      /* @__PURE__ */ jsx(Typography, { component: "div", variant: "h4", children: /* @__PURE__ */ jsx(Skeleton, {}) }),
-      /* @__PURE__ */ jsx(Typography, { component: "div", variant: "h1", children: /* @__PURE__ */ jsx(Skeleton, {}) })
+    /* @__PURE__ */ jsx(Skeleton, { sx: { mt: 2 }, variant: "rounded", height: 68 }),
+    /* @__PURE__ */ jsxs(Box, { mt: 1, children: [
+      /* @__PURE__ */ jsx(Typography, { component: "div", variant: "h4", mb: -1, children: /* @__PURE__ */ jsx(Skeleton, {}) }),
+      /* @__PURE__ */ jsx(Typography, { component: "div", children: /* @__PURE__ */ jsx(Skeleton, { height: 60 }) })
     ] }),
     /* @__PURE__ */ jsxs(Box, { children: [
-      /* @__PURE__ */ jsx(Typography, { component: "div", variant: "h4", children: /* @__PURE__ */ jsx(Skeleton, {}) }),
-      /* @__PURE__ */ jsx(Typography, { component: "div", variant: "h1", children: /* @__PURE__ */ jsx(Skeleton, {}) })
+      /* @__PURE__ */ jsx(Typography, { component: "div", variant: "h4", mb: -1, children: /* @__PURE__ */ jsx(Skeleton, {}) }),
+      /* @__PURE__ */ jsx(Typography, { component: "div", children: /* @__PURE__ */ jsx(Skeleton, { height: 60 }) })
     ] }),
-    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Typography, { component: "div", variant: "h4", children: /* @__PURE__ */ jsx(Skeleton, {}) }) })
+    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Skeleton, { height: 60 }) })
   ] }) });
 }

package/lib/checkout/form.js

@@ -81,7 +81,7 @@ function CheckoutForm({
       paymentLink: data?.paymentLink,
       customer: data?.customer,
       completed: state.completed,
-      error: apiError || state.appError,
+      error: apiError,
       onPaid: handlePaid,
       onError: handleError,
       onChange,
@@ -101,7 +101,7 @@ function CheckoutForm({
         paymentLink: data?.paymentLink,
         customer: data?.customer,
         completed: state.completed,
-        error: apiError || state.appError,
+        error: apiError,
         onPaid: handlePaid,
         onError: handleError,
         onChange,
@@ -120,7 +120,7 @@ function CheckoutForm({
       paymentLink: data?.paymentLink,
       customer: data?.customer,
       completed: state.completed,
-      error: apiError || state.appError,
+      error: apiError,
       onPaid: handlePaid,
       onError: handleError,
       onChange,

package/lib/checkout/table.js

@@ -99,18 +99,28 @@ function CheckoutTableInner({
       return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
         direction: "column",
         alignItems: "center",
+        p: 2.5,
         children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_system.Box, {
           sx: {
             display: "flex",
             flexDirection: "column",
             fontSize: "24px",
-            margin: "20px 90px !important",
+            alignItems: "center",
+            margin: {
+              xs: "20px 0",
+              md: "20px 20px"
+            },
+            maxWidth: {
+              xs: "100%",
+              md: 400
+            },
             textAlign: "center"
           },
           children: [!data.livemode && /* @__PURE__ */(0, _jsxRuntime.jsx)(_livemode.default, {
             sx: {
               display: "flex",
-              marginBottom: "8px"
+              marginBottom: "8px",
+              width: "fit-content"
             }
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
             color: "text.primary",

package/lib/components/pricing-table.js

@@ -14,16 +14,24 @@ var _system = require("@mui/system");
 var _ahooks = require("ahooks");
 var _react = require("react");
 var _util = require("@ocap/util");
+var _lodash = require("lodash");
 var _payment = require("../contexts/payment");
 var _util2 = require("../libs/util");
 var _amount = _interopRequireDefault(require("../payment/amount"));
+var _mobile = require("../hooks/mobile");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const sortOrder = {
+  year: 1,
+  month: 2,
+  day: 3,
+  hour: 4
+};
 const groupItemsByRecurring = (items, currency) => {
   const grouped = {};
   const recurring = {};
   items.forEach(x => {
     const key = [x.price.recurring?.interval, x.price.recurring?.interval_count].join("-");
-    if (x.price.currency_options.find(c => c.currency_id === currency.id)) {
+    if (x.price.currency_options?.find(c => c.currency_id === currency.id)) {
       recurring[key] = x.price.recurring;
     }
     if (!grouped[key]) {
@@ -52,6 +60,9 @@ function PricingTable({
     t,
     locale
   } = (0, _context.useLocaleContext)();
+  const {
+    isMobile
+  } = (0, _mobile.useMobile)();
   const {
     settings: {
       paymentMethods = []
@@ -62,6 +73,22 @@ function PricingTable({
     recurring,
     grouped
   } = (0, _react.useMemo)(() => groupItemsByRecurring(table.items, currency), [table.items, currency]);
+  const recurringKeysList = (0, _react.useMemo)(() => {
+    if ((0, _lodash.isEmpty)(recurring)) {
+      return [];
+    }
+    return Object.keys(recurring).sort((a, b) => {
+      const [aType, aValue] = a.split("-");
+      const [bType, bValue] = b.split("-");
+      if (sortOrder[aType] !== sortOrder[bType]) {
+        return sortOrder[aType] - sortOrder[bType];
+      }
+      if (aValue && bValue) {
+        return bValue - aValue;
+      }
+      return b - a;
+    });
+  }, [recurring]);
   const [state, setState] = (0, _ahooks.useSetState)({
     interval
   });
@@ -127,12 +154,12 @@ function PricingTable({
     @media (max-width: ${({
     theme
   }) => theme.breakpoints.values.sm}px) {
-      .price-table-item {
-        width: 90% !important;
-      }
-      .btn-row {
-        padding: 0 20px;
-      }
+      // .price-table-item {
+      //   width: 90% !important;
+      // }
+      // .btn-row {
+      //   padding: 0 20px;
+      // }
     }
     @media (min-width: ${({
     theme
@@ -158,43 +185,62 @@ function PricingTable({
           sm: mode === "select" ? 3 : 5
         }
       },
-      children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)("div", {
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
         className: "btn-row",
-        children: [Object.keys(recurring).length > 0 && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.ToggleButtonGroup, {
-          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__ */(0, _jsxRuntime.jsx)(_material.ToggleButton, {
+        flexDirection: "row",
+        children: [recurringKeysList.length > 0 && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          children: isMobile && recurringKeysList.length > 1 ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Select, {
+            value: state.interval,
+            onChange: e => setState({
+              interval: e.target.value
+            }),
+            size: "small",
+            sx: {
+              m: 1
+            },
+            children: recurringKeysList.map(x => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.MenuItem, {
+              value: x,
+              children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+                color: x === state.interval ? "text.primary" : "text.secondary",
+                children: (0, _util2.formatRecurring)(recurring[x], true, "", locale)
+              })
+            }, x))
+          }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.ToggleButtonGroup, {
             size: "small",
-            value: x,
+            value: state.interval,
             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"
+              padding: "4px",
+              borderRadius: "36px",
+              height: "40px",
+              boxSizing: "border-box",
+              backgroundColor: "#f1f3f5",
+              border: 0
+            },
+            onChange: (_, value) => {
+              if (value !== null) {
+                setState({
+                  interval: value
+                });
               }
             },
-            children: (0, _util2.formatRecurring)(recurring[x], true, "", locale)
-          }, x))
+            exclusive: true,
+            children: recurringKeysList.map(x => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.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: (0, _util2.formatRecurring)(recurring[x], true, "", locale)
+            }, x))
+          })
         }), currencyList.length > 0 && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Select, {
           value: currency?.id,
           onChange: e => setCurrency(currencyList.find(v => v?.id === e.target.value)),
@@ -241,7 +287,10 @@ function PricingTable({
                 borderColor: mode === "select" && x.is_selected ? "primary.main" : "#ddd",
                 boxShadow: "0 8px 16px rgba(0, 0, 0, 20%)"
               },
-              width: "320px",
+              width: {
+                xs: "100%",
+                md: "320px"
+              },
               maxWidth: "360px",
               padding: "20px",
               position: "relative"
@@ -389,7 +438,7 @@ function Subscribe({
     fullWidth: true,
     size: "medium",
     variant: "contained",
-    color: x.is_highlight || x.is_selected ? "primary" : "info",
+    color: x.is_highlight || x.is_selected ? "info" : "primary",
     sx: {
       fontSize: "16px",
       padding: "10px 20px",

package/lib/libs/util.d.ts

@@ -104,3 +104,4 @@ export declare function formatTotalPrice({ product, quantity, priceId, locale, }
 export declare function formatQuantityInventory(price: TPrice, quantity: string | number, locale?: string): string;
 export declare function formatSubscriptionStatus(status: string): string;
 export declare function formatAmountPrecisionLimit(amount: string, locale?: string, precision?: number): string;
+export declare function getWordBreakStyle(value: any): 'break-word' | 'break-all';

package/lib/libs/util.js

@@ -43,6 +43,7 @@ exports.getSubscriptionAction = void 0;
 exports.getSubscriptionStatusColor = getSubscriptionStatusColor;
 exports.getTxLink = exports.getSubscriptionTimeSummary = void 0;
 exports.getWebhookStatusColor = getWebhookStatusColor;
+exports.getWordBreakStyle = getWordBreakStyle;
 exports.isPaymentKitMounted = void 0;
 exports.isValidCountry = isValidCountry;
 exports.lazyLoad = lazyLoad;
@@ -967,4 +968,10 @@ function formatAmountPrecisionLimit(amount, locale = "en", precision = 6) {
     });
   }
   return "";
+}
+function getWordBreakStyle(value) {
+  if (typeof value === "string" && /\s/.test(value)) {
+    return "break-word";
+  }
+  return "break-all";
 }

package/lib/locales/en.js

@@ -200,7 +200,7 @@ module.exports = (0, _flat.default)({
       invoices: "Invoice History",
       details: "Details",
       summary: "Summary",
-      specifics: "Specifics",
+      products: "Products",
       update: "Update Information",
       empty: "Seems you do not have any subscriptions or payments here",
       cancel: {

package/lib/locales/zh.js

@@ -117,9 +117,9 @@ module.exports = (0, _flat.default)({
         subscription: "\u67E5\u770B\u8BA2\u9605",
         invoice: "\u67E5\u770B\u8D26\u5355"
       },
-      paymentRequired: "\u652F\u4ED8\u6570\u91CF",
+      paymentRequired: "\u652F\u4ED8\u91D1\u989D",
       staking: {
-        title: "\u8D28\u62BC\u6570\u91CF",
+        title: "\u8D28\u62BC\u91D1\u989D",
         tooltip: "\u8D28\u62BC\u76F8\u5F53\u4E8E\u4FDD\u8BC1\u91D1\uFF0C\u7528\u4E8E\u786E\u4FDD\u672A\u6765\u7684\u8D26\u5355\u80FD\u591F\u6B63\u5E38\u6263\u6B3E\uFF0C\u5982\u679C\u4F60\u4ECE DID Wallet \u64A4\u9500\u8D28\u62BC\uFF0C\u8BA2\u9605\u4E5F\u4F1A\u88AB\u53D6\u6D88\u3002"
       },
       stakingConfirm: "\u5728\u6B64\u652F\u4ED8\u4E2D\uFF0C\u8D28\u62BC\u91D1\u989D\u4E0E\u4EA7\u54C1\u8D39\u7528\u5206\u5F00",
@@ -200,7 +200,7 @@ module.exports = (0, _flat.default)({
       invoices: "\u8D26\u5355\u5386\u53F2",
       details: "\u8D26\u6237\u8BE6\u60C5",
       summary: "\u8BA1\u8D39\u6458\u8981",
-      specifics: "\u5177\u4F53\u4FE1\u606F",
+      products: "\u4EA7\u54C1\u4FE1\u606F",
       update: "\u66F4\u65B0\u5BA2\u6237\u4FE1\u606F",
       empty: "\u770B\u8D77\u6765\u60A8\u5728\u8FD9\u91CC\u6CA1\u6709\u4EFB\u4F55\u8BA2\u9605\u6216\u652F\u4ED8",
       cancel: {

package/lib/payment/form/address.js

@@ -52,6 +52,10 @@ function AddressForm({
               InputProps: {
                 startAdornment: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.InputAdornment, {
                   position: "start",
+                  style: {
+                    marginRight: "2px",
+                    marginLeft: "-8px"
+                  },
                   children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
                     name: "billing_address.country",
                     control,

package/lib/payment/index.d.ts

@@ -6,7 +6,7 @@ type Props = CheckoutContext & CheckoutCallbacks & {
     error?: any;
     showCheckoutSummary?: boolean;
 };
-declare function Payment({ checkoutSession, paymentMethods, paymentIntent, paymentLink, customer, completed, mode, onPaid, onError, onChange, goBack, action, showCheckoutSummary, }: Props): import("react").JSX.Element;
+declare function Payment({ checkoutSession, paymentMethods, paymentIntent, paymentLink, customer, completed, error, mode, onPaid, onError, onChange, goBack, action, showCheckoutSummary, }: Props): import("react").JSX.Element;
 declare namespace Payment {
     var defaultProps: {
         completed: boolean;

package/lib/payment/index.js

@@ -262,7 +262,7 @@ function Payment({
   paymentLink,
   customer,
   completed,
-  // error,
+  error,
   mode,
   onPaid,
   onError,
@@ -297,6 +297,13 @@ function Payment({
     }
   }, [checkoutSession, livemode, setLivemode, refresh]);
   const renderContent = () => {
+    if (error) {
+      return /* @__PURE__ */(0, _jsxRuntime.jsx)(_error.default, {
+        mode,
+        title: "Oops",
+        description: (0, _util2.formatError)(error)
+      });
+    }
     if (!checkoutSession || !delay) {
       return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
         className: "cko-container",

package/lib/payment/skeleton/overview.js

@@ -11,21 +11,23 @@ function OverviewSkeleton() {
     in: true,
     children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
       direction: "column",
-      children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
         direction: "row",
         alignItems: "center",
         spacing: 2,
-        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
-          variant: "circular",
-          width: 32,
-          height: 32
-        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
+        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
           variant: "text",
           sx: {
             fontSize: "2rem",
             width: "40%"
           }
-        })]
+        })
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
+        sx: {
+          mt: 2
+        },
+        variant: "rounded",
+        height: 100
       }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
         mt: 2,
         component: "div",
@@ -35,13 +37,6 @@ function OverviewSkeleton() {
         component: "div",
         variant: "h2",
         children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {})
-      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
-        sx: {
-          mt: 2
-        },
-        variant: "rounded",
-        width: 200,
-        height: 200
       })]
     })
   });

package/lib/payment/skeleton/payment.js

@@ -11,38 +11,46 @@ function PaymentSkeleton() {
     in: true,
     children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
       direction: "column",
-      spacing: 2,
       children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
         variant: "text",
         sx: {
           fontSize: "2rem",
           width: "40%"
         }
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
+        sx: {
+          mt: 2
+        },
+        variant: "rounded",
+        height: 68
       }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+        mt: 1,
         children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
           component: "div",
           variant: "h4",
+          mb: -1,
           children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {})
         }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
           component: "div",
-          variant: "h1",
-          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {})
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
+            height: 60
+          })
         })]
       }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
         children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
           component: "div",
           variant: "h4",
+          mb: -1,
           children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {})
         }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
           component: "div",
-          variant: "h1",
-          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {})
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
+            height: 60
+          })
         })]
       }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-          component: "div",
-          variant: "h4",
-          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {})
+        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
+          height: 60
         })
       })]
     })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.14.27",
+  "version": "1.14.28",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -93,7 +93,7 @@
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.2",
     "@babel/preset-react": "^7.24.7",
-    "@blocklet/payment-types": "1.14.27",
+    "@blocklet/payment-types": "1.14.28",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -123,5 +123,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "8a67ed1dbdda51526d4cd03c9c10c6930a9ac6a0"
+  "gitHead": "79178aa9251fb54006f6e0fe32a14619d1e8f06e"
 }

package/src/checkout/form.tsx

@@ -85,7 +85,7 @@ export default function CheckoutForm({
         paymentLink={data?.paymentLink}
         customer={data?.customer}
         completed={state.completed}
-        error={apiError || state.appError}
+        error={apiError}
         onPaid={handlePaid}
         onError={handleError}
         onChange={onChange}
@@ -106,7 +106,7 @@ export default function CheckoutForm({
           paymentLink={data?.paymentLink}
           customer={data?.customer}
           completed={state.completed}
-          error={apiError || state.appError}
+          error={apiError}
           onPaid={handlePaid}
           onError={handleError}
           onChange={onChange}
@@ -127,7 +127,7 @@ export default function CheckoutForm({
         paymentLink={data?.paymentLink}
         customer={data?.customer}
         completed={state.completed}
-        error={apiError || state.appError}
+        error={apiError}
         onPaid={handlePaid}
         onError={handleError}
         onChange={onChange}

package/src/checkout/table.tsx

@@ -83,16 +83,24 @@ function CheckoutTableInner({ id, mode, onPaid, onError, onChange, extraParams,
   if (!sessionId && !hashSessionId) {
     if (mode === 'standalone') {
       return (
-        <Stack direction="column" alignItems="center">
+        <Stack direction="column" alignItems="center" p={2.5}>
           <Box
             sx={{
               display: 'flex',
               flexDirection: 'column',
               fontSize: '24px',
-              margin: '20px 90px !important',
+              alignItems: 'center',
+              margin: {
+                xs: '20px 0',
+                md: '20px 20px',
+              },
+              maxWidth: {
+                xs: '100%',
+                md: 400,
+              },
               textAlign: 'center',
             }}>
-            {!data.livemode && <Livemode sx={{ display: 'flex', marginBottom: '8px' }} />}
+            {!data.livemode && <Livemode sx={{ display: 'flex', marginBottom: '8px', width: 'fit-content' }} />}
             <Typography
               color="text.primary"
               fontWeight={600}

package/src/components/pricing-table.tsx

@@ -23,6 +23,7 @@ import { useSetState } from 'ahooks';
 import { useEffect, useMemo, useState } from 'react';
 
 import { BN } from '@ocap/util';
+import { isEmpty } from 'lodash';
 import { usePaymentContext } from '../contexts/payment';
 import {
   formatError,
@@ -32,6 +33,16 @@ import {
   getPriceUintAmountByCurrency,
 } from '../libs/util';
 import Amount from '../payment/amount';
+import { useMobile } from '../hooks/mobile';
+
+type SortOrder = { [key: string]: number };
+
+const sortOrder: SortOrder = {
+  year: 1,
+  month: 2,
+  day: 3,
+  hour: 4,
+};
 
 const groupItemsByRecurring = (items: TPricingTableItem[], currency: { id: string; symbol: string }) => {
   const grouped: { [key: string]: TPricingTableItem[] } = {};
@@ -39,7 +50,7 @@ const groupItemsByRecurring = (items: TPricingTableItem[], currency: { id: strin
 
   items.forEach((x) => {
     const key = [x.price.recurring?.interval, x.price.recurring?.interval_count].join('-');
-    if (x.price.currency_options.find((c: PriceCurrency) => c.currency_id === currency.id)) {
+    if (x.price.currency_options?.find((c: PriceCurrency) => c.currency_id === currency.id)) {
       recurring[key] = x.price.recurring as PriceRecurring;
     }
     if (!grouped[key]) {
@@ -69,11 +80,30 @@ PricingTable.defaultProps = {
 
 export default function PricingTable({ table, alignItems, interval, mode, onSelect }: Props) {
   const { t, locale } = useLocaleContext();
+  const { isMobile } = useMobile();
   const {
     settings: { paymentMethods = [] },
   } = usePaymentContext();
   const [currency, setCurrency] = useState(table.currency || {});
   const { recurring, grouped } = useMemo(() => groupItemsByRecurring(table.items, currency), [table.items, currency]);
+  const recurringKeysList = useMemo(() => {
+    if (isEmpty(recurring)) {
+      return [];
+    }
+    return Object.keys(recurring).sort((a, b) => {
+      const [aType, aValue] = a.split('-');
+      const [bType, bValue] = b.split('-');
+      if (sortOrder[aType] !== sortOrder[bType]) {
+        return sortOrder[aType] - sortOrder[bType];
+      }
+      if (aValue && bValue) {
+        // @ts-ignore
+        return bValue - aValue;
+      }
+      // @ts-ignore
+      return b - a;
+    });
+  }, [recurring]);
   const [state, setState] = useSetState({ interval });
   const currencyMap = useMemo(() => {
     if (!paymentMethods || paymentMethods.length === 0) {
@@ -137,12 +167,12 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
       gap: 20px;
     }
     @media (max-width: ${({ theme }) => theme.breakpoints.values.sm}px) {
-      .price-table-item {
-        width: 90% !important;
-      }
-      .btn-row {
-        padding: 0 20px;
-      }
+      // .price-table-item {
+      //   width: 90% !important;
+      // }
+      // .btn-row {
+      //   padding: 0 20px;
+      // }
     }
     @media (min-width: ${({ theme }) => theme.breakpoints.values.md}px) {
       .price-table-wrap:has(> div:nth-child(1)) {
@@ -167,45 +197,63 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
             sm: mode === 'select' ? 3 : 5,
           },
         }}>
-        <div className="btn-row">
-          {Object.keys(recurring).length > 0 && (
-            <ToggleButtonGroup
-              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>
-              {Object.keys(recurring).map((x) => (
-                <ToggleButton
+        <Stack className="btn-row" flexDirection="row">
+          {recurringKeysList.length > 0 && (
+            <Box>
+              {isMobile && recurringKeysList.length > 1 ? (
+                <Select
+                  value={state.interval}
+                  onChange={(e) => setState({ interval: e.target.value })}
                   size="small"
-                  key={x}
-                  value={x}
+                  sx={{ m: 1 }}>
+                  {recurringKeysList.map((x) => (
+                    <MenuItem key={x} value={x}>
+                      <Typography color={x === state.interval ? 'text.primary' : 'text.secondary'}>
+                        {formatRecurring(recurring[x] as PriceRecurring, true, '', locale)}
+                      </Typography>
+                    </MenuItem>
+                  ))}
+                </Select>
+              ) : (
+                <ToggleButtonGroup
+                  size="small"
+                  value={state.interval}
                   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>
-              ))}
-            </ToggleButtonGroup>
+                    padding: '4px',
+                    borderRadius: '36px',
+                    height: '40px',
+                    boxSizing: 'border-box',
+                    backgroundColor: '#f1f3f5',
+                    border: 0,
+                  }}
+                  onChange={(_, value) => {
+                    if (value !== null) {
+                      setState({ interval: value });
+                    }
+                  }}
+                  exclusive>
+                  {recurringKeysList.map((x) => (
+                    <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>
+                  ))}
+                </ToggleButtonGroup>
+              )}
+            </Box>
           )}
           {currencyList.length > 0 && (
             <Select
@@ -222,7 +270,7 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
               ))}
             </Select>
           )}
-        </div>
+        </Stack>
         <Stack
           flexWrap="wrap"
           direction="row"
@@ -258,7 +306,10 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                     borderColor: mode === 'select' && x.is_selected ? 'primary.main' : '#ddd',
                     boxShadow: '0 8px 16px rgba(0, 0, 0, 20%)',
                   },
-                  width: '320px',
+                  width: {
+                    xs: '100%',
+                    md: '320px',
+                  },
                   maxWidth: '360px',
 
                   padding: '20px',
@@ -377,8 +428,12 @@ function Subscribe({ x, action, onSelect, currencyId }: any) {
       fullWidth
       size="medium"
       variant="contained"
-      color={x.is_highlight || x.is_selected ? 'primary' : 'info'}
-      sx={{ fontSize: '16px', padding: '10px 20px', lineHeight: '28px' }}
+      color={x.is_highlight || x.is_selected ? 'info' : 'primary'}
+      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

@@ -1035,3 +1035,10 @@ export function formatAmountPrecisionLimit(amount: string, locale = 'en', precis
   }
   return '';
 }
+
+export function getWordBreakStyle(value: any): 'break-word' | 'break-all' {
+  if (typeof value === 'string' && /\s/.test(value)) {
+    return 'break-word';
+  }
+  return 'break-all';
+}

package/src/locales/en.tsx

@@ -198,7 +198,7 @@ export default flat({
       invoices: 'Invoice History',
       details: 'Details',
       summary: 'Summary',
-      specifics: 'Specifics',
+      products: 'Products',
       update: 'Update Information',
       empty: 'Seems you do not have any subscriptions or payments here',
       cancel: {

package/src/locales/zh.tsx

@@ -112,9 +112,9 @@ export default flat({
         subscription: '查看订阅',
         invoice: '查看账单',
       },
-      paymentRequired: '支付数量',
+      paymentRequired: '支付金额',
       staking: {
-        title: '质押数量',
+        title: '质押金额',
         tooltip: '质押相当于保证金，用于确保未来的账单能够正常扣款，如果你从 DID Wallet 撤销质押，订阅也会被取消。',
       },
       stakingConfirm: '在此支付中，质押金额与产品费用分开',
@@ -195,7 +195,7 @@ export default flat({
       invoices: '账单历史',
       details: '账户详情',
       summary: '计费摘要',
-      specifics: '具体信息',
+      products: '产品信息',
       update: '更新客户信息',
       empty: '看起来您在这里没有任何订阅或支付',
       cancel: {

package/src/payment/form/address.tsx

@@ -33,7 +33,7 @@ export default function AddressForm({ mode, stripe, sx = {} }: Props) {
                 placeholder={t('payment.checkout.billing.postal_code')}
                 InputProps={{
                   startAdornment: (
-                    <InputAdornment position="start">
+                    <InputAdornment position="start" style={{ marginRight: '2px', marginLeft: '-8px' }}>
                       <Controller
                         name="billing_address.country"
                         control={control}

package/src/payment/index.tsx

@@ -248,7 +248,7 @@ export default function Payment({
   paymentLink,
   customer,
   completed,
-  // error,
+  error,
   mode,
   onPaid,
   onError,
@@ -281,6 +281,9 @@ export default function Payment({
   }, [checkoutSession, livemode, setLivemode, refresh]);
 
   const renderContent = () => {
+    if (error) {
+      return <PaymentError mode={mode} title="Oops" description={formatError(error)} />;
+    }
     if (!checkoutSession || !delay) {
       return (
         <Stack className="cko-container" sx={{ gap: { sm: mode === 'standalone' ? 0 : mode === 'inline' ? 4 : 8 } }}>

package/src/payment/skeleton/overview.tsx

@@ -5,16 +5,15 @@ export default function OverviewSkeleton() {
     <Fade in>
       <Stack direction="column">
         <Stack direction="row" alignItems="center" spacing={2}>
-          <Skeleton variant="circular" width={32} height={32} />
           <Skeleton variant="text" sx={{ fontSize: '2rem', width: '40%' }} />
         </Stack>
+        <Skeleton sx={{ mt: 2 }} variant="rounded" height={100} />
         <Typography mt={2} component="div" variant="h4">
           <Skeleton />
         </Typography>
         <Typography component="div" variant="h2">
           <Skeleton />
         </Typography>
-        <Skeleton sx={{ mt: 2 }} variant="rounded" width={200} height={200} />
       </Stack>
     </Fade>
   );

package/src/payment/skeleton/payment.tsx

@@ -3,28 +3,27 @@ import { Box, Fade, Skeleton, Stack, Typography } from '@mui/material';
 export default function PaymentSkeleton() {
   return (
     <Fade in>
-      <Stack direction="column" spacing={2}>
+      <Stack direction="column">
         <Skeleton variant="text" sx={{ fontSize: '2rem', width: '40%' }} />
-        <Box>
-          <Typography component="div" variant="h4">
+        <Skeleton sx={{ mt: 2 }} variant="rounded" height={68} />
+        <Box mt={1}>
+          <Typography component="div" variant="h4" mb={-1}>
             <Skeleton />
           </Typography>
-          <Typography component="div" variant="h1">
-            <Skeleton />
+          <Typography component="div">
+            <Skeleton height={60} />
           </Typography>
         </Box>
         <Box>
-          <Typography component="div" variant="h4">
+          <Typography component="div" variant="h4" mb={-1}>
             <Skeleton />
           </Typography>
-          <Typography component="div" variant="h1">
-            <Skeleton />
+          <Typography component="div">
+            <Skeleton height={60} />
           </Typography>
         </Box>
         <Box>
-          <Typography component="div" variant="h4">
-            <Skeleton />
-          </Typography>
+          <Skeleton height={60} />
         </Box>
       </Stack>
     </Fade>