@blocklet/payment-react 1.26.1 → 1.26.2

package/es/checkout-v2/components/left/cross-sell-card.js

@@ -3,7 +3,7 @@ import AddShoppingCartIcon from "@mui/icons-material/AddShoppingCart";
 import ShoppingCartCheckoutIcon from "@mui/icons-material/ShoppingCartCheckout";
 import { Avatar, Box, Button, Chip, Stack, Typography } from "@mui/material";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import { formatDynamicUnitPrice, tSafe, INTERVAL_LOCALE_KEY } from "../../utils/format.js";
+import { formatDynamicUnitPrice, tSafe, INTERVAL_LOCALE_KEY, primaryContrastColor } from "../../utils/format.js";
 export default function CrossSellCard({
   crossSellItem,
   currency,
@@ -40,7 +40,7 @@ export default function CrossSellCard({
           fontWeight: 900,
           letterSpacing: "0.12em",
           bgcolor: "primary.main",
-          color: "#fff",
+          color: (theme) => primaryContrastColor(theme),
           boxShadow: "0 4px 12px rgba(45,124,243,0.2)",
           "& .MuiChip-label": { px: 1.5 }
         }
@@ -147,7 +147,7 @@ export default function CrossSellCard({
                   transition: "all 0.2s",
                   "&:hover": {
                     bgcolor: "primary.main",
-                    color: "#fff",
+                    color: (theme) => primaryContrastColor(theme),
                     borderColor: "primary.main"
                   },
                   "&:active": { transform: "scale(0.95)" }

package/es/checkout-v2/components/left/product-item-card.js

@@ -22,7 +22,13 @@ import {
 import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
 import { getPriceUnitAmountByCurrency } from "@blocklet/payment-react-headless";
 import Toast from "@arcblock/ux/lib/Toast";
-import { INTERVAL_LOCALE_KEY, formatDynamicUnitPrice, formatTokenAmount, formatTrialText } from "../../utils/format.js";
+import {
+  INTERVAL_LOCALE_KEY,
+  formatDynamicUnitPrice,
+  formatTokenAmount,
+  formatTrialText,
+  primaryContrastColor
+} from "../../utils/format.js";
 export default function ProductItemCard({
   item,
   currency,
@@ -217,7 +223,7 @@ export default function ProductItemCard({
           fontWeight: 900,
           letterSpacing: "0.12em",
           bgcolor: "primary.main",
-          color: "#fff",
+          color: (th) => primaryContrastColor(th),
           boxShadow: "0 4px 12px rgba(45,124,243,0.2)",
           "& .MuiChip-label": { px: 1.5 }
         }
@@ -388,7 +394,7 @@ export default function ProductItemCard({
               ]
             }
           ),
-          discountCode && perItemDiscount && /* @__PURE__ */ jsx(Box, { sx: { mt: 1.5 }, children: /* @__PURE__ */ jsx(
+          discountCode && perItemDiscount && /* @__PURE__ */ jsx(Box, { sx: { mt: 1.5 }, children: isRateLoading ? /* @__PURE__ */ jsx(Skeleton, { variant: "rounded", width: 160, height: 22, sx: { borderRadius: "6px" } }) : /* @__PURE__ */ jsx(
             Chip,
             {
               icon: /* @__PURE__ */ jsx(LocalOfferIcon, { sx: { color: "warning.main", fontSize: "small" } }),

package/es/checkout-v2/components/left/promotion-input.d.ts

@@ -14,6 +14,8 @@ interface PromotionInputProps {
     discountAmount: string | null;
     /** Start with input field visible (skip the "Add promotion code" button) */
     initialShowInput?: boolean;
+    /** Show skeleton for the discount amount while switching */
+    isAmountLoading?: boolean;
 }
-export default function PromotionInput({ promotion, discounts, discountAmount, initialShowInput, }: PromotionInputProps): import("react").JSX.Element | null;
+export default function PromotionInput({ promotion, discounts, discountAmount, initialShowInput, isAmountLoading, }: PromotionInputProps): import("react").JSX.Element | null;
 export {};

package/es/checkout-v2/components/left/promotion-input.js

@@ -10,6 +10,7 @@ import {
   CircularProgress,
   IconButton,
   InputAdornment,
+  Skeleton,
   Stack,
   TextField,
   Typography
@@ -19,7 +20,8 @@ export default function PromotionInput({
   promotion,
   discounts,
   discountAmount,
-  initialShowInput = false
+  initialShowInput = false,
+  isAmountLoading = false
 }) {
   const { t } = useLocaleContext();
   const [showInput, setShowInput] = useState(false);
@@ -91,7 +93,7 @@ export default function PromotionInput({
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs(Typography, { sx: { color: "text.primary", fontWeight: 600, fontSize: 14 }, children: [
+            isAmountLoading ? /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: 80, height: 22 }) : /* @__PURE__ */ jsxs(Typography, { sx: { color: "text.primary", fontWeight: 600, fontSize: 14 }, children: [
               "-",
               discountAmount || "0"
             ] })

package/es/checkout-v2/components/right/submit-button.js

@@ -1,5 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { Button, CircularProgress } from "@mui/material";
+import { primaryContrastColor } from "../../utils/format.js";
 export default function SubmitButton({
   canSubmit,
   isProcessing,
@@ -21,7 +22,8 @@ export default function SubmitButton({
         py: 1.5,
         fontSize: "1.3rem",
         fontWeight: 600,
-        textTransform: "none"
+        textTransform: "none",
+        color: (theme) => primaryContrastColor(theme)
       },
       children: isProcessing ? processingLabel : label
     }

package/es/checkout-v2/panels/left/composite-panel.js

@@ -17,7 +17,13 @@ import {
   useProduct
 } from "@blocklet/payment-react-headless";
 import { useMobile } from "../../../hooks/mobile.js";
-import { INTERVAL_LOCALE_KEY, formatTrialText, getSessionHeaderMeta, tSafe } from "../../utils/format.js";
+import {
+  INTERVAL_LOCALE_KEY,
+  formatTrialText,
+  getSessionHeaderMeta,
+  tSafe,
+  primaryContrastColor
+} from "../../utils/format.js";
 import ProductItemCard from "../../components/left/product-item-card.js";
 import BillingToggle from "../../components/left/billing-toggle.js";
 import CrossSellCard from "../../components/left/cross-sell-card.js";
@@ -51,6 +57,9 @@ export default function CompositePanel() {
   const canUpsell = nonCrossSellItems.length <= 1;
   const hasTopUpsell = canUpsell && !!upsellPrimaryItem && ["subscription", "setup"].includes(mode);
   const isUpselled = !!upsellPrimaryItem?.upsell_price;
+  const [upsellSwitching, setUpsellSwitching] = useState(false);
+  const [pendingUpsell, setPendingUpsell] = useState(null);
+  const visualIsUpselled = pendingUpsell !== null ? pendingUpsell : isUpselled;
   const currentInterval = hasTopUpsell ? upsellPrimaryItem.price?.recurring?.interval : null;
   const upsellInterval = hasTopUpsell ? upsellTarget?.recurring?.interval : null;
   let upsellSavings = 0;
@@ -75,7 +84,7 @@ export default function CompositePanel() {
   const isMultiItem = lineItems.items.length > 1;
   const activeSx = {
     bgcolor: "primary.main",
-    color: "#fff",
+    color: (theme) => primaryContrastColor(theme),
     boxShadow: "0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)"
   };
   const inactiveSx = {
@@ -223,17 +232,23 @@ export default function CompositePanel() {
                   Box,
                   {
                     onClick: async () => {
-                      if (isUpselled) {
+                      if (isUpselled && !upsellSwitching) {
+                        setPendingUpsell(false);
+                        setUpsellSwitching(true);
                         try {
                           await lineItems.downsell(
                             upsellPrimaryItem.upsell_price?.id || upsellPrimaryItem.price_id
                           );
                         } catch (err) {
+                          setPendingUpsell(null);
                           Toast.error(err?.response?.data?.error || err?.message || "Failed");
+                        } finally {
+                          setUpsellSwitching(false);
+                          setPendingUpsell(null);
                         }
                       }
                     },
-                    sx: capsuleBtnSx(!isUpselled),
+                    sx: capsuleBtnSx(!visualIsUpselled),
                     children: /* @__PURE__ */ jsx(Typography, { component: "span", sx: { fontSize: 14, fontWeight: 700, color: "inherit", lineHeight: 1 }, children: t(INTERVAL_LOCALE_KEY[currentInterval] || "") })
                   }
                 ),
@@ -241,15 +256,21 @@ export default function CompositePanel() {
                   Box,
                   {
                     onClick: async () => {
-                      if (!isUpselled) {
+                      if (!isUpselled && !upsellSwitching) {
+                        setPendingUpsell(true);
+                        setUpsellSwitching(true);
                         try {
                           await lineItems.upsell(upsellPrimaryItem.price_id, upsellTarget.id);
                         } catch (err) {
+                          setPendingUpsell(null);
                           Toast.error(err?.response?.data?.error || err?.message || "Failed");
+                        } finally {
+                          setUpsellSwitching(false);
+                          setPendingUpsell(null);
                         }
                       }
                     },
-                    sx: capsuleBtnSx(isUpselled),
+                    sx: capsuleBtnSx(visualIsUpselled),
                     children: /* @__PURE__ */ jsx(Typography, { component: "span", sx: { fontSize: 14, fontWeight: 700, color: "inherit", lineHeight: 1 }, children: t(INTERVAL_LOCALE_KEY[upsellInterval] || "") })
                   }
                 )

package/es/checkout-v2/panels/right/payment-panel.js

@@ -40,9 +40,9 @@ import {
 import { joinURL } from "ufo";
 import { usePaymentContext } from "../../../contexts/payment.js";
 import { useMobile } from "../../../hooks/mobile.js";
-import { getPrefix } from "../../../libs/util.js";
+import { getPrefix, getStatementDescriptor } from "../../../libs/util.js";
 import OverdueInvoicePayment from "../../../components/over-due-invoice-payment.js";
-import { tSafe, whiteTooltipSx } from "../../utils/format.js";
+import { tSafe, whiteTooltipSx, primaryContrastColor } from "../../utils/format.js";
 import CustomerInfoCard from "../../components/right/customer-info-card.js";
 import SubscriptionDisclaimer from "../../components/right/subscription-disclaimer.js";
 import StatusFeedback from "../../components/right/status-feedback.js";
@@ -412,7 +412,8 @@ export default function PaymentPanel() {
               remove: promotion.remove
             },
             discounts,
-            discountAmount: pricing.discount
+            discountAmount: pricing.discount,
+            isAmountLoading
           }
         )
       ] }),
@@ -502,7 +503,7 @@ export default function PaymentPanel() {
           ] })
         ] });
       })(),
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxs(
         Button,
         {
           variant: "contained",
@@ -511,15 +512,43 @@ export default function PaymentPanel() {
           disabled: !canSubmit || submit.status === "waiting_stripe",
           onClick: handleAction,
           startIcon: isProcessing ? /* @__PURE__ */ jsx(CircularProgress, { size: 20, color: "inherit" }) : null,
-          endIcon: !isProcessing ? /* @__PURE__ */ jsx(ArrowForwardIcon, {}) : void 0,
           sx: {
             py: 1.5,
             fontSize: "1.1rem",
             fontWeight: 600,
             textTransform: "none",
-            borderRadius: "12px"
+            borderRadius: "12px",
+            color: (theme) => primaryContrastColor(theme),
+            position: "relative",
+            overflow: "hidden",
+            "&:hover": { bgcolor: "primary.main" },
+            "&:hover .arrow-icon": { transform: "translateX(4px)" },
+            "&:hover .shine-layer": { transform: "translateX(100%)" }
           },
-          children: isProcessing ? `${t("payment.checkout.processing")}...` : buttonLabel
+          children: [
+            /* @__PURE__ */ jsx(Box, { component: "span", sx: { position: "relative", zIndex: 1 }, children: isProcessing ? `${t("payment.checkout.processing")}...` : buttonLabel }),
+            !isProcessing && /* @__PURE__ */ jsx(
+              ArrowForwardIcon,
+              {
+                className: "arrow-icon",
+                sx: { ml: 1, position: "relative", zIndex: 1, transition: "transform 0.2s ease" }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                className: "shine-layer",
+                sx: {
+                  position: "absolute",
+                  inset: 0,
+                  background: "linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent)",
+                  transform: "translateX(-100%)",
+                  transition: "transform 0.7s ease",
+                  pointerEvents: "none"
+                }
+              }
+            )
+          ]
         }
       ),
       isMobile && /* @__PURE__ */ jsxs(
@@ -588,7 +617,7 @@ export default function PaymentPanel() {
           mode,
           subscription,
           staking: pricing.staking,
-          appName: session?.metadata?.app_name || "New Payment Kit"
+          appName: getStatementDescriptor(session?.line_items || [])
         }
       ),
       !isMobile && /* @__PURE__ */ jsxs(

package/es/checkout-v2/utils/format.d.ts

@@ -1,4 +1,5 @@
 import type { TPaymentCurrency } from '@blocklet/payment-types';
+export { primaryContrastColor } from '../../libs/util';
 export declare const INTERVAL_LOCALE_KEY: Record<string, string>;
 export declare function countryCodeToFlag(code: string): string;
 export declare function formatTokenAmount(unitAmount: string | number | bigint, currency: TPaymentCurrency | null): string;
@@ -56,4 +57,3 @@ interface ItemMeta {
  * Works for the "primary product" header above the item list.
  */
 export declare function getSessionHeaderMeta(t: TFn, session: any, product: any, items: any[]): ItemMeta;
-export {};

package/es/checkout-v2/utils/format.js

@@ -1,4 +1,5 @@
 import { fromUnitToToken } from "@ocap/util";
+export { primaryContrastColor } from "../../libs/util.js";
 export const INTERVAL_LOCALE_KEY = {
   day: "common.daily",
   week: "common.weekly",

package/es/checkout-v2/views/error-view.js

@@ -4,6 +4,7 @@ import { alpha, useTheme } from "@mui/material/styles";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import Header from "@blocklet/ui-react/lib/Header";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { primaryContrastColor } from "../utils/format.js";
 function GeometricDecoration() {
   const theme = useTheme();
   const gridColor = alpha(theme.palette.primary.main, 0.06);
@@ -173,6 +174,7 @@ function ErrorContent({ error, errorCode = void 0 }) {
           fontWeight: 600,
           fontSize: 16,
           letterSpacing: "0.02em",
+          color: (th) => primaryContrastColor(th),
           boxShadow: `0 8px 32px -4px ${alpha(primaryColor, 0.3)}`,
           "&:hover": {
             boxShadow: `0 12px 40px -4px ${alpha(primaryColor, 0.4)}`,

package/es/checkout-v2/views/success-view.js

@@ -22,7 +22,7 @@ import { joinURL } from "ufo";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import { usePaymentMethodContext } from "@blocklet/payment-react-headless";
 import { getPrefix } from "../../libs/util.js";
-import { formatTokenAmount } from "../utils/format.js";
+import { formatTokenAmount, primaryContrastColor } from "../utils/format.js";
 const scaleIn = keyframes`
   from { transform: scale(0); opacity: 0; }
   60% { transform: scale(1.15); }
@@ -452,6 +452,7 @@ function SubscriptionLinks({
           fontWeight: 700,
           fontSize: { xs: 16, md: 17 },
           letterSpacing: "0.02em",
+          color: (theme) => primaryContrastColor(theme),
           boxShadow: "0 8px 24px -4px rgba(59,130,246,0.25)",
           "&:hover": {
             boxShadow: "0 12px 28px -4px rgba(59,130,246,0.35)"
@@ -486,6 +487,7 @@ function InvoiceLink({
         fontWeight: 700,
         fontSize: { xs: 16, md: 17 },
         letterSpacing: "0.02em",
+        color: (theme) => primaryContrastColor(theme),
         boxShadow: "0 8px 24px -4px rgba(59,130,246,0.25)",
         "&:hover": {
           boxShadow: "0 12px 28px -4px rgba(59,130,246,0.35)"

package/es/components/over-due-invoice-payment.js

@@ -11,7 +11,7 @@ import Dialog from "@arcblock/ux/lib/Dialog/dialog";
 import { CheckCircle as CheckCircleIcon } from "@mui/icons-material";
 import debounce from "lodash/debounce";
 import { usePaymentContext } from "../contexts/payment.js";
-import { formatAmount, formatError, getPrefix, isCrossOrigin } from "../libs/util.js";
+import { formatAmount, formatError, getPrefix, isCrossOrigin, primaryContrastColor } from "../libs/util.js";
 import { useSubscription } from "../hooks/subscription.js";
 import api from "../libs/api.js";
 import LoadingButton from "./loading-button.js";
@@ -290,6 +290,7 @@ function OverdueInvoicePayment({
     const { currency } = item;
     const inProcess = payLoading && selectCurrencyId === currency.id;
     const status = paymentStatus[currency.id] || "idle";
+    const containedColorSx = (options?.variant || "contained") === "contained" ? { color: (th) => primaryContrastColor(th) } : {};
     if (status === "success") {
       return /* @__PURE__ */ jsx(
         Button,
@@ -297,6 +298,7 @@ function OverdueInvoicePayment({
           variant: options?.variant || "contained",
           size: "small",
           onClick: () => checkAndHandleInvoicePaid(currency.id),
+          sx: containedColorSx,
           ...primaryButton ? {} : {
             color: "success",
             startIcon: /* @__PURE__ */ jsx(CheckCircleIcon, {})
@@ -334,7 +336,7 @@ function OverdueInvoicePayment({
               disabled: paying || status === "processing",
               loading: paying || status === "processing",
               onClick: onPay,
-              sx: options?.sx,
+              sx: { ...containedColorSx, ...options?.sx || {} },
               children: buttonText
             }
           )
@@ -349,7 +351,7 @@ function OverdueInvoicePayment({
         disabled: inProcess,
         loading: inProcess,
         onClick: () => handlePay(item),
-        sx: options?.sx,
+        sx: { ...containedColorSx, ...options?.sx || {} },
         children: status === "error" ? t("payment.subscription.overdue.retry") : t("payment.subscription.overdue.payNow")
       }
     );

package/es/libs/util.d.ts

@@ -194,3 +194,11 @@ export declare function getTokenBalanceLink(method: TPaymentMethod, address: str
 export declare function isCreditMetered(price: TPrice): boolean;
 export declare function showStaking(method: TPaymentMethod, currency: TPaymentCurrency, noStake: boolean): boolean;
 export declare function formatLinkWithLocale(url: string, locale?: string): string;
+export declare function primaryContrastColor(theme: {
+    palette: {
+        primary: {
+            main: string;
+        };
+        getContrastText: (bg: string) => string;
+    };
+}): string;

package/es/libs/util.js

@@ -1372,3 +1372,6 @@ export function formatLinkWithLocale(url, locale) {
     return `${url}${separator}locale=${locale}`;
   }
 }
+export function primaryContrastColor(theme) {
+  return theme.palette.getContrastText(theme.palette.primary.main);
+}

package/lib/checkout-v2/components/left/cross-sell-card.js

@@ -54,7 +54,7 @@ function CrossSellCard({
         fontWeight: 900,
         letterSpacing: "0.12em",
         bgcolor: "primary.main",
-        color: "#fff",
+        color: theme => (0, _format.primaryContrastColor)(theme),
         boxShadow: "0 4px 12px rgba(45,124,243,0.2)",
         "& .MuiChip-label": {
           px: 1.5
@@ -236,7 +236,7 @@ function CrossSellCard({
                 transition: "all 0.2s",
                 "&:hover": {
                   bgcolor: "primary.main",
-                  color: "#fff",
+                  color: theme => (0, _format.primaryContrastColor)(theme),
                   borderColor: "primary.main"
                 },
                 "&:active": {

package/lib/checkout-v2/components/left/product-item-card.js

@@ -246,7 +246,7 @@ function ProductItemCard({
         fontWeight: 900,
         letterSpacing: "0.12em",
         bgcolor: "primary.main",
-        color: "#fff",
+        color: th => (0, _format.primaryContrastColor)(th),
         boxShadow: "0 4px 12px rgba(45,124,243,0.2)",
         "& .MuiChip-label": {
           px: 1.5
@@ -513,7 +513,14 @@ function ProductItemCard({
         sx: {
           mt: 1.5
         },
-        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Chip, {
+        children: isRateLoading ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
+          variant: "rounded",
+          width: 160,
+          height: 22,
+          sx: {
+            borderRadius: "6px"
+          }
+        }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Chip, {
           icon: /* @__PURE__ */(0, _jsxRuntime.jsx)(_LocalOffer.default, {
             sx: {
               color: "warning.main",

package/lib/checkout-v2/components/left/promotion-input.d.ts

@@ -14,6 +14,8 @@ interface PromotionInputProps {
     discountAmount: string | null;
     /** Start with input field visible (skip the "Add promotion code" button) */
     initialShowInput?: boolean;
+    /** Show skeleton for the discount amount while switching */
+    isAmountLoading?: boolean;
 }
-export default function PromotionInput({ promotion, discounts, discountAmount, initialShowInput, }: PromotionInputProps): import("react").JSX.Element | null;
+export default function PromotionInput({ promotion, discounts, discountAmount, initialShowInput, isAmountLoading, }: PromotionInputProps): import("react").JSX.Element | null;
 export {};

package/lib/checkout-v2/components/left/promotion-input.js

@@ -16,7 +16,8 @@ function PromotionInput({
   promotion,
   discounts,
   discountAmount,
-  initialShowInput = false
+  initialShowInput = false,
+  isAmountLoading = false
 }) {
   const {
     t
@@ -116,7 +117,11 @@ function PromotionInput({
                 }
               })
             })]
-          }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+          }), isAmountLoading ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
+            variant: "text",
+            width: 80,
+            height: 22
+          }) : /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
             sx: {
               color: "text.primary",
               fontWeight: 600,

package/lib/checkout-v2/components/right/submit-button.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 module.exports = SubmitButton;
 var _jsxRuntime = require("react/jsx-runtime");
 var _material = require("@mui/material");
+var _format = require("../../utils/format");
 function SubmitButton({
   canSubmit,
   isProcessing,
@@ -28,7 +29,8 @@ function SubmitButton({
       py: 1.5,
       fontSize: "1.3rem",
       fontWeight: 600,
-      textTransform: "none"
+      textTransform: "none",
+      color: theme => (0, _format.primaryContrastColor)(theme)
     },
     children: isProcessing ? processingLabel : label
   });

package/lib/checkout-v2/panels/left/composite-panel.js

@@ -61,6 +61,9 @@ function CompositePanel() {
   const canUpsell = nonCrossSellItems.length <= 1;
   const hasTopUpsell = canUpsell && !!upsellPrimaryItem && ["subscription", "setup"].includes(mode);
   const isUpselled = !!upsellPrimaryItem?.upsell_price;
+  const [upsellSwitching, setUpsellSwitching] = (0, _react.useState)(false);
+  const [pendingUpsell, setPendingUpsell] = (0, _react.useState)(null);
+  const visualIsUpselled = pendingUpsell !== null ? pendingUpsell : isUpselled;
   const currentInterval = hasTopUpsell ? upsellPrimaryItem.price?.recurring?.interval : null;
   const upsellInterval = hasTopUpsell ? upsellTarget?.recurring?.interval : null;
   let upsellSavings = 0;
@@ -88,7 +91,7 @@ function CompositePanel() {
   const isMultiItem = lineItems.items.length > 1;
   const activeSx = {
     bgcolor: "primary.main",
-    color: "#fff",
+    color: theme => (0, _format.primaryContrastColor)(theme),
     boxShadow: "0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)"
   };
   const inactiveSx = {
@@ -277,15 +280,21 @@ function CompositePanel() {
             },
             children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
               onClick: async () => {
-                if (isUpselled) {
+                if (isUpselled && !upsellSwitching) {
+                  setPendingUpsell(false);
+                  setUpsellSwitching(true);
                   try {
                     await lineItems.downsell(upsellPrimaryItem.upsell_price?.id || upsellPrimaryItem.price_id);
                   } catch (err) {
+                    setPendingUpsell(null);
                     _Toast.default.error(err?.response?.data?.error || err?.message || "Failed");
+                  } finally {
+                    setUpsellSwitching(false);
+                    setPendingUpsell(null);
                   }
                 }
               },
-              sx: capsuleBtnSx(!isUpselled),
+              sx: capsuleBtnSx(!visualIsUpselled),
               children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
                 component: "span",
                 sx: {
@@ -298,15 +307,21 @@ function CompositePanel() {
               })
             }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
               onClick: async () => {
-                if (!isUpselled) {
+                if (!isUpselled && !upsellSwitching) {
+                  setPendingUpsell(true);
+                  setUpsellSwitching(true);
                   try {
                     await lineItems.upsell(upsellPrimaryItem.price_id, upsellTarget.id);
                   } catch (err) {
+                    setPendingUpsell(null);
                     _Toast.default.error(err?.response?.data?.error || err?.message || "Failed");
+                  } finally {
+                    setUpsellSwitching(false);
+                    setPendingUpsell(null);
                   }
                 }
               },
-              sx: capsuleBtnSx(isUpselled),
+              sx: capsuleBtnSx(visualIsUpselled),
               children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
                 component: "span",
                 sx: {

package/lib/checkout-v2/panels/right/payment-panel.js

@@ -561,7 +561,8 @@ function PaymentPanel() {
             remove: promotion.remove
           },
           discounts,
-          discountAmount: pricing.discount
+          discountAmount: pricing.discount,
+          isAmountLoading
         })]
       }), (() => {
         const totalStr = pricing.total || "0";
@@ -710,7 +711,7 @@ function PaymentPanel() {
             })]
           })]
         });
-      })(), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+      })(), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Button, {
         variant: "contained",
         size: "large",
         fullWidth: true,
@@ -720,15 +721,51 @@ function PaymentPanel() {
           size: 20,
           color: "inherit"
         }) : null,
-        endIcon: !isProcessing ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_ArrowForward.default, {}) : void 0,
         sx: {
           py: 1.5,
           fontSize: "1.1rem",
           fontWeight: 600,
           textTransform: "none",
-          borderRadius: "12px"
+          borderRadius: "12px",
+          color: theme => (0, _format.primaryContrastColor)(theme),
+          position: "relative",
+          overflow: "hidden",
+          "&:hover": {
+            bgcolor: "primary.main"
+          },
+          "&:hover .arrow-icon": {
+            transform: "translateX(4px)"
+          },
+          "&:hover .shine-layer": {
+            transform: "translateX(100%)"
+          }
         },
-        children: isProcessing ? `${t("payment.checkout.processing")}...` : buttonLabel
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          component: "span",
+          sx: {
+            position: "relative",
+            zIndex: 1
+          },
+          children: isProcessing ? `${t("payment.checkout.processing")}...` : buttonLabel
+        }), !isProcessing && /* @__PURE__ */(0, _jsxRuntime.jsx)(_ArrowForward.default, {
+          className: "arrow-icon",
+          sx: {
+            ml: 1,
+            position: "relative",
+            zIndex: 1,
+            transition: "transform 0.2s ease"
+          }
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          className: "shine-layer",
+          sx: {
+            position: "absolute",
+            inset: 0,
+            background: "linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent)",
+            transform: "translateX(-100%)",
+            transition: "transform 0.7s ease",
+            pointerEvents: "none"
+          }
+        })]
       }), isMobile && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
         direction: "row",
         alignItems: "center",
@@ -828,7 +865,7 @@ function PaymentPanel() {
         mode,
         subscription,
         staking: pricing.staking,
-        appName: session?.metadata?.app_name || "New Payment Kit"
+        appName: (0, _util.getStatementDescriptor)(session?.line_items || [])
       }), !isMobile && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
         direction: "row",
         alignItems: "center",

package/lib/checkout-v2/utils/format.d.ts

@@ -1,4 +1,5 @@
 import type { TPaymentCurrency } from '@blocklet/payment-types';
+export { primaryContrastColor } from '../../libs/util';
 export declare const INTERVAL_LOCALE_KEY: Record<string, string>;
 export declare function countryCodeToFlag(code: string): string;
 export declare function formatTokenAmount(unitAmount: string | number | bigint, currency: TPaymentCurrency | null): string;
@@ -56,4 +57,3 @@ interface ItemMeta {
  * Works for the "primary product" header above the item list.
  */
 export declare function getSessionHeaderMeta(t: TFn, session: any, product: any, items: any[]): ItemMeta;
-export {};

package/lib/checkout-v2/utils/format.js

@@ -10,9 +10,16 @@ exports.formatTokenAmount = formatTokenAmount;
 exports.formatTrialText = formatTrialText;
 exports.getSessionHeaderMeta = getSessionHeaderMeta;
 exports.getUnitAmountForCurrency = getUnitAmountForCurrency;
+Object.defineProperty(exports, "primaryContrastColor", {
+  enumerable: true,
+  get: function () {
+    return _util2.primaryContrastColor;
+  }
+});
 exports.tSafe = tSafe;
 exports.whiteTooltipSx = void 0;
 var _util = require("@ocap/util");
+var _util2 = require("../../libs/util");
 const INTERVAL_LOCALE_KEY = exports.INTERVAL_LOCALE_KEY = {
   day: "common.daily",
   week: "common.weekly",

package/lib/checkout-v2/views/error-view.js

@@ -10,6 +10,7 @@ var _styles = require("@mui/material/styles");
 var _ArrowBack = _interopRequireDefault(require("@mui/icons-material/ArrowBack"));
 var _Header = _interopRequireDefault(require("@blocklet/ui-react/lib/Header"));
 var _context = require("@arcblock/ux/lib/Locale/context");
+var _format = require("../utils/format");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function GeometricDecoration() {
   const theme = (0, _styles.useTheme)();
@@ -223,6 +224,7 @@ function ErrorContent({
         fontWeight: 600,
         fontSize: 16,
         letterSpacing: "0.02em",
+        color: th => (0, _format.primaryContrastColor)(th),
         boxShadow: `0 8px 32px -4px ${(0, _styles.alpha)(primaryColor, 0.3)}`,
         "&:hover": {
           boxShadow: `0 12px 40px -4px ${(0, _styles.alpha)(primaryColor, 0.4)}`,

package/lib/checkout-v2/views/success-view.js

@@ -537,6 +537,7 @@ function SubscriptionLinks({
           md: 17
         },
         letterSpacing: "0.02em",
+        color: theme => (0, _format.primaryContrastColor)(theme),
         boxShadow: "0 8px 24px -4px rgba(59,130,246,0.25)",
         "&:hover": {
           boxShadow: "0 12px 28px -4px rgba(59,130,246,0.35)"
@@ -577,6 +578,7 @@ function InvoiceLink({
         md: 17
       },
       letterSpacing: "0.02em",
+      color: theme => (0, _format.primaryContrastColor)(theme),
       boxShadow: "0 8px 24px -4px rgba(59,130,246,0.25)",
       "&:hover": {
         boxShadow: "0 12px 28px -4px rgba(59,130,246,0.35)"

package/lib/components/over-due-invoice-payment.js

@@ -335,11 +335,15 @@ function OverdueInvoicePayment({
     } = item;
     const inProcess = payLoading && selectCurrencyId === currency.id;
     const status = paymentStatus[currency.id] || "idle";
+    const containedColorSx = (options?.variant || "contained") === "contained" ? {
+      color: th => (0, _util.primaryContrastColor)(th)
+    } : {};
     if (status === "success") {
       return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
         variant: options?.variant || "contained",
         size: "small",
         onClick: () => checkAndHandleInvoicePaid(currency.id),
+        sx: containedColorSx,
         ...(primaryButton ? {} : {
           color: "success",
           startIcon: /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.CheckCircle, {})
@@ -378,7 +382,10 @@ function OverdueInvoicePayment({
           disabled: paying || status === "processing",
           loading: paying || status === "processing",
           onClick: onPay,
-          sx: options?.sx,
+          sx: {
+            ...containedColorSx,
+            ...(options?.sx || {})
+          },
           children: buttonText
         })
       });
@@ -389,7 +396,10 @@ function OverdueInvoicePayment({
       disabled: inProcess,
       loading: inProcess,
       onClick: () => handlePay(item),
-      sx: options?.sx,
+      sx: {
+        ...containedColorSx,
+        ...(options?.sx || {})
+      },
       children: status === "error" ? t("payment.subscription.overdue.retry") : t("payment.subscription.overdue.payNow")
     });
   };

package/lib/libs/util.d.ts

@@ -194,3 +194,11 @@ export declare function getTokenBalanceLink(method: TPaymentMethod, address: str
 export declare function isCreditMetered(price: TPrice): boolean;
 export declare function showStaking(method: TPaymentMethod, currency: TPaymentCurrency, noStake: boolean): boolean;
 export declare function formatLinkWithLocale(url: string, locale?: string): string;
+export declare function primaryContrastColor(theme: {
+    palette: {
+        primary: {
+            main: string;
+        };
+        getContrastText: (bg: string) => string;
+    };
+}): string;

package/lib/libs/util.js

@@ -75,6 +75,7 @@ exports.lazyLoad = lazyLoad;
 exports.mergeExtraParams = void 0;
 exports.openDonationSettings = openDonationSettings;
 exports.parseMarkedText = parseMarkedText;
+exports.primaryContrastColor = primaryContrastColor;
 exports.showStaking = showStaking;
 exports.sleep = sleep;
 exports.stopEvent = stopEvent;
@@ -1644,4 +1645,7 @@ function formatLinkWithLocale(url, locale) {
     const separator = url.includes("?") ? "&" : "?";
     return `${url}${separator}locale=${locale}`;
   }
+}
+function primaryContrastColor(theme) {
+  return theme.palette.getContrastText(theme.palette.primary.main);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.26.1",
+  "version": "1.26.2",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -59,7 +59,7 @@
     "@arcblock/react-hooks": "^3.5.1",
     "@arcblock/ux": "^3.5.1",
     "@arcblock/ws": "^1.28.5",
-    "@blocklet/payment-react-headless": "1.26.1",
+    "@blocklet/payment-react-headless": "1.26.2",
     "@blocklet/theme": "^3.5.1",
     "@blocklet/ui-react": "^3.5.1",
     "@mui/icons-material": "^7.1.2",
@@ -97,7 +97,7 @@
     "@babel/core": "^7.27.4",
     "@babel/preset-env": "^7.27.2",
     "@babel/preset-react": "^7.27.1",
-    "@blocklet/payment-types": "1.26.1",
+    "@blocklet/payment-types": "1.26.2",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -128,5 +128,5 @@
     "vite-plugin-babel": "^1.3.1",
     "vite-plugin-node-polyfills": "^0.23.0"
   },
-  "gitHead": "1ba42f376f040b1214d992420cda37053fc14288"
+  "gitHead": "71242a68d27d56666487176425153dc08071960f"
 }

package/src/checkout-v2/components/left/cross-sell-card.tsx

@@ -3,7 +3,7 @@ import ShoppingCartCheckoutIcon from '@mui/icons-material/ShoppingCartCheckout';
 import { Avatar, Box, Button, Chip, Stack, Typography } from '@mui/material';
 import type { TPaymentCurrency, TPrice } from '@blocklet/payment-types';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { formatDynamicUnitPrice, tSafe, INTERVAL_LOCALE_KEY } from '../../utils/format';
+import { formatDynamicUnitPrice, tSafe, INTERVAL_LOCALE_KEY, primaryContrastColor } from '../../utils/format';
 
 interface CrossSellCardProps {
   crossSellItem: TPrice;
@@ -53,7 +53,7 @@ export default function CrossSellCard({
             fontWeight: 900,
             letterSpacing: '0.12em',
             bgcolor: 'primary.main',
-            color: '#fff',
+            color: (theme: any) => primaryContrastColor(theme),
             boxShadow: '0 4px 12px rgba(45,124,243,0.2)',
             '& .MuiChip-label': { px: 1.5 },
           }}
@@ -150,7 +150,7 @@ export default function CrossSellCard({
                   transition: 'all 0.2s',
                   '&:hover': {
                     bgcolor: 'primary.main',
-                    color: '#fff',
+                    color: (theme: any) => primaryContrastColor(theme),
                     borderColor: 'primary.main',
                   },
                   '&:active': { transform: 'scale(0.95)' },

package/src/checkout-v2/components/left/product-item-card.tsx

@@ -22,7 +22,13 @@ import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
 import type { TLineItemExpanded, TPaymentCurrency } from '@blocklet/payment-types';
 import { getPriceUnitAmountByCurrency } from '@blocklet/payment-react-headless';
 import Toast from '@arcblock/ux/lib/Toast';
-import { INTERVAL_LOCALE_KEY, formatDynamicUnitPrice, formatTokenAmount, formatTrialText } from '../../utils/format';
+import {
+  INTERVAL_LOCALE_KEY,
+  formatDynamicUnitPrice,
+  formatTokenAmount,
+  formatTrialText,
+  primaryContrastColor,
+} from '../../utils/format';
 
 interface ProductItemCardProps {
   item: TLineItemExpanded & { adjustable_quantity?: { enabled: boolean; minimum?: number; maximum?: number } };
@@ -292,7 +298,7 @@ export default function ProductItemCard({
             fontWeight: 900,
             letterSpacing: '0.12em',
             bgcolor: 'primary.main',
-            color: '#fff',
+            color: (th: any) => primaryContrastColor(th),
             boxShadow: '0 4px 12px rgba(45,124,243,0.2)',
             '& .MuiChip-label': { px: 1.5 },
           }}
@@ -467,12 +473,16 @@ export default function ProductItemCard({
         {/* Discount chip */}
         {discountCode && perItemDiscount && (
           <Box sx={{ mt: 1.5 }}>
-            <Chip
-              icon={<LocalOfferIcon sx={{ color: 'warning.main', fontSize: 'small' }} />}
-              label={`${discountCode} (-${perItemDiscount})`}
-              size="small"
-              sx={{ height: 22, borderRadius: '6px', '& .MuiChip-label': { fontSize: 12 } }}
-            />
+            {isRateLoading ? (
+              <Skeleton variant="rounded" width={160} height={22} sx={{ borderRadius: '6px' }} />
+            ) : (
+              <Chip
+                icon={<LocalOfferIcon sx={{ color: 'warning.main', fontSize: 'small' }} />}
+                label={`${discountCode} (-${perItemDiscount})`}
+                size="small"
+                sx={{ height: 22, borderRadius: '6px', '& .MuiChip-label': { fontSize: 12 } }}
+              />
+            )}
           </Box>
         )}
 

package/src/checkout-v2/components/left/promotion-input.tsx

@@ -9,6 +9,7 @@ import {
   CircularProgress,
   IconButton,
   InputAdornment,
+  Skeleton,
   Stack,
   TextField,
   Typography,
@@ -28,6 +29,8 @@ interface PromotionInputProps {
   discountAmount: string | null;
   /** Start with input field visible (skip the "Add promotion code" button) */
   initialShowInput?: boolean;
+  /** Show skeleton for the discount amount while switching */
+  isAmountLoading?: boolean;
 }
 
 export default function PromotionInput({
@@ -35,6 +38,7 @@ export default function PromotionInput({
   discounts,
   discountAmount,
   initialShowInput = false,
+  isAmountLoading = false,
 }: PromotionInputProps) {
   const { t } = useLocaleContext();
   const [showInput, setShowInput] = useState(false);
@@ -115,9 +119,13 @@ export default function PromotionInput({
                   <CloseIcon sx={{ fontSize: 12, color: '#12b886' }} />
                 </IconButton>
               </Stack>
-              <Typography sx={{ color: 'text.primary', fontWeight: 600, fontSize: 14 }}>
-                -{discountAmount || '0'}
-              </Typography>
+              {isAmountLoading ? (
+                <Skeleton variant="text" width={80} height={22} />
+              ) : (
+                <Typography sx={{ color: 'text.primary', fontWeight: 600, fontSize: 14 }}>
+                  -{discountAmount || '0'}
+                </Typography>
+              )}
             </Stack>
           );
         })}

package/src/checkout-v2/components/right/submit-button.tsx

@@ -1,4 +1,5 @@
 import { Button, CircularProgress } from '@mui/material';
+import { primaryContrastColor } from '../../utils/format';
 
 interface SubmitButtonProps {
   canSubmit: boolean;
@@ -30,6 +31,7 @@ export default function SubmitButton({
         fontSize: '1.3rem',
         fontWeight: 600,
         textTransform: 'none',
+        color: (theme) => primaryContrastColor(theme),
       }}>
       {isProcessing ? processingLabel : label}
     </Button>

package/src/checkout-v2/panels/left/composite-panel.tsx

@@ -17,7 +17,13 @@ import {
 } from '@blocklet/payment-react-headless';
 
 import { useMobile } from '../../../hooks/mobile';
-import { INTERVAL_LOCALE_KEY, formatTrialText, getSessionHeaderMeta, tSafe } from '../../utils/format';
+import {
+  INTERVAL_LOCALE_KEY,
+  formatTrialText,
+  getSessionHeaderMeta,
+  tSafe,
+  primaryContrastColor,
+} from '../../utils/format';
 import ProductItemCard from '../../components/left/product-item-card';
 import BillingToggle from '../../components/left/billing-toggle';
 import CrossSellCard from '../../components/left/cross-sell-card';
@@ -60,6 +66,10 @@ export default function CompositePanel() {
   const canUpsell = nonCrossSellItems.length <= 1;
   const hasTopUpsell = canUpsell && !!upsellPrimaryItem && ['subscription', 'setup'].includes(mode);
   const isUpselled = !!(upsellPrimaryItem as any)?.upsell_price;
+  const [upsellSwitching, setUpsellSwitching] = useState(false);
+  // Optimistic: track which tab the user clicked so highlight switches immediately
+  const [pendingUpsell, setPendingUpsell] = useState<boolean | null>(null);
+  const visualIsUpselled = pendingUpsell !== null ? pendingUpsell : isUpselled;
 
   // Intervals for capsule toggle
   const currentInterval = hasTopUpsell ? (upsellPrimaryItem!.price as any)?.recurring?.interval : null;
@@ -94,7 +104,7 @@ export default function CompositePanel() {
   // Capsule button sx helper
   const activeSx = {
     bgcolor: 'primary.main',
-    color: '#fff',
+    color: (theme: any) => primaryContrastColor(theme),
     boxShadow: '0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)',
   };
   const inactiveSx = {
@@ -260,17 +270,23 @@ export default function CompositePanel() {
                 {/* Current interval */}
                 <Box
                   onClick={async () => {
-                    if (isUpselled) {
+                    if (isUpselled && !upsellSwitching) {
+                      setPendingUpsell(false);
+                      setUpsellSwitching(true);
                       try {
                         await lineItems.downsell(
                           (upsellPrimaryItem as any).upsell_price?.id || upsellPrimaryItem!.price_id
                         );
                       } catch (err: any) {
+                        setPendingUpsell(null);
                         Toast.error(err?.response?.data?.error || err?.message || 'Failed');
+                      } finally {
+                        setUpsellSwitching(false);
+                        setPendingUpsell(null);
                       }
                     }
                   }}
-                  sx={capsuleBtnSx(!isUpselled)}>
+                  sx={capsuleBtnSx(!visualIsUpselled)}>
                   <Typography component="span" sx={{ fontSize: 14, fontWeight: 700, color: 'inherit', lineHeight: 1 }}>
                     {t(INTERVAL_LOCALE_KEY[currentInterval!] || '')}
                   </Typography>
@@ -278,15 +294,21 @@ export default function CompositePanel() {
                 {/* Upsell interval */}
                 <Box
                   onClick={async () => {
-                    if (!isUpselled) {
+                    if (!isUpselled && !upsellSwitching) {
+                      setPendingUpsell(true);
+                      setUpsellSwitching(true);
                       try {
                         await lineItems.upsell(upsellPrimaryItem!.price_id, upsellTarget.id);
                       } catch (err: any) {
+                        setPendingUpsell(null);
                         Toast.error(err?.response?.data?.error || err?.message || 'Failed');
+                      } finally {
+                        setUpsellSwitching(false);
+                        setPendingUpsell(null);
                       }
                     }
                   }}
-                  sx={capsuleBtnSx(isUpselled)}>
+                  sx={capsuleBtnSx(visualIsUpselled)}>
                   <Typography component="span" sx={{ fontSize: 14, fontWeight: 700, color: 'inherit', lineHeight: 1 }}>
                     {t(INTERVAL_LOCALE_KEY[upsellInterval!] || '')}
                   </Typography>

package/src/checkout-v2/panels/right/payment-panel.tsx

@@ -39,10 +39,10 @@ import {
 import { joinURL } from 'ufo';
 import { usePaymentContext } from '../../../contexts/payment';
 import { useMobile } from '../../../hooks/mobile';
-import { getPrefix } from '../../../libs/util';
+import { getPrefix, getStatementDescriptor } from '../../../libs/util';
 import OverdueInvoicePayment from '../../../components/over-due-invoice-payment';
 
-import { tSafe, whiteTooltipSx } from '../../utils/format';
+import { tSafe, whiteTooltipSx, primaryContrastColor } from '../../utils/format';
 import CustomerInfoCard from '../../components/right/customer-info-card';
 import SubscriptionDisclaimer from '../../components/right/subscription-disclaimer';
 import StatusFeedback from '../../components/right/status-feedback';
@@ -459,6 +459,7 @@ export default function PaymentPanel() {
               }}
               discounts={discounts}
               discountAmount={pricing.discount}
+              isAmountLoading={isAmountLoading}
             />
           </>
         )}
@@ -564,15 +565,39 @@ export default function PaymentPanel() {
           disabled={!canSubmit || submit.status === 'waiting_stripe'}
           onClick={handleAction}
           startIcon={isProcessing ? <CircularProgress size={20} color="inherit" /> : null}
-          endIcon={!isProcessing ? <ArrowForwardIcon /> : undefined}
           sx={{
             py: 1.5,
             fontSize: '1.1rem',
             fontWeight: 600,
             textTransform: 'none',
             borderRadius: '12px',
+            color: (theme) => primaryContrastColor(theme),
+            position: 'relative',
+            overflow: 'hidden',
+            '&:hover': { bgcolor: 'primary.main' },
+            '&:hover .arrow-icon': { transform: 'translateX(4px)' },
+            '&:hover .shine-layer': { transform: 'translateX(100%)' },
           }}>
-          {isProcessing ? `${t('payment.checkout.processing')}...` : buttonLabel}
+          <Box component="span" sx={{ position: 'relative', zIndex: 1 }}>
+            {isProcessing ? `${t('payment.checkout.processing')}...` : buttonLabel}
+          </Box>
+          {!isProcessing && (
+            <ArrowForwardIcon
+              className="arrow-icon"
+              sx={{ ml: 1, position: 'relative', zIndex: 1, transition: 'transform 0.2s ease' }}
+            />
+          )}
+          <Box
+            className="shine-layer"
+            sx={{
+              position: 'absolute',
+              inset: 0,
+              background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent)',
+              transform: 'translateX(-100%)',
+              transition: 'transform 0.7s ease',
+              pointerEvents: 'none',
+            }}
+          />
         </Button>
 
         {/* Mobile: SSL footer inside fixed bar, below button */}
@@ -642,7 +667,7 @@ export default function PaymentPanel() {
           mode={mode}
           subscription={subscription}
           staking={pricing.staking}
-          appName={(session?.metadata as any)?.app_name || 'New Payment Kit'}
+          appName={getStatementDescriptor(session?.line_items || [])}
         />
 
         {!isMobile && (

package/src/checkout-v2/utils/format.ts

@@ -1,6 +1,8 @@
 import { fromUnitToToken } from '@ocap/util';
 import type { TPaymentCurrency } from '@blocklet/payment-types';
 
+export { primaryContrastColor } from '../../libs/util';
+
 // Interval key → locale key mapping
 export const INTERVAL_LOCALE_KEY: Record<string, string> = {
   day: 'common.daily',

package/src/checkout-v2/views/error-view.tsx

@@ -3,6 +3,7 @@ import { alpha, useTheme } from '@mui/material/styles';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import Header from '@blocklet/ui-react/lib/Header';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { primaryContrastColor } from '../utils/format';
 
 interface ErrorViewProps {
   error: string;
@@ -191,6 +192,7 @@ function ErrorContent({ error, errorCode = undefined }: { error: string; errorCo
             fontWeight: 600,
             fontSize: 16,
             letterSpacing: '0.02em',
+            color: (th) => primaryContrastColor(th),
             boxShadow: `0 8px 32px -4px ${alpha(primaryColor, 0.3)}`,
             '&:hover': {
               boxShadow: `0 12px 40px -4px ${alpha(primaryColor, 0.4)}`,

package/src/checkout-v2/views/success-view.tsx

@@ -23,7 +23,7 @@ import type { TCheckoutSessionExpanded } from '@blocklet/payment-types';
 import { usePaymentMethodContext } from '@blocklet/payment-react-headless';
 
 import { getPrefix } from '../../libs/util';
-import { formatTokenAmount } from '../utils/format';
+import { formatTokenAmount, primaryContrastColor } from '../utils/format';
 
 // ── Animations ──
 
@@ -573,6 +573,7 @@ function SubscriptionLinks({
           fontWeight: 700,
           fontSize: { xs: 16, md: 17 },
           letterSpacing: '0.02em',
+          color: (theme) => primaryContrastColor(theme),
           boxShadow: '0 8px 24px -4px rgba(59,130,246,0.25)',
           '&:hover': {
             boxShadow: '0 12px 28px -4px rgba(59,130,246,0.35)',
@@ -616,6 +617,7 @@ function InvoiceLink({
         fontWeight: 700,
         fontSize: { xs: 16, md: 17 },
         letterSpacing: '0.02em',
+        color: (theme) => primaryContrastColor(theme),
         boxShadow: '0 8px 24px -4px rgba(59,130,246,0.25)',
         '&:hover': {
           boxShadow: '0 12px 28px -4px rgba(59,130,246,0.35)',

package/src/components/over-due-invoice-payment.tsx

@@ -19,7 +19,7 @@ import Dialog from '@arcblock/ux/lib/Dialog/dialog';
 import { CheckCircle as CheckCircleIcon } from '@mui/icons-material';
 import debounce from 'lodash/debounce';
 import { usePaymentContext } from '../contexts/payment';
-import { formatAmount, formatError, getPrefix, isCrossOrigin } from '../libs/util';
+import { formatAmount, formatError, getPrefix, isCrossOrigin, primaryContrastColor } from '../libs/util';
 import { useSubscription } from '../hooks/subscription';
 import api from '../libs/api';
 import LoadingButton from './loading-button';
@@ -397,6 +397,8 @@ function OverdueInvoicePayment({
     const { currency } = item;
     const inProcess = payLoading && selectCurrencyId === currency.id;
     const status = paymentStatus[currency.id] || 'idle';
+    const containedColorSx =
+      (options?.variant || 'contained') === 'contained' ? { color: (th: any) => primaryContrastColor(th) } : {};
 
     if (status === 'success') {
       return (
@@ -404,6 +406,7 @@ function OverdueInvoicePayment({
           variant={options?.variant || 'contained'}
           size="small"
           onClick={() => checkAndHandleInvoicePaid(currency.id)}
+          sx={containedColorSx}
           {...(primaryButton
             ? {}
             : {
@@ -442,7 +445,7 @@ function OverdueInvoicePayment({
               disabled={paying || status === 'processing'}
               loading={paying || status === 'processing'}
               onClick={onPay}
-              sx={options?.sx}>
+              sx={{ ...containedColorSx, ...((options?.sx || {}) as any) }}>
               {buttonText}
             </LoadingButton>
           )}
@@ -456,7 +459,7 @@ function OverdueInvoicePayment({
         disabled={inProcess}
         loading={inProcess}
         onClick={() => handlePay(item)}
-        sx={options?.sx}>
+        sx={{ ...containedColorSx, ...((options?.sx || {}) as any) }}>
         {status === 'error' ? t('payment.subscription.overdue.retry') : t('payment.subscription.overdue.payNow')}
       </LoadingButton>
     );

package/src/libs/util.ts

@@ -1823,3 +1823,10 @@ export function formatLinkWithLocale(url: string, locale?: string) {
     return `${url}${separator}locale=${locale}`;
   }
 }
+
+// Compute text color that contrasts with primary.main, works in both light and dark mode
+export function primaryContrastColor(theme: {
+  palette: { primary: { main: string }; getContrastText: (bg: string) => string };
+}): string {
+  return theme.palette.getContrastText(theme.palette.primary.main);
+}