payment-kit 1.13.44 → 1.13.46

package/api/src/integrations/stripe/handlers/invoice.ts

@@ -176,7 +176,7 @@ export async function ensureStripeInvoice(stripeInvoice: any, subscription: Subs
 }
 
 export async function handleStripeInvoiceCreated(event: TEventExpanded, client: Stripe) {
-  if (['invoice.created', 'payment_intent.created'].includes(event.type) === false) {
+  if (['invoice.created', 'payment_intent.created', 'payment_intent.succeeded'].includes(event.type) === false) {
     logger.warn('abort because event type not expected', { id: event.id, type: event.type });
     return null;
   }

package/api/src/integrations/stripe/handlers/payment-intent.ts

@@ -4,9 +4,10 @@ import pick from 'lodash/pick';
 import pWaitFor from 'p-wait-for';
 import type Stripe from 'stripe';
 
+import { handlePaymentSucceed } from '../../../jobs/payment';
 import dayjs from '../../../libs/dayjs';
 import logger from '../../../libs/logger';
-import { CheckoutSession, Invoice, PaymentIntent, PaymentMethod, TEventExpanded } from '../../../store/models';
+import { Invoice, PaymentIntent, PaymentMethod, TEventExpanded } from '../../../store/models';
 import { handleStripeInvoiceCreated } from './invoice';
 
 export async function handleStripePaymentSucceed(paymentIntent: PaymentIntent, event?: TEventExpanded) {
@@ -20,30 +21,7 @@ export async function handleStripePaymentSucceed(paymentIntent: PaymentIntent, e
   });
   logger.info('payment intent succeeded on stripe event', { locale: paymentIntent.id });
 
-  const checkoutSession = await CheckoutSession.findOne({ where: { payment_intent_id: paymentIntent.id } });
-  if (checkoutSession) {
-    await checkoutSession.update({
-      status: 'complete',
-      payment_status: 'paid',
-      payment_details: paymentIntent.payment_details,
-    });
-  }
-
-  if (paymentIntent.invoice_id) {
-    const invoice = await Invoice.findByPk(paymentIntent.invoice_id);
-    if (invoice && invoice.status !== 'paid') {
-      await invoice.update({
-        paid: true,
-        status: 'paid',
-        amount_due: '0',
-        amount_paid: paymentIntent.amount,
-        amount_remaining: '0',
-        attempt_count: invoice.attempt_count + 1,
-        attempted: true,
-        status_transitions: { ...invoice.status_transitions, paid_at: dayjs().unix() },
-      });
-    }
-  }
+  await handlePaymentSucceed(paymentIntent);
 }
 
 export async function syncStripPayment(paymentIntent: PaymentIntent) {
@@ -59,6 +37,8 @@ export async function syncStripPayment(paymentIntent: PaymentIntent) {
   const client = await method.getStripeClient();
   const stripeIntent = await client.paymentIntents.retrieve(paymentIntent.metadata.stripe_id);
   if (stripeIntent) {
+    const justSucceed = stripeIntent.status === 'succeeded' && paymentIntent.status !== 'succeeded';
+
     // @ts-ignore
     await paymentIntent.update({
       amount: String(stripeIntent.amount),
@@ -68,6 +48,10 @@ export async function syncStripPayment(paymentIntent: PaymentIntent) {
       ...pick(stripeIntent, ['status', 'confirmation_method', 'capture_method', 'last_payment_error']),
     });
     logger.info('stripe payment intent synced', { locale: paymentIntent.id, remote: stripeIntent.id });
+
+    if (justSucceed) {
+      await handlePaymentSucceed(paymentIntent);
+    }
   }
 }
 

package/api/src/jobs/payment.ts

@@ -19,6 +19,62 @@ type PaymentJob = {
   retryOnError?: boolean;
 };
 
+export const handlePaymentSucceed = async (paymentIntent: PaymentIntent) => {
+  let invoice;
+  if (paymentIntent.invoice_id) {
+    invoice = await Invoice.findByPk(paymentIntent.invoice_id);
+  }
+  if (!invoice) {
+    const checkoutSession = await CheckoutSession.findOne({ where: { payment_intent_id: paymentIntent.id } });
+    if (checkoutSession && checkoutSession.status === 'open') {
+      await checkoutSession.update({
+        status: 'complete',
+        payment_status: 'paid',
+        payment_details: paymentIntent.payment_details,
+      });
+      logger.info(`CheckoutSession ${checkoutSession.id} updated on payment done ${paymentIntent.id}`);
+    }
+    return;
+  }
+
+  await invoice.update({
+    paid: true,
+    status: 'paid',
+    amount_due: '0',
+    amount_paid: paymentIntent.amount,
+    amount_remaining: '0',
+    attempt_count: invoice.attempt_count + 1,
+    attempted: true,
+    status_transitions: { ...invoice.status_transitions, paid_at: dayjs().unix() },
+  });
+  logger.info(`Invoice ${invoice.id} updated on payment done: ${paymentIntent.id}`);
+
+  if (invoice.subscription_id) {
+    const subscription = await Subscription.findByPk(invoice.subscription_id);
+    if (subscription) {
+      if (subscription.status === 'incomplete') {
+        await subscription.update({ status: subscription.trail_end ? 'trialing' : 'active' });
+        logger.info(`Subscription ${subscription.id} updated on payment done ${invoice.id}`);
+      } else {
+        await subscription.update({ status: 'active' });
+        logger.info(`Subscription ${subscription.id} moved to active after payment done ${paymentIntent.id}`);
+      }
+    }
+  }
+
+  if (invoice.checkout_session_id) {
+    const checkoutSession = await CheckoutSession.findByPk(invoice.checkout_session_id);
+    if (checkoutSession && checkoutSession.status === 'open') {
+      await checkoutSession.update({
+        status: 'complete',
+        payment_status: 'paid',
+        payment_details: paymentIntent.payment_details,
+      });
+      logger.info(`CheckoutSession ${checkoutSession.id} updated on payment done ${paymentIntent.id}`);
+    }
+  }
+};
+
 export const handlePayment = async (job: PaymentJob) => {
   logger.info('handle payment', job);
 
@@ -110,49 +166,7 @@ export const handlePayment = async (job: PaymentJob) => {
       },
     });
 
-    if (invoice) {
-      await invoice.update({
-        paid: true,
-        status: 'paid',
-        amount_due: '0',
-        amount_paid: paymentIntent.amount,
-        amount_remaining: '0',
-        attempt_count: invoice.attempt_count + 1,
-        attempted: true,
-        status_transitions: { ...invoice.status_transitions, paid_at: dayjs().unix() },
-      });
-      logger.info(`Invoice ${invoice.id} updated on payment done: ${job.paymentIntentId}`);
-
-      if (invoice.subscription_id) {
-        const subscription = await Subscription.findByPk(invoice.subscription_id);
-        if (subscription) {
-          if (subscription.status === 'incomplete') {
-            await subscription.update({ status: subscription.trail_end ? 'trialing' : 'active' });
-            logger.info(`Subscription ${subscription.id} updated on payment done ${invoice.id}`);
-          } else {
-            await subscription.update({ status: 'active' });
-            logger.info(`Subscription ${subscription.id} moved to active after payment done ${invoice.id}`);
-          }
-        }
-      }
-
-      if (invoice.checkout_session_id) {
-        const checkoutSession = await CheckoutSession.findByPk(invoice.checkout_session_id);
-        if (checkoutSession && checkoutSession.status === 'open') {
-          await checkoutSession.update({
-            status: 'complete',
-            payment_status: 'paid',
-            payment_details: {
-              arcblock: {
-                tx_hash: txHash,
-                payer: payer as string,
-              },
-            },
-          });
-          logger.info(`CheckoutSession ${checkoutSession.id} updated on payment done ${invoice.id}`);
-        }
-      }
-    }
+    await handlePaymentSucceed(paymentIntent);
   } catch (err) {
     logger.error('PaymentIntent capture failed', { error: err, id: paymentIntent.id });
 
@@ -165,10 +179,27 @@ export const handlePayment = async (job: PaymentJob) => {
       payment_method_type: paymentMethod.type,
     };
 
-    if (invoice && job.retryOnError) {
+    if (!job.retryOnError) {
+      // To a final state without any retry
+      await paymentIntent.update({ status: 'requires_action', last_payment_error: error });
+      if (invoice) {
+        await invoice.update({
+          status: 'uncollectible',
+          attempt_count: invoice.attempt_count + 1,
+          attempted: true,
+          status_transitions: { ...invoice.status_transitions, marked_uncollectible_at: dayjs().unix() },
+        });
+      }
+    } else if (invoice) {
       if (invoice.attempt_count > MAX_RETRY_COUNT) {
         await paymentIntent.update({ status: 'requires_action', last_payment_error: error });
-        await invoice.update({ status: 'uncollectible' });
+        await invoice.update({
+          status: 'uncollectible',
+          attempt_count: invoice.attempt_count + 1,
+          attempted: true,
+          status_transitions: { ...invoice.status_transitions, marked_uncollectible_at: dayjs().unix() },
+        });
+
         // FIXME: send email to customer, pause subscription
         logger.error('PaymentIntent capture failed after max retry', { id: paymentIntent.id });
       } else {
@@ -189,9 +220,6 @@ export const handlePayment = async (job: PaymentJob) => {
           runAt: retryAt,
         });
       }
-    } else {
-      logger.error('PaymentIntent status reverted on capture error', { id: paymentIntent.id });
-      await paymentIntent.update({ status: 'requires_capture' });
     }
   }
 };

package/api/src/libs/session.ts

@@ -287,7 +287,7 @@ export function getFastCheckoutAmount(
   mode: string,
   currency: TPaymentCurrency,
   includeFreeTrial = false,
-  minimumCycle = 2
+  minimumCycle = 1
 ) {
   if (minimumCycle < 1) {
     // eslint-disable-next-line no-param-reassign

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

@@ -2,10 +2,9 @@ import type { Transaction, TransferV3Tx } from '@ocap/client';
 import { fromAddress } from '@ocap/wallet';
 
 import { invoiceQueue } from '../../jobs/invoice';
-import { paymentQueue } from '../../jobs/payment';
+import { handlePaymentSucceed, paymentQueue } from '../../jobs/payment';
 import type { CallbackArgs } from '../../libs/auth';
 import { wallet } from '../../libs/auth';
-import dayjs from '../../libs/dayjs';
 import { getTxMetadata } from '../../libs/util';
 import { ensureInvoiceForCollect, getAuthPrincipalClaim } from './shared';
 
@@ -83,16 +82,7 @@ export default {
         },
       });
 
-      await invoice.update({
-        paid: true,
-        status: 'paid',
-        amount_due: '0',
-        amount_paid: invoice.amount_due,
-        amount_remaining: '0',
-        attempt_count: invoice.attempt_count + 1,
-        status_transitions: { ...invoice.status_transitions, paid_at: dayjs().unix() },
-        collection_method: 'send_invoice',
-      });
+      await handlePaymentSucceed(paymentIntent);
 
       // cleanup the queue
       let exist = await paymentQueue.get(paymentIntent.id);

package/api/src/routes/connect/pay.ts

@@ -1,9 +1,9 @@
 import type { Transaction, TransferV3Tx } from '@ocap/client';
 import { fromAddress } from '@ocap/wallet';
 
+import { handlePaymentSucceed } from '../../jobs/payment';
 import type { CallbackArgs } from '../../libs/auth';
 import { wallet } from '../../libs/auth';
-import dayjs from '../../libs/dayjs';
 import { getTxMetadata } from '../../libs/util';
 import { ensureInvoiceForCheckout, ensurePaymentIntent, getAuthPrincipalClaim } from './shared';
 
@@ -60,7 +60,7 @@ export default {
       throw new Error('Payment intent not found');
     }
 
-    const { invoice } = await ensureInvoiceForCheckout({ checkoutSession, customer, paymentIntent });
+    await ensureInvoiceForCheckout({ checkoutSession, customer, paymentIntent });
 
     if (paymentMethod.type === 'arcblock') {
       await paymentIntent.update({ status: 'processing' });
@@ -79,16 +79,6 @@ export default {
         { headers: client.pickGasPayerHeaders(request) }
       );
 
-      await checkoutSession.update({
-        status: 'complete',
-        payment_status: 'paid',
-        payment_details: {
-          arcblock: {
-            tx_hash: txHash,
-            payer: userDid,
-          },
-        },
-      });
       await paymentIntent.update({
         status: 'succeeded',
         amount_received: paymentIntent.amount,
@@ -100,18 +90,7 @@ export default {
         },
       });
 
-      if (invoice) {
-        await invoice.update({
-          paid: true,
-          status: 'paid',
-          amount_due: '0',
-          amount_paid: paymentIntent.amount,
-          amount_remaining: '0',
-          attempt_count: invoice.attempt_count + 1,
-          attempted: true,
-          status_transitions: { ...invoice.status_transitions, paid_at: dayjs().unix() },
-        });
-      }
+      await handlePaymentSucceed(paymentIntent);
 
       return { hash: txHash };
     }

package/api/src/routes/connect/subscribe.ts

@@ -124,7 +124,6 @@ export default {
         },
       });
 
-      // FIXME: handle error on the invoice payment job
       if (invoice) {
         invoiceQueue.push({ id: invoice.id, job: { invoiceId: invoice.id, retryOnError: false } });
       }

package/api/src/routes/prices.ts

@@ -1,4 +1,4 @@
-import { fromTokenToUnit } from '@ocap/util';
+import { fromTokenToUnit, fromUnitToToken } from '@ocap/util';
 import { Router } from 'express';
 import Joi from 'joi';
 import pick from 'lodash/pick';
@@ -114,20 +114,20 @@ router.get('/:id/upsell', auth, async (req, res) => {
 // update price
 // FIXME: upsell validate https://stripe.com/docs/payments/checkout/upsells
 router.put('/:id', auth, async (req, res) => {
-  const price = await Price.findByPkOrLookupKey(req.params.id as string);
+  const doc = await Price.findByPkOrLookupKey(req.params.id as string);
 
-  if (!price) {
+  if (!doc) {
     return res.status(404).json({ error: 'price not found' });
   }
 
-  if (price.active === false) {
+  if (doc.active === false) {
     return res.status(403).json({ error: 'price archived' });
   }
 
   const updates: Partial<Price> = Price.formatBeforeSave(
     pick(
       req.body,
-      price.locked
+      doc.locked
         ? ['nickname', 'description', 'metadata', 'currency_options', 'upsell']
         : ['type', 'model', 'active', 'livemode', 'nickname', 'recurring', 'description', 'tiers', 'unit_amount', 'transform_quantity', 'metadata', 'lookup_key', 'currency_options', 'upsell'] // prettier-ignore
     )
@@ -135,38 +135,41 @@ router.put('/:id', auth, async (req, res) => {
 
   if (updates.lookup_key) {
     const exist = await Price.findOne({ where: { lookup_key: updates.lookup_key } });
-    if (exist && exist.id !== price.id) {
+    if (exist && exist.id !== doc.id) {
       return res.status(400).json({ error: `lookup_key ${updates.lookup_key} already used by ${exist.id}` });
     }
   }
 
   const currencies = await PaymentCurrency.findAll({ where: { active: true } });
-  const currency = currencies.find((x) => x.id === price.currency_id);
+  const currency = 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: ${price.currency_id}` });
+    return res.status(400).json({ error: `currency used in price not found or not active: ${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);
+      if (exist) {
+        exist.unit_amount = fromUnitToToken(updates.unit_amount as string, currency.decimal);
+      }
+    }
   }
   if (updates.currency_options) {
     updates.currency_options = Price.formatCurrencies(updates.currency_options, currencies);
-    if (updates.currency_options.some((x) => x.currency_id === price.currency_id) === false) {
+    const index = updates.currency_options.findIndex((x) => x.currency_id === doc.currency_id);
+    if (index > -1) {
+      updates.unit_amount = updates.currency_options[index]?.unit_amount;
+    } else {
       updates.currency_options.unshift({
-        currency_id: price.currency_id,
-        unit_amount: price.unit_amount,
+        currency_id: doc.currency_id,
+        unit_amount: doc.unit_amount,
         tiers: null,
         custom_unit_amount: null,
       });
     }
-    if (updates.unit_amount) {
-      const base = price.currency_options.find((x) => x.currency_id === price.currency_id);
-      if (base) {
-        base.unit_amount = updates.unit_amount;
-      }
-    }
   }
 
-  await price.update(Price.formatBeforeSave(updates));
+  await doc.update(Price.formatBeforeSave(updates));
 
   return res.json(await getExpandedPrice(req.params.id as string));
 });

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

@@ -344,9 +344,11 @@ router.post('/:id/checkout/:priceId', async (req, res) => {
     },
   });
 
+  const currency = await PaymentCurrency.findOne({ where: { livemode: doc.livemode, is_base_currency: true } });
+
   raw.livemode = doc.livemode;
   raw.created_via = 'portal';
-  raw.currency_id = req.currency.id;
+  raw.currency_id = currency?.id;
 
   if (req.query.redirect) {
     raw.success_url = req.query.redirect as string;

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.13.44",
+  "version": "1.13.46",
   "scripts": {
     "dev": "blocklet dev",
     "eject": "vite eject",
@@ -103,7 +103,7 @@
     "@abtnode/types": "1.16.17",
     "@arcblock/eslint-config": "^0.2.4",
     "@arcblock/eslint-config-ts": "^0.2.4",
-    "@did-pay/types": "1.13.44",
+    "@did-pay/types": "1.13.46",
     "@types/cookie-parser": "^1.4.5",
     "@types/cors": "^2.8.15",
     "@types/dotenv-flow": "^3.3.2",
@@ -140,5 +140,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "77f57fdf65d8b465f818f81f410274adf2f60bc6"
+  "gitHead": "7c37d3e6f4814056ddc98033b257707fbefba2d9"
 }

package/src/components/checkout/form/index.tsx

@@ -28,6 +28,14 @@ const waitForCheckoutComplete = (sessionId: string) => {
   return pWaitFor(
     async () => {
       const { data } = await api.get(`/api/checkout-sessions/retrieve/${sessionId}`);
+      if (
+        data.paymentIntent &&
+        data.paymentIntent.status === 'requires_action' &&
+        data.paymentIntent.last_payment_error
+      ) {
+        throw new Error(data.paymentIntent.last_payment_error.message);
+      }
+
       return (
         data.checkoutSession?.status === 'complete' &&
         ['paid', 'no_payment_required'].includes(data.checkoutSession?.payment_status)

package/src/components/checkout/product-item.tsx

@@ -23,10 +23,10 @@ ProductItem.defaultProps = {
 };
 
 export default function ProductItem({ item, session, currency, mode, children, onUpsell, onDownsell }: Props) {
-  const { t } = useLocaleContext();
-  const pricing = formatLineItemPricing(item, currency, session.subscription_data?.trial_period_days || 0);
+  const { t, locale } = useLocaleContext();
+  const pricing = formatLineItemPricing(item, currency, session.subscription_data?.trial_period_days || 0, locale);
   const saving = formatUpsellSaving(session, currency);
-  const metered = item.price?.recurring?.usage_type === 'metered' ? ' based on usage' : '';
+  const metered = item.price?.recurring?.usage_type === 'metered' ? t('common.metered') : '';
   const canUpsell = mode === 'normal' && session.line_items.length === 1;
   return (
     <Stack direction="column" alignItems="flex-start" spacing={1} sx={{ width: '100%' }}>
@@ -38,7 +38,7 @@ export default function ProductItem({ item, session, currency, mode, children, o
             description={item.price.product?.description}
             extra={
               item.price.type === 'recurring' && item.price.recurring
-                ? [pricing.quantity, `billed ${formatRecurring(item.upsell_price?.recurring || item.price.recurring)} ${metered}`].filter(Boolean).join(', ') // prettier-ignore
+                ? [pricing.quantity, t('common.billed', { rule: `${formatRecurring(item.upsell_price?.recurring || item.price.recurring, true, 'per', locale)} ${metered}` })].filter(Boolean).join(', ') // prettier-ignore
                 : pricing.quantity
             }
           />
@@ -71,12 +71,12 @@ export default function ProductItem({ item, session, currency, mode, children, o
               onChange={() => onUpsell(item.price_id, item.price.upsell?.upsells_to_id)}
             />
             {t('checkout.upsell.save', {
-              recurring: t(`common.${formatRecurring(item.price.upsell.upsells_to.recurring as PriceRecurring)}`),
+              recurring: formatRecurring(item.price.upsell.upsells_to.recurring as PriceRecurring, true, 'per', locale),
             })}
             <Status label={t('checkout.upsell.off', { saving })} color="primary" variant="outlined" sx={{ ml: 1 }} />
           </Typography>
           <Typography component="span" sx={{ fontSize: 12 }}>
-            {formatPrice(item.price.upsell.upsells_to, currency, item.price.product?.unit_label)}
+            {formatPrice(item.price.upsell.upsells_to, currency, item.price.product?.unit_label, 1, true, locale)}
           </Typography>
         </Stack>
       )}
@@ -102,7 +102,7 @@ export default function ProductItem({ item, session, currency, mode, children, o
             })}
           </Typography>
           <Typography component="span" sx={{ fontSize: 12 }}>
-            {formatPrice(item.price, currency, item.price.product?.unit_label)}
+            {formatPrice(item.price, currency, item.price.product?.unit_label, 1, true, locale)}
           </Typography>
         </Stack>
       )}

package/src/components/checkout/summary.tsx

@@ -41,10 +41,10 @@ export default function PaymentSummary({
   onApplyCrossSell,
   onCancelCrossSell,
 }: Props) {
-  const { t } = useLocaleContext();
+  const { t, locale } = useLocaleContext();
   const [state, setState] = useSetState({ loading: false });
   const { data, runAsync } = useRequest(() => fetchCrossSell(checkoutSession.id));
-  const headlines = formatCheckoutHeadlines(checkoutSession, currency);
+  const headlines = formatCheckoutHeadlines(checkoutSession, currency, locale);
 
   const handleUpsell = async (from: string, to: string) => {
     await onUpsell(from, to);

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

@@ -13,7 +13,7 @@ type Props = {
 };
 
 export default function CrossSellSelect({ data, onSelect }: Props) {
-  const { t } = useLocaleContext();
+  const { t, locale } = useLocaleContext();
   const { products } = useProductsContext();
   const { settings } = useSettingsContext();
 
@@ -41,7 +41,7 @@ export default function CrossSellSelect({ data, onSelect }: Props) {
           <MenuItem key={x.id} value={x.id}>
             <InfoCard
               name={x.name}
-              description={formatProductPrice(x as any, settings.baseCurrency)}
+              description={formatProductPrice(x as any, settings.baseCurrency, locale)}
               logo={x.images[0]}
             />
           </MenuItem>

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

@@ -14,6 +14,7 @@ import InfoRow from '../info-row';
 import CrossSellSelect from './cross-sell-select';
 
 export function CrossSellForm({ data, onChange }: { data: TProductExpanded; onChange: Function }) {
+  const { locale } = useLocaleContext();
   const { settings } = useSettingsContext();
   const [state, setState] = useSetState({
     loading: false,
@@ -55,7 +56,7 @@ export function CrossSellForm({ data, onChange }: { data: TProductExpanded; onCh
       <Stack spacing={1} direction="row" alignItems="center">
         <InfoCard
           name={to.name}
-          description={formatProductPrice(to as any, settings.baseCurrency)}
+          description={formatProductPrice(to as any, settings.baseCurrency, locale)}
           logo={to.images[0]}
         />
         <IconButton size="small" sx={{ ml: 1 }} onClick={onRemoveUpsell}>

package/src/libs/util.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-nested-ternary */
 /* eslint-disable @typescript-eslint/indent */
 import type {
   LineItem,
@@ -17,6 +18,7 @@ import cloneDeep from 'lodash/cloneDeep';
 import isEqual from 'lodash/isEqual';
 import { defaultCountries } from 'react-international-phone';
 
+import { t } from '../locales/index';
 import dayjs from './dayjs';
 
 export function getExplorerLink(chainHost: string, did: string, type: string) {
@@ -119,17 +121,18 @@ export const formatError = (err: any) => {
 
 export const formatProductPrice = (
   { prices, unit_label }: { prices: TPrice[]; unit_label: string },
-  currency: TPaymentCurrency
+  currency: TPaymentCurrency,
+  locale: string = 'en'
 ): string => {
   if (prices.length > 1) {
-    return `${prices.length} prices`;
+    return t('admin.price.count', locale, { count: prices.length });
   }
 
   if (prices.length === 1) {
-    return formatPrice(prices[0] as TPrice, currency, unit_label);
+    return formatPrice(prices[0] as TPrice, currency, unit_label, 1, true, locale);
   }
 
-  return 'No price';
+  return t('admin.price.empty', locale);
 };
 
 export const formatPrice = (
@@ -137,14 +140,15 @@ export const formatPrice = (
   currency: TPaymentCurrency,
   unit_label?: string,
   quantity: number = 1,
-  bn: boolean = true
+  bn: boolean = true,
+  locale: string = 'en'
 ) => {
   const unit = getPriceUintAmountByCurrency(price, currency);
   const amount = bn
     ? fromUnitToToken(new BN(unit).mul(new BN(quantity)), currency.decimal).toString()
     : +unit * quantity;
   if (price?.type === 'recurring' && price.recurring) {
-    const recurring = formatRecurring(price.recurring, false, '/');
+    const recurring = formatRecurring(price.recurring, false, 'slash', locale);
 
     if (unit_label) {
       return `${amount} ${currency.symbol} / ${unit_label} ${recurring}`;
@@ -219,7 +223,12 @@ export function getStatementDescriptor(items: any[]) {
   return window.blocklet.appName;
 }
 
-export function formatRecurring(recurring: PriceRecurring, translate: boolean = true, separator = 'per') {
+export function formatRecurring(
+  recurring: PriceRecurring,
+  translate: boolean = true,
+  separator: string = 'per',
+  locale: string = 'en'
+) {
   const intervals = {
     hour: 'hourly',
     day: 'daily',
@@ -229,11 +238,15 @@ export function formatRecurring(recurring: PriceRecurring, translate: boolean =
   };
 
   if (+recurring.interval_count === 1) {
+    const interval = t(`common.${recurring.interval}`, locale);
     // @ts-ignore
-    return translate ? intervals[recurring.interval] : `${separator} ${recurring.interval}`;
+    return translate ? t(`common.${intervals[recurring.interval]}`, locale) : separator ? t(`common.${separator}`, locale, { interval }) : interval; // prettier-ignore
   }
 
-  return `every ${recurring.interval_count} ${recurring.interval}s`;
+  return t('common.recurring', locale, {
+    count: recurring.interval_count,
+    interval: t(`common.${recurring.interval}s`, locale),
+  });
 }
 
 export function getPriceUintAmountByCurrency(price: TPrice, currency: TPaymentCurrency) {
@@ -257,11 +270,12 @@ export function getPriceCurrencyOptions(price: TPrice): PriceCurrency[] {
 export function formatLineItemPricing(
   item: TLineItemExpanded,
   currency: TPaymentCurrency,
-  trial: number
+  trial: number,
+  locale: string = 'en'
 ): { primary: string; secondary?: string; quantity: string } {
   const price = item.upsell_price || item.price;
 
-  let quantity = `Qty ${item.quantity}`;
+  let quantity = t('common.qty', locale, { count: item.quantity });
   if (price.recurring?.usage_type === 'metered' || +item.quantity === 1) {
     quantity = '';
   }
@@ -274,20 +288,20 @@ export function formatLineItemPricing(
 
   const appendUnit = (v: string, alt: string) => {
     if (price.product.unit_label) {
-      return `${v} / ${price.product.unit_label}`;
+      return `${v}/${price.product.unit_label}`;
     }
     if (price.recurring?.usage_type === 'metered' || item.quantity === 1) {
       return alt;
     }
 
-    return quantity ? `${unit} each` : '';
+    return quantity ? t('common.each', locale, { unit }) : '';
   };
 
   if (price.type === 'recurring' && price.recurring) {
     if (trial > 0) {
       return {
-        primary: `Free for ${trial} days`,
-        secondary: `${appendUnit(total, total)} ${formatRecurring(price.recurring, false, '/')}`,
+        primary: t('common.trial', locale, { count: trial }),
+        secondary: `${appendUnit(total, total)} ${formatRecurring(price.recurring, false, 'slash', locale)}`,
         quantity,
       };
     }
@@ -408,7 +422,8 @@ export function formatUpsellSaving(session: TCheckoutSessionExpanded, currency:
 
 export function formatCheckoutHeadlines(
   session: TCheckoutSessionExpanded,
-  currency: TPaymentCurrency
+  currency: TPaymentCurrency,
+  locale: string = 'en'
 ): {
   action: string;
   amount: string;
@@ -425,7 +440,7 @@ export function formatCheckoutHeadlines(
   // empty
   if (items.length === 0) {
     return {
-      action: 'No thing to pay',
+      action: t('checkout.empty', locale),
       amount: '0',
       then: '',
     };
@@ -435,21 +450,27 @@ export function formatCheckoutHeadlines(
 
   // all one time
   if (items.every((x) => x.price.type === 'one_time')) {
+    const action = t('checkout.pay', locale, { payee: brand });
     if (items.length > 1) {
-      return { action: `Pay ${brand}`, amount };
+      return { action, amount };
     }
 
-    return { action: `Pay ${brand}`, amount, then: '' };
+    return { action, amount, then: '' };
   }
 
   const item = items.find((x) => x.price.type === 'recurring');
-  const recurring = formatRecurring((item?.upsell_price || item?.price)?.recurring as PriceRecurring, false);
+  const recurring = formatRecurring(
+    (item?.upsell_price || item?.price)?.recurring as PriceRecurring,
+    false,
+    'per',
+    locale
+  );
 
   // all recurring
   if (items.every((x) => x.price.type === 'recurring')) {
     const hasMetered = items.some((x) => x.price.type === 'recurring' && x.price.recurring?.usage_type === 'metered');
     const subscription = [
-      hasMetered ? 'continue with at least' : '',
+      hasMetered ? t('checkout.least', locale) : '',
       fromUnitToToken(
         items.reduce((acc, x) => {
           if (x.price.recurring?.usage_type === 'metered') {
@@ -466,14 +487,14 @@ export function formatCheckoutHeadlines(
     if (items.length > 1) {
       if (trial > 0) {
         return {
-          action: `Try ${name} and ${items.length - 1} more`,
-          amount: `Free for ${trial} days`,
-          then: `Then ${subscription} ${recurring}`,
+          action: t('checkout.try2', locale, { name, count: items.length - 1 }),
+          amount: t('checkout.free', locale, { count: trial }),
+          then: t('checkout.then', locale, { subscription, recurring }),
         };
       }
 
       return {
-        action: `Subscribe to ${name} and ${items.length - 1} more`,
+        action: t('checkout.sub2', locale, { name, count: items.length - 1 }),
         amount,
         then: recurring,
       };
@@ -481,14 +502,14 @@ export function formatCheckoutHeadlines(
 
     if (trial > 0) {
       return {
-        action: `Try ${name}`,
-        amount: `${trial} days free`,
-        then: `Then ${subscription} ${recurring}`,
+        action: t('checkout.try1', locale, { name }),
+        amount: t('checkout.free', locale, { count: trial }),
+        then: t('checkout.then', locale, { subscription, recurring }),
       };
     }
 
     return {
-      action: `Subscribe to ${name}`,
+      action: t('checkout.sub1', locale, { name }),
       amount,
       then: recurring,
     };
@@ -508,9 +529,9 @@ export function formatCheckoutHeadlines(
   );
 
   return {
-    action: `Pay ${brand}`,
+    action: t('checkout.pay', locale, { payee: brand }),
     amount,
-    then: `Then ${subscription} ${currency.symbol} ${recurring}`,
+    then: t('checkout.then', locale, { subscription: `${subscription} ${currency.symbol}`, recurring }),
   };
 }
 

package/src/locales/en.tsx

@@ -28,7 +28,8 @@ export default flat({
     confirm: 'Confirm',
     cancel: 'Cancel',
     every: 'every',
-    per: 'per',
+    per: 'per {interval}',
+    slash: '/ {interval}',
     unit: 'units',
     edit: 'Edit',
     quantity: 'Quantity',
@@ -47,16 +48,29 @@ export default flat({
     copied: 'Copied',
     previous: 'Back',
     continue: 'Continue',
-    hourly: 'Hourly',
-    daily: 'Daily',
-    weekly: 'Weekly',
-    monthly: 'Monthly',
-    yearly: 'Yearly',
-    month3: 'Every 3 months',
-    month6: 'Every 6 months',
-    days: 'Days',
-    weeks: 'Weeks',
-    months: 'Months',
+    qty: 'Qty {count}',
+    each: '{unit} each',
+    trial: 'Free for {count} days',
+    billed: 'billed {rule}',
+    metered: 'based on usage',
+    hour: 'hour',
+    day: 'day',
+    week: 'week',
+    month: 'month',
+    year: 'year',
+    hourly: 'hourly',
+    daily: 'daily',
+    weekly: 'weekly',
+    monthly: 'monthly',
+    yearly: 'yearly',
+    month3: 'every 3 months',
+    month6: 'every 6 months',
+    recurring: 'every {count} {interval}',
+    hours: 'hours',
+    days: 'days',
+    weeks: 'weeks',
+    months: 'months',
+    years: 'years',
     metadata: {
       label: 'Metadata',
       add: 'Add more metadata',
@@ -145,6 +159,8 @@ export default flat({
       name: 'Price',
       type: 'Usage type',
       info: 'Price information',
+      count: '{count} prices',
+      empty: 'No price',
       lookupKey: 'Lookup key',
       setAsDefault: 'Set as default price',
       detail: 'Pricing details',
@@ -496,6 +512,15 @@ export default flat({
     login: 'Login to load and save contact information',
     portal: 'Manage subscriptions',
     cardPay: '{action} with card',
+    empty: 'No thing to pay',
+    pay: 'Pay {payee}',
+    try1: 'Try {name}',
+    try2: 'Try {name} and {count} more',
+    sub1: 'Subscribe to {name}',
+    sub2: 'Subscribe to {name} and {count} more',
+    then: 'Then {subscription} {recurring}',
+    free: '{count} days free',
+    least: 'continue with at least',
     completed: {
       payment: 'Thanks for your purchase',
       subscription: 'Thanks for your subscribing',

package/src/locales/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-prototype-builtins */
 import en from './en';
 import zh from './zh';
 
@@ -6,3 +7,27 @@ export const translations = {
   zh,
   en,
 };
+
+export const replace = (template: string, data: Record<string, any> = {}) =>
+  template.replace(/{(\w*)}/g, (_, key) => (data.hasOwnProperty(key) ? data[key] : ''));
+
+export const createTranslator = ({ fallbackLocale = 'en' }: { fallbackLocale?: string }) => {
+  return (key: string, locale = fallbackLocale, data: Record<string, any> = {}) => {
+    // @ts-ignore
+    if (!translations[locale] || !translations[locale][key]) {
+      // @ts-ignore
+      if (fallbackLocale && translations[fallbackLocale]?.[key]) {
+        // @ts-ignore
+        return replace(translations[fallbackLocale]?.[key], data);
+      }
+
+      return key;
+    }
+
+    // @ts-ignore
+    return replace(translations[locale][key], data);
+  };
+};
+
+export const translate = createTranslator({ fallbackLocale: 'en' });
+export const t = translate;

package/src/locales/zh.tsx

@@ -28,8 +28,9 @@ export default flat({
     confirm: '确认',
     cancel: '取消',
     every: '每',
-    per: '每',
-    unit: '个单位',
+    per: '每{interval}',
+    slash: '每{interval}',
+    unit: '件',
     edit: '编辑',
     quantity: '数量',
     yes: '是',
@@ -47,16 +48,29 @@ export default flat({
     copied: '已复制',
     previous: '返回',
     continue: '继续',
-    hourly: '每小时',
-    daily: '每日',
-    weekly: '每周',
-    monthly: '每月',
-    yearly: '每年',
-    month3: '每3个月',
-    month6: '每6个月',
+    qty: '{count} 件',
+    each: '每件 {unit}',
+    trial: '免费试用 {count} 天',
+    billed: '{rule}收费',
+    metered: '按用量',
+    hour: '小时',
+    day: '天',
+    week: '周',
+    month: '月',
+    year: '年',
+    hourly: '按小时',
+    daily: '按天',
+    weekly: '按周',
+    monthly: '按月',
+    yearly: '按年',
+    month3: '按季度',
+    month6: '按半年',
+    recurring: '每{count}{interval}',
+    hours: '小时',
     days: '天',
     weeks: '周',
     months: '月',
+    years: '年',
     metadata: {
       label: '元数据',
       add: '添加更多元数据',
@@ -488,6 +502,16 @@ export default flat({
     login: '登录以加载并保存联系信息',
     portal: '管理订阅',
     cardPay: '使用卡片{action}',
+    empty: '没有可支付的项目',
+    per: '每',
+    pay: '付款给 {payee}',
+    try1: '免费试用 {name}',
+    try2: '免费试用 {name} 等{count}个产品',
+    sub1: '订阅 {name}',
+    sub2: '订阅 {name} 等{count}个产品',
+    then: '然后 {subscription} {recurring}',
+    free: '{count} 天',
+    least: '至少',
     completed: {
       payment: '感谢您的购买',
       subscription: '感谢您的订阅',

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

@@ -158,7 +158,8 @@ export default function PaymentLinkDetail(props: { id: string }) {
                               description={formatProductPrice(
                                 // @ts-ignore
                                 { ...item.price.product, prices: [item.price] },
-                                settings.baseCurrency
+                                settings.baseCurrency,
+                                locale
                               )}
                               logo={item.price.product.images[0]}
                             />

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

@@ -27,7 +27,7 @@ const fetchData = (id: string): Promise<TPriceExpanded> => {
 };
 
 export default function PriceDetail(props: { id: string }) {
-  const { t } = useLocaleContext();
+  const { t, locale } = useLocaleContext();
   const navigate = useNavigate();
   const [state, setState] = useSetState({
     adding: {
@@ -121,7 +121,11 @@ export default function PriceDetail(props: { id: string }) {
               value={<Link to={`/admin/products/${data.product_id}`}>{data.product.name}</Link>}
               divider
             />
-            <InfoMetric label={t('admin.price.amount')} value={formatPrice(data, data.currency)} divider />
+            <InfoMetric
+              label={t('admin.price.amount')}
+              value={formatPrice(data, data.currency, data.product.unit_label, 1, true, locale)}
+              divider
+            />
             <InfoMetric label={t('common.createdAt')} value={formatTime(data.created_at)} divider />
             <InfoMetric label={t('common.updatedAt')} value={formatTime(data.updated_at)} />
           </Stack>
@@ -221,7 +225,11 @@ export default function PriceDetail(props: { id: string }) {
                     const item = data.currency_options[index] as any;
                     return formatPrice(
                       { type: data.type, unit_amount: item.unit_amount, recurring: data.recurring } as TPrice,
-                      item.currency
+                      item.currency,
+                      data.product.unit_label,
+                      1,
+                      true,
+                      locale
                     );
                   },
                 },

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

@@ -13,7 +13,7 @@ import { formatPrice, formatTime } from '../../../../libs/util';
 import PriceActions from './actions';
 
 export default function PricesList({ product, onChange }: { product: Product; onChange: Function }) {
-  const { t } = useLocaleContext();
+  const { t, locale } = useLocaleContext();
   const { settings } = useSettingsContext();
 
   const columns = [
@@ -32,7 +32,9 @@ export default function PricesList({ product, onChange }: { product: Product; on
                     <LockOutlined sx={{ color: 'text.secondary' }} />
                   </Tooltip>
                 )}
-                <Typography component="span">{formatPrice(price, settings.baseCurrency)}</Typography>
+                <Typography component="span">
+                  {formatPrice(price, settings.baseCurrency, '', 1, true, locale)}
+                </Typography>
                 <Typography component="span">
                   {price.id === product.default_price_id && <Status label="default" color="info" sx={{ height: 18 }} />}
                 </Typography>

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

@@ -138,7 +138,8 @@ export default function PricingTableDetail(props: { id: string }) {
                               description={formatProductPrice(
                                 // @ts-ignore
                                 { ...item.product, prices: [item.price] },
-                                settings.baseCurrency
+                                settings.baseCurrency,
+                                locale
                               )}
                               logo={item.product.images[0]}
                             />

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

@@ -18,7 +18,7 @@ import api from '../../../../libs/api';
 import { formatError, formatPrice } from '../../../../libs/util';
 
 export default function ProductsCreate() {
-  const { t } = useLocaleContext();
+  const { t, locale } = useLocaleContext();
   const { settings } = useSettingsContext();
 
   const methods = useForm<Product>({
@@ -85,7 +85,7 @@ export default function ProductsCreate() {
                   }
 
                   // @ts-ignore
-                  return formatPrice(getPrice(index), settings.baseCurrency, getValues().unit_label, 1, false);
+                  return formatPrice(getPrice(index), settings.baseCurrency, getValues().unit_label, 1, false, locale);
                 }}>
                 <PriceForm prefix={`prices.${index}`} />
               </Collapse>

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

@@ -29,7 +29,7 @@ const getProduct = (id: string): Promise<TProductExpanded> => {
 };
 
 export default function ProductDetail(props: { id: string }) {
-  const { t } = useLocaleContext();
+  const { t, locale } = useLocaleContext();
   const navigate = useNavigate();
   const { settings } = useSettingsContext();
   const [state, setState] = useSetState({
@@ -128,7 +128,7 @@ export default function ProductDetail(props: { id: string }) {
               logo={data.images[0]}
               name={data.name}
               // @ts-ignore
-              description={formatProductPrice(data, settings.baseCurrency)}
+              description={formatProductPrice(data, settings.baseCurrency, locale)}
             />
             <ProductActions data={data} onChange={onChange} variant="normal" />
           </Stack>

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

@@ -28,7 +28,7 @@ export default function ProductsList() {
   const listKey = 'products';
   const persisted = getDurableData(listKey);
 
-  const { t } = useLocaleContext();
+  const { t, locale } = useLocaleContext();
   const navigate = useNavigate();
   const { settings } = useSettingsContext();
   const [search, setSearch] = useState<{ active: string; pageSize: number; page: number }>({
@@ -62,7 +62,7 @@ export default function ProductsList() {
           return (
             <InfoCard
               name={product.name}
-              description={formatProductPrice(product as any, settings.baseCurrency)}
+              description={formatProductPrice(product as any, settings.baseCurrency, locale)}
               logo={product.images[0]}
             />
           );

package/src/pages/checkout/pricing-table.tsx

@@ -58,7 +58,7 @@ const groupItemsByRecurring = (items: TPricingTableItem[]) => {
 };
 
 export default function PricingTable({ id }: Props) {
-  const { t } = useLocaleContext();
+  const { t, locale } = useLocaleContext();
   const [params] = useSearchParams();
   const { error, loading, data } = useRequest(() => fetchData(id));
   const [state, setState] = useSetState({ interval: '', loading: '' });
@@ -149,7 +149,7 @@ export default function PricingTable({ id }: Props) {
             <ToggleButtonGroup value={state.interval} onChange={(_, value) => setState({ interval: value })} exclusive>
               {Object.keys(recurring).map((x) => (
                 <ToggleButton key={x} value={x} sx={{ textTransform: 'capitalize' }}>
-                  {formatRecurring(recurring[x] as PriceRecurring)}
+                  {formatRecurring(recurring[x] as PriceRecurring, true, '', locale)}
                 </ToggleButton>
               ))}
             </ToggleButtonGroup>
@@ -186,10 +186,10 @@ export default function PricingTable({ id }: Props) {
                       <PaymentAmount amount={formatPriceAmount(x.price, data.currency, x.product.unit_label)} />
                       <Stack direction="column" alignItems="flex-start">
                         <Typography component="span" color="text.secondary" fontSize="0.8rem">
-                          per
+                          {t('checkout.per')}
                         </Typography>
                         <Typography component="span" color="text.secondary" fontSize="0.8rem">
-                          {formatRecurring(x.price.recurring as PriceRecurring, false, '')}
+                          {formatRecurring(x.price.recurring as PriceRecurring, false, '', locale)}
                         </Typography>
                       </Stack>
                     </Stack>