payment-kit 1.21.16 → 1.21.17

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

@@ -1224,6 +1224,36 @@ export async function ensureChangePaymentContext(subscriptionId: string) {
   };
 }
 
+export async function ensurePayerChangeContext(subscriptionId: string) {
+  const subscription = await Subscription.findByPk(subscriptionId);
+  if (!subscription) {
+    throw new Error(`Subscription not found: ${subscriptionId}`);
+  }
+  if (!['active', 'trialing', 'past_due'].includes(subscription.status)) {
+    throw new Error(`Subscription ${subscriptionId} is not in a valid status to change payer`);
+  }
+  const paymentMethod = await PaymentMethod.findByPk(subscription.default_payment_method_id);
+  if (!paymentMethod) {
+    throw new Error(`Payment method not found for subscription ${subscriptionId}`);
+  }
+  const payerAddress = getSubscriptionPaymentAddress(subscription, paymentMethod?.type);
+  const paymentCurrency = await PaymentCurrency.findByPk(subscription.currency_id);
+  if (!paymentCurrency) {
+    throw new Error(`PaymentCurrency ${subscription.currency_id} not found for subscription ${subscriptionId}`);
+  }
+
+  // @ts-ignore
+  subscription.items = await expandSubscriptionItems(subscription.id);
+
+  return {
+    subscription,
+    paymentCurrency,
+    paymentMethod,
+    customer: await Customer.findByPk(subscription.customer_id),
+    payerAddress,
+  };
+}
+
 export async function ensureReStakeContext(subscriptionId: string) {
   const subscription = await Subscription.findByPk(subscriptionId);
   if (!subscription) {

package/api/src/routes/invoices.ts

@@ -8,6 +8,7 @@ import { Op } from 'sequelize';
 import { BN } from '@ocap/util';
 import { syncStripeInvoice } from '../integrations/stripe/handlers/invoice';
 import { syncStripePayment } from '../integrations/stripe/handlers/payment-intent';
+import { ensureStripeCustomer, ensureStripeSetupIntentForInvoicePayment } from '../integrations/stripe/resource';
 import { createListParamSchema, getOrder, getWhereFromKvQuery, MetadataSchema } from '../libs/api';
 import { authenticate } from '../libs/security';
 import { expandLineItems } from '../libs/session';
@@ -662,9 +663,11 @@ router.get('/:id', authPortal, async (req, res) => {
     })) as TInvoiceExpanded | null;
 
     if (doc) {
-      if (doc.metadata?.stripe_id && (doc.status !== 'paid' || req.query.forceSync)) {
+      const shouldSync = req.query.sync === 'true' || !!req.query.forceSync;
+      // Sync Stripe invoice when sync=true query parameter is present
+      if (doc.metadata?.stripe_id && doc.status !== 'paid') {
         // @ts-ignore
-        await syncStripeInvoice(doc);
+        await syncStripeInvoice(doc, shouldSync);
       }
       if (doc.payment_intent_id) {
         const paymentIntent = await PaymentIntent.findByPk(doc.payment_intent_id);
@@ -799,6 +802,142 @@ router.get('/:id', authPortal, async (req, res) => {
   }
 });
 
+router.post('/pay-stripe', authPortal, async (req, res) => {
+  try {
+    const { invoice_ids, subscription_id, customer_id, currency_id } = req.body;
+
+    if (!currency_id) {
+      return res.status(400).json({ error: 'currency_id is required' });
+    }
+
+    if (!invoice_ids && !subscription_id && !customer_id) {
+      return res.status(400).json({ error: 'Must provide invoice_ids, subscription_id, or customer_id' });
+    }
+
+    let invoices: Invoice[];
+    let customer: Customer | null;
+    let paymentMethod: PaymentMethod | null = null;
+
+    if (invoice_ids && Array.isArray(invoice_ids) && invoice_ids.length > 0) {
+      invoices = await Invoice.findAll({
+        where: {
+          id: { [Op.in]: invoice_ids },
+          currency_id,
+          status: { [Op.in]: ['open', 'uncollectible'] },
+        },
+        include: [
+          { model: Customer, as: 'customer' },
+          { model: PaymentCurrency, as: 'paymentCurrency' },
+        ],
+      });
+
+      if (invoices.length === 0) {
+        return res.status(404).json({ error: 'No payable invoices found' });
+      }
+
+      // @ts-ignore
+      customer = invoices[0]?.customer;
+      paymentMethod = await PaymentMethod.findByPk(invoices[0]!.default_payment_method_id);
+    } else if (subscription_id) {
+      const subscription = await Subscription.findByPk(subscription_id, {
+        include: [{ model: Customer, as: 'customer' }],
+      });
+
+      if (!subscription) {
+        return res.status(404).json({ error: 'Subscription not found' });
+      }
+
+      // @ts-ignore
+      customer = subscription.customer;
+      paymentMethod = await PaymentMethod.findByPk(subscription.default_payment_method_id);
+
+      invoices = await Invoice.findAll({
+        where: {
+          subscription_id,
+          currency_id,
+          status: { [Op.in]: ['open', 'uncollectible'] },
+        },
+        include: [
+          { model: Customer, as: 'customer' },
+          { model: PaymentCurrency, as: 'paymentCurrency' },
+        ],
+      });
+    } else {
+      customer = await Customer.findByPkOrDid(customer_id!);
+      if (!customer) {
+        return res.status(404).json({ error: 'Customer not found' });
+      }
+
+      invoices = await Invoice.findAll({
+        where: {
+          customer_id: customer.id,
+          currency_id,
+          status: { [Op.in]: ['open', 'uncollectible'] },
+        },
+        include: [
+          { model: Customer, as: 'customer' },
+          { model: PaymentCurrency, as: 'paymentCurrency' },
+        ],
+      });
+
+      if (invoices.length === 0) {
+        return res.status(404).json({ error: 'No payable invoices found' });
+      }
+
+      paymentMethod = await PaymentMethod.findByPk(invoices[0]!.default_payment_method_id);
+    }
+
+    if (!customer) {
+      return res.status(404).json({ error: 'Customer not found' });
+    }
+
+    if (!paymentMethod || paymentMethod.type !== 'stripe') {
+      return res.status(400).json({ error: 'Not using Stripe payment method' });
+    }
+
+    if (invoices.length === 0) {
+      return res.status(400).json({ error: 'No payable invoices found' });
+    }
+
+    await ensureStripeCustomer(customer, paymentMethod);
+
+    const settings = PaymentMethod.decryptSettings(paymentMethod.settings);
+
+    const paymentCurrency = await PaymentCurrency.findByPk(currency_id);
+    if (!paymentCurrency) {
+      return res.status(404).json({ error: `Payment currency ${currency_id} not found` });
+    }
+    const totalAmount = invoices.reduce((sum, invoice) => {
+      const amount = invoice.amount_remaining || '0';
+      return new BN(sum).add(new BN(amount)).toString();
+    }, '0');
+
+    const metadata: any = {
+      currency_id,
+      customer_id: customer.id,
+      invoices: JSON.stringify(invoices.map((inv) => inv.id)),
+    };
+
+    const setupIntent = await ensureStripeSetupIntentForInvoicePayment(customer, paymentMethod, metadata);
+
+    return res.json({
+      client_secret: setupIntent.client_secret,
+      publishable_key: settings.stripe?.publishable_key,
+      setup_intent_id: setupIntent.id,
+      invoices: invoices.map((inv) => inv.id),
+      amount: totalAmount,
+      currency: paymentCurrency,
+      customer,
+    });
+  } catch (err) {
+    logger.error('Failed to create setup intent for stripe payment', {
+      error: err,
+      body: req.body,
+    });
+    return res.status(400).json({ error: err.message });
+  }
+});
+
 // eslint-disable-next-line consistent-return
 router.put('/:id', authAdmin, async (req, res) => {
   try {

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

@@ -449,7 +449,8 @@ router.get('/:id/benefits', async (req, res) => {
     if (!doc) {
       return res.status(404).json({ error: 'payment link not found' });
     }
-    const benefits = await getDonationBenefits(doc);
+    const locale = req.query.locale as string;
+    const benefits = await getDonationBenefits(doc, '', locale);
     return res.json(benefits);
   } catch (err) {
     logger.error('Get donation benefits error', { error: err.message, stack: err.stack, id: req.params.id });

package/api/src/routes/subscriptions.ts

@@ -238,7 +238,7 @@ router.get('/search', auth, async (req, res) => {
 
 router.get('/:id', authPortal, async (req, res) => {
   try {
-    const doc = await Subscription.findOne({
+    const doc = (await Subscription.findOne({
       where: { id: req.params.id },
       include: [
         { model: PaymentCurrency, as: 'paymentCurrency' },
@@ -246,10 +246,15 @@ router.get('/:id', authPortal, async (req, res) => {
         { model: SubscriptionItem, as: 'items' },
         { model: Customer, as: 'customer' },
       ],
-    });
+    })) as Subscription & {
+      paymentMethod: PaymentMethod;
+      paymentCurrency: PaymentCurrency;
+      items: SubscriptionItem[];
+      customer: Customer;
+    };
 
     if (doc) {
-      const json = doc.toJSON();
+      const json: any = doc.toJSON();
       const isConsumesCredit = await doc.isConsumesCredit();
       const serviceType = isConsumesCredit ? 'credit' : 'standard';
       const products = (await Product.findAll()).map((x) => x.toJSON());
@@ -270,9 +275,70 @@ router.get('/:id', authPortal, async (req, res) => {
         logger.error('Failed to fetch subscription discount stats', { error, subscriptionId: json.id });
       }
 
+      // Get payment method details
+      let paymentMethodDetails = null;
+      try {
+        const paymentMethod = await PaymentMethod.findByPk(doc.default_payment_method_id);
+        if (paymentMethod?.type === 'stripe' && json.payment_details?.stripe?.subscription_id) {
+          const client = paymentMethod.getStripeClient();
+          const stripeSubscription = await client.subscriptions.retrieve(json.payment_details.stripe.subscription_id, {
+            expand: ['default_payment_method'],
+          });
+
+          if (stripeSubscription.default_payment_method) {
+            const paymentMethodId =
+              typeof stripeSubscription.default_payment_method === 'string'
+                ? stripeSubscription.default_payment_method
+                : stripeSubscription.default_payment_method.id;
+
+            const paymentMethodData = await client.paymentMethods.retrieve(paymentMethodId);
+
+            paymentMethodDetails = {
+              id: paymentMethodData.id,
+              type: paymentMethodData.type,
+              billing_details: paymentMethodData.billing_details,
+            } as any;
+
+            if (paymentMethodData.card) {
+              paymentMethodDetails.card = {
+                brand: paymentMethodData.card.brand,
+                last4: paymentMethodData.card.last4,
+                exp_month: paymentMethodData.card.exp_month,
+                exp_year: paymentMethodData.card.exp_year,
+              };
+            }
+
+            if (paymentMethodData.link) {
+              paymentMethodDetails.link = {
+                email: paymentMethodData.link.email,
+              };
+            }
+
+            if (paymentMethodData.us_bank_account) {
+              paymentMethodDetails.us_bank_account = {
+                account_type: paymentMethodData.us_bank_account.account_type,
+                bank_name: paymentMethodData.us_bank_account.bank_name,
+                last4: paymentMethodData.us_bank_account.last4,
+              };
+            }
+          }
+        } else if (doc.paymentMethod) {
+          const payer = getSubscriptionPaymentAddress(doc, doc.paymentMethod.type);
+          if (payer) {
+            paymentMethodDetails = {
+              type: doc.paymentMethod.type,
+              payer,
+            };
+          }
+        }
+      } catch (error) {
+        logger.error('Failed to fetch payment method details', { error, subscriptionId: json.id });
+      }
+
       res.json({
         ...json,
         discountStats,
+        paymentMethodDetails,
       });
     } else {
       res.status(404).json(null);
@@ -2283,4 +2349,65 @@ router.get('/:id/change-payment/migrate-invoice', auth, async (req, res) => {
     return res.status(400).json({ error: error.message });
   }
 });
+
+router.post('/:id/update-stripe-payment-method', authPortal, async (req, res) => {
+  try {
+    const subscription = await Subscription.findByPk(req.params.id);
+    if (!subscription) {
+      return res.status(404).json({ error: 'Subscription not found' });
+    }
+
+    if (!['active', 'trialing', 'past_due'].includes(subscription.status)) {
+      return res.status(400).json({ error: 'Subscription is not active' });
+    }
+
+    const paymentMethod = await PaymentMethod.findByPk(subscription.default_payment_method_id);
+    if (!paymentMethod || paymentMethod.type !== 'stripe') {
+      return res.status(400).json({ error: 'Subscription is not using Stripe payment method' });
+    }
+
+    const stripeSubscriptionId = subscription.payment_details?.stripe?.subscription_id;
+    if (!stripeSubscriptionId) {
+      return res.status(400).json({ error: 'Stripe subscription not found' });
+    }
+
+    const customer = await Customer.findByPk(subscription.customer_id);
+    if (!customer) {
+      return res.status(404).json({ error: 'Customer not found' });
+    }
+
+    await ensureStripeCustomer(customer, paymentMethod);
+
+    const client = paymentMethod.getStripeClient();
+    const settings = PaymentMethod.decryptSettings(paymentMethod.settings);
+
+    const setupIntent = await client.setupIntents.create({
+      customer: subscription.payment_details?.stripe?.customer_id,
+      payment_method_types: ['card'],
+      usage: 'off_session',
+      metadata: {
+        subscription_id: subscription.id,
+        action: 'update_payment_method',
+      },
+    });
+
+    logger.info('Setup intent created for updating stripe payment method', {
+      subscription: subscription.id,
+      setupIntent: setupIntent.id,
+    });
+
+    return res.json({
+      client_secret: setupIntent.client_secret,
+      publishable_key: settings.stripe?.publishable_key,
+      setup_intent_id: setupIntent.id,
+    });
+  } catch (err) {
+    logger.error('Failed to create setup intent for updating payment method', {
+      error: err,
+      subscriptionId: req.params.id,
+    });
+    return res.status(400).json({ error: err.message });
+  }
+});
+
 export default router;

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.21.16",
+  "version": "1.21.17",
   "scripts": {
     "dev": "blocklet dev --open",
     "lint": "tsc --noEmit && eslint src api/src --ext .mjs,.js,.jsx,.ts,.tsx",
@@ -56,9 +56,9 @@
     "@blocklet/error": "^0.2.5",
     "@blocklet/js-sdk": "^1.16.53-beta-20251011-054719-4ed2f6b7",
     "@blocklet/logger": "^1.16.53-beta-20251011-054719-4ed2f6b7",
-    "@blocklet/payment-broker-client": "1.21.16",
-    "@blocklet/payment-react": "1.21.16",
-    "@blocklet/payment-vendor": "1.21.16",
+    "@blocklet/payment-broker-client": "1.21.17",
+    "@blocklet/payment-react": "1.21.17",
+    "@blocklet/payment-vendor": "1.21.17",
     "@blocklet/sdk": "^1.16.53-beta-20251011-054719-4ed2f6b7",
     "@blocklet/ui-react": "^3.1.46",
     "@blocklet/uploader": "^0.2.15",
@@ -128,7 +128,7 @@
   "devDependencies": {
     "@abtnode/types": "^1.16.53-beta-20251011-054719-4ed2f6b7",
     "@arcblock/eslint-config-ts": "^0.3.3",
-    "@blocklet/payment-types": "1.21.16",
+    "@blocklet/payment-types": "1.21.17",
     "@types/cookie-parser": "^1.4.9",
     "@types/cors": "^2.8.19",
     "@types/debug": "^4.1.12",
@@ -175,5 +175,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "16509d9abd2da2f52587972c863c79ba9e4cd49d"
+  "gitHead": "a823bc05e706681ee70451437b0460aba909c253"
 }

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

@@ -65,6 +65,16 @@ export function InvoiceTemplate({ data, t }: InvoicePDFProps) {
               <span style={composeStyles('gray')}>{formatTime(data.period_end * 1000)}</span>
             </div>
           </div>
+          <div style={composeStyles('flex mb-5')}>
+            <div style={composeStyles('w-40')}>
+              <span style={composeStyles('bold')}>{t('admin.paymentCurrency.name')}</span>
+            </div>
+            <div style={composeStyles('w-60')}>
+              <span style={composeStyles('gray')}>
+                {data.paymentCurrency.symbol} ({data.paymentMethod.name})
+              </span>
+            </div>
+          </div>
         </div>
       </div>
 
@@ -137,6 +147,26 @@ export function InvoiceTemplate({ data, t }: InvoicePDFProps) {
         );
       })}
 
+      {detail.length === 0 && (
+        <div style={composeStyles('row flex')}>
+          <div style={composeStyles('w-38 p-4-8 pb-15')}>
+            <span style={composeStyles('gray')}>-</span>
+          </div>
+          <div style={composeStyles('w-15 p-4-8 pb-15')}>
+            <span style={composeStyles('gray right')}>-</span>
+          </div>
+          <div style={composeStyles('w-15 p-4-8 pb-15')}>
+            <span style={composeStyles('gray right')}>-</span>
+          </div>
+          <div style={composeStyles('w-15 p-4-8 pb-15')}>
+            <span style={composeStyles('gray right')}>-</span>
+          </div>
+          <div style={composeStyles('w-17 p-4-8 pb-15')}>
+            <span style={composeStyles('gray right')}>-</span>
+          </div>
+        </div>
+      )}
+
       {/* Summary */}
       <div
         style={{

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

@@ -0,0 +1,222 @@
+import { Button } from '@arcblock/ux';
+import DID from '@arcblock/ux/lib/DID';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import { StripeForm, api, formatError, usePaymentContext } from '@blocklet/payment-react';
+import type { TCustomer } from '@blocklet/payment-types';
+import { CreditCard, Email, AccountBalance } from '@mui/icons-material';
+import { Box, Stack, Typography } from '@mui/material';
+import { useSetState } from 'ahooks';
+import { useEffect } from 'react';
+
+interface PaymentMethodData {
+  id?: string;
+  type: string;
+  // Stripe payment methods
+  card?: {
+    brand: string;
+    last4: string;
+    exp_month: number;
+    exp_year: number;
+  };
+  link?: {
+    email: string;
+  };
+  us_bank_account?: {
+    account_type: string;
+    bank_name: string;
+    last4: string;
+  };
+  billing_details?: {
+    name?: string;
+    email?: string;
+    phone?: string;
+  };
+  // On-chain payment methods (arcblock/ethereum/base)
+  payer?: string;
+}
+
+interface Props {
+  subscriptionId: string;
+  customer: TCustomer;
+  paymentMethodDetails: PaymentMethodData | null;
+  editable?: boolean;
+  paymentMethodType: string;
+  onUpdate?: () => void;
+}
+
+export default function PaymentMethodInfo({
+  subscriptionId,
+  customer,
+  paymentMethodDetails,
+  editable = false,
+  onUpdate = () => {},
+  paymentMethodType,
+}: Props) {
+  const { t, locale } = useLocaleContext();
+  const { connect } = usePaymentContext();
+
+  const [state, setState] = useSetState<{
+    editing: boolean;
+    submitting: boolean;
+    setupIntentId: string | null;
+    clientSecret: string | null;
+    publishableKey: string | null;
+  }>({
+    editing: false,
+    submitting: false,
+    setupIntentId: null,
+    clientSecret: null,
+    publishableKey: null,
+  });
+
+  useEffect(() => {
+    if (!state.editing) {
+      setState({ clientSecret: null, publishableKey: null, setupIntentId: null });
+    }
+  }, [state.editing, setState]);
+
+  const handleEdit = async () => {
+    if (paymentMethodType === 'stripe') {
+      try {
+        setState({ submitting: true });
+        const { data } = await api.post(`/api/subscriptions/${subscriptionId}/update-stripe-payment-method`);
+        setState({
+          editing: true,
+          clientSecret: data.client_secret,
+          publishableKey: data.publishable_key,
+          setupIntentId: data.setup_intent_id,
+          submitting: false,
+        });
+      } catch (err) {
+        Toast.error(formatError(err));
+        setState({ submitting: false });
+      }
+    } else {
+      connect.open({
+        action: 'change-payer',
+        saveConnect: false,
+        locale: locale as 'en' | 'zh',
+        useSocket: true,
+        messages: {
+          scan: '',
+          title: t('admin.subscription.changePayer.connect.title'),
+          success: t('admin.subscription.changePayer.connect.success'),
+          error: t('admin.subscription.changePayer.connect.error'),
+          confirm: '',
+        } as any,
+        extraParams: { subscriptionId },
+        onSuccess: () => {
+          connect.close();
+          Toast.success(t('admin.subscription.changePayer.connect.success'));
+          onUpdate?.();
+        },
+        onClose: () => {
+          connect.close();
+        },
+        onError: (err: any) => {
+          Toast.error(formatError(err));
+        },
+      });
+    }
+  };
+
+  const handleConfirm = () => {
+    setTimeout(() => {
+      Toast.success(t('admin.subscription.changePayer.connect.success'));
+      setState({ editing: false, submitting: false });
+      onUpdate?.();
+    }, 2000);
+  };
+
+  const handleCancel = () => {
+    setState({ editing: false, clientSecret: null, publishableKey: null, setupIntentId: null });
+  };
+
+  if (!paymentMethodDetails) {
+    return null;
+  }
+
+  const { card, link, us_bank_account: usBankAccount, payer, type } = paymentMethodDetails;
+
+  if (state.editing && state.clientSecret && state.publishableKey) {
+    return (
+      <Box>
+        <StripeForm
+          clientSecret={state.clientSecret}
+          intentType="setup_intent"
+          publicKey={state.publishableKey}
+          customer={customer}
+          mode="setup"
+          onConfirm={handleConfirm}
+          onCancel={handleCancel}
+          returnUrl={window.location.href}
+        />
+      </Box>
+    );
+  }
+
+  const renderPaymentMethodInfo = () => {
+    if (type === 'card' && card) {
+      return (
+        <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
+          <CreditCard sx={{ fontSize: 16, color: 'text.secondary' }} />
+          <Typography variant="body2">
+            {card.brand.toUpperCase()} •••• {card.last4}
+          </Typography>
+        </Stack>
+      );
+    }
+
+    if (type === 'link' && link) {
+      return (
+        <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
+          <Email sx={{ fontSize: 16, color: 'text.secondary' }} />
+          <Typography variant="body2">
+            {t('admin.subscription.changePayer.stripe.linkType')} ({link.email})
+          </Typography>
+        </Stack>
+      );
+    }
+
+    if (type === 'us_bank_account' && usBankAccount) {
+      return (
+        <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
+          <AccountBalance sx={{ fontSize: 16, color: 'text.secondary' }} />
+          <Typography variant="body2">
+            {usBankAccount.bank_name || t('admin.subscription.changePayer.stripe.bankAccount')} ••••{' '}
+            {usBankAccount.last4}
+          </Typography>
+        </Stack>
+      );
+    }
+
+    if (['arcblock', 'ethereum', 'base'].includes(type) && payer) {
+      return <DID did={payer} responsive={false} compact copyable={false} />;
+    }
+
+    return (
+      <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+        -
+      </Typography>
+    );
+  };
+
+  return (
+    <Stack direction="row" spacing={1} sx={{ alignItems: 'center', flex: 1 }}>
+      {renderPaymentMethodInfo()}
+      {editable && (
+        <Button
+          variant="text"
+          size="small"
+          sx={{
+            color: 'text.link',
+          }}
+          loading={state.submitting}
+          onClick={handleEdit}>
+          {t('admin.subscription.changePayer.btn')}
+        </Button>
+      )}
+    </Stack>
+  );
+}