payment-kit 1.13.224 → 1.13.225

package/api/src/crons/index.ts

@@ -94,7 +94,7 @@ function init() {
       },
     ],
     onError: (error: Error, name: string) => {
-      logger.error('run job failed', { name, error: error.message, stack: error.stack });
+      logger.error('run job failed', { name, error });
     },
   });
 }

package/api/src/index.ts

@@ -92,7 +92,7 @@ if (isProduction) {
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   app.use(<ErrorRequestHandler>((err, req, res, _next) => {
-    logger.error(err.stack);
+    console.error(err);
     if (req.accepts('json')) {
       res.status(500).send({ error: err.message });
     } else {

package/api/src/integrations/ethereum/token.ts

@@ -1,6 +1,7 @@
 import { JsonRpcProvider, TransactionReceipt, ethers } from 'ethers';
 
 import { ethWallet } from '../../libs/auth';
+import logger from '../../libs/logger';
 import type { PaymentMethod } from '../../store/models/payment-method';
 import { getApproveFunction } from './contract';
 import erc20Abi from './erc20-abi.json';
@@ -125,7 +126,7 @@ export async function sendErc20ToUser(
   return receipt;
 }
 
-export async function executeEvmTransactions(
+export async function executeEvmTransaction(
   type: string,
   userDid: string,
   claims: any[],
@@ -133,6 +134,7 @@ export async function executeEvmTransactions(
 ) {
   const client = paymentMethod.getEvmClient();
   const claim = claims.find((x) => x.type === 'signature');
+  logger.info('executeEvmTransaction', { type, userDid, claim });
   const receipt = await waitForEvmTxReceipt(client, claim.hash);
   if (!receipt.status) {
     throw new Error(`EVM Transaction failed: ${claim.hash}`);

package/api/src/integrations/ethereum/tx.ts

@@ -4,15 +4,15 @@ import waitFor from 'p-wait-for';
 import logger from '../../libs/logger';
 
 export async function waitForEvmTxReceipt(provider: JsonRpcProvider, txHash: string) {
-  let minted: TransactionResponse;
+  let mined: TransactionResponse;
   let receipt: TransactionReceipt;
 
   await waitFor(
     async () => {
       // @ts-ignore
-      minted = await provider.getTransaction(txHash);
-      logger.info('waitForTxReceipt.mintCheck', minted);
-      return !!minted?.blockNumber;
+      mined = await provider.getTransaction(txHash);
+      logger.info('waitForTxReceipt.mineCheck', { mined, txHash });
+      return Number(mined?.blockNumber) > 0;
     },
     { interval: 3000, timeout: 30 * 60 * 1000 }
   );
@@ -21,7 +21,7 @@ export async function waitForEvmTxReceipt(provider: JsonRpcProvider, txHash: str
     async () => {
       // @ts-ignore
       receipt = await provider.getTransactionReceipt(txHash);
-      logger.info('waitForTxReceipt.receiptCheck', receipt);
+      logger.info('waitForTxReceipt.receiptCheck', { txHash, receipt });
       return !!receipt;
     },
     { interval: 1000, timeout: 60 * 1000 }
@@ -30,3 +30,14 @@ export async function waitForEvmTxReceipt(provider: JsonRpcProvider, txHash: str
   // @ts-ignore
   return receipt;
 }
+
+export async function waitForEvmTxConfirm(provider: JsonRpcProvider, height: number, confirmation: number = 1) {
+  await waitFor(
+    async () => {
+      const number = Number(await provider.getBlockNumber());
+      logger.info('waitForTxReceipt.heightCheck', { number, height });
+      return number - height >= confirmation;
+    },
+    { interval: 3000, timeout: 30 * 60 * 1000 }
+  );
+}

package/api/src/libs/payment.ts

@@ -14,6 +14,7 @@ import { Invoice, PaymentCurrency, PaymentIntent, PaymentMethod, TCustomer, TLin
 import type { TPaymentCurrency } from '../store/models/payment-currency';
 import { blocklet, ethWallet, wallet } from './auth';
 import { OCAP_PAYMENT_TX_TYPE } from './util';
+import logger from './logger';
 
 export interface SufficientForPaymentResult {
   sufficient: boolean;
@@ -118,6 +119,7 @@ export async function isDelegationSufficientForPayment(args: {
     }
 
     const allowance = await fetchErc20Allowance(provider, paymentCurrency.contract, userDid, ethWallet.address);
+    logger.info('isDelegationSufficientForPayment', { userDid, amount, allowance, contract: paymentCurrency.contract });
     if (new BN(allowance).lt(new BN(amount))) {
       return { sufficient: false, reason: 'NO_ENOUGH_ALLOWANCE' };
     }

package/api/src/routes/connect/change-payment.ts

@@ -1,4 +1,5 @@
-import { executeEvmTransactions } from '../../integrations/ethereum/token';
+import { executeEvmTransaction } from '../../integrations/ethereum/token';
+import { waitForEvmTxConfirm } from '../../integrations/ethereum/tx';
 import type { CallbackArgs } from '../../libs/auth';
 import { isDelegationSufficientForPayment } from '../../libs/payment';
 import { getFastCheckoutAmount } from '../../libs/session';
@@ -148,8 +149,12 @@ export default {
 
     if (paymentMethod.type === 'ethereum') {
       await prepareTxExecution();
-      const paymentDetails = await executeEvmTransactions('approve', userDid, claims, paymentMethod);
-      await afterTxExecution(paymentDetails);
+      const paymentDetails = await executeEvmTransaction('approve', userDid, claims, paymentMethod);
+      waitForEvmTxConfirm(paymentMethod.getEvmClient(), +paymentDetails.block_height, paymentMethod.confirmation.block)
+        .then(async () => {
+          await afterTxExecution(paymentDetails);
+        })
+        .catch(console.error);
       return { hash: paymentDetails.tx_hash };
     }
 

package/api/src/routes/connect/change-plan.ts

@@ -1,4 +1,5 @@
-import { executeEvmTransactions } from '../../integrations/ethereum/token';
+import { executeEvmTransaction } from '../../integrations/ethereum/token';
+import { waitForEvmTxConfirm } from '../../integrations/ethereum/tx';
 import type { CallbackArgs } from '../../libs/auth';
 import { isDelegationSufficientForPayment } from '../../libs/payment';
 import { getFastCheckoutAmount } from '../../libs/session';
@@ -148,8 +149,12 @@ export default {
     if (paymentMethod.type === 'ethereum') {
       await prepareTxExecution();
 
-      const paymentDetails = await executeEvmTransactions('approve', userDid, claims, paymentMethod);
-      await afterTxExecution(paymentDetails);
+      const paymentDetails = await executeEvmTransaction('approve', userDid, claims, paymentMethod);
+      waitForEvmTxConfirm(paymentMethod.getEvmClient(), +paymentDetails.block_height, paymentMethod.confirmation.block)
+        .then(async () => {
+          await afterTxExecution(paymentDetails);
+        })
+        .catch(console.error);
 
       return { hash: paymentDetails.tx_hash };
     }

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

@@ -3,7 +3,7 @@ import { toBase58 } from '@ocap/util';
 import { fromAddress } from '@ocap/wallet';
 
 import { encodeTransferItx } from '../../integrations/ethereum/token';
-import { waitForEvmTxReceipt } from '../../integrations/ethereum/tx';
+import { waitForEvmTxConfirm, waitForEvmTxReceipt } from '../../integrations/ethereum/tx';
 import type { CallbackArgs } from '../../libs/auth';
 import { ethWallet, wallet } from '../../libs/auth';
 import logger from '../../libs/logger';
@@ -168,14 +168,18 @@ export default {
         throw new Error(`EVM Transaction failed: ${claim.hash}`);
       }
 
-      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',
-      });
+      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 };
     }

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

@@ -2,7 +2,8 @@ import type { Transaction, TransferV3Tx } from '@ocap/client';
 import { toBase58 } from '@ocap/util';
 import { fromAddress } from '@ocap/wallet';
 
-import { encodeTransferItx, executeEvmTransactions } from '../../integrations/ethereum/token';
+import { encodeTransferItx, executeEvmTransaction } from '../../integrations/ethereum/token';
+import { waitForEvmTxConfirm } from '../../integrations/ethereum/tx';
 import { CallbackArgs, ethWallet } from '../../libs/auth';
 import logger from '../../libs/logger';
 import { getGasPayerExtra } from '../../libs/payment';
@@ -132,7 +133,8 @@ export default {
 
         return { hash: txHash };
       } catch (err) {
-        logger.error('Failed to finalize paymentIntent', { paymentIntent: paymentIntent.id, error: err });
+        console.error(err);
+        logger.error('Failed to finalize paymentIntent on arcblock', { paymentIntent: paymentIntent.id, error: err });
         await paymentIntent.update({ status: 'requires_capture' });
         return {};
       }
@@ -142,18 +144,27 @@ export default {
       try {
         await paymentIntent.update({ status: 'processing' });
 
-        const paymentDetails = await executeEvmTransactions('transfer', userDid, claims, paymentMethod);
-        await paymentIntent.update({
-          status: 'succeeded',
-          amount_received: paymentIntent.amount,
-          last_payment_error: null,
-          payment_details: { [paymentMethod.type]: paymentDetails },
-        });
-        await handlePaymentSucceed(paymentIntent);
+        const paymentDetails = await executeEvmTransaction('transfer', userDid, claims, paymentMethod);
+        waitForEvmTxConfirm(
+          paymentMethod.getEvmClient(),
+          Number(paymentDetails.block_height),
+          paymentMethod.confirmation.block
+        )
+          .then(async () => {
+            await paymentIntent.update({
+              status: 'succeeded',
+              amount_received: paymentIntent.amount,
+              last_payment_error: null,
+              payment_details: { [paymentMethod.type]: paymentDetails },
+            });
+            await handlePaymentSucceed(paymentIntent);
+          })
+          .catch(console.error);
 
         return { hash: paymentDetails.tx_hash };
       } catch (err) {
-        logger.error('Failed to finalize paymentIntent', { paymentIntent: paymentIntent.id, error: err });
+        console.error(err);
+        logger.error('Failed to finalize paymentIntent on ethereum', { paymentIntent: paymentIntent.id, error: err });
         await paymentIntent.update({ status: 'requires_capture' });
         return {};
       }

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

@@ -1,4 +1,5 @@
-import { executeEvmTransactions } from '../../integrations/ethereum/token';
+import { executeEvmTransaction } from '../../integrations/ethereum/token';
+import { waitForEvmTxConfirm } from '../../integrations/ethereum/tx';
 import type { CallbackArgs } from '../../libs/auth';
 import dayjs from '../../libs/dayjs';
 import logger from '../../libs/logger';
@@ -181,8 +182,12 @@ export default {
 
     if (paymentMethod.type === 'ethereum') {
       await prepareTxExecution();
-      const paymentDetails = await executeEvmTransactions('approve', userDid, claims, paymentMethod);
-      await afterTxExecution(paymentDetails);
+      const paymentDetails = await executeEvmTransaction('approve', userDid, claims, paymentMethod);
+      waitForEvmTxConfirm(paymentMethod.getEvmClient(), +paymentDetails.block_height, paymentMethod.confirmation.block)
+        .then(async () => {
+          await afterTxExecution(paymentDetails);
+        })
+        .catch(console.error);
 
       return { hash: paymentDetails.tx_hash };
     }

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

@@ -1,4 +1,5 @@
-import { executeEvmTransactions } from '../../integrations/ethereum/token';
+import { executeEvmTransaction } from '../../integrations/ethereum/token';
+import { waitForEvmTxConfirm } from '../../integrations/ethereum/tx';
 import type { CallbackArgs } from '../../libs/auth';
 import dayjs from '../../libs/dayjs';
 import logger from '../../libs/logger';
@@ -165,8 +166,16 @@ export default {
       await prepareTxExecution();
       const { invoice } = await ensureInvoiceForCheckout({ checkoutSession, customer, subscription });
 
-      const paymentDetails = await executeEvmTransactions('approve', userDid, claims, paymentMethod);
-      await afterTxExecution(invoice!, paymentDetails);
+      const paymentDetails = await executeEvmTransaction('approve', userDid, claims, paymentMethod);
+      waitForEvmTxConfirm(
+        paymentMethod.getEvmClient(),
+        Number(paymentDetails.block_height),
+        paymentMethod.confirmation.block
+      )
+        .then(async () => {
+          await afterTxExecution(invoice!, paymentDetails);
+        })
+        .catch(console.error);
 
       return { hash: paymentDetails.tx_hash };
     }

package/api/src/routes/payment-intents.ts

@@ -8,6 +8,7 @@ import { syncStripePayment } from '../integrations/stripe/handlers/payment-inten
 import { createListParamSchema, getWhereFromKvQuery, getWhereFromQuery } from '../libs/api';
 import { authenticate } from '../libs/security';
 import { formatMetadata } from '../libs/util';
+import { paymentQueue } from '../queues/payment';
 import { CheckoutSession } from '../store/models/checkout-session';
 import { Customer } from '../store/models/customer';
 import { Invoice } from '../store/models/invoice';
@@ -202,4 +203,30 @@ router.put('/:id', authAdmin, async (req, res) => {
   }
 });
 
+// eslint-disable-next-line consistent-return
+router.get('/:id/retry', authAdmin, async (req, res) => {
+  try {
+    const doc = await PaymentIntent.findByPk(req.params.id as string);
+    if (!doc) {
+      return res.status(404).json({ error: 'PaymentIntent not found' });
+    }
+    if (doc.status === 'succeeded') {
+      return res.status(403).json({ error: 'PaymentIntent already done' });
+    }
+    if (doc.status === 'processing') {
+      return res.status(403).json({ error: 'PaymentIntent already processing' });
+    }
+
+    await doc.update({ status: 'requires_capture', last_payment_error: null });
+    await paymentQueue.pushAndWait({
+      id: doc.id,
+      job: { paymentIntentId: doc.id, retryOnError: false },
+    });
+    res.json(doc);
+  } catch (err) {
+    console.error(err);
+    res.json(null);
+  }
+});
+
 export default router;

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

@@ -220,9 +220,11 @@ export type SubscriptionSchedulePhase = {
 export type PaymentMethodOptions = {
   arcblock?: {
     payer: string;
+    hash?: string;
   };
   ethereum?: {
     payer: string;
+    hash?: string;
   };
   stripe?: {
     payer: string;

package/blocklet.md

@@ -1,3 +1,24 @@
 # Payment Kit
 
-The decentralized stripe alike payment solution for blocklet platform.
+Payment Kit is a payment solution built by ArcBlock that allows developers to easily integrate payment processing into their applications. Payment Kit is designed to be easy to use, secure, and flexible. It supports both crypto and fiat payments, and can be used for one-time payments, usage-based billing, recurring subscriptions, tips, and donations.
+
+## Why build Payment Kit?
+
+Payment is already everywhere why do we still create a new Payment Kit? Because all previous payment solutions have “middleman” to take some cut. Payment Kit is full decentralized peer to peer payment (when use crypto) and no one takes any cut!
+
+- `Crypto Native`: Payment Kit handles transactions using cryptocurrency, ensuring they are completed in seconds with the added benefits of no chargebacks and no hidden fees..
+- `Decentralization`: Payment Kit offers peer-to-peer payment capability leveraging blockchain technology, eliminating any intermediaries and associated costs.
+- `Multiple Blockchain Support`: Payment Kit supports multiple blockchain platforms including ArcBlock, EVM-compatible chains, and upcoming support for Bitcoin, broadening your potential user base.
+- `Composable Integration`: Payment Kit is built for easy integration with any applications running on the ArcBlock platform, simplifying the deployment process and enhancing functionality.
+- `Seamless Fiat Replacement`: For traditional fiat currency users, Payment Kit acts as a straightforward enhancement for existing solutions like Stripe, making transitions smooth and hassle-free.
+- `Flexible Billing Solutions`: Adapt to any billing requirement with Payment Kit’s versatile setup, capable of handling everything from simple one-time payments to complex recurring billing and donations.
+
+## Payment Kit Use Cases?
+
+Payment Kit is seamlessly integrated with ArcBlock's DID and Blocklet ecosystems and widely used and battle tested in various ArcBlock services.
+
+- `One-Time Payments`: Perfect for e-commerce transactions, digital downloads, and service fees, Payment Kit simplifies the checkout process, offering a quick and secure way for users to make single purchases.
+- `Usage-Based Billing`: Ideal for services with variable consumption rates such as cloud computing or utilities, Payment Kit allows for flexible billing based on actual usage, ensuring fairness and transparency.
+- `Recurring Subscriptions`: Enhance your subscription model with Payment Kit’s automated billing features. From software licenses to membership fees, ensure smooth, continuous access to services with regular payment schedules.
+- `Tips and Donations`: Enable supporters to contribute easily with tips or donations. Payment Kit facilitates spontaneous generosity, supporting fundraising efforts, content creators, and nonprofit organizations.
+- `Bonus Pool Distribution`: Distribute earnings or rewards through a bonus pool with Payment Kit. This feature is great for managing profit-sharing, employee incentives, or community rewards programs efficiently and transparently.

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.224
+version: 1.13.225
 logo: logo.png
 files:
   - dist
@@ -70,8 +70,10 @@ screenshots:
   - 1-subscription.png
   - 2-customer-1.png
   - 3-customer-2.png
-  - 4-admin-3.png
-  - 5-admin-4.png
+  - 4-admin-payments.png
+  - 4-admin-products.png
+  - 4-admin-settings.png
+  - 5-dashboard.png
 components:
   - name: image-bin
     source:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.13.224",
+  "version": "1.13.225",
   "scripts": {
     "dev": "cross-env COMPONENT_STORE_URL=https://test.store.blocklet.dev blocklet dev --open",
     "eject": "vite eject",
@@ -51,7 +51,7 @@
     "@arcblock/ux": "^2.9.66",
     "@arcblock/validator": "^1.18.115",
     "@blocklet/logger": "1.16.25",
-    "@blocklet/payment-react": "1.13.224",
+    "@blocklet/payment-react": "1.13.225",
     "@blocklet/sdk": "1.16.25",
     "@blocklet/ui-react": "^2.9.66",
     "@blocklet/uploader": "^0.0.76",
@@ -116,7 +116,7 @@
   "devDependencies": {
     "@abtnode/types": "1.16.25",
     "@arcblock/eslint-config-ts": "^0.3.0",
-    "@blocklet/payment-types": "1.13.224",
+    "@blocklet/payment-types": "1.13.225",
     "@types/cookie-parser": "^1.4.6",
     "@types/cors": "^2.8.17",
     "@types/dotenv-flow": "^3.3.3",
@@ -155,5 +155,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "748bfdf66a77b47f5d879cc4838ba519b9a5f6d3"
+  "gitHead": "e5e5f94d4f17d582d7266b063dda56d09ffadf7c"
 }

package/src/components/price/form.tsx

@@ -159,7 +159,7 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
                 InputProps={{
                   endAdornment: (
                     <InputAdornment position="end">
-                      {settings.baseCurrency.symbol} on {basePaymentMethod?.name}
+                      {settings.baseCurrency.symbol} ({basePaymentMethod?.name})
                     </InputAdornment>
                   ),
                 }}
@@ -216,7 +216,7 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
                       InputProps={{
                         endAdornment: (
                           <InputAdornment position="end">
-                            {currency?.symbol} on {currency?.paymentMethod?.name}
+                            {currency?.symbol} ({currency?.paymentMethod?.name})
                           </InputAdornment>
                         ),
                       }}

package/src/pages/admin/billing/invoices/detail.tsx

@@ -141,7 +141,12 @@ export default function InvoiceDetail(props: { id: string }) {
           />
           <InfoRow
             label={t('admin.paymentCurrency.name')}
-            value={<Currency logo={data.paymentCurrency.logo} name={data.paymentCurrency.symbol} />}
+            value={
+              <Currency
+                logo={data.paymentCurrency.logo}
+                name={`${data.paymentCurrency.symbol} (${data.paymentMethod.name})`}
+              />
+            }
           />
           {data.paymentIntent && data.paymentIntent.payment_details && (
             <InfoRow

package/src/pages/admin/billing/subscriptions/detail.tsx

@@ -144,13 +144,14 @@ export default function SubscriptionDetail(props: { id: string }) {
           />
           <InfoRow label={t('admin.subscription.discount')} value={data.discount_id ? data.discount_id : ''} />
           <InfoRow label={t('admin.subscription.collectionMethod')} value={data.collection_method} />
-          <InfoRow
-            label={t('admin.paymentMethod._name')}
-            value={<Currency logo={data.paymentMethod.logo} name={data.paymentMethod.name} />}
-          />
           <InfoRow
             label={t('admin.paymentCurrency.name')}
-            value={<Currency logo={data.paymentCurrency.logo} name={data.paymentCurrency.symbol} />}
+            value={
+              <Currency
+                logo={data.paymentCurrency.logo}
+                name={`${data.paymentCurrency.symbol} (${data.paymentMethod.name})`}
+              />
+            }
           />
           {(data.payment_details?.arcblock?.tx_hash || data.payment_details?.ethereum?.tx_hash) && (
             <InfoRow

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

@@ -145,13 +145,14 @@ export default function PaymentIntentDetail(props: { id: string }) {
         <Stack>
           <InfoRow label={t('common.id')} value={data.paymentMethod.id} />
           <InfoRow label={t('admin.paymentMethod.type')} value={data.paymentMethod.type} />
-          <InfoRow
-            label={t('admin.paymentMethod._name')}
-            value={<Currency logo={data.paymentMethod.logo} name={data.paymentMethod.name} />}
-          />
           <InfoRow
             label={t('admin.paymentCurrency.name')}
-            value={<Currency logo={data.paymentCurrency.logo} name={data.paymentCurrency.symbol} />}
+            value={
+              <Currency
+                logo={data.paymentCurrency.logo}
+                name={`${data.paymentCurrency.symbol} (${data.paymentMethod.name})`}
+              />
+            }
           />
           <InfoRow
             label={t(`common.${data.payment_details?.arcblock?.type || 'transfer'}TxHash`)}

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

@@ -142,13 +142,14 @@ export default function PayoutDetail(props: { id: string }) {
         <Stack>
           <InfoRow label={t('common.id')} value={data.paymentMethod.id} />
           <InfoRow label={t('admin.paymentMethod.type')} value={data.paymentMethod.type} />
-          <InfoRow
-            label={t('admin.paymentMethod._name')}
-            value={<Currency logo={data.paymentMethod.logo} name={data.paymentMethod.name} />}
-          />
           <InfoRow
             label={t('admin.paymentCurrency.name')}
-            value={<Currency logo={data.paymentCurrency.logo} name={data.paymentCurrency.symbol} />}
+            value={
+              <Currency
+                logo={data.paymentCurrency.logo}
+                name={`${data.paymentCurrency.symbol} (${data.paymentMethod.name})`}
+              />
+            }
           />
           <InfoRow
             label={t(`common.${data.payment_details?.arcblock?.type || 'transfer'}TxHash`)}

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

@@ -142,13 +142,14 @@ export default function RefundDetail(props: { id: string }) {
           <Stack>
             <InfoRow label={t('common.id')} value={data.paymentMethod.id} />
             <InfoRow label={t('admin.paymentMethod.type')} value={data.paymentMethod.type} />
-            <InfoRow
-              label={t('admin.paymentMethod._name')}
-              value={<Currency logo={data.paymentMethod.logo} name={data.paymentMethod.name} />}
-            />
             <InfoRow
               label={t('admin.paymentCurrency.name')}
-              value={<Currency logo={data.paymentCurrency.logo} name={data.paymentCurrency.symbol} />}
+              value={
+                <Currency
+                  logo={data.paymentCurrency.logo}
+                  name={`${data.paymentCurrency.symbol} (${data.paymentMethod.name})`}
+                />
+              }
             />
             <InfoRow
               label={t('common.txHash')}

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

@@ -142,7 +142,12 @@ export default function CustomerInvoiceDetail() {
           )}
           <InfoRow
             label={t('admin.paymentCurrency.name')}
-            value={<Currency logo={data.paymentCurrency.logo} name={data.paymentCurrency.symbol} />}
+            value={
+              <Currency
+                logo={data.paymentCurrency.logo}
+                name={`${data.paymentCurrency.symbol} (${data.paymentMethod.name})`}
+              />
+            }
           />
           {data.paymentIntent && data.paymentIntent.payment_details && (
             <InfoRow