payment-kit 1.22.3 → 1.22.5

package/api/src/routes/vendor.ts

@@ -351,7 +351,7 @@ async function executeVendorOperation({
   shortUrl: boolean;
   appUrl?: string;
 }) {
-  if (!vendorId || !orderId || !appUrl) {
+  if (!vendorId || !orderId) {
     return {
       error: 'Bad Request',
       message: `vendorId or orderId is required, vendorId: ${vendorId}, orderId: ${orderId}`,

package/blocklet.yml

@@ -14,7 +14,7 @@ repository:
   type: git
   url: git+https://github.com/blocklet/payment-kit.git
 specVersion: 1.2.8
-version: 1.22.3
+version: 1.22.5
 logo: logo.png
 files:
   - dist

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.22.3",
+  "version": "1.22.5",
   "scripts": {
     "dev": "blocklet dev --open",
     "lint": "tsc --noEmit && eslint src api/src --ext .mjs,.js,.jsx,.ts,.tsx",
@@ -44,34 +44,35 @@
     ]
   },
   "dependencies": {
-    "@abtnode/cron": "^1.16.54-beta-20251029-055649-a9143beb",
+    "@abtnode/cron": "^1.17.0-beta-20251104-112713-e947b159",
     "@arcblock/did": "^1.26.3",
-    "@arcblock/did-connect-react": "^3.1.53",
+    "@arcblock/did-connect-react": "^3.1.54",
     "@arcblock/did-connect-storage-nedb": "^1.8.0",
-    "@arcblock/did-util": "^1.26.3",
-    "@arcblock/jwt": "^1.26.3",
-    "@arcblock/ux": "^3.1.53",
-    "@arcblock/validator": "^1.26.3",
+    "@arcblock/did-util": "^1.27.2",
+    "@arcblock/jwt": "^1.27.2",
+    "@arcblock/react-hooks": "^3.1.54",
+    "@arcblock/ux": "^3.1.54",
+    "@arcblock/validator": "^1.27.2",
     "@blocklet/did-space-js": "^1.1.35",
     "@blocklet/error": "^0.2.5",
-    "@blocklet/js-sdk": "^1.16.54-beta-20251029-055649-a9143beb",
-    "@blocklet/logger": "^1.16.54-beta-20251029-055649-a9143beb",
-    "@blocklet/payment-broker-client": "1.22.3",
-    "@blocklet/payment-react": "1.22.3",
-    "@blocklet/payment-vendor": "1.22.3",
-    "@blocklet/sdk": "^1.16.54-beta-20251029-055649-a9143beb",
-    "@blocklet/ui-react": "^3.1.53",
-    "@blocklet/uploader": "^0.3.2",
-    "@blocklet/xss": "^0.3.2",
+    "@blocklet/js-sdk": "^1.17.0-beta-20251104-112713-e947b159",
+    "@blocklet/logger": "^1.17.0-beta-20251104-112713-e947b159",
+    "@blocklet/payment-broker-client": "1.22.5",
+    "@blocklet/payment-react": "1.22.5",
+    "@blocklet/payment-vendor": "1.22.5",
+    "@blocklet/sdk": "^1.17.0-beta-20251104-112713-e947b159",
+    "@blocklet/ui-react": "^3.1.54",
+    "@blocklet/uploader": "^0.3.4",
+    "@blocklet/xss": "^0.3.4",
     "@mui/icons-material": "^7.1.2",
     "@mui/lab": "7.0.0-beta.14",
     "@mui/material": "^7.1.2",
     "@mui/system": "^7.1.1",
-    "@ocap/asset": "^1.26.3",
+    "@ocap/asset": "^1.27.2",
     "@ocap/client": "^1.26.3",
-    "@ocap/mcrypto": "^1.26.3",
-    "@ocap/util": "^1.26.3",
-    "@ocap/wallet": "^1.26.3",
+    "@ocap/mcrypto": "^1.27.2",
+    "@ocap/util": "^1.27.2",
+    "@ocap/wallet": "^1.27.2",
     "@stripe/react-stripe-js": "^2.9.0",
     "@stripe/stripe-js": "^2.4.0",
     "ahooks": "^3.8.5",
@@ -126,9 +127,9 @@
     "web3": "^4.16.0"
   },
   "devDependencies": {
-    "@abtnode/types": "^1.16.54-beta-20251029-055649-a9143beb",
+    "@abtnode/types": "^1.17.0-beta-20251104-112713-e947b159",
     "@arcblock/eslint-config-ts": "^0.3.3",
-    "@blocklet/payment-types": "1.22.3",
+    "@blocklet/payment-types": "1.22.5",
     "@types/cookie-parser": "^1.4.9",
     "@types/cors": "^2.8.19",
     "@types/debug": "^4.1.12",
@@ -175,5 +176,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "d5967646cdb253d7508a84ccc2dc0e96f4ae25ea"
+  "gitHead": "8adad1f05716be0bb0bd4fa0423b8bac6c39f568"
 }

package/src/hooks/browser.ts

@@ -0,0 +1,11 @@
+import useArcblockBrowser from '@arcblock/react-hooks/lib/useBrowser';
+
+export function useArcsphere(): boolean {
+  const browser = useArcblockBrowser();
+  return browser.arcSphere;
+}
+
+export function useBrowser() {
+  const browser = useArcblockBrowser();
+  return browser;
+}

package/src/pages/customer/credit-grant/detail.tsx

@@ -21,6 +21,7 @@ import SectionHeader from '../../../components/section/header';
 import CreditGrantItemList from '../../../components/customer/credit-grant-item-list';
 import InfoRow from '../../../components/info-row';
 import InfoRowGroup from '../../../components/info-row-group';
+import { useArcsphere } from '../../../hooks/browser';
 
 const fetchData = (id: string | undefined): Promise<TCreditGrantExpanded> => {
   return api.get(`/api/credit-grants/${id}`).then((res: any) => res.data);
@@ -31,6 +32,7 @@ export default function CustomerCreditGrantDetail() {
   const navigate = useNavigate();
   const { t } = useLocaleContext();
   const { session } = useSessionContext();
+  const inArcsphere = useArcsphere();
   const { loading, error, data } = useRequest(() => fetchData(id));
 
   const handleBack = useCallback(() => {
@@ -83,16 +85,20 @@ export default function CustomerCreditGrantDetail() {
           justifyContent="space-between"
           alignItems="center"
           sx={{ position: 'relative' }}>
-          <Stack
-            direction="row"
-            onClick={handleBack}
-            alignItems="center"
-            sx={{ fontWeight: 'normal', cursor: 'pointer' }}>
-            <ArrowBackOutlined fontSize="small" sx={{ mr: 0.5, color: 'text.secondary' }} />
-            <Typography variant="h6" sx={{ color: 'text.secondary', fontWeight: 'normal' }}>
-              {t('admin.customer.creditGrants.title')}
-            </Typography>
-          </Stack>
+          {!inArcsphere ? (
+            <Stack
+              direction="row"
+              onClick={handleBack}
+              alignItems="center"
+              sx={{ fontWeight: 'normal', cursor: 'pointer' }}>
+              <ArrowBackOutlined fontSize="small" sx={{ mr: 0.5, color: 'text.secondary' }} />
+              <Typography variant="h6" sx={{ color: 'text.secondary', fontWeight: 'normal' }}>
+                {t('admin.customer.creditGrants.title')}
+              </Typography>
+            </Stack>
+          ) : (
+            <Box />
+          )}
           {data.metadata?.invoice_id && (
             <Button
               variant="outlined"

package/src/pages/customer/invoice/detail.tsx

@@ -38,6 +38,7 @@ import CustomerRefundList from '../refund/list';
 import InfoMetric from '../../../components/info-metric';
 import InfoRowGroup from '../../../components/info-row-group';
 import RelatedCreditGrants from '../../../components/customer/related-credit-grants';
+import { useArcsphere } from '../../../hooks/browser';
 
 const fetchData = (
   id: string
@@ -59,6 +60,7 @@ export default function CustomerInvoiceDetail() {
   const { connect } = usePaymentContext();
   const params = useParams<{ id: string }>();
   const muiTheme = useTheme();
+  const inArcsphere = useArcsphere();
   const [state, setState] = useSetState({
     downloading: false,
     paying: false,
@@ -147,20 +149,24 @@ export default function CustomerInvoiceDetail() {
         sx={{
           justifyContent: 'space-between',
         }}>
-        <Stack
-          direction="row"
-          onClick={() => goBackOrFallback('/customer')}
-          sx={{
-            alignItems: 'center',
-            fontWeight: 'normal',
-            padding: '10px 0',
-            cursor: 'pointer',
-          }}>
-          <ArrowBackOutlined fontSize="small" sx={{ mr: 0.5, color: 'text.secondary' }} />
-          <Typography variant="h6" sx={{ color: 'text.secondary', fontWeight: 'normal' }}>
-            {t('common.previous')}
-          </Typography>
-        </Stack>
+        {!inArcsphere ? (
+          <Stack
+            direction="row"
+            onClick={() => goBackOrFallback('/customer')}
+            sx={{
+              alignItems: 'center',
+              fontWeight: 'normal',
+              padding: '10px 0',
+              cursor: 'pointer',
+            }}>
+            <ArrowBackOutlined fontSize="small" sx={{ mr: 0.5, color: 'text.secondary' }} />
+            <Typography variant="h6" sx={{ color: 'text.secondary', fontWeight: 'normal' }}>
+              {t('common.previous')}
+            </Typography>
+          </Stack>
+        ) : (
+          <Box />
+        )}
         <Stack
           direction="row"
           spacing={1}

package/src/pages/customer/invoice/past-due.tsx

@@ -22,6 +22,7 @@ import SectionHeader from '../../../components/section/header';
 import { useSessionContext } from '../../../contexts/session';
 import api from '../../../libs/api';
 import { goBackOrFallback } from '../../../libs/util';
+import { useArcsphere } from '../../../hooks/browser';
 
 const fetchData = (): Promise<TCustomerExpanded> => {
   return api.get('/api/customers/me').then((res) => res.data);
@@ -32,6 +33,7 @@ export default function CustomerInvoicePastDue() {
   const { events } = useSessionContext();
   const { connect, session } = usePaymentContext();
   const [params] = useSearchParams();
+  const inArcsphere = useArcsphere();
   const [hasUnpaidInvoices, setHasUnpaidInvoices] = useState(false);
   const [showOverduePayment, setShowOverduePayment] = useState(false);
 
@@ -115,19 +117,23 @@ export default function CustomerInvoicePastDue() {
           alignItems: 'center',
           justifyContent: 'space-between',
         }}>
-        <Stack
-          direction="row"
-          onClick={() => goBackOrFallback('/customer')}
-          sx={{
-            alignItems: 'center',
-            fontWeight: 'normal',
-            cursor: 'pointer',
-          }}>
-          <ArrowBackOutlined fontSize="small" sx={{ mr: 0.5, color: 'text.secondary' }} />
-          <Typography variant="h6" sx={{ color: 'text.secondary', fontWeight: 'normal' }}>
-            {t('common.previous')}
-          </Typography>
-        </Stack>
+        {!inArcsphere ? (
+          <Stack
+            direction="row"
+            onClick={() => goBackOrFallback('/customer')}
+            sx={{
+              alignItems: 'center',
+              fontWeight: 'normal',
+              cursor: 'pointer',
+            }}>
+            <ArrowBackOutlined fontSize="small" sx={{ mr: 0.5, color: 'text.secondary' }} />
+            <Typography variant="h6" sx={{ color: 'text.secondary', fontWeight: 'normal' }}>
+              {t('common.previous')}
+            </Typography>
+          </Stack>
+        ) : (
+          <Box />
+        )}
       </Stack>
       <Root direction="column" spacing={3}>
         {hasUnpaidInvoices && <Alert severity="error">{t('payment.customer.pastDue.warning')}</Alert>}

package/src/pages/customer/payout/detail.tsx

@@ -24,6 +24,7 @@ import SectionHeader from '../../../components/section/header';
 import { goBackOrFallback } from '../../../libs/util';
 import CustomerLink from '../../../components/customer/link';
 import InfoRowGroup from '../../../components/info-row-group';
+import { useArcsphere } from '../../../hooks/browser';
 
 const fetchData = (
   id: string
@@ -39,6 +40,7 @@ const fetchData = (
 export default function PayoutDetail() {
   const { t, locale } = useLocaleContext();
   const { isMobile } = useMobile();
+  const inArcsphere = useArcsphere();
   const params = useParams<{ id: string }>();
   const { loading, error, data } = useRequest(() => fetchData(params.id!), {
     ready: !!params.id,
@@ -67,19 +69,23 @@ export default function PayoutDetail() {
             justifyContent: 'space-between',
             alignItems: 'center',
           }}>
-          <Stack
-            direction="row"
-            onClick={() => goBackOrFallback('/customer/payouts')}
-            sx={{
-              alignItems: 'center',
-              fontWeight: 'normal',
-              cursor: 'pointer',
-            }}>
-            <ArrowBackOutlined fontSize="small" sx={{ mr: 0.5, color: 'text.secondary' }} />
-            <Typography variant="h6" sx={{ color: 'text.secondary', fontWeight: 'normal' }}>
-              {t('common.previous')}
-            </Typography>
-          </Stack>
+          {!inArcsphere ? (
+            <Stack
+              direction="row"
+              onClick={() => goBackOrFallback('/customer/payouts')}
+              sx={{
+                alignItems: 'center',
+                fontWeight: 'normal',
+                cursor: 'pointer',
+              }}>
+              <ArrowBackOutlined fontSize="small" sx={{ mr: 0.5, color: 'text.secondary' }} />
+              <Typography variant="h6" sx={{ color: 'text.secondary', fontWeight: 'normal' }}>
+                {t('common.previous')}
+              </Typography>
+            </Stack>
+          ) : (
+            <Box />
+          )}
           {paymentLink?.donation_settings?.reference && (
             <Button
               variant="outlined"

package/src/pages/customer/recharge/account.tsx

@@ -37,6 +37,7 @@ import RechargeList from '../../../components/invoice/recharge';
 import { goBackOrFallback, MAX_SAFE_AMOUNT } from '../../../libs/util';
 import { useSessionContext } from '../../../contexts/session';
 import { formatSmartDuration, TimeUnit } from '../../../libs/dayjs';
+import { useArcsphere } from '../../../hooks/browser';
 
 // 扩展PaymentCurrency类型以包含paymentMethod
 interface ExtendedPaymentCurrency extends TPaymentCurrency {
@@ -78,6 +79,7 @@ export default function BalanceRechargePage() {
   const { t, locale } = useLocaleContext();
   const { currencyId } = useParams<{ currencyId: string }>();
   const [searchParams] = useSearchParams();
+  const inArcsphere = useArcsphere();
   const rechargeAddress = searchParams.get('rechargeAddress');
   const navigate = useNavigate();
   const { connect } = usePaymentContext();
@@ -301,9 +303,11 @@ export default function BalanceRechargePage() {
   if (!['arcblock', 'ethereum', 'base'].includes(currency?.paymentMethod?.type || '')) {
     return (
       <Box>
-        <Button startIcon={<ArrowBackOutlined />} variant="outlined" onClick={() => goBackOrFallback('/customer')}>
-          {t('common.previous')}
-        </Button>
+        {!inArcsphere && (
+          <Button startIcon={<ArrowBackOutlined />} variant="outlined" onClick={() => goBackOrFallback('/customer')}>
+            {t('common.previous')}
+          </Button>
+        )}
         <Empty>{t('customer.recharge.unsupported')}</Empty>
       </Box>
     );
@@ -312,9 +316,11 @@ export default function BalanceRechargePage() {
   if (error) {
     return (
       <Box>
-        <Button startIcon={<ArrowBackOutlined />} variant="outlined" onClick={() => goBackOrFallback('/customer')}>
-          {t('common.previous')}
-        </Button>
+        {!inArcsphere && (
+          <Button startIcon={<ArrowBackOutlined />} variant="outlined" onClick={() => goBackOrFallback('/customer')}>
+            {t('common.previous')}
+          </Button>
+        )}
         <Alert severity="error" sx={{ mt: 2 }}>
           {error}
         </Alert>
@@ -336,14 +342,18 @@ export default function BalanceRechargePage() {
           alignItems: 'center',
           position: 'relative',
         }}>
-        <Button
-          startIcon={<ArrowBackOutlined />}
-          variant="text"
-          color="inherit"
-          onClick={() => goBackOrFallback('/customer')}
-          sx={{ color: 'text.secondary' }}>
-          {t('common.previous')}
-        </Button>
+        {!inArcsphere ? (
+          <Button
+            startIcon={<ArrowBackOutlined />}
+            variant="text"
+            color="inherit"
+            onClick={() => goBackOrFallback('/customer')}
+            sx={{ color: 'text.secondary' }}>
+            {t('common.previous')}
+          </Button>
+        ) : (
+          <Box />
+        )}
       </Stack>
       <Typography variant="h2" gutterBottom>
         {currency?.symbol} {t('customer.recharge.title')}

package/src/pages/customer/recharge/subscription.tsx

@@ -39,6 +39,7 @@ import { goBackOrFallback, MAX_SAFE_AMOUNT } from '../../../libs/util';
 import CustomerLink from '../../../components/customer/link';
 import { useSessionContext } from '../../../contexts/session';
 import { formatSmartDuration, TimeUnit } from '../../../libs/dayjs';
+import { useArcsphere } from '../../../hooks/browser';
 
 const Root = styled(Stack)(({ theme }) => ({
   marginBottom: theme.spacing(3),
@@ -60,6 +61,7 @@ export default function RechargePage() {
   const { id: subscriptionId } = useParams<{ id: string }>();
   const navigate = useNavigate();
   const { connect } = usePaymentContext();
+  const inArcsphere = useArcsphere();
   const [subscription, setSubscription] = useState<TSubscriptionExpanded | null>(null);
   const [amount, setAmount] = useState('');
   const [amountError, setAmountError] = useState('');
@@ -261,19 +263,23 @@ export default function RechargePage() {
           alignItems: 'center',
           position: 'relative',
         }}>
-        <Stack
-          direction="row"
-          onClick={() => goBackOrFallback('/customer')}
-          sx={{
-            alignItems: 'center',
-            fontWeight: 'normal',
-            cursor: 'pointer',
-          }}>
-          <ArrowBackOutlined fontSize="small" sx={{ mr: 0.5, color: 'text.secondary' }} />
-          <Typography variant="h6" sx={{ color: 'text.secondary', fontWeight: 'normal' }}>
-            {t('common.previous')}
-          </Typography>
-        </Stack>
+        {!inArcsphere ? (
+          <Stack
+            direction="row"
+            onClick={() => goBackOrFallback('/customer')}
+            sx={{
+              alignItems: 'center',
+              fontWeight: 'normal',
+              cursor: 'pointer',
+            }}>
+            <ArrowBackOutlined fontSize="small" sx={{ mr: 0.5, color: 'text.secondary' }} />
+            <Typography variant="h6" sx={{ color: 'text.secondary', fontWeight: 'normal' }}>
+              {t('common.previous')}
+            </Typography>
+          </Stack>
+        ) : (
+          <Box />
+        )}
         <Button variant="outlined" onClick={() => navigate(`/customer/subscription/${subscriptionId}`)}>
           {t('customer.recharge.view')}
         </Button>

package/src/pages/customer/subscription/change-payment.tsx

@@ -22,7 +22,7 @@ import {
 } from '@blocklet/payment-react';
 import type { TCustomer, TPaymentCurrency, TPaymentMethod, TSubscriptionExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
-import { Alert, CircularProgress, Stack, Typography } from '@mui/material';
+import { Alert, Box, CircularProgress, Stack, Typography } from '@mui/material';
 import { useRequest, useSetState } from 'ahooks';
 import pWaitFor from 'p-wait-for';
 import { useEffect, useState } from 'react';
@@ -34,6 +34,7 @@ import SectionHeader from '../../../components/section/header';
 import SubscriptionDescription from '../../../components/subscription/description';
 import { goBackOrFallback } from '../../../libs/util';
 import { useUnpaidInvoicesCheckForSubscription } from '../../../hooks/subscription';
+import { useArcsphere } from '../../../hooks/browser';
 
 const fetchData = async (id: string): Promise<{ subscription: TSubscriptionExpanded; customer: TCustomer }> => {
   const [subscription, customer] = await Promise.all([
@@ -81,6 +82,7 @@ function CustomerSubscriptionChangePayment({ subscription, customer, onComplete
   const { settings, connect } = usePaymentContext();
   const { checkUnpaidInvoices } = useUnpaidInvoicesCheckForSubscription(subscription.id);
   const { control, setValue, handleSubmit } = useFormContext();
+  const inArcsphere = useArcsphere();
 
   const [state, setState] = useSetState<{
     submitting: boolean;
@@ -233,17 +235,21 @@ function CustomerSubscriptionChangePayment({ subscription, customer, onComplete
           justifyContent: 'space-between',
           alignItems: 'center',
         }}>
-        <Stack
-          direction="row"
-          onClick={() => goBackOrFallback(`/customer/subscription/${subscription.id}`)}
-          sx={{
-            alignItems: 'center',
-            fontWeight: 'normal',
-            cursor: 'pointer',
-          }}>
-          <ArrowBackOutlined fontSize="small" sx={{ mr: 0.5, color: 'text.secondary' }} />
-          <SubscriptionDescription subscription={subscription} variant="h5" />
-        </Stack>
+        {!inArcsphere ? (
+          <Stack
+            direction="row"
+            onClick={() => goBackOrFallback(`/customer/subscription/${subscription.id}`)}
+            sx={{
+              alignItems: 'center',
+              fontWeight: 'normal',
+              cursor: 'pointer',
+            }}>
+            <ArrowBackOutlined fontSize="small" sx={{ mr: 0.5, color: 'text.secondary' }} />
+            <SubscriptionDescription subscription={subscription} variant="h5" />
+          </Stack>
+        ) : (
+          <Box />
+        )}
       </Stack>
       <Alert severity="info">{t('payment.customer.changePayment.limit')}</Alert>
       <Stack direction="column" spacing={2}>

package/src/pages/customer/subscription/change-plan.tsx

@@ -13,7 +13,7 @@ import {
 } from '@blocklet/payment-react';
 import type { TLineItemExpanded, TPricingTableExpanded, TSubscriptionExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
-import { Alert, CircularProgress, Divider, Stack, Typography } from '@mui/material';
+import { Alert, Box, CircularProgress, Divider, Stack, Typography } from '@mui/material';
 import { useRequest, useSetState } from 'ahooks';
 import { useRef } from 'react';
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
@@ -22,6 +22,7 @@ import InfoCard from '../../../components/info-card';
 import SectionHeader from '../../../components/section/header';
 import SubscriptionDescription from '../../../components/subscription/description';
 import { goBackOrFallback } from '../../../libs/util';
+import { useArcsphere } from '../../../hooks/browser';
 
 const fetchData = async (
   id: string
@@ -57,6 +58,7 @@ export default function CustomerSubscriptionChangePlan() {
   const [searchParams] = useSearchParams();
   const redirectUrl = searchParams.get('redirectUrl');
   const confirmRef = useRef<HTMLButtonElement>(null);
+  const inArcsphere = useArcsphere();
 
   const { loading, error, data } = useRequest(() => fetchData(id));
   const [state, setState] = useSetState({
@@ -245,17 +247,21 @@ export default function CustomerSubscriptionChangePlan() {
           justifyContent: 'space-between',
           alignItems: 'center',
         }}>
-        <Stack
-          direction="row"
-          onClick={() => goBackOrFallback(`/customer/subscription/${data.subscription.id}`)}
-          sx={{
-            alignItems: 'center',
-            fontWeight: 'normal',
-            cursor: 'pointer',
-          }}>
-          <ArrowBackOutlined fontSize="small" sx={{ mr: 0.5, color: 'text.secondary' }} />
-          <SubscriptionDescription subscription={data.subscription} variant="h5" />
-        </Stack>
+        {!inArcsphere ? (
+          <Stack
+            direction="row"
+            onClick={() => goBackOrFallback(`/customer/subscription/${data.subscription.id}`)}
+            sx={{
+              alignItems: 'center',
+              fontWeight: 'normal',
+              cursor: 'pointer',
+            }}>
+            <ArrowBackOutlined fontSize="small" sx={{ mr: 0.5, color: 'text.secondary' }} />
+            <SubscriptionDescription subscription={data.subscription} variant="h5" />
+          </Stack>
+        ) : (
+          <Box />
+        )}
       </Stack>
       <Stack direction="column" sx={{ marginTop: 32 }}>
         <SectionHeader title={t('payment.customer.changePlan.config')} />

package/src/pages/customer/subscription/detail.tsx

@@ -53,6 +53,7 @@ import { usePendingAmountForSubscription, useUnpaidInvoicesCheckForSubscription
 import { formatSmartDuration, TimeUnit } from '../../../libs/dayjs';
 import { canChangePaymentMethod } from '../../../libs/util';
 import PaymentMethodInfo from '../../../components/subscription/payment-method-info';
+import { useArcsphere } from '../../../hooks/browser';
 
 const fetchData = (id: string | undefined): Promise<TSubscriptionExpanded> => {
   return api.get(`/api/subscriptions/${id}`).then((res) => res.data);
@@ -77,6 +78,7 @@ export default function CustomerSubscriptionDetail() {
   const { t } = useLocaleContext();
   const { isMobile } = useMobile();
   const { session } = useSessionContext();
+  const inArcsphere = useArcsphere();
   const { loading, error, data, refresh } = useRequest(() => fetchData(id));
   const { hasUnpaid, checkUnpaidInvoices } = useUnpaidInvoicesCheckForSubscription(id);
   const { hasPendingAmount, pendingAmount } = usePendingAmountForSubscription(id, data?.paymentCurrency);
@@ -327,19 +329,23 @@ export default function CustomerSubscriptionDetail() {
             alignItems: 'center',
             position: 'relative',
           }}>
-          <Stack
-            direction="row"
-            onClick={() => navigate('/customer', { replace: true })}
-            sx={{
-              alignItems: 'center',
-              fontWeight: 'normal',
-              cursor: 'pointer',
-            }}>
-            <ArrowBackOutlined fontSize="small" sx={{ mr: 0.5, color: 'text.secondary' }} />
-            <Typography variant="h6" sx={{ color: 'text.secondary', fontWeight: 'normal' }}>
-              {t('payment.customer.subscriptions.title')}
-            </Typography>
-          </Stack>
+          {!inArcsphere ? (
+            <Stack
+              direction="row"
+              onClick={() => navigate('/customer', { replace: true })}
+              sx={{
+                alignItems: 'center',
+                fontWeight: 'normal',
+                cursor: 'pointer',
+              }}>
+              <ArrowBackOutlined fontSize="small" sx={{ mr: 0.5, color: 'text.secondary' }} />
+              <Typography variant="h6" sx={{ color: 'text.secondary', fontWeight: 'normal' }}>
+                {t('payment.customer.subscriptions.title')}
+              </Typography>
+            </Stack>
+          ) : (
+            <Box />
+          )}
           <Stack
             direction="row"
             sx={{