payment-kit 1.16.3 → 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/libs/util.ts

@@ -319,6 +319,26 @@ export async function getOwnerDid() {
   }
 }
 
+export async function getDidListByRole(role: string | string[]) {
+  try {
+    if (Array.isArray(role)) {
+      const didSet = new Set<string>();
+      await Promise.all(
+        role.map(async (r: string) => {
+          const { users } = await blocklet.getUsers({ query: { role: r } });
+          users.forEach((u) => didSet.add(u.did));
+        })
+      );
+      return Array.from(didSet);
+    }
+    const { users } = await blocklet.getUsers({ query: { role } });
+    return users.map((x: any) => x?.did);
+  } catch (error) {
+    logger.error('getDidListByRole error', error);
+    return null;
+  }
+}
+
 export function getSubscriptionNotificationCustomActions(
   subscription: Subscription,
   eventType: string,

package/api/src/routes/connect/collect-batch.ts

@@ -2,8 +2,11 @@
 import type { Transaction } from '@ocap/client';
 import { fromAddress } from '@ocap/wallet';
 
+import { toBase58 } from '@ocap/util';
+import { encodeTransferItx } from 'api/src/integrations/ethereum/token';
+import { waitForEvmTxConfirm, waitForEvmTxReceipt } from 'api/src/integrations/ethereum/tx';
 import type { CallbackArgs } from '../../libs/auth';
-import { wallet } from '../../libs/auth';
+import { ethWallet, wallet } from '../../libs/auth';
 import { getGasPayerExtra } from '../../libs/payment';
 import { getTxMetadata } from '../../libs/util';
 import { invoiceQueue } from '../../queues/invoice';
@@ -59,30 +62,30 @@ export default {
       return claims;
     }
 
+    if (paymentMethod.type === 'ethereum') {
+      return {
+        signature: {
+          type: 'eth:transaction',
+          data: toBase58(
+            Buffer.from(
+              JSON.stringify({
+                network: paymentMethod.settings?.ethereum?.chain_id,
+                tx: encodeTransferItx(ethWallet.address, amount!, paymentCurrency.contract),
+              }),
+              'utf-8'
+            )
+          ),
+        },
+      };
+    }
+
     throw new Error(`Payment method ${paymentMethod.type} not supported`);
   },
   onAuth: async ({ request, userDid, claims, extraParams }: CallbackArgs) => {
     const { subscriptionId, currencyId } = extraParams;
     const { invoices, paymentMethod } = await ensureSubscriptionForCollectBatch(subscriptionId, currencyId);
 
-    if (paymentMethod.type === 'arcblock') {
-      const client = paymentMethod.getOcapClient();
-      const claim = claims.find((x) => x.type === 'prepareTx');
-
-      const tx: Partial<Transaction> = client.decodeTx(claim.finalTx);
-      if (claim.delegator && claim.from) {
-        tx.delegator = claim.delegator;
-        tx.from = claim.from;
-      }
-
-      // @ts-ignore
-      const { buffer } = await client.encodeTransferV3Tx({ tx });
-      const txHash = await client.sendTransferV3Tx(
-        // @ts-ignore
-        { tx, wallet: fromAddress(userDid) },
-        getGasPayerExtra(buffer, client.pickGasPayerHeaders(request))
-      );
-
+    const afterTxExecution = async (paymentDetails: any) => {
       const paymentIntents = await PaymentIntent.findAll({
         where: {
           invoice_id: invoices,
@@ -95,11 +98,7 @@ export default {
           capture_method: 'manual',
           last_payment_error: null,
           payment_details: {
-            arcblock: {
-              tx_hash: txHash,
-              payer: userDid,
-              type: 'transfer',
-            },
+            [paymentMethod.type]: paymentDetails,
           },
         });
 
@@ -117,10 +116,52 @@ export default {
           }
         }
       }
+    };
+
+    if (paymentMethod.type === 'arcblock') {
+      const client = paymentMethod.getOcapClient();
+      const claim = claims.find((x) => x.type === 'prepareTx');
+
+      const tx: Partial<Transaction> = client.decodeTx(claim.finalTx);
+      if (claim.delegator && claim.from) {
+        tx.delegator = claim.delegator;
+        tx.from = claim.from;
+      }
+
+      // @ts-ignore
+      const { buffer } = await client.encodeTransferV3Tx({ tx });
+      const txHash = await client.sendTransferV3Tx(
+        // @ts-ignore
+        { tx, wallet: fromAddress(userDid) },
+        getGasPayerExtra(buffer, client.pickGasPayerHeaders(request))
+      );
+      await afterTxExecution({ tx_hash: txHash, payer: userDid, type: 'transfer' });
 
       return { hash: txHash };
     }
+    if (paymentMethod.type === 'ethereum') {
+      const client = paymentMethod.getEvmClient();
+      const claim = claims.find((x) => x.type === 'signature');
 
+      const receipt = await waitForEvmTxReceipt(client, claim.hash);
+      if (!receipt.status) {
+        throw new Error(`EVM Transaction failed: ${claim.hash}`);
+      }
+
+      waitForEvmTxConfirm(client, Number(receipt.blockNumber), paymentMethod.confirmation.block)
+        .then(async () => {
+          await afterTxExecution({
+            tx_hash: claim.hash,
+            block_height: receipt.blockNumber.toString(),
+            gas_used: receipt.gasUsed.toString(),
+            gas_price: receipt.gasPrice.toString(),
+            payer: userDid,
+            type: 'transfer',
+          });
+        })
+        .catch(console.error);
+      return { hash: claim.hash };
+    }
     throw new Error(`Payment method ${paymentMethod.type} not supported`);
   },
 };

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

@@ -6,7 +6,8 @@ import isObject from 'lodash/isObject';
 import pick from 'lodash/pick';
 import uniq from 'lodash/uniq';
 
-import { literal, OrderItem } from 'sequelize';
+import { literal, Op, OrderItem } from 'sequelize';
+import { BN } from '@ocap/util';
 import { createEvent } from '../libs/audit';
 import {
   ensureStripeCustomer,
@@ -82,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(),
@@ -1858,4 +1861,60 @@ router.get('/:id/recharge', authMine, async (req, res) => {
     return res.status(400).json({ error: err.message });
   }
 });
+
+router.get('/:id/overdue/invoices', authPortal, async (req, res) => {
+  try {
+    const subscription = await Subscription.findByPk(req.params.id, {
+      include: [{ model: Customer, as: 'customer' }],
+    });
+    if (!subscription) {
+      return res.status(404).json({ error: 'Subscription not found' });
+    }
+    // @ts-ignore
+    if (subscription.customer?.did !== req.user?.did) {
+      return res.status(403).json({ error: 'You are not allowed to access this subscription' });
+    }
+    const { rows: invoices, count } = await Invoice.findAndCountAll({
+      where: {
+        subscription_id: subscription.id,
+        status: ['uncollectible'],
+        amount_remaining: { [Op.gt]: '0' },
+      },
+      include: [
+        { model: PaymentCurrency, as: 'paymentCurrency' },
+        { model: PaymentMethod, as: 'paymentMethod' },
+      ],
+    });
+    if (count === 0) {
+      return res.json({ subscription, invoices: [], summary: null });
+    }
+    const summary: Record<string, { amount: string; currency: PaymentCurrency; method: PaymentMethod }> = {};
+    invoices.forEach((invoice) => {
+      const key = invoice.currency_id;
+      if (!summary[key]) {
+        summary[key] = {
+          amount: '0',
+          // @ts-ignore
+          currency: invoice.paymentCurrency,
+          // @ts-ignore
+          method: invoice.paymentMethod,
+        };
+      }
+      if (invoice && summary[key]) {
+        // @ts-ignore
+        summary[key].amount = new BN(summary[key]?.amount || '0')
+          .add(new BN(invoice.amount_remaining || '0'))
+          .toString();
+      }
+    });
+    return res.json({
+      subscription,
+      summary,
+      invoices,
+    });
+  } catch (err) {
+    console.error(err);
+    return res.status(400).json({ error: err.message });
+  }
+});
 export default router;

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.16.3",
+  "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.3",
+    "@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.3",
+    "@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": "6accc56a51e4ea0906e65f69dc5f41eaa82685fb"
+  "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`