payment-kit 1.26.4 → 1.27.0

package/scripts/benchmark-seed.js

@@ -0,0 +1,247 @@
+/* eslint-disable no-console */
+/**
+ * Benchmark Seed Script
+ *
+ * Creates test data required for Payment Kit benchmarks:
+ *   1. Meter (credit type, with currency)
+ *   2. Product + metered Price
+ *   3. Customer (via checkout or existing)
+ *   4. Credit Grants (large balance for sustained testing)
+ *
+ * Usage:
+ *   pnpm run benchmark-seed --app-id <APP_ID>
+ *
+ * Or with blocklet exec:
+ *   blocklet exec /scripts/benchmark-seed.js --app-id <APP_ID>
+ *
+ * After running, copy the output env vars to benchmarks/.env
+ */
+const { spawn } = require('child_process');
+const payment = require('../../../packages/client/lib').default;
+
+function getAppId() {
+  const args = process.argv.slice(2);
+  let appId = '';
+  for (let i = 0; i < args.length; i++) {
+    if (args[i] === '--app-id' && i + 1 < args.length) {
+      appId = args[i + 1];
+      break;
+    }
+  }
+  if (!appId) {
+    appId =
+      process.env.BLOCKLET_DEV_APP_DID?.split(':').pop() ||
+      process.env.BLOCKLET_APP_ID ||
+      'zNKuN3XwXN7xq2NsJQjjfwujyqCxx26DhwgV';
+  }
+  return appId;
+}
+
+// Configuration
+const CREDIT_GRANT_AMOUNT = 1000000; // 1M credits - enough for thousands of benchmark events
+const CUSTOMER_COUNT = 3; // Multi-customer for parallelism testing
+const METER_EVENT_NAME = 'benchmark_credits';
+const METER_UNIT = 'Token';
+
+async function findOrCreateMeter() {
+  console.log('\n── Step 1: Find or create meter ──');
+
+  // Try to find existing meter
+  try {
+    const meters = await payment.meters.list({ limit: 50 });
+    const items = meters?.list || meters?.data || [];
+    const existing = items.find((m) => m.event_name === METER_EVENT_NAME);
+    if (existing) {
+      console.log(`  Found existing meter: ${existing.id} (event_name=${existing.event_name}, currency=${existing.currency_id})`);
+      return existing;
+    }
+  } catch (err) {
+    console.log(`  Could not list meters: ${err.message}`);
+  }
+
+  // Create new meter
+  const meter = await payment.meters.create({
+    name: 'Benchmark Credits',
+    event_name: METER_EVENT_NAME,
+    aggregation_method: 'sum',
+    unit: METER_UNIT,
+    description: 'Benchmark test meter for credit consumption',
+    created_via: 'api',
+  });
+  console.log(`  Created meter: ${meter.id} (event_name=${meter.event_name}, currency=${meter.currency_id})`);
+  return meter;
+}
+
+async function findOrCreateProduct(meter) {
+  console.log('\n── Step 2: Find or create metered product + price ──');
+
+  // Try to find existing
+  try {
+    const products = await payment.products.list({ limit: 50 });
+    const items = products?.list || products?.data || [];
+    const existing = items.find((p) => p.name === 'Benchmark Metered Service');
+    if (existing) {
+      console.log(`  Found existing product: ${existing.id}`);
+      // Find price for this product
+      const prices = await payment.prices.list({ product_id: existing.id, limit: 10 });
+      const priceList = prices?.list || prices?.data || [];
+      if (priceList.length > 0) {
+        console.log(`  Found existing price: ${priceList[0].id}`);
+        return { product: existing, price: priceList[0] };
+      }
+    }
+  } catch (err) {
+    console.log(`  Could not list products: ${err.message}`);
+  }
+
+  const product = await payment.products.create({
+    name: 'Benchmark Metered Service',
+    description: 'Product for benchmark testing',
+    type: 'credit',
+    prices: [
+      {
+        type: 'recurring',
+        unit_amount: '0.001',
+        currency_id: meter.currency_id,
+        nickname: 'Benchmark metered price',
+        recurring: {
+          interval: 'month',
+          interval_count: 1,
+          usage_type: 'metered',
+          meter_id: meter.id,
+          aggregate_usage: 'sum',
+        },
+        metadata: {
+          credit_config: {
+            priority: 50,
+            valid_duration_value: 0,
+            valid_duration_unit: 'days',
+            currency_id: meter.currency_id,
+            credit_amount: '1',
+          },
+          meter_id: meter.id,
+        },
+      },
+    ],
+  });
+
+  const prices = product.prices || [];
+  const price = prices[0];
+  console.log(`  Created product: ${product.id}`);
+  console.log(`  Created price: ${price?.id}`);
+  return { product, price };
+}
+
+async function getCustomers() {
+  console.log('\n── Step 3: Find customers ──');
+
+  const result = await payment.customers.list({ limit: CUSTOMER_COUNT });
+  const items = result?.list || result?.data || [];
+
+  if (items.length === 0) {
+    console.log('  No customers found. Please create customers first (e.g. via checkout).');
+    console.log('  Tip: Log in to the blocklet UI as different users to auto-create customers.');
+    process.exit(1);
+  }
+
+  console.log(`  Found ${items.length} customer(s):`);
+  for (const c of items) {
+    console.log(`    ${c.id}: ${c.name || c.email || c.did || '(unnamed)'}`);
+  }
+
+  return items.slice(0, CUSTOMER_COUNT);
+}
+
+async function ensureCreditGrants(customers, meter) {
+  console.log('\n── Step 4: Ensure credit grants ──');
+
+  for (const customer of customers) {
+    // Check existing balance
+    let existingBalance = '0';
+    try {
+      const summary = await payment.creditGrants.summary({ customer_id: customer.id });
+      const balances = summary?.balances || summary?.data || [];
+      const match = balances.find((b) => b.currency_id === meter.currency_id);
+      existingBalance = match?.available || match?.remaining_amount || '0';
+    } catch {
+      // ignore
+    }
+
+    const needsGrant = Number(existingBalance) < CREDIT_GRANT_AMOUNT / 2;
+
+    if (needsGrant) {
+      const grant = await payment.creditGrants.create({
+        customer_id: customer.id,
+        amount: CREDIT_GRANT_AMOUNT,
+        currency_id: meter.currency_id,
+        category: 'promotional',
+        name: 'Benchmark credit grant',
+        applicability_config: {
+          scope: {
+            price_type: 'metered',
+          },
+        },
+      });
+      console.log(`  Created grant for ${customer.id}: ${grant.id} (amount=${CREDIT_GRANT_AMOUNT})`);
+    } else {
+      console.log(`  ${customer.id}: balance=${existingBalance}, sufficient`);
+    }
+  }
+}
+
+async function runSeed() {
+  payment.environments.setTestMode(true);
+
+  console.log('=== Payment Kit Benchmark Seed ===');
+  console.log(`  Grant amount per customer: ${CREDIT_GRANT_AMOUNT}`);
+  console.log(`  Meter event name: ${METER_EVENT_NAME}`);
+
+  const meter = await findOrCreateMeter();
+  const { price } = await findOrCreateProduct(meter);
+  const customers = await getCustomers();
+  await ensureCreditGrants(customers, meter);
+
+  // Output env vars for benchmarks/.env
+  const customerIds = customers.map((c) => c.id);
+  console.log('\n\n=== Copy to benchmarks/.env ===\n');
+  console.log(`METER_EVENT_NAME=${METER_EVENT_NAME}`);
+  console.log(`CUSTOMER_ID=${customerIds[0]}`);
+  if (customerIds.length > 1) {
+    console.log(`CUSTOMER_IDS=${customerIds.join(',')}`);
+  }
+  if (price) {
+    console.log(`# PRICE_ID=${price.id}`);
+  }
+  console.log(`# METER_ID=${meter.id}`);
+  console.log(`# CURRENCY_ID=${meter.currency_id}`);
+  console.log(`# CREDIT_GRANT_AMOUNT=${CREDIT_GRANT_AMOUNT}`);
+
+  console.log('\n=== Seed complete ===');
+}
+
+async function main() {
+  if (process.env.BLOCKLET_APP_ID) {
+    await runSeed();
+    process.exit(0);
+  }
+
+  const appId = getAppId();
+  const args = process.argv.slice(2).filter((arg) => arg !== '--app-id' && arg !== appId);
+
+  console.log(`Running with blocklet exec, app-id: ${appId}`);
+
+  const child = spawn('blocklet', ['exec', '/scripts/benchmark-seed.js', '--app-id', appId, ...args], {
+    stdio: 'inherit',
+  });
+
+  child.on('exit', (code) => {
+    process.exit(code || 0);
+  });
+}
+
+if (require.main === module) {
+  main().catch((error) => {
+    console.error('Seed failed:', error);
+    process.exit(1);
+  });
+}

package/src/components/customer/credit-overview.tsx

@@ -13,6 +13,7 @@ import { useSearchParams } from 'react-router-dom';
 import type { TPaymentCurrency } from '@blocklet/payment-types';
 import { useRequest } from 'ahooks';
 import { AddOutlined, AutoModeOutlined } from '@mui/icons-material';
+import { BN } from '@ocap/util';
 import Toast from '@arcblock/ux/lib/Toast';
 import { formatError } from '@blocklet/error';
 import SplitButton from '@arcblock/ux/lib/SplitButton';
@@ -228,45 +229,37 @@ export default function CreditOverview({ customerId, settings, mode = 'portal' }
               )}
             </Stack>
 
-            {/* 可用额度 / 总额度 */}
-            <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
-              <Typography
-                variant="body2"
-                gutterBottom
-                sx={{
-                  color: 'text.secondary',
-                }}>
-                {t('admin.customer.creditGrants.creditBalance')}
-              </Typography>
-              <Typography variant="h5" component="div" sx={{ fontWeight: 'normal' }}>
-                {totalAmount === '0' && remainingAmount === '0' ? (
-                  <>0</>
-                ) : (
-                  <>{formatCreditAmount(formatBNStr(remainingAmount, currency.decimal), currency.symbol, false)}</>
-                )}
-              </Typography>
-            </Box>
+            {/* 可用额度（净余额 = 剩余 - 欠费） */}
+            {(() => {
+              const remaining = new BN(remainingAmount || '0');
+              const pending = new BN(pendingAmount || '0');
+              const netBalance = remaining.sub(pending);
+              const isNegative = netBalance.isNeg();
+              const absBalance = isNegative ? netBalance.abs().toString() : netBalance.toString();
+              const formattedBalance =
+                totalAmount === '0' && remainingAmount === '0' && pendingAmount === '0'
+                  ? '0'
+                  : formatCreditAmount(formatBNStr(absBalance, currency.decimal), currency.symbol, false);
 
-            {/* 欠费额度 */}
-            {pendingAmount !== '0' && (
-              <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
-                <Typography
-                  variant="body2"
-                  gutterBottom
-                  sx={{
-                    color: 'text.secondary',
-                  }}>
-                  {t('admin.customer.creditGrants.pendingAmount')}
-                </Typography>
-                <Typography
-                  variant="body1"
-                  sx={{
-                    color: 'error.main',
-                  }}>
-                  {formatCreditAmount(formatBNStr(pendingAmount, currency.decimal), currency.symbol, false)}
-                </Typography>
-              </Box>
-            )}
+              return (
+                <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
+                  <Typography
+                    variant="body2"
+                    gutterBottom
+                    sx={{
+                      color: 'text.secondary',
+                    }}>
+                    {t('admin.customer.creditGrants.creditBalance')}
+                  </Typography>
+                  <Typography
+                    variant="h5"
+                    component="div"
+                    sx={{ fontWeight: 'normal', color: isNegative ? 'error.main' : 'text.primary' }}>
+                    {isNegative ? `-${formattedBalance}` : formattedBalance}
+                  </Typography>
+                </Box>
+              );
+            })()}
           </Stack>
         </CardContent>
       </Card>
@@ -277,10 +270,6 @@ export default function CreditOverview({ customerId, settings, mode = 'portal' }
     return creditCurrencies.filter((currency: TPaymentCurrency) => {
       const grantData = creditSummary?.grants?.[currency.id];
       if (!grantData) return false;
-      // Filter out credits with zero balance
-      if (grantData.remainingAmount === '0') {
-        return false;
-      }
       return true;
     });
   }, [creditCurrencies, creditSummary?.grants]);

package/src/components/invoice-pdf/template.tsx

@@ -1,3 +1,4 @@
+import { BN } from '@ocap/util';
 import { formatNumber, formatTime, formatAmount } from '@blocklet/payment-react';
 import { useEffect } from 'react';
 import type { InvoicePDFProps } from './types';
@@ -99,12 +100,12 @@ export function InvoiceTemplate({ data, t }: InvoicePDFProps) {
 
       {/* Table Content */}
       {detail.map((line) => {
-        // Calculate discount amount for this line item
-        let itemDiscountAmount = 0;
+        // Calculate discount amount for this line item using BN to avoid scientific notation (e.g. 1e+21)
+        let itemDiscountAmount = new BN(0);
         if (line.raw.discount_amounts && line.raw.discount_amounts.length > 0) {
           line.raw.discount_amounts.forEach((discount: any) => {
             if (discount.amount) {
-              itemDiscountAmount += Number(discount.amount);
+              itemDiscountAmount = itemDiscountAmount.add(new BN(String(discount.amount)));
             }
           });
         }
@@ -129,7 +130,7 @@ export function InvoiceTemplate({ data, t }: InvoicePDFProps) {
             </div>
             <div style={composeStyles('w-15 p-4-8 pb-15')}>
               <span style={composeStyles('dark right')}>
-                {itemDiscountAmount > 0
+                {!itemDiscountAmount.isZero()
                   ? `-${formatAmount(itemDiscountAmount.toString(), data.paymentCurrency.decimal)} ${
                       data.paymentCurrency.symbol
                     }`

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

@@ -82,6 +82,26 @@ export default function PaymentLinkActions({ data, variant = 'compact', onChange
       setState({ loading: false, action: '' });
     }
   };
+  const onToggleSkipPaymentMethod = async () => {
+    const currentMetadata = (data.metadata || {}) as Record<string, any>;
+    const isEnabled = currentMetadata.allow_skip_payment_method === 'true';
+    try {
+      setState({ loading: true });
+      await api
+        .put(`/api/payment-links/${data.id}`, {
+          metadata: { ...currentMetadata, allow_skip_payment_method: isEnabled ? 'false' : 'true' },
+        })
+        .then((res: any) => res.data);
+      Toast.success(t('common.saved'));
+      onChange(state.action);
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    } finally {
+      setState({ loading: false, action: '' });
+    }
+  };
+
   const onCopyLink = () => {
     Copy(joinURL(window.blocklet.appUrl, window.blocklet.prefix, `/checkout/pay/${data.id}`));
     Toast.success(t('common.copied'));
@@ -127,6 +147,14 @@ export default function PaymentLinkActions({ data, variant = 'compact', onChange
             handler: () => setState({ action: 'togglePromotionCodes' }),
             color: 'primary',
           },
+          {
+            label:
+              (data.metadata as Record<string, any>)?.allow_skip_payment_method === 'true'
+                ? t('admin.paymentLink.disableSkipPaymentMethod')
+                : t('admin.paymentLink.enableSkipPaymentMethod'),
+            handler: () => setState({ action: 'toggleSkipPaymentMethod' }),
+            color: 'primary',
+          },
           {
             label: t('admin.passport.assign'),
             handler: () => setState({ action: 'assign' }),
@@ -162,6 +190,23 @@ export default function PaymentLinkActions({ data, variant = 'compact', onChange
           loading={state.loading}
         />
       )}
+      {state.action === 'toggleSkipPaymentMethod' && (
+        <ConfirmDialog
+          onConfirm={onToggleSkipPaymentMethod}
+          onCancel={() => setState({ action: '' })}
+          title={
+            (data.metadata as Record<string, any>)?.allow_skip_payment_method === 'true'
+              ? t('admin.paymentLink.disableSkipPaymentMethod')
+              : t('admin.paymentLink.enableSkipPaymentMethod')
+          }
+          message={
+            (data.metadata as Record<string, any>)?.allow_skip_payment_method === 'true'
+              ? t('admin.paymentLink.disableSkipPaymentMethodTip')
+              : t('admin.paymentLink.enableSkipPaymentMethodTip')
+          }
+          loading={state.loading}
+        />
+      )}
       {state.action === 'togglePromotionCodes' && (
         <ConfirmDialog
           onConfirm={onTogglePromotionCodes}

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

@@ -279,6 +279,30 @@ export default function BeforePay({
           );
         }}
       />
+      <Controller
+        name="metadata"
+        control={control}
+        render={({ field }) => {
+          const metadata = field.value || {};
+          const isChecked = metadata.allow_skip_payment_method === 'true';
+
+          return (
+            <FormControlLabel
+              control={
+                <Checkbox
+                  checked={isChecked}
+                  onChange={(_, checked) => {
+                    const newMetadata = { ...metadata };
+                    newMetadata.allow_skip_payment_method = checked ? 'true' : 'false';
+                    field.onChange(newMetadata);
+                  }}
+                />
+              }
+              label={t('admin.paymentLink.allowSkipPaymentMethod')}
+            />
+          );
+        }}
+      />
       {includeFreeTrial && (
         <Controller
           name="subscription_data.trial_period_days"

package/src/components/subscription/payment-method-info.tsx

@@ -133,12 +133,7 @@ export default function PaymentMethodInfo({
     setState({ editing: false, clientSecret: null, publishableKey: null, setupIntentId: null });
   };
 
-  if (!paymentMethodDetails) {
-    return null;
-  }
-
-  const { card, link, us_bank_account: usBankAccount, payer, type } = paymentMethodDetails;
-
+  // Stripe form for editing/binding — must be checked before early returns
   if (state.editing && state.clientSecret && state.publishableKey) {
     return (
       <Box>
@@ -156,6 +151,28 @@ export default function PaymentMethodInfo({
     );
   }
 
+  if (!paymentMethodDetails) {
+    if (!editable) {
+      return (
+        <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+          {t('admin.subscription.noPaymentMethod', { defaultValue: 'Not bound' })}
+        </Typography>
+      );
+    }
+    return (
+      <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
+        <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+          {t('admin.subscription.noPaymentMethod', { defaultValue: 'Not bound' })}
+        </Typography>
+        <Button variant="text" size="small" sx={{ color: 'text.link' }} loading={state.submitting} onClick={handleEdit}>
+          {t('admin.subscription.bindPaymentMethod', { defaultValue: 'Bind now' })}
+        </Button>
+      </Stack>
+    );
+  }
+
+  const { card, link, us_bank_account: usBankAccount, payer, type } = paymentMethodDetails;
+
   const renderPaymentMethodInfo = () => {
     if (type === 'card' && card) {
       return (

package/src/components/subscription/portal/actions.tsx

@@ -534,6 +534,8 @@ export function SubscriptionActionsInner({
           e?.stopPropagation();
           if (action?.action === 'pastDue') {
             navigate(`/customer/invoice/past-due?subscription=${subscription.id}`);
+          } else if (action?.action === 'recover' && !(subscription as any).paymentMethodDetails) {
+            Toast.error(t('admin.subscription.bindPaymentMethodFirst'));
           } else {
             // @ts-ignore
             setState({ action: action?.action, subscription: subscription.id });

package/src/locales/en.tsx

@@ -1080,6 +1080,12 @@ export default flat({
       includeFreeTrial: 'Include a free trial',
       noStakeRequired: 'No stake required',
       showProductFeatures: 'Show product features',
+      allowSkipPaymentMethod: 'Allow skipping payment method for $0 checkout',
+      enableSkipPaymentMethod: 'Allow skipping payment method',
+      disableSkipPaymentMethod: 'Require payment method',
+      enableSkipPaymentMethodTip:
+        'Allow customers to skip binding a payment method when the checkout amount is $0. The subscription will auto-cancel at the end of the current period if no payment method is added.',
+      disableSkipPaymentMethodTip: 'Require customers to provide a payment method even when the checkout amount is $0.',
       freeTrialDaysPositive: 'Free trial days must be positive',
       includeCustomFields: 'Add custom fields',
       confirmPage: 'Confirmation Page',
@@ -1568,6 +1574,11 @@ export default flat({
         button: 'Pay due invoices',
       },
       payerAddress: 'Payment Address',
+      noPaymentMethod: 'Not bound',
+      bindPaymentMethod: 'Bind now',
+      bindPaymentMethodFirst: 'Please bind a payment method first before resuming the subscription',
+      noPaymentMethodWarning:
+        'No payment method is bound to this subscription. Please bind one to avoid cancellation at the end of the current period.',
       changePayer: {
         btn: 'Change',
         stripe: {

package/src/locales/zh.tsx

@@ -1041,6 +1041,12 @@ export default flat({
       includeFreeTrial: '包含免费试用',
       noStakeRequired: '无需质押',
       showProductFeatures: '显示产品特性',
+      allowSkipPaymentMethod: '允许 $0 结账时跳过绑定支付方式',
+      enableSkipPaymentMethod: '允许跳过支付方式',
+      disableSkipPaymentMethod: '要求绑定支付方式',
+      enableSkipPaymentMethodTip:
+        '当结账金额为 $0 时，允许客户跳过绑定支付方式。若未绑定，订阅将在当前周期结束时自动取消。',
+      disableSkipPaymentMethodTip: '即使结账金额为 $0，也要求客户提供支付方式。',
       freeTrialDaysPositive: '免费试用天数必须是正数',
       includeCustomFields: '添加自定义字段',
       requireCrossSell: '用户必须选择交叉销售的商品（如果有的话）',
@@ -1533,6 +1539,10 @@ export default flat({
         button: '批量付款',
       },
       payerAddress: '扣费地址',
+      noPaymentMethod: '未绑定',
+      bindPaymentMethod: '立即绑定',
+      bindPaymentMethodFirst: '请先绑定支付方式后再恢复订阅',
+      noPaymentMethodWarning: '当前订阅未绑定支付方式，请尽快绑定，否则订阅将在当前周期结束时自动取消。',
       changePayer: {
         btn: '变更',
         stripe: {

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

@@ -372,6 +372,14 @@ export default function PaymentLinkDetail(props: { id: string }) {
                     value={data.phone_number_collection?.enabled ? t('common.yes') : t('common.no')}
                   />
 
+                  <InfoRow
+                    label={t('admin.paymentLink.allowSkipPaymentMethod')}
+                    value={
+                      (data.metadata as Record<string, any>)?.allow_skip_payment_method === 'true'
+                        ? t('common.yes')
+                        : t('common.no')
+                    }
+                  />
                   <InfoRow
                     label={t('admin.paymentLink.showConfirmPage')}
                     value={renderConfirmPage(data.after_completion)}

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

@@ -454,6 +454,11 @@ export default function CustomerSubscriptionDetail() {
     <>
       <Root>
         <Box>
+          {!(data as any).paymentMethodDetails && ['active', 'trialing'].includes(data.status) && (
+            <Alert severity="warning" sx={{ mb: 2 }}>
+              {t('admin.subscription.noPaymentMethodWarning')}
+            </Alert>
+          )}
           {hasUnpaid && (
             <Alert severity="error" sx={{ mb: 2 }}>
               {t('customer.unpaidInvoicesWarningTip')}
@@ -820,24 +825,22 @@ export default function CustomerSubscriptionDetail() {
                 }
               />
             )}
-            {(data as any).paymentMethodDetails && (
-              <InfoRow
-                label={t('admin.subscription.payerAddress')}
-                value={
-                  <PaymentMethodInfo
-                    subscriptionId={id}
-                    customer={data.customer}
-                    paymentMethodDetails={(data as any).paymentMethodDetails}
-                    editable={['active', 'trialing', 'past_due'].includes(data.status)}
-                    onUpdate={() => {
-                      refresh();
-                      checkUnpaidInvoices();
-                    }}
-                    paymentMethodType={data.paymentMethod?.type}
-                  />
-                }
-              />
-            )}
+            <InfoRow
+              label={t('admin.subscription.payerAddress')}
+              value={
+                <PaymentMethodInfo
+                  subscriptionId={id}
+                  customer={data.customer}
+                  paymentMethodDetails={(data as any).paymentMethodDetails}
+                  editable={['active', 'trialing', 'past_due'].includes(data.status)}
+                  onUpdate={() => {
+                    refresh();
+                    checkUnpaidInvoices();
+                  }}
+                  paymentMethodType={data.paymentMethod?.type}
+                />
+              }
+            />
 
             {data.payment_details && hasDelegateTxHash(data.payment_details, data.paymentMethod) && (
               <InfoRow