payment-kit 1.15.4 → 1.15.5

package/api/src/libs/notification/template/subscription-trial-will-end.ts

@@ -7,7 +7,7 @@ import prettyMsI18n from 'pretty-ms-i18n';
 import { getTokenSummaryByDid } from '@api/integrations/arcblock/stake';
 import { getUserLocale } from '../../../integrations/blocklet/notification';
 import { translate } from '../../../locales';
-import { Customer, Subscription } from '../../../store/models';
+import { Customer, PaymentMethod, Subscription } from '../../../store/models';
 import { PaymentCurrency } from '../../../store/models/payment-currency';
 import { PaymentDetail, getPaymentAmountForCycleSubscription } from '../../payment';
 import { getMainProductName } from '../../product';
@@ -36,6 +36,7 @@ interface SubscriptionTrialWilEndEmailTemplateContext {
   duration: string;
 
   viewSubscriptionLink: string;
+  paymentMethod: PaymentMethod | null;
 }
 
 export class SubscriptionTrialWilEndEmailTemplate
@@ -71,6 +72,8 @@ export class SubscriptionTrialWilEndEmailTemplate
       },
     })) as PaymentCurrency;
 
+    const paymentMethod: PaymentMethod | null = await PaymentMethod.findByPk(paymentCurrency.payment_method_id);
+
     const userDid = customer.did;
     const locale = await getUserLocale(userDid);
     const productName = await getMainProductName(subscription.id);
@@ -116,6 +119,7 @@ export class SubscriptionTrialWilEndEmailTemplate
       duration,
 
       viewSubscriptionLink,
+      paymentMethod,
     };
   }
 
@@ -157,7 +161,7 @@ export class SubscriptionTrialWilEndEmailTemplate
       currentPeriodStart,
       currentPeriodEnd,
       duration,
-
+      paymentMethod,
       viewSubscriptionLink,
     } = await this.getContext();
 
@@ -167,24 +171,27 @@ export class SubscriptionTrialWilEndEmailTemplate
       return null;
     }
 
+    const isStripe = paymentMethod?.type === 'stripe';
+
     const template: BaseEmailTemplateType = {
       title: `${translate('notification.subscriptionTrialWillEnd.title', locale, {
         productName,
         willRenewDuration,
       })}`,
-      body: canPay
-        ? `${translate('notification.subscriptionTrialWillEnd.body', locale, {
-            at,
-            productName,
-            willRenewDuration,
-          })}`
-        : `${translate('notification.subscriptionTrialWillEnd.unableToPayBody', locale, {
-            at,
-            productName,
-            willRenewDuration,
-            balance: `${paymentDetail.balance} ${paymentDetail.symbol}`,
-            price: `${paymentDetail.price} ${paymentDetail.symbol}`,
-          })}`,
+      body:
+        canPay || isStripe
+          ? `${translate('notification.subscriptionTrialWillEnd.body', locale, {
+              at,
+              productName,
+              willRenewDuration,
+            })}`
+          : `${translate('notification.subscriptionTrialWillEnd.unableToPayBody', locale, {
+              at,
+              productName,
+              willRenewDuration,
+              balance: `${paymentDetail.balance} ${paymentDetail.symbol}`,
+              price: `${paymentDetail.price} ${paymentDetail.symbol}`,
+            })}`,
       // @ts-expect-error
       attachments: [
         {
@@ -235,6 +242,29 @@ export class SubscriptionTrialWilEndEmailTemplate
                 text: paymentInfo,
               },
             },
+            ...(!canPay && !isStripe
+              ? [
+                  {
+                    type: 'text',
+                    data: {
+                      type: 'plain',
+                      color: '#9397A1',
+                      text: translate('notification.common.balanceReminder', locale),
+                    },
+                  },
+                  {
+                    type: 'text',
+                    data: {
+                      type: 'plain',
+                      color: '#FF0000',
+                      text: translate('notification.subscriptionTrialWillEnd.unableToPayReason', locale, {
+                        balance: `${paymentDetail.balance} ${paymentDetail.symbol}`,
+                        price: `${paymentDetail.price} ${paymentDetail.symbol}`,
+                      }),
+                    },
+                  },
+                ]
+              : []),
             {
               type: 'text',
               data: {

package/api/src/libs/notification/template/subscription-will-renew.ts

@@ -268,14 +268,6 @@ export class SubscriptionWillRenewEmailTemplate
               at,
               productName,
               willRenewDuration,
-              reason: `<span style="color: red;">${translate(
-                'notification.subscriptionWillRenew.unableToPayReason',
-                locale,
-                {
-                  balance: `${paymentDetail.balance} ${paymentDetail.symbol}`,
-                  price: `${paymentDetail.price} ${paymentDetail.symbol}`,
-                }
-              )}</span>`,
             })}`,
       // @ts-expect-error
       attachments: [
@@ -339,12 +331,37 @@ export class SubscriptionWillRenewEmailTemplate
               type: 'text',
               data: {
                 type: 'plain',
-                ...(!canPay && {
-                  color: 'red',
-                }),
+                ...(!canPay &&
+                  !isStripe && {
+                    color: '#FF0000',
+                  }),
                 text: `${paymentDetail.balance} ${paymentDetail.symbol}`,
               },
             },
+            ...(!canPay && !isStripe
+              ? [
+                  {
+                    type: 'text',
+                    data: {
+                      type: 'plain',
+                      color: '#9397A1',
+                      text: translate('notification.common.balanceReminder', locale),
+                    },
+                  },
+                  {
+                    type: 'text',
+                    data: {
+                      type: 'plain',
+                      color: '#FF0000',
+                      text: translate('notification.subscriptionWillRenew.unableToPayReason', locale, {
+                        balance: `${paymentDetail.balance} ${paymentDetail.symbol}`,
+                        price: `${paymentDetail.price} ${paymentDetail.symbol}`,
+                      }),
+                    },
+                  },
+                ]
+              : []),
+
             {
               type: 'text',
               data: {

package/api/src/libs/util.ts

@@ -6,7 +6,7 @@ import { getWalletDid } from '@blocklet/sdk/lib/did';
 import { toStakeAddress } from '@arcblock/did-util';
 import { customAlphabet } from 'nanoid';
 import type { LiteralUnion } from 'type-fest';
-import { withQuery } from 'ufo';
+import { joinURL, withQuery } from 'ufo';
 
 import dayjs from './dayjs';
 import { blocklet, wallet } from './auth';
@@ -272,3 +272,20 @@ export async function getCustomerStakeAddress(customerDid: string, nonce?: strin
 
   return toStakeAddress(customerDid, wallet.address, nonce);
 }
+
+export function getCustomerProfileUrl({
+  locale = 'en',
+  userDid,
+}: {
+  locale: LiteralUnion<'en' | 'zh', string>;
+  userDid: string;
+}) {
+  const { BLOCKLET_APP_URL } = process.env;
+  return joinURL(
+    BLOCKLET_APP_URL as string,
+    withQuery('.well-known/service/user', {
+      locale,
+      did: userDid,
+    })
+  );
+}

package/api/src/locales/en.ts

@@ -38,6 +38,13 @@ export default flat({
       prepaid: 'Prepaid',
       postpaid: 'Postpaid',
       paidType: 'Paid type',
+      expandPayment: 'In addition, you have successfully purchased the following products:',
+      trialProduct: 'Trial product:',
+      subscribeProduct: 'Subscribed product:',
+      paymentQuantity: 'Payment quantity',
+      qty: '{count} unit',
+      failReason: 'Failure reason',
+      balanceReminder: 'Balance reminder',
     },
 
     sendTo: 'Sent to',
@@ -55,7 +62,9 @@ export default flat({
       title: 'The {productName} trial will end soon',
       body: 'Your trial for {productName} will end in {willRenewDuration}. Please ensure your account balance is sufficient for automatic billing after the trial ends. Thank you for your support and trust!',
       unableToPayBody:
-        'Your trial for {productName} will end in {willRenewDuration}. <span style="color: red;">Your current balance is {balance}, which is less than {price}</span>, Please ensure your balance is sufficient for automatic billing. Thank you for your support and trust!',
+        'Your trial for {productName} will end in {willRenewDuration}.Your current balance is {balance}, which is less than {price}, Please ensure your balance is sufficient for automatic billing. Thank you for your support and trust!',
+      unableToPayReason:
+        'The estimated payment amount is {price}, but the current balance is insufficient ({balance}), please ensure that your account has enough balance to avoid payment failure.',
     },
 
     subscriptionSucceed: {
@@ -77,7 +86,7 @@ export default flat({
       title: '{productName} automatic payment reminder',
       body: 'Your subscription to {productName} is scheduled for automatic payment on {at}({willRenewDuration} later). If you have any questions or need assistance, please feel free to contact us.',
       unableToPayBody:
-        'Your subscription to {productName} is scheduled for automatic payment on {at}({willRenewDuration} later). If you have any questions or need assistance, please feel free to contact us.\r\n{reason}',
+        'Your subscription to {productName} is scheduled for automatic payment on {at}({willRenewDuration} later). If you have any questions or need assistance, please feel free to contact us.',
       unableToPayReason:
         'The estimated payment amount is {price}, but the current balance is insufficient ({balance}), please ensure that your account has enough balance to avoid payment failure.',
       renewAmount: 'Payment amount',
@@ -91,7 +100,7 @@ export default flat({
 
     subscriptionRenewFailed: {
       title: '{productName} automatic payment failed',
-      body: 'We are sorry to inform you that your {productName} failed to go through the automatic payment on {at}. The reason for the failure is {reason}. If you have any questions, please contact us in time. Thank you!',
+      body: 'We are sorry to inform you that your {productName} failed to go through the automatic payment on {at}. If you have any questions, please contact us in time. Thank you!',
       reason: {
         noDidWallet: 'You have not bound DID Wallet, please bind DID Wallet to ensure sufficient balance',
         noDelegation: 'Your DID Wallet has not been authorized, please update authorization',

package/api/src/locales/zh.ts

@@ -38,6 +38,13 @@ export default flat({
       prepaid: '预付费',
       postpaid: '后付费',
       paidType: '付费类型',
+      expandPayment: '此外，您还成功购买了以下产品：',
+      trialProduct: '试用产品：',
+      subscribeProduct: '订阅产品：',
+      paymentQuantity: '购买数量',
+      qty: '{count} 件',
+      failReason: '失败原因',
+      balanceReminder: '余额提醒',
     },
 
     sendTo: '发送给',
@@ -55,7 +62,9 @@ export default flat({
       title: '{productName} 试用期即将结束',
       body: '您订阅的 {productName} 试用资格将在 {willRenewDuration} 后结束。请确保您的账户余额充足，以便在试用期结束后自动完成扣费。感谢您的支持与信任！',
       unableToPayBody:
-        '您订阅的 {productName} 试用资格将在 {willRenewDuration} 后结束。<span style="color: red;">您的当前余额为 {balance}，不足 {price}</span>，请确保余额充足以便自动完成扣费。感谢您的支持与信任！',
+        '您订阅的 {productName} 试用资格将在 {willRenewDuration} 后结束。您的当前余额为 {balance}，不足 {price}，请确保余额充足以便自动完成扣费。感谢您的支持与信任！',
+      unableToPayReason:
+        '预计扣款金额为 {price}，但当前余额不足(余额为 {balance})，请确保您的账户余额充足，避免扣费失败。',
     },
 
     subscriptionSucceed: {
@@ -77,7 +86,7 @@ export default flat({
       title: '{productName} 自动扣费提醒',
       body: '您订阅的 {productName} 将在 {at}({willRenewDuration}后) 发起自动扣费。若有任何疑问或需要帮助，请随时与我们联系。',
       unableToPayBody:
-        '您订阅的 {productName} 将在 {at}({willRenewDuration}后) 发起自动扣费，若有任何疑问或者需要帮助，请随时与我们联系。\r\n{reason}',
+        '您订阅的 {productName} 将在 {at}({willRenewDuration}后) 发起自动扣费，若有任何疑问或者需要帮助，请随时与我们联系。',
       unableToPayReason:
         '预计扣款金额为 {price}，但当前余额不足(余额为 {balance})，请确保您的账户余额充足，避免扣费失败。',
       renewAmount: '扣费金额',
@@ -91,7 +100,7 @@ export default flat({
 
     subscriptionRenewFailed: {
       title: '{productName} 扣费失败',
-      body: '很抱歉地通知您，您的 {productName} 于 {at} 扣费失败。失败原因为 {reason}。如有任何疑问，请及时联系我们。谢谢！',
+      body: '很抱歉地通知您，您的 {productName} 于 {at} 扣费失败。如有任何疑问，请及时联系我们。谢谢！',
       reason: {
         noDidWallet: '您尚未绑定 DID Wallet，请绑定 DID Wallet，确保余额充足',
         noDelegation: '您的 DID Wallet 尚未授权，请更新授权',

package/api/src/queues/payment.ts

@@ -724,7 +724,9 @@ export const handlePayment = async (job: PaymentJob) => {
             subscriptionId: subscription.id,
             invoiceId: invoice.id,
           });
-          createEvent('Subscription', 'customer.subscription.renew_failed', subscription);
+          if (!subscription.isImmutable()) {
+            createEvent('Subscription', 'customer.subscription.renew_failed', subscription);
+          }
         }
       }
 

package/api/src/routes/donations.ts

@@ -125,7 +125,7 @@ router.get('/', async (req, res) => {
       stripUnknown: true,
     });
     const { rows, count } = await CheckoutSession.findAndCountAll({
-      where: { payment_link_id: target, status: 'complete' },
+      where: { payment_link_id: target, status: 'complete', livemode: req.livemode },
       attributes: [
         'id',
         'customer_id',

package/api/src/routes/subscriptions.ts

@@ -6,8 +6,7 @@ import isObject from 'lodash/isObject';
 import pick from 'lodash/pick';
 import uniq from 'lodash/uniq';
 
-import { literal } from 'sequelize';
-import type { Literal } from 'sequelize/types/utils';
+import { literal, OrderItem } from 'sequelize';
 import { ensureStripeCustomer, ensureStripePrice, ensureStripeSubscription } from '../integrations/stripe/resource';
 import { createListParamSchema, getWhereFromKvQuery, getWhereFromQuery, MetadataSchema } from '../libs/api';
 import dayjs from '../libs/dayjs';
@@ -76,12 +75,26 @@ const schema = createListParamSchema<{
   customer_id?: string;
   customer_did?: string;
   activeFirst?: boolean;
+  order?: string | string[] | OrderItem | OrderItem[];
 }>({
   status: Joi.string().empty(''),
   customer_id: Joi.string().empty(''),
   customer_did: Joi.string().empty(''),
   activeFirst: Joi.boolean().optional(),
+  order: Joi.alternatives()
+    .try(
+      Joi.string(),
+      Joi.array().items(Joi.string()),
+      Joi.array().items(Joi.array().ordered(Joi.string(), Joi.string().valid('ASC', 'DESC').insensitive()))
+    )
+    .optional(),
 });
+
+const parseOrder = (orderStr: string): OrderItem => {
+  const [field, direction] = orderStr.split(':');
+  return [field ?? '', (direction?.toUpperCase() as 'ASC' | 'DESC') || 'ASC'];
+};
+
 router.get('/', authMine, async (req, res) => {
   const { page, pageSize, status, livemode, ...query } = await schema.validateAsync(req.query, {
     stripUnknown: false,
@@ -118,7 +131,11 @@ router.get('/', authMine, async (req, res) => {
       where[key] = query[key];
     });
 
-  const order: [Literal | string, 'ASC' | 'DESC'][] = [['created_at', query.o === 'asc' ? 'ASC' : 'DESC']];
+  let order: OrderItem[] = [];
+  if (query.order) {
+    const orderItems = Array.isArray(query.order) ? query.order : [query.order];
+    order = orderItems.map((item) => (typeof item === 'string' ? parseOrder(item) : (item as OrderItem)));
+  }
 
   if (query.activeFirst) {
     order.unshift([
@@ -127,6 +144,14 @@ router.get('/', authMine, async (req, res) => {
     ]);
   }
 
+  const hasCreatedAtOrUpdatedAtOrder = order.some(
+    (item) => Array.isArray(item) && ['created_at', 'updated_at'].includes(item[0] as string)
+  );
+
+  if (!hasCreatedAtOrUpdatedAtOrder) {
+    order.push(['created_at', query.o === 'asc' ? 'ASC' : 'DESC']);
+  }
+
   try {
     const { rows: list, count } = await Subscription.findAndCountAll({
       where,
@@ -278,7 +303,7 @@ router.put('/:id/cancel', authPortal, async (req, res) => {
       feedback: feedback || 'other',
       return_stake: canReturnStake && haveStake,
       slash_stake: slashStake && haveStake,
-      slash_reason: slashReason,
+      slash_reason: slashStake && haveStake ? slashReason : '',
     },
   };
   const now = dayjs().unix() + 3;
@@ -292,7 +317,7 @@ router.put('/:id/cancel', authPortal, async (req, res) => {
       comment,
       return_stake: canReturnStake && haveStake,
       slash_stake: slashStake && haveStake,
-      slash_reason: slashReason,
+      slash_reason: slashStake && haveStake ? slashReason : '',
     };
     updates.canceled_at = now;
     if (inTrialing) {

package/api/src/routes/usage-records.ts

@@ -136,10 +136,21 @@ router.get('/summary', auth, async (req, res) => {
   }
 });
 
+const UsageRecordScheme = Joi.object({
+  subscription_item_id: Joi.string().required(),
+  start: Joi.number().optional(),
+  end: Joi.number().optional(),
+  livemode: Joi.boolean().empty('').optional(),
+  q: Joi.string().empty('').optional(), // query
+  o: Joi.string().empty('').optional(), // order
+}).unknown(true);
+
 export function createUsageRecordQueryFn(doc?: Subscription) {
   return async (req: Request, res: Response) => {
-    const { page, pageSize, ...query } = await schema.validateAsync(req.query, { stripUnknown: true });
-
+    const { error, value: query } = await UsageRecordScheme.validate(req.query, { stripUnknown: true });
+    if (error) {
+      return res.status(400).json({ error: `usage record request query invalid: ${error.message}` });
+    }
     try {
       const item = await SubscriptionItem.findByPk(query.subscription_item_id);
       if (!item) {
@@ -159,8 +170,6 @@ export function createUsageRecordQueryFn(doc?: Subscription) {
           },
         },
         order: [['created_at', 'ASC']],
-        offset: (page - 1) * pageSize,
-        limit: pageSize,
       });
 
       res.json({ count, list });

package/api/src/store/migrations/20240910-customer-sync.ts

@@ -0,0 +1,21 @@
+import { DataTypes } from 'sequelize';
+
+import { Migration, safeApplyColumnChanges } from '../migrate';
+
+export const up: Migration = async ({ context }) => {
+  await safeApplyColumnChanges(context, {
+    customers: [
+      {
+        name: 'last_sync_at',
+        field: {
+          type: DataTypes.INTEGER,
+          allowNull: true,
+        },
+      },
+    ],
+  });
+};
+
+export const down: Migration = async ({ context }) => {
+  await context.removeColumn('customers', 'last_sync_at');
+};

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

@@ -63,6 +63,7 @@ export class Customer extends Model<InferAttributes<Customer>, InferCreationAttr
 
   declare created_at: CreationOptional<Date>;
   declare updated_at: CreationOptional<Date>;
+  declare last_sync_at?: number;
 
   public static readonly GENESIS_ATTRIBUTES = {
     id: {
@@ -228,6 +229,10 @@ export class Customer extends Model<InferAttributes<Customer>, InferCreationAttr
           type: DataTypes.JSON,
           defaultValue: {},
         },
+        last_sync_at: {
+          type: DataTypes.INTEGER,
+          allowNull: true,
+        },
       },
       {
         sequelize,

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.15.4",
+  "version": "1.15.5",
   "scripts": {
     "dev": "blocklet dev --open",
     "eject": "vite eject",
@@ -45,18 +45,18 @@
     "@abtnode/cron": "1.16.30",
     "@arcblock/did": "^1.18.135",
     "@arcblock/did-auth-storage-nedb": "^1.7.1",
-    "@arcblock/did-connect": "^2.10.30",
+    "@arcblock/did-connect": "^2.10.33",
     "@arcblock/did-util": "^1.18.135",
     "@arcblock/jwt": "^1.18.135",
-    "@arcblock/ux": "^2.10.30",
+    "@arcblock/ux": "^2.10.33",
     "@arcblock/validator": "^1.18.135",
     "@blocklet/js-sdk": "1.16.30",
     "@blocklet/logger": "1.16.30",
-    "@blocklet/payment-react": "1.15.4",
+    "@blocklet/payment-react": "1.15.5",
     "@blocklet/sdk": "1.16.30",
-    "@blocklet/ui-react": "^2.10.30",
-    "@blocklet/uploader": "^0.1.29",
-    "@blocklet/xss": "^0.1.5",
+    "@blocklet/ui-react": "^2.10.33",
+    "@blocklet/uploader": "^0.1.35",
+    "@blocklet/xss": "^0.1.7",
     "@mui/icons-material": "^5.16.6",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.6",
@@ -118,7 +118,7 @@
   "devDependencies": {
     "@abtnode/types": "1.16.30",
     "@arcblock/eslint-config-ts": "^0.3.2",
-    "@blocklet/payment-types": "1.15.4",
+    "@blocklet/payment-types": "1.15.5",
     "@types/cookie-parser": "^1.4.7",
     "@types/cors": "^2.8.17",
     "@types/debug": "^4.1.12",
@@ -160,5 +160,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "d1c51f0dffe33e5d42b3dc601a554df6c8f88828"
+  "gitHead": "013d9fb8161d6021b66da18916f49242dc156580"
 }

package/scripts/sdk.js

@@ -6,9 +6,19 @@ const payment = require('@blocklet/payment-js').default;
 
 (async () => {
   payment.environments.setTestMode(true);
-  const paymentIntent = await payment.paymentIntents.retrieve('pi_ybTOCWweEnb9grWZsTH7MCVi');
+  const subcriptions = await payment.subscriptions.list({
+    order: 'updated_at:ASC',
+    // order: [
+    //   ['status', 'DESC'],
+    //   ['updated_at', 'ASC'],
+    // ], // also support sequelize order
+    activeFirst: true,
+  });
+  console.log('🚀 ~ subcriptions:', subcriptions);
 
-  console.log('paymentIntent', paymentIntent);
+  // const paymentIntent = await payment.paymentIntents.retrieve('pi_ybTOCWweEnb9grWZsTH7MCVi');
+
+  // console.log('paymentIntent', paymentIntent);
 
   // const refundResult = await payment.paymentIntents.refund('pi_ybTOCWweEnb9grWZsTH7MCVi', {
   //   amount: '0.001',
@@ -81,5 +91,18 @@ const payment = require('@blocklet/payment-js').default;
   //   expires_at: 1721121607,
   // });
   // console.log('checkoutSession', checkoutSession);
+  // const product = await payment.products.create({
+  //   name: 'Test SDK product',
+  //   description: 'test',
+  // });
+  // console.log('🚀 ~ product:', product);
+  // const paymentPrice = await payment.prices.create({
+  //   product_id: product.id,
+  //   type: 'one_time',
+  //   unit_amount: '1',
+  //   currency_id: 'pc_9l5sh8bcjbLU',
+  // });
+  // console.log('🚀 ~ paymentPrice:', paymentPrice);
+
   process.exit(0);
 })();

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

@@ -1,7 +1,7 @@
 /* eslint-disable no-nested-ternary */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { Checkbox, FormControlLabel, Stack, TextField, Typography } from '@mui/material';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Controller, useFieldArray, useFormContext, useWatch } from 'react-hook-form';
 import { useSearchParams } from 'react-router-dom';
 
@@ -29,6 +29,7 @@ export default function BeforePay({
   const items = useFieldArray({ control, name: 'line_items' });
   const includeFreeTrial = useWatch({ control, name: 'include_free_trial' });
   const [state, setState] = useState({ creating: false });
+  const containerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     if (items.fields.length) {
@@ -56,6 +57,14 @@ export default function BeforePay({
           setValue('invoice_creation.enabled', true);
         }
       }
+      setTimeout(() => {
+        if (containerRef.current) {
+          containerRef.current.scrollTo({
+            top: containerRef.current.scrollHeight,
+            behavior: 'smooth',
+          });
+        }
+      }, 0);
     }
   };
 
@@ -87,35 +96,38 @@ export default function BeforePay({
         {t('admin.paymentLink.products')} ({getValues().line_items.length})
       </Typography>
       <Stack spacing={2} sx={{ width: '100%' }}>
-        {items.fields.map((item, index) => {
-          // @ts-ignore
-          const product = getProductByPriceId(products, item.price_id);
-          if (!product) {
-            return null;
-          }
+        <Stack direction="column" sx={{ maxHeight: 500, width: '100%', overflowY: 'auto', gap: 2 }} ref={containerRef}>
+          {items.fields.map((item, index) => {
+            // @ts-ignore
+            const product = getProductByPriceId(products, item.price_id);
+            if (!product) {
+              return null;
+            }
+
+            return (
+              <LineItem
+                key={item.id}
+                // @ts-ignore
+                valid={isPriceAligned(items.fields, products, index).aligned}
+                prefix={`line_items.${index}`}
+                product={product}
+                onRemove={() => items.remove(index)}
+                onUpdate={refresh}
+              />
+            );
+          })}
+          {items.fields.some((_, index) => !isPriceAligned(items.fields as any[], products, index).recurring) && (
+            <Typography color="error" fontSize="small">
+              {t('admin.paymentLink.recurringNotAligned')}
+            </Typography>
+          )}
+          {items.fields.some((_, index) => !isPriceAligned(items.fields as any[], products, index).currency) && (
+            <Typography color="error" fontSize="small">
+              {t('admin.paymentLink.currencyNotAligned')}
+            </Typography>
+          )}
+        </Stack>
 
-          return (
-            <LineItem
-              key={item.id}
-              // @ts-ignore
-              valid={isPriceAligned(items.fields, products, index).aligned}
-              prefix={`line_items.${index}`}
-              product={product}
-              onRemove={() => items.remove(index)}
-              onUpdate={refresh}
-            />
-          );
-        })}
-        {items.fields.some((_, index) => !isPriceAligned(items.fields as any[], products, index).recurring) && (
-          <Typography color="error" fontSize="small">
-            {t('admin.paymentLink.recurringNotAligned')}
-          </Typography>
-        )}
-        {items.fields.some((_, index) => !isPriceAligned(items.fields as any[], products, index).currency) && (
-          <Typography color="error" fontSize="small">
-            {t('admin.paymentLink.currencyNotAligned')}
-          </Typography>
-        )}
         <ProductSelect
           mode={items.fields.length ? 'waiting' : 'selecting'}
           onSelect={onProductSelected}