payment-kit 1.16.4 → 1.16.5

package/api/src/libs/api.ts

@@ -81,6 +81,11 @@ export const getWhereFromKvQuery = (query?: string) => {
   const likes: any = [];
   const fn = (kv: string) => {
     const [k, v] = kv.split(':');
+    if (k && !v && !k.includes('like')) {
+      out[k as string] = {
+        [Op.in]: [],
+      };
+    }
     if (v) {
       let value = decodeURIComponent(v).replace('+', ' ');
       if (value.includes(',')) {

package/api/src/libs/session.ts

@@ -113,7 +113,10 @@ export function getCheckoutAmount(items: TLineItemExpanded[], currencyId: string
 }
 
 export function getRecurringPeriod(recurring: PriceRecurring) {
-  const { interval } = recurring;
+  const { interval } = recurring || {};
+  if (!interval) {
+    return 0;
+  }
   const count = +recurring.interval_count || 1;
   const dayInMs = 24 * 60 * 60 * 1000;
 
@@ -240,6 +243,9 @@ export function canUpsell(from: TPrice, to: TPrice) {
   // longer periods
   const fromPeriod = getRecurringPeriod(from.recurring as PriceRecurring);
   const toPeriod = getRecurringPeriod(to.recurring as PriceRecurring);
+  if (!fromPeriod || !toPeriod) {
+    return false;
+  }
   if (fromPeriod >= toPeriod) {
     return false;
   }

package/api/src/routes/prices.ts

@@ -306,8 +306,8 @@ router.put('/:id', auth, async (req, res) => {
     pick(
       req.body,
       locked
-        ? ['nickname', 'description', 'metadata', 'currency_options', 'upsell', 'lookup_key', ...quantityKeys]
-        : ['type', 'model', 'active', 'livemode', 'nickname', 'recurring', 'description', 'tiers', 'unit_amount', 'transform_quantity', 'metadata', 'lookup_key', 'currency_options', 'upsell', ...quantityKeys] // prettier-ignore
+        ? ['nickname', 'description', 'metadata', 'upsell', 'lookup_key', ...quantityKeys]
+        : ['type', 'model', 'active', 'livemode', 'nickname', 'recurring', 'description', 'tiers', 'unit_amount', 'transform_quantity', 'metadata', 'currency_id', 'lookup_key', 'currency_options', 'upsell', ...quantityKeys] // prettier-ignore
     )
   );
 
@@ -319,14 +319,17 @@ router.put('/:id', auth, async (req, res) => {
   }
 
   const currencies = await PaymentCurrency.findAll({ where: { active: true } });
-  const currency = currencies.find((x) => x.id === doc.currency_id);
+  const currency =
+    currencies.find((x) => x.id === updates?.currency_id || '') || currencies.find((x) => x.id === doc.currency_id);
   if (!currency) {
-    return res.status(400).json({ error: `currency used in price not found or not active: ${doc.currency_id}` });
+    return res
+      .status(400)
+      .json({ error: `currency used in price not found or not active: ${updates?.currency_id || doc.currency_id}` });
   }
   if (updates.unit_amount) {
     updates.unit_amount = fromTokenToUnit(updates.unit_amount, currency.decimal).toString();
     if (updates.currency_options) {
-      const exist = updates.currency_options.find((x) => x.currency_id === doc.currency_id);
+      const exist = updates.currency_options.find((x) => x.currency_id === currency.id);
       if (exist) {
         exist.unit_amount = fromUnitToToken(updates.unit_amount as string, currency.decimal);
       }
@@ -334,12 +337,12 @@ router.put('/:id', auth, async (req, res) => {
   }
   if (updates.currency_options) {
     updates.currency_options = Price.formatCurrencies(updates.currency_options, currencies);
-    const index = updates.currency_options.findIndex((x) => x.currency_id === doc.currency_id);
+    const index = updates.currency_options.findIndex((x) => x.currency_id === currency.id);
     if (index > -1) {
       updates.unit_amount = updates.currency_options[index]?.unit_amount;
     } else {
       updates.currency_options.unshift({
-        currency_id: doc.currency_id,
+        currency_id: currency.id,
         unit_amount: doc.unit_amount,
         tiers: null,
         custom_unit_amount: null,

package/api/src/routes/pricing-table.ts

@@ -141,8 +141,20 @@ router.get('/:id', async (req, res) => {
     return res.status(404).json({ error: 'pricing table not found' });
   }
 
-  const currency = await PaymentCurrency.findOne({ where: { livemode: doc.livemode, is_base_currency: true } });
+  let currency = await PaymentCurrency.findOne({ where: { livemode: doc.livemode, is_base_currency: true } });
   const expanded = await doc.expand();
+  if (expanded.items.length > 0) {
+    const index = expanded.items.findIndex((x: any) => x.price?.currency_id === currency?.id);
+    if (index === -1) {
+      currency = await PaymentCurrency.findOne({
+        where: {
+          livemode: doc.livemode,
+          // @ts-ignore
+          id: expanded?.items?.[0]?.price?.currency_id,
+        },
+      });
+    }
+  }
   res.json({ ...expanded, currency });
 });
 
@@ -317,7 +329,7 @@ router.post('/:id/checkout/:priceId', async (req, res) => {
 
   raw.livemode = doc.livemode;
   raw.created_via = 'portal';
-  raw.currency_id = currency?.id;
+  raw.currency_id = (req.query?.currencyId as string) ?? currency?.id;
 
   if (req.query.redirect) {
     raw.success_url = req.query.redirect as string;

package/api/src/routes/subscriptions.ts

@@ -83,12 +83,14 @@ const schema = createListParamSchema<{
   customer_id?: string;
   customer_did?: string;
   activeFirst?: boolean;
+  price_id?: string;
   order?: string | string[] | OrderItem | OrderItem[];
 }>({
   status: Joi.string().empty(''),
   customer_id: Joi.string().empty(''),
   customer_did: Joi.string().empty(''),
   activeFirst: Joi.boolean().optional(),
+  price_id: Joi.string().empty(''),
   order: Joi.alternatives()
     .try(
       Joi.string(),

package/api/src/store/models/price.ts

@@ -350,6 +350,7 @@ export class Price extends Model<InferAttributes<Price>, InferCreationAttributes
         {
           ...x,
           unit_amount: fromTokenToUnit(x.unit_amount, currency.decimal).toString(),
+          currency,
         },
         ['currency']
       ) as any;

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.16.4
+version: 1.16.5
 logo: logo.png
 files:
   - dist

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.16.4",
+  "version": "1.16.5",
   "scripts": {
     "dev": "blocklet dev --open",
     "eject": "vite eject",
@@ -44,29 +44,29 @@
   },
   "dependencies": {
     "@abtnode/cron": "1.16.33-beta-20241031-073543-49b1ff9b",
-    "@arcblock/did": "^1.18.147",
+    "@arcblock/did": "^1.18.150",
     "@arcblock/did-auth-storage-nedb": "^1.7.1",
-    "@arcblock/did-connect": "^2.10.67",
-    "@arcblock/did-util": "^1.18.147",
-    "@arcblock/jwt": "^1.18.147",
-    "@arcblock/ux": "^2.10.67",
-    "@arcblock/validator": "^1.18.147",
+    "@arcblock/did-connect": "^2.10.74",
+    "@arcblock/did-util": "^1.18.150",
+    "@arcblock/jwt": "^1.18.150",
+    "@arcblock/ux": "^2.10.74",
+    "@arcblock/validator": "^1.18.150",
     "@blocklet/js-sdk": "1.16.33-beta-20241031-073543-49b1ff9b",
     "@blocklet/logger": "1.16.33-beta-20241031-073543-49b1ff9b",
-    "@blocklet/payment-react": "1.16.4",
+    "@blocklet/payment-react": "1.16.5",
     "@blocklet/sdk": "1.16.33-beta-20241031-073543-49b1ff9b",
-    "@blocklet/ui-react": "^2.10.67",
-    "@blocklet/uploader": "^0.1.52",
+    "@blocklet/ui-react": "^2.10.74",
+    "@blocklet/uploader": "^0.1.53",
     "@blocklet/xss": "^0.1.12",
     "@mui/icons-material": "^5.16.6",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.6",
     "@mui/system": "^5.16.6",
-    "@ocap/asset": "^1.18.147",
-    "@ocap/client": "^1.18.147",
-    "@ocap/mcrypto": "^1.18.147",
-    "@ocap/util": "^1.18.147",
-    "@ocap/wallet": "^1.18.147",
+    "@ocap/asset": "^1.18.150",
+    "@ocap/client": "^1.18.150",
+    "@ocap/mcrypto": "^1.18.150",
+    "@ocap/util": "^1.18.150",
+    "@ocap/wallet": "^1.18.150",
     "@stripe/react-stripe-js": "^2.7.3",
     "@stripe/stripe-js": "^2.4.0",
     "ahooks": "^3.8.0",
@@ -120,7 +120,7 @@
   "devDependencies": {
     "@abtnode/types": "1.16.33-beta-20241031-073543-49b1ff9b",
     "@arcblock/eslint-config-ts": "^0.3.3",
-    "@blocklet/payment-types": "1.16.4",
+    "@blocklet/payment-types": "1.16.5",
     "@types/cookie-parser": "^1.4.7",
     "@types/cors": "^2.8.17",
     "@types/debug": "^4.1.12",
@@ -166,5 +166,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "d2c53c8bec3a4a34d0ef3a011ec215b69bc9a5ab"
+  "gitHead": "74e38987168230f01af52d1aff14bfa6a18c0578"
 }

package/src/components/filter-toolbar.tsx

@@ -1,12 +1,20 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { api, getCustomerAvatar, useMobile, usePaymentContext } from '@blocklet/payment-react';
+import {
+  api,
+  findCurrency,
+  formatPrice,
+  getCustomerAvatar,
+  useMobile,
+  usePaymentContext,
+} from '@blocklet/payment-react';
 import type { TCustomer } from '@blocklet/payment-types';
 import { Add, Close } from '@mui/icons-material';
 import { Button, Menu, MenuItem } from '@mui/material';
 import { Box, styled } from '@mui/system';
 import { useEffect, useState } from 'react';
 
-import { ProductsProvider } from '../contexts/products';
+import { flatten } from 'lodash';
+import { ProductsProvider, useProductsContext } from '../contexts/products';
 import InfoCard from './info-card';
 import ProductSelect from './payment-link/product-select';
 
@@ -50,6 +58,7 @@ export default function FilterToolbar(props: Props) {
     setSearch({
       ...search,
       ...obj,
+      page: 1,
     });
   };
 
@@ -73,7 +82,9 @@ export default function FilterToolbar(props: Props) {
                 {currency ? (
                   <SearchCurrency search={search} setSearch={handleSearch} />
                 ) : (
-                  <SearchProducts search={search} setSearch={handleSearch} />
+                  <ProductsProvider>
+                    <SearchProducts search={search} setSearch={handleSearch} />
+                  </ProductsProvider>
                 )}
               </>
             )}
@@ -312,10 +323,23 @@ function SearchCustomers({ setSearch, search }: Pick<Props, 'setSearch' | 'searc
   );
 }
 
-function SearchProducts({ setSearch }: Pick<Props, 'setSearch'>) {
+function SearchProducts({ setSearch, search }: Pick<Props, 'setSearch' | 'search'>) {
   const [show, setShow] = useState(null);
-  const [price, setPrice] = useState({} as any);
-  const [display, setDisplay] = useState('');
+  const { products } = useProductsContext();
+  const { settings } = usePaymentContext();
+  const defaultPrice =
+    search?.price_id && products
+      ? flatten(products.map((x) => x.prices)).find((x) => x.id === search?.price_id)
+      : ({} as any);
+  const [price, setPrice] = useState(defaultPrice);
+  const [display, setDisplay] = useState(() => {
+    if (search?.price_id && defaultPrice && defaultPrice.id) {
+      const product = products.find((x) => x.prices.some((y) => y.id === defaultPrice.id));
+      const currency = findCurrency(settings.paymentMethods, defaultPrice.currency_id ?? '') || settings.baseCurrency;
+      return `${product?.name}(${formatPrice(price, currency!)})`;
+    }
+    return '';
+  });
   const isSubscription = window.location.pathname.includes('subscriptions');
   const { t } = useLocaleContext();
 
@@ -334,6 +358,7 @@ function SearchProducts({ setSearch }: Pick<Props, 'setSearch'>) {
         },
         page: 1,
         pageSize: 10,
+        price_id: price.id,
       });
     });
   }, [price]);
@@ -353,6 +378,7 @@ function SearchProducts({ setSearch }: Pick<Props, 'setSearch'>) {
               e.stopPropagation();
               setSearch({
                 q: '',
+                price_id: '',
               });
               setDisplay('');
               setShow(null);
@@ -373,17 +399,15 @@ function SearchProducts({ setSearch }: Pick<Props, 'setSearch'>) {
           e.stopPropagation();
           setShow(null);
         }}>
-        <ProductsProvider>
-          <ProductSelect
-            mode="inline"
-            hasSelected={() => false}
-            onSelect={(p: any) => {
-              setPrice(p);
-              setDisplay(`${p.productName}(${p.displayPrice})`);
-              setShow(null);
-            }}
-          />
-        </ProductsProvider>
+        <ProductSelect
+          mode="inline"
+          hasSelected={() => false}
+          onSelect={(p: any) => {
+            setPrice(p);
+            setDisplay(`${p.productName}(${p.displayPrice})`);
+            setShow(null);
+          }}
+        />
       </Menu>
     </section>
   );

package/src/components/layout/admin.tsx

@@ -5,6 +5,7 @@ import Dashboard from '@blocklet/ui-react/lib/Dashboard';
 import { styled } from '@mui/system';
 import { useEffect } from 'react';
 
+import { Typography } from '@mui/material';
 import { useSessionContext } from '../../contexts/session';
 
 const Root = styled(Dashboard)<{ padding: string }>`
@@ -82,5 +83,5 @@ export default function Layout(props: any) {
     );
   }
 
-  return t('common.redirecting');
+  return <Typography>{t('common.redirecting')}</Typography>;
 }

package/src/components/payment-link/after-pay.tsx

@@ -50,7 +50,7 @@ export default function AfterPay() {
             <TextField
               {...field}
               placeholder={t('admin.paymentLink.customMessage')}
-              helperText={get(errors, field.name)?.message || t('admin.paymentLink.customMessageTip')}
+              helperText={(get(errors, field.name)?.message as string) || t('admin.paymentLink.customMessageTip')}
               error={!!get(errors, field.name)}
               fullWidth
               size="small"

package/src/components/payment-link/before-pay.tsx

@@ -6,6 +6,7 @@ import { Controller, useFieldArray, useFormContext, useWatch } from 'react-hook-
 import { useSearchParams } from 'react-router-dom';
 
 import { get } from 'lodash';
+import { findCurrency, usePaymentContext } from '@blocklet/payment-react';
 import { useProductsContext } from '../../contexts/products';
 import { getProductByPriceId, isPriceAligned } from '../../libs/util';
 import CreateProduct from '../product/create';
@@ -19,6 +20,7 @@ export default function BeforePay({
 }) {
   const { t } = useLocaleContext();
   const [params, setParams] = useSearchParams();
+  const { settings } = usePaymentContext();
   const { products, refresh } = useProductsContext();
   const {
     control,
@@ -53,6 +55,10 @@ export default function BeforePay({
       const product = getProductByPriceId(products, priceId);
       if (product) {
         const price = product.prices.find((x) => x.id === priceId);
+        const currency = findCurrency(settings.paymentMethods, price?.currency_id ?? '');
+        if (currency) {
+          setValue('currency_id', currency.id);
+        }
         if (price && price.type === 'recurring') {
           setValue('invoice_creation.enabled', true);
         }

package/src/components/payment-link/item.tsx

@@ -1,6 +1,6 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { api, formatError, formatPrice, usePaymentContext } from '@blocklet/payment-react';
+import { api, findCurrency, formatError, formatPrice, usePaymentContext } from '@blocklet/payment-react';
 import type { TPrice, TProduct, TProductExpanded } from '@blocklet/payment-types';
 import { Box, Checkbox, FormControlLabel, FormLabel, Stack, TextField, Typography } from '@mui/material';
 import { useSetState } from 'ahooks';
@@ -45,6 +45,9 @@ export default function LineItem({ prefix, product, valid, onUpdate, onRemove }:
     }
   };
 
+  const productCurrency =
+    findCurrency(settings.paymentMethods, product.prices[0]?.currency_id ?? '') || settings.baseCurrency;
+
   return (
     <Box
       sx={{
@@ -76,7 +79,7 @@ export default function LineItem({ prefix, product, valid, onUpdate, onRemove }:
         <InfoCard
           logo={product.images[0]}
           name={product.name}
-          description={formatPrice(product.prices[0] as TPrice, settings.baseCurrency)}
+          description={formatPrice(product.prices[0] as TPrice, productCurrency!)}
         />
         <Controller
           name={getFieldName('quantity')}

package/src/components/payment-link/product-select.tsx

@@ -1,5 +1,5 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { formatPrice, getPriceCurrencyOptions, usePaymentContext } from '@blocklet/payment-react';
+import { findCurrency, formatPrice, getPriceCurrencyOptions, usePaymentContext } from '@blocklet/payment-react';
 import type { TProductExpanded } from '@blocklet/payment-types';
 import { AddOutlined } from '@mui/icons-material';
 import { Avatar, Box, ListSubheader, MenuItem, Select, Stack, Typography } from '@mui/material';
@@ -52,6 +52,7 @@ export default function ProductSelect({ mode: initialMode, hasSelected, onSelect
         </Stack>
       </ListSubheader>,
       ...product.prices.map((price: any) => {
+        const currency = findCurrency(settings.paymentMethods, price.currency_id ?? '') || settings.baseCurrency;
         return (
           <MenuItem
             key={price.id}
@@ -60,11 +61,11 @@ export default function ProductSelect({ mode: initialMode, hasSelected, onSelect
             onClick={() => {
               if (callback) {
                 price.productName = product.name;
-                price.displayPrice = formatPrice(price, settings.baseCurrency);
+                price.displayPrice = formatPrice(price, currency!);
                 callback(price);
               }
             }}>
-            <Typography color="text.primary">{formatPrice(price, settings.baseCurrency)}</Typography>
+            <Typography color="text.primary">{formatPrice(price, currency!)}</Typography>
             <Typography color="text.secondary" sx={{ ml: 2 }}>
               {getPriceCurrencyOptions(price).length > 1
                 ? ` +${getPriceCurrencyOptions(price).length - 1} more currencies`

package/src/components/price/currency-select.tsx

@@ -5,35 +5,88 @@ import { ListSubheader, MenuItem, Select, Stack, Typography } from '@mui/materia
 import { useState } from 'react';
 import type { LiteralUnion } from 'type-fest';
 
+import { flatten } from 'lodash';
 import { getSupportedPaymentMethods } from '../../libs/util';
 import Currency from '../currency';
 
 type Props = {
-  mode: LiteralUnion<'waiting' | 'selecting', string>;
+  mode: LiteralUnion<'waiting' | 'selecting' | 'selected', string>;
   hasSelected: (currency: any) => boolean;
   onSelect: (currencyId: string) => void;
+  value: string;
+  width?: string;
+  disabled?: boolean;
 };
 
-export default function CurrencySelect({ mode: initialMode, hasSelected, onSelect }: Props) {
+CurrencySelect.defaultProps = {
+  width: '100%',
+  disabled: false,
+};
+
+export default function CurrencySelect({ mode: initialMode, hasSelected, onSelect, value, width, disabled }: Props) {
   const { t } = useLocaleContext();
   const { settings } = usePaymentContext();
   const [mode, setMode] = useState(initialMode);
 
   const handleSelect = (e: any) => {
-    setMode('waiting');
+    if (disabled) {
+      return;
+    }
+    setMode(initialMode);
     onSelect(e.target.value);
   };
 
+  const currencies = flatten(settings.paymentMethods.map((method) => method.payment_currencies));
+
+  const selectedCurrency = currencies.find((x) => x.id === value);
+
+  const selectedPaymentMethod = settings.paymentMethods.find((x) => x.payment_currencies.some((c) => c.id === value));
+
+  const extraCurrencies = getSupportedPaymentMethods(settings.paymentMethods, (x) => !hasSelected(x));
+
+  const canSelect = extraCurrencies.length > 0 && !disabled;
+
+  if (mode === 'selected') {
+    return (
+      <Typography
+        fontSize="12px"
+        onClick={() => {
+          if (canSelect) {
+            setMode('selecting');
+          }
+        }}
+        sx={{ cursor: canSelect ? 'pointer' : 'default', display: 'inline-flex' }}>
+        {selectedCurrency?.symbol} ({selectedPaymentMethod?.name})
+      </Typography>
+    );
+  }
+
+  if (!canSelect) {
+    return null;
+  }
+
   if (mode === 'selecting') {
     return (
-      <Select value="" sx={{ width: 260 }} size="small" onChange={handleSelect}>
-        {getSupportedPaymentMethods(settings.paymentMethods, (x) => !hasSelected(x)).map((method) => [
+      <Select
+        size="small"
+        value={value}
+        renderValue={() => (
+          <Typography variant="body1" sx={{ display: 'inline-flex', fontSize: '12px', color: 'text.secondary' }}>
+            {selectedCurrency?.symbol} ({selectedPaymentMethod?.name})
+          </Typography>
+        )}
+        onChange={handleSelect}
+        open
+        sx={{ width }}
+        disabled={disabled}
+        onClose={() => setMode(initialMode)}>
+        {extraCurrencies.map((method) => [
           <ListSubheader key={method.id} sx={{ fontSize: '1rem', color: 'text.secondary', lineHeight: '2.5rem' }}>
             {method.name}
           </ListSubheader>,
           ...method.payment_currencies.map((currency) => (
             <MenuItem key={currency.id} sx={{ pl: 3 }} value={currency.id}>
-              <Stack direction="row" justifyContent="space-between" sx={{ width: '100%' }}>
+              <Stack direction="row" justifyContent="space-between" sx={{ width: '100%' }} gap={2}>
                 <Currency logo={currency.logo} name={currency.name} />
                 <Typography fontWeight="bold">{currency.symbol}</Typography>
               </Stack>

package/src/components/price/form.tsx

@@ -118,13 +118,11 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
   const isCustomInterval = useWatch({ control, name: getFieldName('recurring.interval_config') }) === 'month_2';
   const model = useWatch({ control, name: getFieldName('model') });
   const intervalSelectValue = useWatch({ control, name: getFieldName('recurring.interval') });
+  const defaultCurrencyId = useWatch({ control, name: getFieldName('currency_id') });
+  const defaultCurrency = findCurrency(settings.paymentMethods, defaultCurrencyId);
   const quantityPositive = (v: number | undefined) => !v || v.toString().match(/^(0|[1-9]\d*)$/);
   const intervalCountPositive = (v: number) => Number.isInteger(Number(v)) && v > 0;
 
-  const basePaymentMethod = settings.paymentMethods.find((x) =>
-    x.payment_currencies.some((c) => c.id === settings.baseCurrency.id)
-  );
-
   const isLocked = priceLocked && window.blocklet?.PAYMENT_CHANGE_LOCKED_PRICE !== '1';
 
   const validateAmount = (v: number, currency: { maximum_precision?: number }) => {
@@ -143,6 +141,20 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
     trigger(getFieldName('recurring.interval_config'));
   };
 
+  const handleCurrencyChange = (index: number, currencyId: string) => {
+    const update = {
+      currency_id: currencyId,
+    };
+    // @ts-ignore
+    if (currencies?.fields?.[index]?.currency) {
+      // @ts-ignore
+      update.currency = findCurrency(settings.paymentMethods, currencyId);
+    }
+    currencies.update(index, {
+      ...currencies.fields[index],
+      ...update,
+    });
+  };
   return (
     <Root direction="column" alignItems="flex-start" spacing={2}>
       {isLocked && <Alert severity="info">{t('admin.price.locked')}</Alert>}
@@ -176,7 +188,13 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
           control={control}
           rules={{
             required: t('admin.price.unit_amount.required'),
-            validate: (v) => validateAmount(v, settings.baseCurrency),
+            validate: (v) => {
+              const hasStripError = !stripeCurrencyValidate(v, defaultCurrency);
+              if (hasStripError) {
+                return t('admin.price.unit_amount.stripeTip');
+              }
+              return validateAmount(v, defaultCurrency ?? {});
+            },
           }}
           disabled={isLocked}
           render={({ field }) => (
@@ -201,14 +219,33 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
                 InputProps={{
                   endAdornment: (
                     <InputAdornment position="end">
-                      {settings.baseCurrency.symbol} ({basePaymentMethod?.name})
+                      <CurrencySelect
+                        mode="selected"
+                        hasSelected={(currency) =>
+                          currencies.fields.some((x: any) => x.currency_id === currency.id) ||
+                          currency.id === defaultCurrencyId
+                        }
+                        onSelect={(currencyId) => {
+                          const index = currencies.fields.findIndex((x: any) => x.currency_id === defaultCurrencyId);
+                          if (index > -1) {
+                            // @ts-ignore
+                            handleCurrencyChange(index, currencyId);
+                          }
+                          setValue(getFieldName('currency'), findCurrency(settings.paymentMethods, currencyId), {
+                            shouldValidate: true,
+                          });
+                          setValue(getFieldName('currency_id'), currencyId, { shouldValidate: true });
+                        }}
+                        value={defaultCurrencyId}
+                        disabled={isLocked}
+                      />
                     </InputAdornment>
                   ),
                 }}
                 onChange={(e) => {
                   const { value } = e.target;
                   field.onChange(value);
-                  const index = currencies.fields.findIndex((x: any) => x.currency_id === settings.baseCurrency.id);
+                  const index = currencies.fields.findIndex((x: any) => x.currency_id === defaultCurrencyId);
                   if (index === -1) {
                     return;
                   }
@@ -244,7 +281,7 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
       {hasMoreCurrency(settings.paymentMethods) && (
         <Stack direction="column" spacing={2}>
           {currencies.fields.map((item: any, index: number) => {
-            if (item.currency_id === settings.baseCurrency.id) {
+            if (item.currency_id === defaultCurrencyId) {
               return null;
             }
             const fieldName = getFieldName(`currency_options.${index}.unit_amount`);
@@ -277,7 +314,24 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
                         InputProps={{
                           endAdornment: (
                             <InputAdornment position="end">
-                              {currency?.symbol} ({currency?.paymentMethod?.name})
+                              <CurrencySelect
+                                mode="selected"
+                                hasSelected={(c) =>
+                                  currencies.fields.some((x: any) => x.currency_id === c.id) ||
+                                  c.id === defaultCurrencyId
+                                }
+                                onSelect={(currencyId) => {
+                                  const cIndex = currencies.fields.findIndex(
+                                    (x: any) => x.currency_id === currency?.id
+                                  );
+                                  if (cIndex > -1) {
+                                    // @ts-ignore
+                                    handleCurrencyChange(cIndex, currencyId);
+                                  }
+                                }}
+                                value={currency?.id!}
+                                disabled={isLocked}
+                              />
                             </InputAdornment>
                           ),
                         }}
@@ -285,9 +339,11 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
                     );
                   }}
                 />
-                <IconButton size="small" disabled={isLocked} onClick={() => handleRemoveCurrency(index)}>
-                  <DeleteOutlineOutlined color="error" sx={{ opacity: 0.75 }} />
-                </IconButton>
+                {!isLocked && (
+                  <IconButton size="small" disabled={isLocked} onClick={() => handleRemoveCurrency(index)}>
+                    <DeleteOutlineOutlined color="error" sx={{ opacity: 0.75 }} />
+                  </IconButton>
+                )}
               </Stack>
             );
           })}
@@ -295,10 +351,11 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
             <CurrencySelect
               mode="waiting"
               hasSelected={(currency) =>
-                currencies.fields.some((x: any) => x.currency_id === currency.id) ||
-                currency.id === settings.baseCurrency.id
+                currencies.fields.some((x: any) => x.currency_id === currency.id) || currency.id === defaultCurrencyId
               }
               onSelect={(currencyId) => currencies.append({ currency_id: currencyId, unit_amount: 0 })}
+              value=""
+              width="260px"
             />
           )}
         </Stack>

package/src/components/price/upsell-select.tsx

@@ -92,7 +92,7 @@ export default function UpsellSelect({ price, onSelect, onAdd }: Props) {
         </MenuItem>
         {filteredData.map((x) => (
           <MenuItem key={x.id} value={x.id}>
-            {formatPrice(x, x.currency)}
+            {formatPrice(x, price.currency || x.currency)}
           </MenuItem>
         ))}
       </Select>

package/src/components/price/upsell.tsx

@@ -1,5 +1,5 @@
 import Toast from '@arcblock/ux/lib/Toast';
-import { api, formatError, formatPrice, usePaymentContext } from '@blocklet/payment-react';
+import { api, findCurrency, formatError, formatPrice, usePaymentContext } from '@blocklet/payment-react';
 import type { TPriceExpanded } from '@blocklet/payment-types';
 import { DeleteOutlineOutlined } from '@mui/icons-material';
 import { CircularProgress, Grid, IconButton, Stack, Typography } from '@mui/material';
@@ -44,10 +44,12 @@ export function UpsellForm({ data, onChange }: { data: TPriceExpanded; onChange:
     return <CircularProgress />;
   }
 
+  const defaultCurrency = findCurrency(settings.paymentMethods, data?.currency_id || '') || settings.baseCurrency;
+
   if (data.upsell?.upsells_to_id) {
     return (
       <Stack spacing={1} direction="row" alignItems="center">
-        <Typography>{formatPrice(data.upsell.upsells_to, settings.baseCurrency)}</Typography>
+        <Typography>{formatPrice(data.upsell.upsells_to, defaultCurrency)}</Typography>
         <IconButton size="small" sx={{ ml: 1 }} onClick={onRemoveUpsell}>
           <DeleteOutlineOutlined color="error" sx={{ opacity: 0.75 }} />
         </IconButton>

package/src/components/pricing-table/payment-settings.tsx

@@ -1,6 +1,6 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Tabs from '@arcblock/ux/lib/Tabs';
-import { formatPrice, usePaymentContext } from '@blocklet/payment-react';
+import { findCurrency, formatPrice, usePaymentContext } from '@blocklet/payment-react';
 import type { TPrice, TProduct } from '@blocklet/payment-types';
 import { Box, Checkbox, FormControlLabel, Stack, TextField, Typography } from '@mui/material';
 import get from 'lodash/get';
@@ -125,7 +125,7 @@ export function PricePaymentSettings({ index }: { index: number }) {
               fullWidth
               size="small"
               error={!!get(errors, field.name)}
-              helperText={get(errors, field.name)?.message || t('admin.paymentLink.customMessageTip')}
+              helperText={(get(errors, field.name)?.message as string) || t('admin.paymentLink.customMessageTip')}
               inputProps={{
                 maxLength: 200,
               }}
@@ -217,11 +217,14 @@ export function ProductPaymentSettings({ product, prices }: { product: TProduct;
   const { settings } = usePaymentContext();
   const { products } = useProductsContext();
   const [current, setCurrent] = useState(prices[0]?.id);
-  const tabs = prices.map((x: any) => ({
-    value: x.id,
-    label: formatPrice(getPriceFromProducts(products, x.price_id) as TPrice, settings.baseCurrency),
-    component: <PricePaymentSettings index={x.index} />,
-  }));
+  const tabs = prices.map((x: any) => {
+    const currency = findCurrency(settings.paymentMethods, x.currency_id);
+    return {
+      value: x.id,
+      label: formatPrice(getPriceFromProducts(products, x.price_id) as TPrice, currency || settings.baseCurrency),
+      component: <PricePaymentSettings index={x.index} />,
+    };
+  });
 
   return (
     <Box sx={{ px: 2, py: 0, border: '1px solid #eee', borderRadius: 2 }}>

package/src/components/pricing-table/price-item.tsx

@@ -1,5 +1,5 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { FormInput, formatPrice, usePaymentContext } from '@blocklet/payment-react';
+import { FormInput, findCurrency, formatPrice, usePaymentContext } from '@blocklet/payment-react';
 import type { TPrice } from '@blocklet/payment-types';
 import { DeleteOutlineOutlined } from '@mui/icons-material';
 import { Box, Checkbox, FormControlLabel, IconButton, InputAdornment, Stack, Typography } from '@mui/material';
@@ -23,10 +23,11 @@ export default function PriceItem({ prefix, price, onRemove }: Props) {
   } = useFormContext();
   const includeFreeTrial = useWatch({ control, name: getFieldName('include_free_trial') });
 
+  const currency = findCurrency(settings.paymentMethods, price?.currency_id ?? '') || settings.baseCurrency;
   return (
     <Box sx={{ width: '100%' }}>
       <Stack direction="row" alignItems="center" justifyContent="space-between">
-        <Typography>{formatPrice(price, settings.baseCurrency)}</Typography>
+        <Typography>{formatPrice(price, currency!)}</Typography>
         <IconButton size="small" onClick={onRemove}>
           <DeleteOutlineOutlined color="inherit" sx={{ opacity: 0.75 }} />
         </IconButton>

package/src/components/pricing-table/product-settings.tsx

@@ -41,9 +41,11 @@ export default function PricingTableProductSettings({
     } else if (priceId) {
       const product = getProductByPriceId(products, priceId);
       if (product) {
+        const price = product?.prices.find((x) => x.id === priceId);
         items.append({
           price_id: priceId,
           product_id: product.id,
+          currency_id: price?.currency_id,
           is_highlight: false,
           highlight_text: 'popular',
           adjustable_quantity: {

package/src/components/product/cross-sell-select.tsx

@@ -1,11 +1,11 @@
 import { useState } from 'react';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { usePaymentContext } from '@blocklet/payment-react';
+import { findCurrency, usePaymentContext } from '@blocklet/payment-react';
 import type { TProductExpanded } from '@blocklet/payment-types';
 import { FormControl, MenuItem, Select, Stack, Typography } from '@mui/material';
 
 import { useProductsContext } from '../../contexts/products';
-import { formatProductPrice } from '../../libs/util';
+import { formatProductPrice, isProductCurrenciesMatched } from '../../libs/util';
 import InfoCard from '../info-card';
 
 type Props = {
@@ -27,6 +27,9 @@ export default function CrossSellSelect({ data, onSelect, valid }: Props) {
     }
   };
 
+  const defaultCurrency =
+    findCurrency(settings.paymentMethods, data?.default_price?.currency_id || '') || settings.baseCurrency;
+
   return (
     <FormControl error={!valid} sx={{ width: '100%' }}>
       <Select
@@ -41,12 +44,12 @@ export default function CrossSellSelect({ data, onSelect, valid }: Props) {
           </Stack>
         </MenuItem>
         {products
-          .filter((x) => x.id !== data.id)
+          .filter((x) => x.id !== data.id && isProductCurrenciesMatched(x, data))
           .map((x: TProductExpanded) => (
             <MenuItem key={x.id} value={x.id}>
               <InfoCard
                 name={x.name}
-                description={formatProductPrice(x as any, settings.baseCurrency, locale)}
+                description={formatProductPrice(x as any, defaultCurrency, locale)}
                 logo={x.images[0]}
               />
             </MenuItem>

package/src/components/product/cross-sell.tsx

@@ -1,6 +1,6 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { api, formatError, usePaymentContext } from '@blocklet/payment-react';
+import { api, findCurrency, formatError, usePaymentContext } from '@blocklet/payment-react';
 import type { TProductExpanded } from '@blocklet/payment-types';
 import { DeleteOutlineOutlined } from '@mui/icons-material';
 import { CircularProgress, Grid, IconButton, Stack, Typography } from '@mui/material';
@@ -58,13 +58,16 @@ export function CrossSellForm({ data, onChange }: { data: TProductExpanded; onCh
     return <CircularProgress />;
   }
 
+  const defaultCurrency =
+    findCurrency(settings.paymentMethods, data?.default_price?.currency_id || '') || settings.baseCurrency;
+
   if (data.cross_sell?.cross_sells_to_id) {
     const to = data.cross_sell.cross_sells_to;
     return (
       <Stack spacing={1} direction="row" alignItems="center">
         <InfoCard
           name={to.name}
-          description={formatProductPrice(to as any, settings.baseCurrency, locale)}
+          description={formatProductPrice(to as any, defaultCurrency, locale)}
           logo={to.images[0]}
         />
         <IconButton size="small" sx={{ ml: 1 }} onClick={onRemoveUpsell}>

package/src/components/section/header.tsx

@@ -2,7 +2,7 @@ import { Stack, Typography } from '@mui/material';
 import type { ReactNode } from 'react';
 
 type Props = {
-  title: string;
+  title: string | ReactNode;
   children?: ReactNode;
   mb?: number;
   mt?: number;
@@ -25,7 +25,8 @@ export default function SectionHeader(props: Props) {
             xs: '18px',
             md: '1.25rem',
           },
-        }}>
+        }}
+        component="div">
         {props.title}
       </Typography>
       {props.children}

package/src/components/subscription/list.tsx

@@ -29,6 +29,7 @@ const fetchData = (params: Record<string, any> = {}): Promise<{ list: TSubscript
 
 type SearchProps = {
   status?: string;
+  price_id?: string;
   pageSize: number;
   page: number;
   customer_id?: string;
@@ -75,6 +76,7 @@ export default function SubscriptionList({ customer_id, features, status }: List
       customer_id,
       pageSize: defaultPageSize,
       page: 1,
+      price_id: '',
     },
   });
 
@@ -213,6 +215,7 @@ export default function SubscriptionList({ customer_id, features, status }: List
         onSearchChange: (text: string) => {
           if (text) {
             setSearch({
+              ...search!,
               q: {
                 'like-metadata': text,
                 'like-description': text,
@@ -222,6 +225,7 @@ export default function SubscriptionList({ customer_id, features, status }: List
             });
           } else {
             setSearch({
+              ...search!,
               status: '',
               customer_id,
               pageSize: 100,

package/src/pages/admin/products/links/create.tsx

@@ -85,6 +85,7 @@ export default function CreatePaymentLink() {
     'subscription_data',
     'billing_address_collection',
     'phone_number_collection',
+    'currency_id',
   ]);
 
   useEffect(() => {

package/src/pages/admin/products/links/detail.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { api, formatError, formatTime, usePaymentContext, Table } from '@blocklet/payment-react';
+import { api, formatError, formatTime, usePaymentContext, Table, findCurrency } from '@blocklet/payment-react';
 import type { TLineItemExpanded, TPaymentLinkExpanded, TPrice, TProduct } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
 import { Alert, Box, Button, CircularProgress, Divider, Grid, Stack, Typography } from '@mui/material';
@@ -96,7 +96,8 @@ export default function PaymentLinkDetail(props: { id: string }) {
     }
   };
 
-  const result = formatPaymentLinkPricing(data, settings.baseCurrency, locale);
+  const currency = findCurrency(settings.paymentMethods, data?.currency_id ?? '');
+  const result = formatPaymentLinkPricing(data, currency!, locale);
 
   const handleEditMetadata = () => {
     setState((prev) => ({ editing: { ...prev.editing, metadata: true } }));
@@ -233,14 +234,17 @@ export default function PaymentLinkDetail(props: { id: string }) {
                           sort: false,
                           customBodyRenderLite: (_: any, index: number) => {
                             const item = data.line_items[index] as TLineItemExpanded;
+                            const itemCurrency =
+                              currency || findCurrency(settings.paymentMethods, item?.price?.currency_id ?? '');
                             return (
-                              <Link to={`/admin/products/${item.price.product_id}`}>
+                              <Link
+                                to={`/admin/products/${item.price.product_id}?currency_id=${itemCurrency?.id}&price_id=${item.price.id}`}>
                                 <InfoCard
                                   name={item.price.product.name}
                                   description={formatProductPrice(
                                     // @ts-ignore
                                     { ...item.price.product, prices: [item.price] },
-                                    settings.baseCurrency,
+                                    itemCurrency,
                                     locale
                                   )}
                                   logo={item.price.product.images[0]}
@@ -253,10 +257,12 @@ export default function PaymentLinkDetail(props: { id: string }) {
                       {
                         label: t('common.quantity'),
                         name: 'quantity',
+                        align: 'right',
                       },
                       {
                         label: t('admin.paymentLink.adjustable'),
                         name: 'price_id',
+                        align: 'right',
                         options: {
                           customBodyRenderLite: (_: any, index: number) => {
                             const item = data.line_items[index];

package/src/pages/admin/products/links/index.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { getDurableData } from '@arcblock/ux/lib/Datatable';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { Status, api, formatTime, usePaymentContext, Table } from '@blocklet/payment-react';
+import { Status, api, formatTime, usePaymentContext, Table, findCurrency } from '@blocklet/payment-react';
 import type { TPaymentLinkExpanded } from '@blocklet/payment-types';
 import { Alert, CircularProgress, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';
 import { useRequest } from 'ahooks';
@@ -97,7 +97,8 @@ function PaymentLinks() {
         sort: false,
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TPaymentLinkExpanded;
-          const result = formatPaymentLinkPricing(item, settings.baseCurrency, locale);
+          const currency = findCurrency(settings.paymentMethods, item?.currency_id ?? '') || settings.baseCurrency;
+          const result = formatPaymentLinkPricing(item, currency!, locale);
           return <Link to={`/admin/products/${item.id}`}>{result.priceDisplay}</Link>;
         },
       },

package/src/pages/admin/products/prices/list.tsx

@@ -1,6 +1,14 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { Status, formatPrice, formatTime, usePaymentContext, Table } from '@blocklet/payment-react';
+import {
+  Status,
+  formatPrice,
+  formatTime,
+  Table,
+  getQueryParams,
+  usePaymentContext,
+  findCurrency,
+} from '@blocklet/payment-react';
 import { LockOutlined } from '@mui/icons-material';
 import { Stack, Tooltip, Typography } from '@mui/material';
 import { Link } from 'react-router-dom';
@@ -12,6 +20,7 @@ import PriceActions from './actions';
 export default function PricesList({ product, onChange }: { product: Product; onChange: Function }) {
   const { t, locale } = useLocaleContext();
   const { settings } = usePaymentContext();
+  const query = getQueryParams(window.location.href);
 
   const columns = [
     {
@@ -22,16 +31,22 @@ export default function PricesList({ product, onChange }: { product: Product; on
         sort: false,
         customBodyRenderLite: (_: any, index: number) => {
           const price = product.prices[index] as any;
+          const showHighlight = query.price_id === price.id && query.currency_id;
+          const priceCurrency = showHighlight
+            ? findCurrency(settings.paymentMethods, query.currency_id || '')
+            : price.currency;
           return (
             <Link to={`/admin/products/${price.id}`} color="text.primary">
-              <Stack direction="row" alignItems="center" spacing={1} flexWrap="wrap">
+              <Stack direction="row" alignItems="center" spacing={1}>
                 {price.locked && (
                   <Tooltip title={t('admin.price.locked')}>
                     <LockOutlined sx={{ color: 'text.secondary' }} />
                   </Tooltip>
                 )}
-                <Typography component="span">
-                  {formatPrice(price, settings.baseCurrency, '', 1, true, locale)}
+                <Typography
+                  component="span"
+                  sx={{ backgroundColor: showHighlight ? '#FFF9C4' : 'transparent', whiteSpace: 'nowrap' }}>
+                  {formatPrice(price, priceCurrency || price.currency, '', 1, true, locale)}
                 </Typography>
                 <Typography component="span">
                   {price.id === product.default_price_id && <Status label="default" color="info" sx={{ height: 18 }} />}

package/src/pages/admin/products/pricing-tables/create.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable no-nested-ternary */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { api, formatError } from '@blocklet/payment-react';
+import { api, formatError, usePaymentContext } from '@blocklet/payment-react';
 import type { TPricingTable } from '@blocklet/payment-types';
 import { AddOutlined, Fullscreen, FullscreenExit } from '@mui/icons-material';
 import { Box, Button, Stack, Typography } from '@mui/material';
@@ -27,6 +27,7 @@ export default function CreatePricingTable() {
   const [stashed, setStashed] = useState(0);
   const fullScreenRef = useRef(null);
   const [errors, triggerError] = useSetState({});
+  const { settings } = usePaymentContext();
 
   const methods = useForm<TPricingTable & any>({
     shouldUnregister: false,
@@ -42,11 +43,19 @@ export default function CreatePricingTable() {
       highlight_product_id: '',
       highlight_text: 'popular',
       items: [],
-      metadata: [], // FIXME:
+      metadata: [],
+      currency_id: settings.baseCurrency.id,
     },
   });
 
-  const changes = methods.watch(['items', 'branding_settings', 'highlight', 'highlight_product_id', 'highlight_text']);
+  const changes = methods.watch([
+    'items',
+    'branding_settings',
+    'highlight',
+    'highlight_product_id',
+    'highlight_text',
+    'currency_id',
+  ]);
 
   useEffect(() => {
     api.post('/api/pricing-tables/stash', methods.getValues()).then(() => {
@@ -115,7 +124,7 @@ export default function CreatePricingTable() {
           <Stack height="92vh" spacing={2} direction="row">
             <Box flex={2} sx={{ borderRight: '1px solid #eee' }} position="relative">
               <Stack height="100%" spacing={2}>
-                <Box overflow="auto" sx={{ pr: 2 }}>
+                <Box overflow="auto" sx={{ pr: 2, pb: 8 }}>
                   {step === 0 && <PricingTableProductSettings triggerError={triggerError} />}
                   {step === 1 && <PricingTablePaymentSettings />}
                   {/* {step === 2 && <PricingTableCustomerSettings />} */}

package/src/pages/admin/products/pricing-tables/detail.tsx

@@ -220,14 +220,16 @@ export default function PricingTableDetail(props: { id: string }) {
                           sort: false,
                           customBodyRenderLite: (_: any, index: number) => {
                             const item = data.items[index] as any;
+                            const itemCurrency = data?.currency || settings.baseCurrency;
                             return (
-                              <Link to={`/admin/products/${item.product_id}`}>
+                              <Link
+                                to={`/admin/products/${item.product_id}?currency_id=${itemCurrency?.id}&price_id=${item.price.id}`}>
                                 <InfoCard
                                   name={item.product.name}
                                   description={formatProductPrice(
                                     // @ts-ignore
                                     { ...item.product, prices: [item.price] },
-                                    settings.baseCurrency,
+                                    itemCurrency,
                                     locale
                                   )}
                                   logo={item.product.images[0]}

package/src/pages/admin/products/products/create.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable no-nested-ternary */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { api, formatError, formatPrice, usePaymentContext } from '@blocklet/payment-react';
+import { api, findCurrency, formatError, formatPrice, usePaymentContext } from '@blocklet/payment-react';
 import { AddOutlined } from '@mui/icons-material';
 import { Box, Button, Divider, Typography } from '@mui/material';
 import { cloneDeep } from 'lodash';
@@ -83,9 +83,12 @@ export default function ProductsCreate() {
                   if (expanded) {
                     return t('admin.price.detail');
                   }
+                  const priceItem = getPrice(index);
+                  const currency =
+                    findCurrency(settings.paymentMethods, priceItem?.currency_id || '') || settings.baseCurrency;
 
                   // @ts-ignore
-                  return formatPrice(getPrice(index), settings.baseCurrency, getValues().unit_label, 1, false, locale);
+                  return formatPrice(priceItem as any, currency, getValues().unit_label, 1, false, locale);
                 }}>
                 <PriceForm prefix={`prices.${index}`} />
               </Collapse>

package/src/pages/admin/products/products/detail.tsx

@@ -1,8 +1,8 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { api, formatError, formatTime, useMobile, usePaymentContext } from '@blocklet/payment-react';
+import { api, findCurrency, formatError, formatTime, useMobile, usePaymentContext } from '@blocklet/payment-react';
 import type { TPrice, TProduct, TProductExpanded } from '@blocklet/payment-types';
-import { ArrowBackOutlined } from '@mui/icons-material';
+import { ArrowBackOutlined, InfoOutlined } from '@mui/icons-material';
 import {
   Alert,
   AlertTitle,
@@ -13,6 +13,7 @@ import {
   Divider,
   Grid,
   Stack,
+  Tooltip,
   Typography,
 } from '@mui/material';
 import { styled } from '@mui/system';
@@ -114,6 +115,9 @@ export default function ProductDetail(props: { id: string }) {
     setState((prev) => ({ editing: { ...prev.editing, metadata: true } }));
   };
 
+  const defaultCurrency =
+    findCurrency(settings.paymentMethods, data?.default_price?.currency_id) || settings.baseCurrency;
+
   return (
     <Root direction="column" spacing={2.5} sx={{ mb: 4 }}>
       <Box>
@@ -173,7 +177,7 @@ export default function ProductDetail(props: { id: string }) {
                   {data.name}
                 </Typography>
                 <Typography variant="subtitle1" color="text.lighter">
-                  {formatProductPrice(data as any, settings.baseCurrency, locale)}
+                  {formatProductPrice(data as any, defaultCurrency, locale)}
                 </Typography>
               </Stack>
             </Stack>
@@ -372,7 +376,25 @@ export default function ProductDetail(props: { id: string }) {
         {isMobile && <Divider />}
         <Box className="payment-link-column-2" sx={{ gap: 2.5, display: 'flex', flexDirection: 'column' }}>
           <Box className="section">
-            <SectionHeader title={t('admin.product.cross_sell.title')} />
+            <SectionHeader
+              title={
+                <Stack direction="row" alignItems="center" spacing={1}>
+                  <Typography
+                    variant="h3"
+                    sx={{
+                      fontSize: {
+                        xs: '18px',
+                        md: '1.25rem',
+                      },
+                    }}>
+                    {t('admin.product.cross_sell.title')}
+                  </Typography>
+                  <Tooltip title={t('admin.product.currencyNotAligned')}>
+                    <InfoOutlined sx={{ color: 'text.lighter' }} fontSize="small" />
+                  </Tooltip>
+                </Stack>
+              }
+            />
             <Box className="section-body">
               <ProductCrossSell data={data} onChange={runAsync} />
             </Box>

package/src/pages/admin/products/products/index.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { getDurableData } from '@arcblock/ux/lib/Datatable';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { Status, api, formatTime, usePaymentContext, Table } from '@blocklet/payment-react';
+import { Status, api, formatTime, usePaymentContext, Table, findCurrency } from '@blocklet/payment-react';
 import type { TProductExpanded } from '@blocklet/payment-types';
 import { CircularProgress } from '@mui/material';
 import { useEffect, useState } from 'react';
@@ -75,11 +75,13 @@ export default function ProductsList() {
         filter: true,
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TProductExpanded;
+          const currency =
+            findCurrency(settings.paymentMethods, item.prices[0]?.currency_id ?? '') || settings.baseCurrency;
           return (
             <Link to={`/admin/products/${item.id}`}>
               <InfoCard
                 name={item.name}
-                description={formatProductPrice(item as any, settings.baseCurrency, locale)}
+                description={formatProductPrice(item as any, currency!, locale)}
                 logo={item.images[0]}
               />
             </Link>