payment-kit 1.13.149 → 1.13.151

package/api/src/integrations/stripe/resource.ts

@@ -3,6 +3,7 @@ import merge from 'lodash/merge';
 
 import logger from '../../libs/logger';
 import { getPriceUintAmountByCurrency } from '../../libs/session';
+import { getSubscriptionItemPrice } from '../../libs/subscription';
 import {
   Customer,
   PaymentCurrency,
@@ -244,7 +245,7 @@ export async function ensureStripeSubscription(
     await Promise.all(
       stripeSubscription.items.data.map(async (x: any) => {
         const item = prices.find((y) => y.stripePrice.id === x.price.id);
-        const price = item.upsell_price || item.price; // local
+        const price = getSubscriptionItemPrice(item); // local
         let exist = await SubscriptionItem.findOne({
           where: { price_id: price.id, subscription_id: internal.id },
         });

package/api/src/libs/notification/template/subscription-refund-succeeded.ts

@@ -76,7 +76,7 @@ export class SubscriptionRefundSucceededEmailTemplate
     const productName = await getMainProductName(refund.subscription_id!);
     const at: string = formatTime(refund.created_at);
 
-    const paymentInfo: string = `${fromUnitToToken(paymentIntent?.amount, paymentCurrency.decimal)} ${
+    const paymentInfo: string = `${fromUnitToToken(paymentIntent?.amount_received || '0', paymentCurrency.decimal)} ${
       paymentCurrency.symbol
     }`;
     const refundInfo: string = `${fromUnitToToken(refund.amount, paymentCurrency.decimal)} ${paymentCurrency.symbol}`;

package/api/src/libs/subscription.ts

@@ -97,14 +97,14 @@ export function getSubscriptionCreateSetup(items: TLineItemExpanded[], currencyI
   let setup = new BN(0);
 
   items.forEach((x) => {
-    const price = x.upsell_price || x.price;
+    const price = getSubscriptionItemPrice(x);
     const unit = getPriceUintAmountByCurrency(price, currencyId);
     if (price.type === 'one_time' || (price.type === 'recurring' && price.recurring?.usage_type === 'licensed')) {
       setup = setup.add(new BN(unit).mul(new BN(x.quantity)));
     }
   });
 
-  const item = items.find((x) => x.price.type === 'recurring');
+  const item = items.find((x) => getSubscriptionItemPrice(x).type === 'recurring');
   const recurring = (item?.upsell_price || item?.price)?.recurring as PriceRecurring;
   const cycle = getRecurringPeriod(recurring);
   const trial = trialInDays ? trialInDays * 24 * 60 * 60 * 1000 : 0;
@@ -148,7 +148,9 @@ export function getSubscriptionCycleAmount(items: TLineItemExpanded[], currencyI
   let amount = new BN(0);
 
   items.forEach((x) => {
-    amount = amount.add(new BN(getPriceUintAmountByCurrency(x.price, currencyId)).mul(new BN(x.quantity)));
+    amount = amount.add(
+      new BN(getPriceUintAmountByCurrency(getSubscriptionItemPrice(x), currencyId)).mul(new BN(x.quantity))
+    );
   });
 
   return {
@@ -156,6 +158,10 @@ export function getSubscriptionCycleAmount(items: TLineItemExpanded[], currencyI
   };
 }
 
+export function getSubscriptionItemPrice(item: TLineItemExpanded) {
+  return item.upsell_price || item.price;
+}
+
 export async function createProration(
   subscription: Subscription,
   setup: ReturnType<typeof getSubscriptionCreateSetup>,
@@ -175,9 +181,10 @@ export async function createProration(
   // 1. get last invoice, and invoice items, filter invoice items that are in licensed recurring mode
   const invoiceItems = await InvoiceItem.findAll({ where: { invoice_id: lastInvoice.id, proration: false } });
   const invoiceItemsExpanded = await Price.expand(invoiceItems.map((x) => x.toJSON()));
-  const prorationItems = invoiceItemsExpanded.filter(
-    (x) => x.price.type === 'recurring' && x.price.recurring?.usage_type === 'licensed'
-  );
+  const prorationItems = invoiceItemsExpanded.filter((x) => {
+    const price = getSubscriptionItemPrice(x);
+    return price.type === 'recurring' && price.recurring?.usage_type === 'licensed';
+  });
 
   // 2. calculate proration args based on the filtered invoice items
   const precision = 10000;
@@ -191,7 +198,8 @@ export async function createProration(
   let unused = new BN(0);
   const prorations = await Promise.all(
     prorationItems.map((x: TLineItemExpanded & { [key: string]: any }) => {
-      const unitAmount = getPriceUintAmountByCurrency(x.price, subscription.currency_id);
+      const price = getSubscriptionItemPrice(x);
+      const unitAmount = getPriceUintAmountByCurrency(price, subscription.currency_id);
       const amount = new BN(unitAmount)
         .mul(new BN(x.quantity))
         .mul(new BN(prorationRate))
@@ -206,11 +214,11 @@ export async function createProration(
       unused = unused.add(new BN(amount));
 
       return {
-        price_id: x.price_id,
+        price_id: price.id,
         amount: `-${amount}`,
         quantity: x.quantity,
         // @ts-ignore
-        description: `Unused time on ${x.price.product.name} after ${dayjs().format('lll')}`,
+        description: `Unused time on ${price.product.name} after ${dayjs().format('lll')}`,
         period: {
           start: lastInvoice.period_start,
           end: lastInvoice.period_end,

package/api/src/queues/invoice.ts

@@ -78,6 +78,20 @@ export const handleInvoice = async (job: InvoiceJob) => {
       }
     }
 
+    if (invoice.payment_intent_id) {
+      const paymentIntent = await PaymentIntent.findByPk(invoice.payment_intent_id);
+      if (
+        paymentIntent &&
+        ['requires_action', 'requires_capture', 'requires_payment_method'].includes(paymentIntent.status)
+      ) {
+        await paymentIntent.update({
+          amount_received: '0',
+          status: 'succeeded',
+        });
+        logger.info('invoice payment intent updated', paymentIntent.id);
+      }
+    }
+
     return;
   }
 

package/api/src/queues/refund.ts

@@ -195,6 +195,7 @@ export const refundQueue = createQueue<RefundJob>({
 
 export const startRefundQueue = async () => {
   events.on('refund.created', (refund: Refund) => {
+    logger.info('schedule refund', { id: refund.id });
     refundQueue.push({ id: refund.id, job: { refundId: refund.id } });
   });
 

package/api/src/routes/checkout-sessions.ts

@@ -82,7 +82,7 @@ export const formatCheckoutSession = async (payload: any, throwOnEmptyItems = tr
         terms_of_service: 'none',
       },
       invoice_creation: {
-        enabled: false,
+        enabled: true,
       },
       phone_number_collection: {
         enabled: false,

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

@@ -25,6 +25,7 @@ import { Product } from '../../store/models/product';
 import { SetupIntent } from '../../store/models/setup-intent';
 import { Subscription } from '../../store/models/subscription';
 import { SubscriptionItem } from '../../store/models/subscription-item';
+import { getSubscriptionItemPrice } from '../../libs/subscription';
 
 type Result = {
   checkoutSession: CheckoutSession;
@@ -446,9 +447,10 @@ export async function ensureInvoiceAndItems({
     : [];
 
   const getLineSetup = (x: TLineItemExpanded) => {
-    const price = x.upsell_price || x.price;
+    const price = getSubscriptionItemPrice(x);
     if (price.type === 'recurring' && trailing) {
       return {
+        price,
         amount: '0',
         // @ts-ignore
         description: trailing ? `${price.product.name} (trailing)` : price.product.name,
@@ -460,6 +462,7 @@ export async function ensureInvoiceAndItems({
     }
 
     return {
+      price,
       amount: new BN(getPriceUintAmountByCurrency(price, props.currency_id)).mul(new BN(x.quantity)).toString(),
       // @ts-ignore
       description: price.product.name,
@@ -470,7 +473,7 @@ export async function ensureInvoiceAndItems({
   const items = await Promise.all(
     lineItems.map((x: TLineItemExpanded) => {
       const setup = getLineSetup(x);
-      const price = x.upsell_price || x.price;
+      const { price } = setup;
       let { quantity } = x;
       if (price.type === 'recurring') {
         if (price.recurring?.usage_type === 'metered' && !metered) {
@@ -489,10 +492,10 @@ export async function ensureInvoiceAndItems({
         period: setup.period,
         currency_id: props.currency_id,
         customer_id: customer.id,
-        price_id: x.price_id,
+        price_id: price.id,
         invoice_id: invoice.id,
         subscription_id: subscription?.id,
-        subscription_item_id: subscriptionItems.find((si) => si.price_id === x.price_id)?.id,
+        subscription_item_id: subscriptionItems.find((si) => si.price_id === price.id)?.id,
         discountable: false,
         discounts: [],
         discount_amounts: [],

package/api/src/routes/refunds.ts

@@ -22,11 +22,15 @@ const paginationSchema = Joi.object<{
   pageSize: number;
   livemode?: boolean;
   status?: string;
+  invoice_id: string;
+  subscription_id: string;
 }>({
   page: Joi.number().integer().min(1).default(1),
   pageSize: Joi.number().integer().min(1).max(100).default(20),
   livemode: Joi.boolean().empty(''),
   status: Joi.string().empty(''),
+  invoice_id: Joi.string().empty(''),
+  subscription_id: Joi.string().empty(''),
 });
 router.get('/', auth, async (req, res) => {
   const { page, pageSize, livemode, status, ...query } = await paginationSchema.validateAsync(req.query, {
@@ -38,6 +42,14 @@ router.get('/', auth, async (req, res) => {
   if (typeof livemode === 'boolean') {
     where.livemode = livemode;
   }
+
+  if (query.invoice_id) {
+    where.invoice_id = query.invoice_id;
+  }
+
+  if (query.subscription_id) {
+    where.subscription_id = query.subscription_id;
+  }
   if (status) {
     where.status = status
       .split(',')
@@ -60,6 +72,7 @@ router.get('/', auth, async (req, res) => {
     include: [
       { model: Customer, as: 'customer' },
       { model: PaymentCurrency, as: 'paymentCurrency' },
+      { model: PaymentMethod, as: 'paymentMethod' },
       // { model: PaymentIntent, as: 'paymentIntent' },
       // { model: Invoice, as: 'invoice' },
       // { model: Subscription, as: 'subscription' },
@@ -76,6 +89,7 @@ router.get('/:id', auth, async (req, res) => {
       { model: Customer, as: 'customer' },
       { model: PaymentCurrency, as: 'paymentCurrency' },
       { model: PaymentIntent, as: 'paymentIntent' },
+      { model: PaymentMethod, as: 'paymentMethod' },
       { model: Invoice, as: 'invoice' },
       { model: Subscription, as: 'subscription' },
     ],

package/api/src/routes/subscriptions.ts

@@ -312,6 +312,7 @@ router.put('/:id/cancel', authPortal, async (req, res) => {
         reason: 'requested_by_admin',
         currency_id: subscription.currency_id,
         customer_id: subscription.customer_id,
+        payment_method_id: subscription.default_payment_method_id,
         payment_intent_id: result.lastInvoice.payment_intent_id as string,
         invoice_id: result.lastInvoice.id,
         subscription_id: subscription.id,
@@ -329,7 +330,7 @@ router.put('/:id/cancel', authPortal, async (req, res) => {
           unused_period_end: subscription.current_period_end,
         },
       });
-      logger.info('subscription cancel refund done', {
+      logger.info('subscription cancel refund created', {
         ...req.params,
         ...req.body,
         ...pick(result, ['total', 'unused']),

package/api/src/store/migrations/20240225-refund-ext.ts

@@ -0,0 +1,22 @@
+/* eslint-disable no-await-in-loop */
+import { DataTypes } from 'sequelize';
+
+import { Migration, safeApplyColumnChanges } from '../migrate';
+
+export const up: Migration = async ({ context }) => {
+  await safeApplyColumnChanges(context, {
+    refunds: [
+      {
+        name: 'payment_method_id',
+        field: {
+          type: DataTypes.STRING(30),
+          allowNull: true,
+        },
+      },
+    ],
+  });
+};
+
+export const down: Migration = async ({ context }) => {
+  await context.removeColumn('refunds', 'payment_method_id');
+};

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

@@ -230,7 +230,7 @@ export type TPricingTableExpanded = TPricingTable & {
 export type TRefundExpanded = TRefund & {
   customer: TCustomer;
   paymentCurrency: TPaymentCurrency;
-  paymentMethod?: TPaymentMethod;
+  paymentMethod: TPaymentMethod;
   paymentIntent: TPaymentIntent;
   invoice?: TInvoice;
   subscription?: TSubscription;

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

@@ -25,6 +25,7 @@ export class Refund extends Model<InferAttributes<Refund>, InferCreationAttribut
   declare currency_id: string;
   declare customer_id: string;
   declare payment_intent_id: string;
+  declare payment_method_id: string;
   declare invoice_id?: string;
   declare subscription_id?: string;
 
@@ -173,21 +174,30 @@ export class Refund extends Model<InferAttributes<Refund>, InferCreationAttribut
   };
 
   public static initialize(sequelize: any) {
-    this.init(Refund.GENESIS_ATTRIBUTES, {
-      sequelize,
-      modelName: 'Refund',
-      tableName: 'refunds',
-      createdAt: 'created_at',
-      updatedAt: 'updated_at',
-      hooks: {
-        afterCreate: (model: Refund, options) =>
-          createEvent('Refund', 'refund.created', model, options).catch(console.error),
-        afterUpdate: (model: Refund, options) =>
-          createStatusEvent('Refund', 'refund', { canceled: 'canceled', succeeded: 'succeeded' }, model, options),
-        afterDestroy: (model: Refund, options) =>
-          createEvent('Refund', 'refund.deleted', model, options).catch(console.error),
+    this.init(
+      {
+        ...Refund.GENESIS_ATTRIBUTES,
+        payment_method_id: {
+          type: DataTypes.STRING(30),
+          allowNull: true,
+        },
       },
-    });
+      {
+        sequelize,
+        modelName: 'Refund',
+        tableName: 'refunds',
+        createdAt: 'created_at',
+        updatedAt: 'updated_at',
+        hooks: {
+          afterCreate: (model: Refund, options) =>
+            createEvent('Refund', 'refund.created', model, options).catch(console.error),
+          afterUpdate: (model: Refund, options) =>
+            createStatusEvent('Refund', 'refund', { canceled: 'canceled', succeeded: 'succeeded' }, model, options),
+          afterDestroy: (model: Refund, options) =>
+            createEvent('Refund', 'refund.deleted', model, options).catch(console.error),
+        },
+      }
+    );
   }
 
   public static associate(models: any) {
@@ -206,6 +216,11 @@ export class Refund extends Model<InferAttributes<Refund>, InferCreationAttribut
       foreignKey: 'id',
       as: 'paymentIntent',
     });
+    this.hasOne(models.PaymentMethod, {
+      sourceKey: 'payment_method_id',
+      foreignKey: 'id',
+      as: 'paymentMethod',
+    });
     this.hasOne(models.Invoice, {
       sourceKey: 'invoice_id',
       foreignKey: 'id',

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.13.149",
+  "version": "1.13.151",
   "scripts": {
     "dev": "cross-env COMPONENT_STORE_URL=https://test.store.blocklet.dev blocklet dev --open",
     "eject": "vite eject",
@@ -50,7 +50,7 @@
     "@arcblock/jwt": "^1.18.110",
     "@arcblock/ux": "^2.9.29",
     "@blocklet/logger": "1.16.23",
-    "@blocklet/payment-react": "1.13.149",
+    "@blocklet/payment-react": "1.13.151",
     "@blocklet/sdk": "1.16.23",
     "@blocklet/ui-react": "^2.9.29",
     "@blocklet/uploader": "^0.0.73",
@@ -110,7 +110,7 @@
   "devDependencies": {
     "@abtnode/types": "1.16.23",
     "@arcblock/eslint-config-ts": "^0.2.4",
-    "@blocklet/payment-types": "1.13.149",
+    "@blocklet/payment-types": "1.13.151",
     "@types/cookie-parser": "^1.4.6",
     "@types/cors": "^2.8.17",
     "@types/dotenv-flow": "^3.3.3",
@@ -149,5 +149,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "0edf179eb97dccee7d6ccbee7ffc00d845e4cad4"
+  "gitHead": "1697697b65f9372e868fb10d5766edb3144f44f8"
 }

package/src/components/invoice/table.tsx

@@ -62,7 +62,7 @@ export default function InvoiceTable({ invoice, simple }: Props) {
             </TableCell>
           )}
         </TableRow>
-        {invoice.period_end && invoice.period_start && (
+        {invoice.period_end > 0 && invoice.period_start > 0 && (
           <TableRow sx={{ borderBottom: '1px solid #eee' }}>
             <TableCell align="left" colSpan={simple ? 4 : 5}>
               <Typography component="span" variant="body1" color="text.secondary">

package/src/components/payment-intent/list.tsx

@@ -108,7 +108,7 @@ export default function PaymentList({ customer_id, invoice_id, features }: ListP
           const item = data.list[index] as TPaymentIntentExpanded;
           return (
             <Typography component="strong" fontWeight={600}>
-              {fromUnitToToken(item?.amount, item?.paymentCurrency.decimal)}&nbsp;
+              {fromUnitToToken(item?.amount_received, item?.paymentCurrency.decimal)}&nbsp;
               {item?.paymentCurrency.symbol}
             </Typography>
           );

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

@@ -70,25 +70,6 @@ export default function AfterPay() {
           )}
         />
       )}
-      <Typography variant="h6" sx={{ fontWeight: 600 }}>
-        {t('admin.invoices')}
-      </Typography>
-      <Controller
-        name="invoice_creation.enabled"
-        control={control}
-        render={({ field }) => (
-          <FormControlLabel
-            control={
-              <Checkbox
-                checked={getValues().invoice_creation.enabled}
-                {...field}
-                onChange={(_, checked) => setValue(field.name, checked)}
-              />
-            }
-            label={t('admin.paymentLink.createInvoice')}
-          />
-        )}
-      />
       <Controller
         name="nft_mint_settings.enabled"
         control={control}

package/src/components/refund/list.tsx

@@ -27,6 +27,7 @@ type SearchProps = {
   page: number;
   customer_id?: string;
   invoice_id?: string;
+  subscription_id?: string;
 };
 
 type ListProps = {
@@ -37,6 +38,7 @@ type ListProps = {
   };
   customer_id?: string;
   invoice_id?: string;
+  subscription_id?: string;
 };
 
 const getListKey = (props: ListProps) => {
@@ -50,16 +52,17 @@ const getListKey = (props: ListProps) => {
   return 'refunds';
 };
 
-PaymentList.defaultProps = {
+RefundList.defaultProps = {
   features: {
     customer: true,
     filter: true,
   },
   customer_id: '',
   invoice_id: '',
+  subscription_id: '',
 };
 
-export default function PaymentList({ customer_id, invoice_id, features }: ListProps) {
+export default function RefundList({ customer_id, invoice_id, subscription_id, features }: ListProps) {
   const { t } = useLocaleContext();
   const navigate = useNavigate();
 
@@ -70,6 +73,7 @@ export default function PaymentList({ customer_id, invoice_id, features }: ListP
     status: '',
     customer_id,
     invoice_id,
+    subscription_id,
     pageSize: persisted.rowsPerPage || 20,
     page: persisted.page ? persisted.page + 1 : 1,
   });

package/src/components/section/header.tsx

@@ -5,6 +5,7 @@ type Props = {
   title: string;
   children?: ReactNode;
   mb?: number;
+  mt?: number;
 };
 
 export default function SectionHeader(props: Props) {
@@ -16,7 +17,7 @@ export default function SectionHeader(props: Props) {
       alignItems="center"
       flexWrap="wrap"
       gap={1}
-      sx={{ mb: props.mb, pb: 1, width: 1, borderBottom: '1px solid #eee' }}>
+      sx={{ mb: props.mb, mt: props.mt, pb: 1, width: 1, borderBottom: '1px solid #eee' }}>
       <Typography variant="h6" sx={{ fontWeight: 600 }}>
         {props.title}
       </Typography>
@@ -28,4 +29,5 @@ export default function SectionHeader(props: Props) {
 SectionHeader.defaultProps = {
   children: null,
   mb: 1,
+  mt: 1,
 };

package/src/components/subscription/items/usage-records.tsx

@@ -48,7 +48,7 @@ export function UsageRecordDialog(props: { subscriptionId: string; id: string; o
       options: {
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TUsageRecord;
-          return formatToDatetime(item.timestamp);
+          return formatToDatetime(item.timestamp * 1000);
         },
       },
     },

package/src/locales/en.tsx

@@ -2,78 +2,7 @@ import flat from 'flat';
 
 export default flat({
   common: {
-    id: 'ID',
-    url: 'URL',
-    createdAt: 'Created At',
-    updatedAt: 'Updated At',
-    resumesAt: 'Resume At',
-    actions: 'Actions',
-    options: 'Options',
-    advanced: 'Advanced options',
-    login: 'Login to access this page',
-    settings: 'Settings',
-    preview: 'Preview',
-    required: 'Required',
-    setup: 'Setup',
-    name: 'Name',
-    amount: 'Amount',
-    total: 'Total',
-    subtotal: 'Subtotal',
-    status: 'Status',
-    livemode: 'Test mode',
-    afterTime: 'After {time}',
-    timeAgo: '{time} ago',
-    save: 'Save',
-    saved: 'Changes saved',
-    remove: 'Remove',
-    removed: 'Resource removed',
-    confirm: 'Confirm',
-    cancel: 'Cancel',
-    every: 'every',
-    per: 'per {interval}',
-    slash: '/ {interval}',
-    unit: 'units',
-    edit: 'Edit',
-    quantity: 'Quantity',
-    yes: 'Yes',
-    no: 'No',
-    email: 'Email',
-    did: 'DID',
-    txHash: 'Transaction',
-    customer: 'Customer',
-    custom: 'Custom',
-    description: 'Description',
-    statementDescriptor: 'Statement descriptor',
-    loadMore: 'View more {resource}',
-    loadingMore: 'Loading more {resource}...',
-    noMore: 'No more {resource}',
-    copied: 'Copied',
-    previous: 'Back',
-    continue: 'Continue',
-    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}',
     redirecting: 'Redirecting...',
-    hours: 'hours',
-    days: 'days',
-    weeks: 'weeks',
-    months: 'months',
-    years: 'years',
     metadata: {
       label: 'Metadata',
       add: 'Add more metadata',
@@ -306,6 +235,7 @@ export default flat({
       view: 'View payment detail',
       empty: 'No payment intent',
       refund: 'Refund payment',
+      received: 'Received',
     },
     paymentMethod: {
       _name: 'Payment Method',

package/src/locales/zh.tsx

@@ -2,78 +2,7 @@ import flat from 'flat';
 
 export default flat({
   common: {
-    id: 'ID',
-    url: 'URL',
-    createdAt: '创建时间',
-    updatedAt: '更新时间',
-    resumesAt: '恢复时间',
-    actions: '操作',
-    options: '选项',
-    advanced: '高级选项',
-    settings: '设置',
-    preview: '预览',
-    required: '必填',
-    setup: '设置',
-    name: '姓名',
-    login: '登录以访问此页面',
-    amount: '金额',
-    total: '总计',
-    subtotal: '小计',
-    status: '状态',
-    livemode: '测试模式',
-    afterTime: '在{time}后',
-    timeAgo: '{time}前',
-    save: '保存',
-    saved: '更改已保存',
-    remove: '删除',
-    removed: '资源已删除',
-    confirm: '确认',
-    cancel: '取消',
-    every: '每',
-    per: '每{interval}',
-    slash: '每{interval}',
-    unit: '件',
-    edit: '编辑',
-    quantity: '数量',
-    yes: '是',
-    no: '否',
-    email: '邮箱',
-    did: 'DID',
-    txHash: '交易哈希',
-    customer: '客户',
-    custom: '自定义',
-    description: '描述',
-    statementDescriptor: '声明描述',
-    loadMore: '查看更多{resource}',
-    loadingMore: '正在加载更多{resource}...',
-    noMore: '没有更多{resource}',
-    copied: '已复制',
-    previous: '返回',
-    continue: '继续',
-    qty: '{count} 件',
-    each: '每件 {unit}',
-    trial: '免费试用 {count} 天',
-    billed: '{rule}收费',
-    metered: '按用量',
-    hour: '小时',
-    day: '天',
-    week: '周',
-    month: '月',
-    year: '年',
-    hourly: '按小时',
-    daily: '按天',
-    weekly: '按周',
-    monthly: '按月',
-    yearly: '按年',
-    month3: '按季度',
-    month6: '按半年',
-    recurring: '每{count}{interval}',
     redirecting: '跳转中...',
-    hours: '小时',
-    days: '天',
-    weeks: '周',
-    months: '月',
-    years: '年',
     metadata: {
       label: '元数据',
       add: '添加更多元数据',
@@ -298,6 +227,7 @@ export default flat({
       view: '查看支付详情',
       empty: '没有支付意向',
       refund: '退款支付',
+      received: '实收金额',
     },
     paymentMethod: {
       _name: '支付方式',

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

@@ -20,6 +20,7 @@ import InvoiceActions from '../../../../components/invoice/action';
 import InvoiceTable from '../../../../components/invoice/table';
 import MetadataEditor from '../../../../components/metadata/editor';
 import PaymentList from '../../../../components/payment-intent/list';
+import RefundList from '../../../../components/refund/list';
 import SectionHeader from '../../../../components/section/header';
 
 const fetchData = (id: string): Promise<TInvoiceExpanded> => {
@@ -145,6 +146,12 @@ export default function InvoiceDetail(props: { id: string }) {
           <PaymentList features={{ customer: false, toolbar: false }} invoice_id={data.id} />
         </Box>
       </Box>
+      <Box className="section">
+        <SectionHeader title={t('admin.refunds')} mb={0} />
+        <Box className="section-body">
+          <RefundList features={{ customer: false, toolbar: false }} invoice_id={data.id} />
+        </Box>
+      </Box>
       <Box className="section">
         <SectionHeader title={t('admin.connections')} />
         <Stack>

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

@@ -16,6 +16,7 @@ import EventList from '../../../../components/event/list';
 import InfoRow from '../../../../components/info-row';
 import InvoiceList from '../../../../components/invoice/list';
 import MetadataEditor from '../../../../components/metadata/editor';
+import RefundList from '../../../../components/refund/list';
 import SectionHeader from '../../../../components/section/header';
 import SubscriptionActions from '../../../../components/subscription/actions';
 import SubscriptionItemList from '../../../../components/subscription/items';
@@ -205,6 +206,12 @@ export default function SubscriptionDetail(props: { id: string }) {
           <InvoiceList features={{ customer: true, toolbar: false }} subscription_id={data.id} />
         </Box>
       </Box>
+      <Box className="section">
+        <SectionHeader title={t('admin.refunds')} mb={0} />
+        <Box className="section-body">
+          <RefundList features={{ customer: true, toolbar: false }} subscription_id={data.id} />
+        </Box>
+      </Box>
       <Box className="section">
         <SectionHeader title={t('admin.events')} />
         <Box className="section-body">

package/src/pages/admin/index.tsx

@@ -1,7 +1,7 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { PaymentProvider, Switch, usePaymentContext } from '@blocklet/payment-react';
 import { Box, Chip, Stack } from '@mui/material';
-import React, { isValidElement, startTransition } from 'react';
+import React, { Suspense, isValidElement, startTransition } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
 import Layout from '../../components/layout/admin';
@@ -99,7 +99,9 @@ function Admin() {
           </label>
         </Stack>
       </Stack>
-      <div className="page-content">{isValidElement(TabComponent) ? TabComponent : <TabComponent />}</div>
+      <Suspense fallback={<div />}>
+        <div className="page-content">{isValidElement(TabComponent) ? TabComponent : <TabComponent />}</div>
+      </Suspense>
     </Layout>
   );
 }

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

@@ -77,7 +77,8 @@ export default function PaymentIntentDetail(props: { id: string }) {
   const onUpdateMetadata = createUpdater('metadata');
 
   const currency = data.paymentCurrency;
-  const amount = [fromUnitToToken(data?.amount, currency.decimal), currency.symbol].join(' ');
+  const received = [fromUnitToToken(data?.amount_received, currency.decimal), currency.symbol].join(' ');
+  const total = [fromUnitToToken(data?.amount, currency.decimal), currency.symbol].join(' ');
 
   return (
     <Root direction="column" spacing={4} mb={4}>
@@ -96,7 +97,7 @@ export default function PaymentIntentDetail(props: { id: string }) {
         <Box mt={2}>
           <Stack direction="row" justifyContent="space-between" alignItems="center">
             <Stack direction="row" alignItems="center">
-              <Amount amount={amount} sx={{ my: 0, fontSize: '2rem', lineHeight: '1rem' }} />
+              <Amount amount={received} sx={{ my: 0, fontSize: '2rem', lineHeight: '1rem' }} />
               <Status label={data.status} color={getPaymentIntentStatusColor(data.status)} sx={{ ml: 2 }} />
             </Stack>
             <PaymentIntentActions data={data} variant="normal" />
@@ -117,7 +118,8 @@ export default function PaymentIntentDetail(props: { id: string }) {
       <Box className="section">
         <SectionHeader title={t('admin.details')} />
         <Stack>
-          <InfoRow label={t('common.amount')} value={amount} />
+          <InfoRow label={t('common.amount')} value={total} />
+          <InfoRow label={t('admin.paymentIntent.received')} value={received} />
           <InfoRow
             label={t('common.status')}
             value={
@@ -191,16 +193,18 @@ export default function PaymentIntentDetail(props: { id: string }) {
       <Box className="section">
         <SectionHeader title={t('admin.connections')} />
         <Stack>
-          <InfoRow
-            label={t('admin.subscription.name')}
-            value={
-              data.subscription ? <Link to={`/admin/billing/${data.subscription.id}`}>{data.subscription.id}</Link> : ''
-            }
-          />
-          <InfoRow
-            label={t('admin.invoice.name')}
-            value={data.invoice_id ? <Link to={`/admin/billing/${data.invoice_id}`}>{data.invoice_id}</Link> : ''}
-          />
+          {data.subscription && (
+            <InfoRow
+              label={t('admin.subscription.name')}
+              value={<Link to={`/admin/billing/${data.subscription.id}`}>{data.subscription.id}</Link>}
+            />
+          )}
+          {data.invoice_id && (
+            <InfoRow
+              label={t('admin.invoice.name')}
+              value={<Link to={`/admin/billing/${data.invoice_id}`}>{data.invoice_id}</Link>}
+            />
+          )}
         </Stack>
       </Box>
       <Box className="section">

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

@@ -52,7 +52,7 @@ export default function CreatePaymentLink() {
         terms_of_service: 'none',
       },
       invoice_creation: {
-        enabled: false,
+        enabled: true,
       },
       phone_number_collection: {
         enabled: false,

package/src/pages/customer/invoice.tsx

@@ -1,10 +1,18 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { Status, TxLink, api, formatError, formatTime, getInvoiceStatusColor } from '@blocklet/payment-react';
+import {
+  PaymentProvider,
+  Status,
+  TxLink,
+  api,
+  formatError,
+  formatTime,
+  getInvoiceStatusColor,
+} from '@blocklet/payment-react';
 import type { TInvoiceExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
-import { Alert, Box, Button, CircularProgress, Grid, Stack, Typography } from '@mui/material';
+import { Alert, Box, Button, CircularProgress, Stack, Typography } from '@mui/material';
 import { useRequest, useSetState } from 'ahooks';
 import { useEffect } from 'react';
 import { Link, useParams, useSearchParams } from 'react-router-dom';
@@ -14,6 +22,7 @@ import InfoRow from '../../components/info-row';
 import InvoiceTable from '../../components/invoice/table';
 import SectionHeader from '../../components/section/header';
 import { useSessionContext } from '../../contexts/session';
+import CustomerRefundList from './refund/list';
 
 const fetchData = (id: string): Promise<TInvoiceExpanded> => {
   return api.get(`/api/invoices/${id}`).then((res) => res.data);
@@ -23,7 +32,7 @@ const fetchData = (id: string): Promise<TInvoiceExpanded> => {
 export default function CustomerHome() {
   const { t } = useLocaleContext();
   const [searchParams] = useSearchParams();
-  const { connectApi } = useSessionContext();
+  const { session, connectApi } = useSessionContext();
   const params = useParams<{ id: string }>();
   const [state, setState] = useSetState({
     downloading: false,
@@ -89,21 +98,19 @@ export default function CustomerHome() {
   }
 
   return (
-    <Grid container spacing={3} sx={{ mt: 1 }}>
-      <Grid item xs={12} md={12}>
+    <Box sx={{ maxWidth: '1200px' }}>
+      <PaymentProvider session={session} connect={connectApi}>
         <Link to="/customer">
-          <Stack direction="row" alignItems="center" sx={{ fontWeight: 'normal' }}>
+          <Stack direction="row" alignItems="center" sx={{ fontWeight: 'normal', padding: '10px 0' }}>
             <ArrowBackOutlined fontSize="small" sx={{ mr: 0.5, color: 'text.secondary' }} />
             <Typography variant="h6" sx={{ color: 'text.secondary', fontWeight: 'normal' }}>
               {t('common.previous')}
             </Typography>
           </Stack>
         </Link>
-      </Grid>
-      <Grid item xs={12} md={5}>
         <Box>
-          <SectionHeader title={t('payment.customer.invoice.summary')} mb={0} />
-          <Stack sx={{ mt: 1 }}>
+          <SectionHeader title={t('payment.customer.invoice.summary')} mb={0} mt={1} />
+          <Stack sx={{ mt: 1, display: 'grid', gridTemplateColumns: '50% 50%' }}>
             <InfoRow label={t('admin.invoice.number')} value={data.number} />
             <InfoRow label={t('admin.invoice.from')} value={data.statement_descriptor || blocklet.appName} />
             <InfoRow label={t('admin.invoice.customer')} value={data.customer.name} />
@@ -111,14 +118,12 @@ export default function CustomerHome() {
               label={t('common.status')}
               value={<Status label={data.status} color={getInvoiceStatusColor(data.status)} />}
             />
-            <InfoRow
-              label={t('admin.subscription.currentPeriod')}
-              value={
-                data.period_start && data.period_end
-                  ? [formatTime(data.period_start * 1000), formatTime(data.period_end * 1000)].join(' ~ ')
-                  : ''
-              }
-            />
+            {data.period_start > 0 && data.period_end > 0 && (
+              <InfoRow
+                label={t('admin.subscription.currentPeriod')}
+                value={[formatTime(data.period_start * 1000), formatTime(data.period_end * 1000)].join(' ~ ')}
+              />
+            )}
             {data.status_transitions?.paid_at && (
               <InfoRow label={t('admin.invoice.paidAt')} value={formatTime(data.status_transitions.paid_at * 1000)} />
             )}
@@ -138,9 +143,7 @@ export default function CustomerHome() {
             />
           </Stack>
         </Box>
-      </Grid>
-      <Grid item xs={12} md={7}>
-        <SectionHeader title={t('payment.customer.invoice.details')} mb={0}>
+        <SectionHeader title={t('payment.customer.invoice.details')} mb={0} mt={1}>
           {['open', 'paid', 'uncollectible'].includes(data.status) && (
             <Button
               variant="contained"
@@ -160,7 +163,13 @@ export default function CustomerHome() {
             </Button>
           )}
         </Stack>
-      </Grid>
-    </Grid>
+        <Box className="section">
+          <SectionHeader title={t('admin.refunds')} mb={0} mt={0} />
+          <Box className="section-body">
+            <CustomerRefundList invoice_id={data.id} />
+          </Box>
+        </Box>
+      </PaymentProvider>
+    </Box>
   );
 }

package/src/pages/customer/refund/list.tsx

@@ -0,0 +1,125 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { Status, TxLink, api, formatToDate, getPaymentIntentStatusColor } from '@blocklet/payment-react';
+import type { Paginated, PaymentDetails, TPaymentIntentExpanded } from '@blocklet/payment-types';
+import { Box, Button, CircularProgress, Stack, Typography } from '@mui/material';
+import { fromUnitToToken } from '@ocap/util';
+import { useInfiniteScroll } from 'ahooks';
+
+const groupByDate = (items: TPaymentIntentExpanded[]) => {
+  const grouped: { [key: string]: TPaymentIntentExpanded[] } = {};
+  items.forEach((item) => {
+    const date = new Date(item.created_at).toLocaleDateString();
+    if (!grouped[date]) {
+      grouped[date] = [];
+    }
+    grouped[date]?.push(item);
+  });
+  return grouped;
+};
+
+const fetchData = (params: Record<string, any> = {}): Promise<Paginated<TPaymentIntentExpanded>> => {
+  const search = new URLSearchParams();
+  Object.keys(params).forEach((key) => {
+    search.set(key, String(params[key]));
+  });
+  return api.get(`/api/refunds?${search.toString()}`).then((res) => res.data);
+};
+
+type Props = {
+  invoice_id: string;
+};
+
+const pageSize = 10;
+
+export default function CustomerRefundList({ invoice_id }: Props) {
+  const { t } = useLocaleContext();
+
+  const { data, loadMore, loadingMore, loading } = useInfiniteScroll<Paginated<TPaymentIntentExpanded>>(
+    (d) => {
+      const page = d ? Math.ceil(d.list.length / pageSize) + 1 : 1;
+      return fetchData({ page, pageSize, invoice_id });
+    },
+    {
+      reloadDeps: [invoice_id],
+    }
+  );
+
+  if (loading || !data) {
+    return <CircularProgress />;
+  }
+
+  if (data && data.list.length === 0) {
+    return <Typography color="text.secondary">{t('payment.customer.payment.empty')}</Typography>;
+  }
+
+  const hasMore = data && data.list.length < data.count;
+
+  const grouped = groupByDate(data.list as any);
+
+  return (
+    <Stack direction="column" gap={1} sx={{ mt: 1 }}>
+      {Object.entries(grouped).map(([date, payments]) => (
+        <Box key={date}>
+          <Typography sx={{ fontWeight: 'bold', color: 'text.secondary', mt: 2, mb: 1 }}>{date}</Typography>
+          {payments.map((item: any) => {
+            return (
+              <Stack
+                key={item.id}
+                direction={{
+                  xs: 'column',
+                  sm: 'row',
+                }}
+                sx={{ my: 1 }}
+                gap={{
+                  xs: 0.5,
+                  sm: 1.5,
+                  md: 3,
+                }}
+                flexWrap="nowrap">
+                <Box flex={3}>
+                  <Typography>{formatToDate(item.created_at)}</Typography>
+                </Box>
+                <Box flex={2}>
+                  <Typography textAlign="right">
+                    {fromUnitToToken(item.amount, item.paymentCurrency.decimal)}&nbsp;
+                    {item.paymentCurrency.symbol}
+                  </Typography>
+                </Box>
+                <Box flex={3}>
+                  <Status label={item.status} color={getPaymentIntentStatusColor(item.status)} />
+                </Box>
+                <Box flex={3}>
+                  <Typography>{item.description || '-'}</Typography>
+                </Box>
+                <Box flex={3} sx={{ minWidth: '220px' }}>
+                  {item.payment_details?.arcblock?.tx_hash && (
+                    <TxLink
+                      details={item.payment_details as PaymentDetails}
+                      method={item.paymentMethod}
+                      mode="customer"
+                    />
+                  )}
+                </Box>
+              </Stack>
+            );
+          })}
+        </Box>
+      ))}
+      <Box>
+        {hasMore && (
+          <Button variant="text" type="button" color="inherit" onClick={loadMore} disabled={loadingMore}>
+            {loadingMore
+              ? t('common.loadingMore', { resource: t('payment.customer.payments') })
+              : t('common.loadMore', { resource: t('payment.customer.payments') })}
+          </Button>
+        )}
+        {!hasMore && data.count > pageSize && (
+          <Typography color="text.secondary">
+            {t('common.noMore', { resource: t('payment.customer.payments') })}
+          </Typography>
+        )}
+      </Box>
+    </Stack>
+  );
+}