@blocklet/payment-react 1.24.4 → 1.25.0

package/src/libs/util.ts

@@ -17,7 +17,7 @@ import type {
   TSubscriptionExpanded,
   TSubscriptionItemExpanded,
 } from '@blocklet/payment-types';
-import { BN, fromUnitToToken } from '@ocap/util';
+import { BN, fromUnitToToken, fromTokenToUnit } from '@ocap/util';
 import omit from 'lodash/omit';
 import trimEnd from 'lodash/trimEnd';
 import numbro from 'numbro';
@@ -265,6 +265,136 @@ export function formatNumber(
   return right ? [left, trimEnd(right, '0')].filter(Boolean).join('.') : left;
 }
 
+export function formatDynamicPrice(
+  n: number | string,
+  isDynamic: boolean,
+  precision: number = 6,
+  trim: boolean = true,
+  thousandSeparated: boolean = true
+) {
+  if (!isDynamic) {
+    return formatNumber(n, precision, trim, thousandSeparated);
+  }
+  const num = Number(n);
+  if (!Number.isFinite(num)) {
+    return formatNumber(n, precision, trim, thousandSeparated);
+  }
+  const abs = Math.abs(num);
+  const targetPrecision = abs > 0 && abs < 0.01 ? precision : 2;
+  return formatNumber(n, targetPrecision, trim, thousandSeparated);
+}
+
+const USD_DECIMALS = 8;
+
+export function getUsdAmountFromBaseAmount(
+  amount: string | number | undefined,
+  quantity: number,
+  scale = BASE_AMOUNT_SCALE
+): string | null {
+  if (amount === undefined || amount === null || !quantity || quantity <= 0) {
+    return null;
+  }
+  const scaled = toScaledBaseAmount(amount, quantity, scale);
+  return formatScaledAmount(scaled, scale);
+}
+
+export function getUsdAmountFromTokenUnits(
+  tokenAmount: BN | string,
+  tokenDecimals: number,
+  exchangeRate?: string | null
+): string | null {
+  if (!exchangeRate && exchangeRate !== '0') {
+    return null;
+  }
+  if (tokenDecimals === undefined || tokenDecimals === null) {
+    return null;
+  }
+
+  try {
+    // exchangeRate is in token format (e.g., "0.25535177995959574"), may have more than 8 decimal places
+    // tokenAmount is in unit format (smallest unit)
+    // We need to calculate: (tokenAmount / 10^tokenDecimals) * exchangeRate
+    // To avoid precision loss, we use: (tokenAmount * exchangeRate) / 10^tokenDecimals
+    // But exchangeRate is a decimal string, so we need to handle it carefully
+
+    const amountBN = tokenAmount instanceof BN ? tokenAmount : new BN(tokenAmount || '0');
+    const tokenScale = new BN(10).pow(new BN(tokenDecimals));
+    if (tokenScale.isZero()) {
+      return null;
+    }
+
+    // Convert exchangeRate (token format) to BN with proper precision
+    // exchangeRate may have more than 8 decimal places, so we need to preserve all precision
+    // We'll use a higher precision scale for the rate calculation
+    const rateBN = new BN(exchangeRate.replace('.', ''));
+    const rateDecimalPlaces = exchangeRate.includes('.') ? exchangeRate.split('.')[1]?.length || 0 : 0;
+    const rateScale = new BN(10).pow(new BN(rateDecimalPlaces));
+
+    // Calculate: (amountBN * rateBN * USD_PRECISION_SCALE) / (tokenScale * rateScale)
+    // The USD_PRECISION_SCALE keeps enough trailing digits so the final conversion via fromUnitToToken
+    // produces a value with 8 decimal places.
+    const usdPrecisionScale = new BN(10).pow(new BN(USD_DECIMALS));
+    const usdUnit = amountBN.mul(rateBN).mul(usdPrecisionScale).div(tokenScale.mul(rateScale));
+
+    // Convert from unit format to token format with 8 decimals
+    return fromUnitToToken(usdUnit.toString(), USD_DECIMALS);
+  } catch {
+    return null;
+  }
+}
+
+export function formatUsdAmount(amount: string | null, locale: string = 'en'): string | null {
+  if (!amount && amount !== '0') {
+    return null;
+  }
+  const num = Number(amount);
+  if (!Number.isFinite(num)) {
+    return null;
+  }
+  return new Intl.NumberFormat(locale, {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  }).format(num);
+}
+
+export function formatExchangeRate(amount: string | null): string | null {
+  if (!amount && amount !== '0') {
+    return null;
+  }
+  const value = String(amount);
+  const num = Number(value);
+  if (!Number.isFinite(num)) {
+    return null;
+  }
+  return value;
+}
+
+/**
+ * Format exchange rate with currency symbol for display
+ * @param rate - The exchange rate value
+ * @param currency - The currency code (default: 'USD')
+ * @param decimals - Number of decimal places (default: 2, use 4 for live exchange rates)
+ * @returns Formatted string like "$0.12" for USD, or "0.12 EUR" for other currencies
+ */
+export function formatExchangeRateDisplay(
+  rate: string | number | null | undefined,
+  currency: string = 'USD',
+  decimals: number = 2
+): string | null {
+  if (rate === null || rate === undefined) {
+    return null;
+  }
+  const num = Number(rate);
+  if (!Number.isFinite(num)) {
+    return null;
+  }
+  const formattedValue = num.toFixed(decimals);
+  if (currency === 'USD') {
+    return `$${formattedValue}`;
+  }
+  return `${formattedValue} ${currency}`;
+}
+
 export const formatPrice = (
   price: TPrice,
   currency: TPaymentCurrency,
@@ -280,6 +410,33 @@ export const formatPrice = (
     return `Custom (${currency.symbol})`;
   }
 
+  // For dynamic pricing, display USD reference price
+  if (
+    (price as any).pricing_type === 'dynamic' &&
+    (price as any).base_amount &&
+    (price as any).base_currency === 'USD'
+  ) {
+    const baseAmount = (price as any).base_amount;
+    const usdAmount = Number(baseAmount) * quantity;
+    const formattedUsd = formatUsdAmount(usdAmount.toString(), locale);
+
+    if (price?.type === 'recurring' && price.recurring) {
+      const recurring = formatRecurring(price.recurring, false, 'slash', locale);
+
+      if (unit_label) {
+        return `$${formattedUsd} / ${unit_label} ${recurring}`;
+      }
+      if (price.recurring.usage_type === 'metered') {
+        return `$${formattedUsd} / unit ${recurring}`;
+      }
+
+      return `$${formattedUsd} ${recurring}`;
+    }
+
+    return `$${formattedUsd}`;
+  }
+
+  // For fixed pricing, display token amount
   const unit = getPriceUintAmountByCurrency(price, currency);
   const amount = bn
     ? fromUnitToToken(new BN(unit).mul(new BN(quantity)), currency.decimal).toString()
@@ -305,11 +462,38 @@ export const formatPriceAmount = (
   currency: TPaymentCurrency,
   unit_label?: string,
   quantity: number = 1,
-  bn: boolean = true
+  bn: boolean = true,
+  locale: string = 'en'
 ) => {
   if (!currency) {
     return '';
   }
+
+  // For dynamic pricing, display USD reference price
+  if (
+    (price as any).pricing_type === 'dynamic' &&
+    (price as any).base_amount &&
+    (price as any).base_currency === 'USD'
+  ) {
+    const baseAmount = (price as any).base_amount;
+    const usdAmount = Number(baseAmount) * quantity;
+    const formattedUsd = formatUsdAmount(usdAmount.toString(), locale);
+
+    if (price?.type === 'recurring' && price.recurring) {
+      if (unit_label) {
+        return `$${formattedUsd} / ${unit_label}`;
+      }
+      if (price.recurring.usage_type === 'metered') {
+        return `$${formattedUsd} / unit`;
+      }
+
+      return `$${formattedUsd}`;
+    }
+
+    return `$${formattedUsd}`;
+  }
+
+  // For fixed pricing, display token amount
   const unit = getPriceUintAmountByCurrency(price, currency);
   const amount = bn
     ? fromUnitToToken(new BN(unit).mul(new BN(quantity)), currency.decimal).toString()
@@ -413,26 +597,167 @@ export function getPriceCurrencyOptions(price: TPrice): PriceCurrency[] {
   ];
 }
 
+const BASE_AMOUNT_SCALE = 8;
+
+function formatScaledAmount(value: BN, scale = BASE_AMOUNT_SCALE) {
+  const isNegative = value.isNeg();
+  const absValue = value.abs();
+  const str = absValue.toString().padStart(scale + 1, '0');
+  const integerPart = str.slice(0, str.length - scale) || '0';
+  const fraction = str.slice(-scale).replace(/0+$/, '');
+  const formatted = fraction ? `${integerPart}.${fraction}` : integerPart;
+  return isNegative ? `-${formatted}` : formatted;
+}
+
+function toScaledBaseAmount(amount: string | number | undefined, quantity: number, scale = BASE_AMOUNT_SCALE) {
+  if (!amount || !quantity) {
+    return new BN(0);
+  }
+  const normalized = String(amount);
+  const [integer = '0', fraction = ''] = normalized.split('.');
+  const frac = `${fraction}`.padEnd(scale, '0').slice(0, scale);
+  const digits = `${integer.replace('-', '')}${frac}` || '0';
+  const scaled = new BN(digits).mul(new BN(quantity));
+  return normalized.startsWith('-') ? scaled.neg() : scaled;
+}
+
+export function getLineItemAmounts(
+  item: TLineItemExpanded,
+  currency: TPaymentCurrency,
+  { useUpsell = true, exchangeRate = null }: { useUpsell?: boolean; exchangeRate?: string | null } = {}
+): { unitAmount: BN; totalAmount: BN; isDynamicQuote: boolean } {
+  if (!currency) {
+    return { unitAmount: new BN(0), totalAmount: new BN(0), isDynamicQuote: false };
+  }
+
+  const price = (useUpsell ? item.upsell_price || item.price : item.price) as any;
+  const quantity = new BN(item.quantity || 0);
+  const quoteAmount = (item as any)?.quoted_amount;
+  const quoteCurrencyId = (item as any)?.quote_currency_id;
+  const isDynamicPrice = price?.pricing_type === 'dynamic';
+
+  // For dynamic pricing, only use quoted_amount if the quote was created for the current currency
+  // This prevents using a quote with wrong decimal precision when user switches currencies
+  // e.g., ABT quote (decimal=18) should not be used with USD (decimal=2)
+  const isQuoteValidForCurrency = isDynamicPrice && quoteAmount && quoteCurrencyId === currency.id;
+
+  if (isQuoteValidForCurrency) {
+    const totalAmount = new BN(quoteAmount || '0');
+    const unitAmount = quantity.gt(new BN(0)) ? totalAmount.add(quantity).sub(new BN(1)).div(quantity) : new BN(0);
+
+    return { unitAmount, totalAmount, isDynamicQuote: true };
+  }
+
+  // For dynamic pricing without valid quote, calculate from base_amount and exchange rate
+  if (isDynamicPrice && exchangeRate && price?.base_amount) {
+    const rate = Number(exchangeRate);
+    if (rate > 0 && Number.isFinite(rate)) {
+      // base_amount is stored in dollar format (e.g., "1.00" = $1.00)
+      const baseAmountUsd = Number(price.base_amount);
+      if (baseAmountUsd > 0 && Number.isFinite(baseAmountUsd)) {
+        // Calculate token amount: USD / rate
+        const tokenAmount = baseAmountUsd / rate;
+        const unitAmount = fromTokenToUnit(tokenAmount.toFixed(currency.decimal || 8), currency.decimal || 8);
+        return {
+          unitAmount,
+          totalAmount: unitAmount.mul(quantity),
+          isDynamicQuote: false,
+        };
+      }
+    }
+  }
+
+  // For all other cases (non-dynamic, or quote not valid for current currency), use currency_options
+  const unitAmount = new BN(getPriceUintAmountByCurrency(price, currency));
+  return {
+    unitAmount,
+    totalAmount: unitAmount.mul(quantity),
+    isDynamicQuote: false,
+  };
+}
+
+export type QuoteLockInfo = {
+  baseAmount: string;
+  baseCurrency: string;
+  tokenAmount: string;
+  tokenSymbol: string;
+  expiresAt: number | null;
+};
+
+export function getQuoteLockInfo(items: TLineItemExpanded[], currency?: TPaymentCurrency | null): QuoteLockInfo | null {
+  if (!items?.length || !currency) {
+    return null;
+  }
+
+  const dynamicItems = items.filter((item) => {
+    const price = (item.upsell_price || item.price) as any;
+    return price?.pricing_type === 'dynamic' && (item as any)?.quoted_amount;
+  });
+  if (!dynamicItems.length) {
+    return null;
+  }
+
+  let totalBaseAmount = new BN(0);
+  let totalTokenAmount = new BN(0);
+  let expiresAt: number | null = null;
+
+  dynamicItems.forEach((item) => {
+    const price = (item.upsell_price || item.price) as any;
+    const quoteAmount = new BN((item as any)?.quoted_amount || '0');
+    totalTokenAmount = totalTokenAmount.add(quoteAmount);
+
+    const baseAmount = price?.base_amount;
+    if (baseAmount) {
+      totalBaseAmount = totalBaseAmount.add(toScaledBaseAmount(baseAmount, item.quantity));
+    }
+
+    if ((item as any)?.expires_at) {
+      expiresAt = expiresAt === null ? (item as any)?.expires_at : Math.min(expiresAt, (item as any)?.expires_at);
+    }
+  });
+
+  return {
+    baseAmount: formatScaledAmount(totalBaseAmount, BASE_AMOUNT_SCALE),
+    baseCurrency: ((dynamicItems[0]?.upsell_price || dynamicItems[0]?.price) as any)?.base_currency || 'USD',
+    tokenAmount: fromUnitToToken(totalTokenAmount, currency.decimal).toString(),
+    tokenSymbol: currency.symbol,
+    expiresAt,
+  };
+}
+
 export function formatLineItemPricing(
   item: TLineItemExpanded,
   currency: TPaymentCurrency,
-  { trialEnd, trialInDays }: { trialEnd: number; trialInDays: number },
+  {
+    trialEnd,
+    trialInDays,
+    exchangeRate = null,
+  }: { trialEnd: number; trialInDays: number; exchangeRate?: string | null },
   locale: string = 'en'
 ): { primary: string; secondary?: string; quantity: string } {
   if (!currency) {
     return { primary: '', secondary: '', quantity: '' };
   }
   const price = item.upsell_price || item.price;
+  if (!price) {
+    return { primary: '', secondary: '', quantity: '' };
+  }
 
   let quantity = t('common.qty', locale, { count: item.quantity });
   if (price.recurring?.usage_type === 'metered' || +item.quantity === 1) {
     quantity = '';
   }
-  const unitValue = new BN(getPriceUintAmountByCurrency(price, currency));
+  const { unitAmount, totalAmount } = getLineItemAmounts(item, currency, { exchangeRate });
+  const isDynamic = (price as any)?.pricing_type === 'dynamic';
+
+  const formatLineItemAmount = (bn: BN) => {
+    const value = fromUnitToToken(bn, currency.decimal);
+    return formatDynamicPrice(value, isDynamic, 6);
+  };
 
-  const total = `${fromUnitToToken(unitValue.mul(new BN(item.quantity)), currency.decimal)} ${currency.symbol}`;
+  const total = `${formatLineItemAmount(totalAmount)} ${currency.symbol}`;
 
-  const unit = `${fromUnitToToken(unitValue, currency.decimal)} ${currency.symbol}`;
+  const unit = `${formatLineItemAmount(unitAmount)} ${currency.symbol}`;
 
   const trialResult = getFreeTrialTime({ trialInDays, trialEnd }, locale);
 
@@ -563,9 +888,16 @@ export function getCheckoutAmount(
   items: TLineItemExpanded[],
   currency: TPaymentCurrency,
   trialing = false,
-  upsell = true
+  upsell = true,
+  { exchangeRate = null }: { exchangeRate?: string | null } = {}
 ) {
-  if (items.find((x) => (x.upsell_price || x.price).custom_unit_amount) && items.length > 1) {
+  if (
+    items.find((x) => {
+      const price = upsell ? x.upsell_price || x.price : x.price;
+      return price?.custom_unit_amount;
+    }) &&
+    items.length > 1
+  ) {
     throw new Error('Multiple items with custom unit amount are not supported');
   }
 
@@ -576,20 +908,22 @@ export function getCheckoutAmount(
       return price != null;
     })
     .reduce((acc, x) => {
-      if (x.custom_amount) {
+      // For custom_amount, we need to check if it was created for the current currency
+      // custom_amount can be set from: 1) quoted_amount when a quote is applied, or 2) user input for custom pricing
+      // If quote_currency_id exists and doesn't match current currency, we should NOT use custom_amount
+      // because the quote was created for a different currency (e.g., ABT quote shouldn't be used for USD)
+      const quoteCurrencyId = (x as any)?.quote_currency_id;
+      const isQuoteForDifferentCurrency = quoteCurrencyId && quoteCurrencyId !== currency.id;
+
+      if (x.custom_amount && !isQuoteForDifferentCurrency) {
         return acc.add(new BN(x.custom_amount));
       }
 
       const price = upsell ? x.upsell_price || x.price : x.price;
-      const unitPrice = getPriceUintAmountByCurrency(price, currency);
-      if (price.custom_unit_amount) {
-        if (unitPrice) {
-          return acc.add(new BN(unitPrice).mul(new BN(x.quantity)));
-        }
-      }
+      const { totalAmount } = getLineItemAmounts(x, currency, { useUpsell: upsell, exchangeRate });
 
       if (price?.type === 'recurring') {
-        renew = renew.add(new BN(unitPrice).mul(new BN(x.quantity)));
+        renew = renew.add(totalAmount);
 
         if (trialing) {
           return acc;
@@ -599,11 +933,18 @@ export function getCheckoutAmount(
         }
       }
 
-      return acc.add(new BN(unitPrice).mul(new BN(x.quantity)));
+      return acc.add(totalAmount);
     }, new BN(0))
     .toString();
 
-  return { subtotal: total, total, renew: renew.toString(), discount: '0', shipping: '0', tax: '0' };
+  return {
+    subtotal: total,
+    total,
+    renew: formatDynamicPrice(renew.toString(), !!exchangeRate),
+    discount: '0',
+    shipping: '0',
+    tax: '0',
+  };
 }
 
 export function getRecurringPeriod(recurring: PriceRecurring) {
@@ -631,7 +972,7 @@ export function formatUpsellSaving(items: TLineItemExpanded[], currency: TPaymen
   if (items[0]?.upsell_price_id) {
     return '0';
   }
-  if (!items[0]?.price.upsell?.upsells_to) {
+  if (!items[0]?.price?.upsell?.upsells_to) {
     return '0';
   }
 
@@ -673,6 +1014,18 @@ export function formatMeteredThen(
   return t('payment.checkout.then', locale, { subscription, recurring });
 }
 
+export function formatThenValue(
+  subscription: string,
+  recurring: string,
+  hasMetered: boolean,
+  locale: string = 'en'
+): string {
+  if (hasMetered) {
+    return t('payment.checkout.metered', locale, { recurring });
+  }
+  return [subscription, recurring].filter(Boolean).join(' ');
+}
+
 export function formatPriceDisplay(
   { amount, then, actualAmount, showThen }: { amount: string; then?: string; actualAmount: string; showThen?: boolean },
   recurring: string,
@@ -742,18 +1095,20 @@ export function formatCheckoutHeadlines(
   items: TLineItemExpanded[],
   currency: TPaymentCurrency,
   { trialInDays, trialEnd }: { trialInDays: number; trialEnd: number },
-  locale: string = 'en'
+  locale: string = 'en',
+  { exchangeRate = null }: { exchangeRate?: string | null } = {}
 ): {
   action: string;
   amount: string;
   then?: string;
+  thenValue?: string;
   secondary?: string;
   showThen?: boolean;
   actualAmount: string;
   priceDisplay: string;
 } {
   const brand = getStatementDescriptor(items);
-  const { total } = getCheckoutAmount(items, currency, trialInDays > 0);
+  const { total } = getCheckoutAmount(items, currency, trialInDays > 0, true, { exchangeRate });
   const actualAmount = fromUnitToToken(total, currency.decimal);
   const amount = `${fromUnitToToken(total, currency.decimal)} ${currency.symbol}`;
   const trialResult = getFreeTrialTime({ trialInDays, trialEnd }, locale);
@@ -769,10 +1124,10 @@ export function formatCheckoutHeadlines(
     };
   }
 
-  const { name } = items[0]?.price.product || { name: '' };
+  const { name } = items[0]?.price?.product || { name: '' };
 
   // all one time
-  if (items.every((x) => x.price.type === 'one_time')) {
+  if (items.every((x) => x.price?.type === 'one_time')) {
     const action = t('payment.checkout.pay', locale, { payee: brand });
     if (items.length > 1) {
       return { action, amount, actualAmount, priceDisplay: amount };
@@ -781,31 +1136,34 @@ export function formatCheckoutHeadlines(
     return { action, amount, then: '', actualAmount, priceDisplay: amount };
   }
 
-  const item = items.find((x) => x.price.type === 'recurring');
+  const item = items.find((x) => x.price?.type === 'recurring');
   const recurring = formatRecurring(
     (item?.upsell_price || item?.price)?.recurring as PriceRecurring,
     false,
     'per',
     locale
   );
-  const hasMetered = items.some((x) => x.price.type === 'recurring' && x.price.recurring?.usage_type === 'metered');
+
+  const hasMetered = items.some((x) => x.price?.type === 'recurring' && x.price?.recurring?.usage_type === 'metered');
   const differentRecurring = hasMultipleRecurringIntervals(items);
   // all recurring
-  if (items.every((x) => x.price.type === 'recurring')) {
+  if (items.every((x) => x.price?.type === 'recurring')) {
     // check if there has different recurring price
     const subscription = [
       hasMetered ? t('payment.checkout.least', locale) : '',
-      fromUnitToToken(
-        items.reduce((acc, x) => {
-          if (x.price.recurring?.usage_type === 'metered') {
-            return acc;
-          }
-
-          return acc.add(
-            new BN(getPriceUintAmountByCurrency(x.upsell_price || x.price, currency)).mul(new BN(x.quantity))
-          );
-        }, new BN(0)),
-        currency.decimal
+      formatDynamicPrice(
+        fromUnitToToken(
+          items.reduce((acc, x) => {
+            const price = (x.upsell_price || x.price) as any;
+            if (price?.recurring?.usage_type === 'metered') {
+              return acc;
+            }
+
+            return acc.add(getLineItemAmounts(x, currency, { exchangeRate }).totalAmount);
+          }, new BN(0)),
+          currency.decimal
+        ),
+        !!exchangeRate
       ),
       currency.symbol,
     ]
@@ -813,91 +1171,148 @@ export function formatCheckoutHeadlines(
       .join(' ');
     if (items.length > 1) {
       if (trialResult.count > 0) {
+        const thenDisplay = formatMeteredThen(
+          subscription,
+          recurring,
+          hasMetered && Number(subscription) === 0,
+          locale
+        );
+        const thenValue = formatThenValue(subscription, recurring, hasMetered && Number(subscription) === 0, locale);
         const result = {
           action: t('payment.checkout.try2', locale, { name, count: items.length - 1 }),
           amount: t('payment.checkout.free', locale, { count: trialResult.count, interval: trialResult.interval }),
-          then: formatMeteredThen(subscription, recurring, hasMetered && Number(subscription) === 0, locale),
+          then: thenDisplay,
+          thenValue,
           showThen: true,
           actualAmount: '0',
         };
         return {
           ...result,
-          priceDisplay: formatPriceDisplay(result, recurring, hasMetered, locale),
+          priceDisplay: formatPriceDisplay(
+            { amount: result.amount, then: thenDisplay, actualAmount: result.actualAmount, showThen: result.showThen },
+            recurring,
+            hasMetered,
+            locale
+          ),
         };
       }
+      const thenDisplay = hasMetered ? t('payment.checkout.meteredThen', locale, { recurring }) : recurring;
+      const thenValue = hasMetered ? t('payment.checkout.metered', locale, { recurring }) : recurring;
       const result = {
         action: t('payment.checkout.sub2', locale, { name, count: items.length - 1 }),
         amount,
-        then: hasMetered ? t('payment.checkout.meteredThen', locale, { recurring }) : recurring,
+        then: thenDisplay,
+        thenValue,
         showThen: hasMetered,
         actualAmount,
       };
       return {
         ...result,
-        priceDisplay: formatPriceDisplay(result, recurring, hasMetered, locale),
+        priceDisplay: formatPriceDisplay(
+          { amount: result.amount, then: thenDisplay, actualAmount: result.actualAmount, showThen: result.showThen },
+          recurring,
+          hasMetered,
+          locale
+        ),
       };
     }
 
     if (trialResult.count > 0) {
+      const thenDisplay = formatMeteredThen(subscription, recurring, hasMetered && Number(subscription) === 0, locale);
+      const thenValue = formatThenValue(subscription, recurring, hasMetered && Number(subscription) === 0, locale);
       const result = {
         action: t('payment.checkout.try1', locale, { name }),
         amount: t('payment.checkout.free', locale, { count: trialResult.count, interval: trialResult.interval }),
-        then: formatMeteredThen(subscription, recurring, hasMetered && Number(subscription) === 0, locale),
+        then: thenDisplay,
+        thenValue,
         showThen: true,
         actualAmount: '0',
       };
       return {
         ...result,
-        priceDisplay: formatPriceDisplay(result, recurring, hasMetered, locale),
+        priceDisplay: formatPriceDisplay(
+          { amount: result.amount, then: thenDisplay, actualAmount: result.actualAmount, showThen: result.showThen },
+          recurring,
+          hasMetered,
+          locale
+        ),
       };
     }
+    const thenDisplay = hasMetered ? t('payment.checkout.meteredThen', locale, { recurring }) : recurring;
+    const thenValue = hasMetered ? t('payment.checkout.metered', locale, { recurring }) : recurring;
     const result = {
       action: t('payment.checkout.sub1', locale, { name }),
       amount,
-      then: hasMetered ? t('payment.checkout.meteredThen', locale, { recurring }) : recurring,
+      then: thenDisplay,
+      thenValue,
       showThen: hasMetered && !differentRecurring,
       actualAmount,
     };
     return {
       ...result,
-      priceDisplay: formatPriceDisplay(result, recurring, hasMetered, locale),
+      priceDisplay: formatPriceDisplay(
+        { amount: result.amount, then: thenDisplay, actualAmount: result.actualAmount, showThen: result.showThen },
+        recurring,
+        hasMetered,
+        locale
+      ),
     };
   }
 
   // mixed
   const subscription = fromUnitToToken(
     items
-      .filter((x) => x.price.type === 'recurring')
+      .filter((x) => x.price?.type === 'recurring')
       .reduce((acc, x) => {
-        if (x.price.recurring?.usage_type === 'metered') {
+        if (x.price?.recurring?.usage_type === 'metered') {
           return acc;
         }
-        return acc.add(new BN(getPriceUintAmountByCurrency(x.price, currency)).mul(new BN(x.quantity)));
+        return acc.add(getLineItemAmounts(x, currency, { useUpsell: false, exchangeRate }).totalAmount);
       }, new BN(0)),
     currency.decimal
   );
 
+  const thenDisplay = formatMeteredThen(
+    `${subscription} ${currency.symbol}`,
+    recurring,
+    hasMetered && Number(subscription) === 0,
+    locale
+  );
+  const thenValue = formatThenValue(
+    `${subscription} ${currency.symbol}`,
+    recurring,
+    hasMetered && Number(subscription) === 0,
+    locale
+  );
   const result = {
     action: t('payment.checkout.pay', locale, { payee: brand }),
     amount,
-    then: formatMeteredThen(
-      `${subscription} ${currency.symbol}`,
-      recurring,
-      hasMetered && Number(subscription) === 0,
-      locale
-    ),
+    then: thenDisplay,
+    thenValue,
     showThen: !differentRecurring,
     actualAmount,
   };
 
   return {
     ...result,
-    priceDisplay: formatPriceDisplay(result, recurring, hasMetered, locale),
+    priceDisplay: formatPriceDisplay(
+      { amount: result.amount, then: thenDisplay, actualAmount: result.actualAmount, showThen: result.showThen },
+      recurring,
+      hasMetered,
+      locale
+    ),
   };
 }
 
-export function formatAmount(amount: string, decimals: number) {
-  return fromUnitToToken(amount, decimals);
+export function formatAmount(amount: string, decimals: number, precision: number = 2) {
+  const tokenAmount = fromUnitToToken(amount, decimals);
+  const numericValue = Number(tokenAmount);
+  if (!Number.isFinite(numericValue)) {
+    return formatBNStr(amount, decimals, precision, true, false);
+  }
+  const abs = Math.abs(numericValue);
+  const targetPrecision = abs > 0 && abs < 0.01 ? decimals : 2;
+  return formatNumber(tokenAmount, targetPrecision, true, false);
 }
 
 export function findCurrency(methods: TPaymentMethodExpanded[], currencyId: string): TPaymentCurrencyExpanded | null {
@@ -1386,7 +1801,7 @@ export function showStaking(method: TPaymentMethod, currency: TPaymentCurrency,
   if (noStake) {
     return false;
   }
-  if (method.type === 'arcblock') {
+  if (method && method.type === 'arcblock') {
     return currency.type !== 'credit';
   }
   return false;