payment-kit 1.13.270 → 1.13.271

package/api/src/integrations/arcblock/nft.ts

@@ -1,5 +1,4 @@
 import { isEthereumDid, isValid } from '@arcblock/did';
-// import pick from 'lodash/pick';
 import { formatFactoryState, preMintFromFactory } from '@ocap/asset';
 import merge from 'lodash/merge';
 
@@ -59,7 +58,7 @@ export async function mintNftForCheckoutSession(id: string) {
     ]);
 
     const preMint = preMintFromFactory({
-      factory: formatFactoryState(factoryState),
+      factory: formatFactoryState(factoryState as any),
       inputs: inputs || {},
       owner: nftOwner,
       issuer: { wallet, name: appState.moniker },

package/api/src/integrations/stripe/handlers/subscription.ts

@@ -2,6 +2,7 @@ import pick from 'lodash/pick';
 import type Stripe from 'stripe';
 
 import logger from '../../../libs/logger';
+import { finalizeStripeSubscriptionUpdate } from '../../../libs/subscription';
 import { CheckoutSession, PaymentMethod, Subscription, TEventExpanded } from '../../../store/models';
 
 export async function handleStripeSubscriptionSucceed(subscription: Subscription, status: string) {
@@ -83,7 +84,24 @@ export async function handleSubscriptionEvent(event: TEventExpanded, _: Stripe)
     if (subscription.status === 'trialing' && event.data.object.status === 'active') {
       fields.push('status');
     }
-    await subscription.update(pick(event.data.object, fields));
+
+    await finalizeStripeSubscriptionUpdate({
+      subscription,
+      updates: pick(event.data.object, fields),
+      items: (event.data.object.items.data || []).map((x: any) => ({
+        id: x.metadata?.id,
+        price_id: x.price.metadata?.id,
+        stripe_id: x.id,
+        stripe_price_id: x.price.id,
+        stripe_subscription_id: x.subscription,
+        metadata: x.metadata,
+        quantity: x.quantity,
+        billing_thresholds: x.billing_thresholds,
+        // discounts: x.discounts,
+        // tax_rates: x.tax_rates,
+      })),
+    });
+
     return;
   }
 

package/api/src/libs/subscription.ts

@@ -12,6 +12,7 @@ import {
   InvoiceItem,
   Lock,
   PaymentCurrency,
+  PaymentMethod,
   Price,
   PriceRecurring,
   Subscription,
@@ -21,6 +22,7 @@ import {
   UsageRecord,
 } from '../store/models';
 import dayjs from './dayjs';
+import env from './env';
 import logger from './logger';
 import { getPriceCurrencyOptions, getPriceUintAmountByCurrency, getRecurringPeriod } from './session';
 import { getConnectQueryParam } from './util';
@@ -228,7 +230,6 @@ export async function createProration(
   setup: ReturnType<typeof getSubscriptionCreateSetup>,
   anchor: number
 ) {
-  // FIXME: should we enforce cycle invoices here?
   const lastInvoice = await Invoice.findByPk(subscription.latest_invoice_id);
   if (!lastInvoice) {
     throw new Error('Subscription should have latest invoice when create proration');
@@ -249,9 +250,11 @@ export async function createProration(
 
   // 2. calculate proration args based on the filtered invoice items
   const precision = 10000;
-  const prorationStart = lastInvoice.period_start;
-  const prorationEnd = lastInvoice.period_end;
+  const isInvoicePeriodValid = lastInvoice.period_start < lastInvoice.period_end;
+  const prorationStart = isInvoicePeriodValid ? lastInvoice.period_start : subscription.current_period_start;
+  const prorationEnd = isInvoicePeriodValid ? lastInvoice.period_end : subscription.current_period_end;
   if (anchor > prorationEnd) {
+    logger.warn('try to create proration with invalid arguments', { anchor, prorationStart, prorationEnd });
     throw new Error('Subscription proration anchor should not be larger than prorationEnd');
   }
 
@@ -524,6 +527,69 @@ export async function finalizeSubscriptionUpdate({
   logger.info('subscription plan change lock acquired on finalize', { subscription: subscription.id, releaseAt });
 }
 
+export async function finalizeStripeSubscriptionUpdate({
+  subscription,
+  items,
+  updates,
+}: {
+  subscription: Subscription;
+  items: any[];
+  updates: any;
+}) {
+  if (isEmpty(updates)) {
+    logger.info('subscription update aborted', { subscription: subscription.id, updates });
+    return;
+  }
+
+  if (subscription.pending_update) {
+    // handle subscription item remove
+    // this must be done before update/create
+    const localItems = await SubscriptionItem.findAll({ where: { subscription_id: subscription.id } });
+    const deletedItems = localItems.filter((x) => items.some((y) => y.id === x.id) === false).map((x) => x.id);
+    if (deletedItems.length) {
+      await UsageRecord.destroy({ where: { subscription_item_id: deletedItems } });
+      logger.info('subscription item usage cleared on update', { subscription: subscription.id, deletedItems });
+      await SubscriptionItem.destroy({ where: { id: deletedItems } });
+      logger.info('subscription item deleted on update', { subscription: subscription.id, deletedItems });
+    }
+
+    // handle subscription item update/create
+    for (const item of items) {
+      if (item.id) {
+        // remote item is associated with local item
+        await SubscriptionItem.update(pick(item, ['quantity', 'billing_thresholds']), { where: { id: item.id } });
+        logger.info('subscription item synced on update', { subscription: subscription.id, item });
+      } else {
+        // remote item not associated with local item
+        const created = await SubscriptionItem.create({
+          price_id: item.price_id as string,
+          quantity: item.quantity as number,
+          livemode: subscription.livemode,
+          subscription_id: subscription.id,
+          metadata: {
+            stripe_id: item.stripe_id,
+            stripe_subscription_id: item.stripe_subscription_id,
+          },
+        });
+        logger.info('subscription item mirrored on update', { subscription: subscription.id, item });
+        const method = await PaymentMethod.findByPk(subscription.default_payment_method_id);
+        const client = method!.getStripeClient();
+        const result = await client.subscriptionItems.update(item.stripe_id, {
+          metadata: { appPid: env.appPid, id: created.id },
+        });
+        logger.info('subscription item related on mirror', { subscription: subscription.id, item, result });
+      }
+    }
+
+    const releaseAt = subscription.current_period_end;
+    await Lock.acquire(`${subscription.id}-change-plan`, releaseAt);
+    logger.info('subscription plan change lock acquired on finalize', { subscription: subscription.id, releaseAt });
+  }
+
+  logger.info('subscription update finalized', { subscription: subscription.id, updates, items });
+  await subscription.update({ ...updates, pending_update: null });
+}
+
 export async function onSubscriptionUpdateConnected(subscriptionId: string) {
   const subscription = await Subscription.findByPk(subscriptionId);
   if (!subscription) {

package/api/src/routes/pricing-table.ts

@@ -263,7 +263,7 @@ router.post('/:id/checkout/:priceId', async (req, res) => {
       raw.nft_mint_status = 'disabled';
     }
   } catch {
-  // Do nothing
+    // Do nothing
   }
 
   const session = await CheckoutSession.create(raw as any);

package/api/src/routes/subscriptions.ts

@@ -5,7 +5,7 @@ import Joi from 'joi';
 import pick from 'lodash/pick';
 import uniq from 'lodash/uniq';
 
-import { ensureStripeSubscription } from '../integrations/stripe/resource';
+import { ensureStripeCustomer, ensureStripePrice, ensureStripeSubscription } from '../integrations/stripe/resource';
 import { createListParamSchema, getWhereFromKvQuery, getWhereFromQuery } from '../libs/api';
 import dayjs from '../libs/dayjs';
 import logger from '../libs/logger';
@@ -552,7 +552,7 @@ const validateSubscriptionUpdateRequest = async (subscription: Subscription, ite
   }
 
   const updatedExpanded = await Price.expand(updatedItems as LineItem[]);
-  const newItems: any[] = [...existingExpanded, ...addedExpanded, ...updatedExpanded];
+  const newItems: TLineItemExpanded[] = [...existingExpanded, ...addedExpanded, ...updatedExpanded];
   if (newItems.length === 0) {
     throw new Error('Subscription should have at least one subscription item');
   }
@@ -675,6 +675,8 @@ router.put('/:id', authPortal, async (req, res) => {
     // handle subscription item changes
     let connectAction = '';
     if (Array.isArray(value.items) && value.items.length > 0) {
+      const prorationBehavior = updates.proration_behavior || subscription.proration_behavior || 'none';
+
       if (subscription.isActive() === false) {
         throw new Error('Updating subscription item not allowed for inactive subscriptions');
       }
@@ -682,10 +684,6 @@ router.put('/:id', authPortal, async (req, res) => {
         throw new Error('Updating subscription item not allowed for scheduled-to-cancel subscriptions');
       }
 
-      if (paymentMethod.type === 'stripe') {
-        throw new Error('Updating subscription item not allowed for subscriptions paid with stripe');
-      }
-
       const locked = await Lock.isLocked(`${subscription.id}-change-plan`);
       if (locked) {
         throw new Error('Updating subscription item not allowed now until next billing cycle');
@@ -697,167 +695,232 @@ router.put('/:id', authPortal, async (req, res) => {
         value.items
       );
 
-      // update subscription period settings
-      // HINT: if we are adding new items, we need to reset the anchor to now
-      const setup = getSubscriptionCreateSetup(newItems, paymentCurrency.id, 0);
-      if (newItems.some((x) => x.price.type === 'recurring' && addedItems.find((y) => y.price_id === x.price_id))) {
-        updates.pending_invoice_item_interval = setup.recurring;
-        updates.current_period_start = setup.period.start;
-        updates.current_period_end = setup.period.end;
-        updates.billing_cycle_anchor = setup.cycle.anchor;
-        logger.info('subscription updates on reset anchor', { subscription: req.params.id, updates });
-      }
-
-      // handle proration
-      const prorationBehavior = updates.proration_behavior || subscription.proration_behavior || 'none';
-      if (prorationBehavior === 'create_prorations') {
-        // 0. cleanup open invoices
-        if (subscription.pending_update?.updates?.latest_invoice_id) {
-          await cleanupInvoiceAndItems(subscription.pending_update?.updates?.latest_invoice_id);
-          // @ts-ignore
-          await subscription.update({ pending_update: null });
-        }
+      const stripeSubscriptionId = subscription.payment_details?.stripe?.subscription_id;
+      if (paymentMethod.type === 'stripe' && stripeSubscriptionId) {
+        await ensureStripeCustomer(customer, paymentMethod);
 
-        // 1. create proration
-        const { lastInvoice, due, newCredit, appliedCredit, prorations } = await createProration(
-          subscription,
-          setup,
-          dayjs().unix()
+        const addedStripeItems = await Promise.all(
+          addedItems.map(async (x) => {
+            const price = await Price.findByPk(x.price_id);
+            const stripePrice = await ensureStripePrice(price!, paymentMethod, paymentCurrency);
+            return { price: stripePrice.id, quantity: x.quantity };
+          })
+        );
+        const updatedStripeItems = await Promise.all(
+          updatedItems.map(async (x) => {
+            const price = newItems.find((y) => y.price_id === x.price_id);
+            const item = await SubscriptionItem.findByPk(x.id);
+            return { id: item!.metadata.stripe_id, price: price!.metadata?.stripe_id, quantity: x.quantity };
+          })
+        );
+        const deletedStripeItems = await Promise.all(
+          deletedItems.map(async (x) => {
+            const item = await SubscriptionItem.findByPk(x.id);
+            return { id: item!.metadata.stripe_id, deleted: true, clear_usage: x.clear_usage };
+          })
         );
 
-        // 2. create new invoice: amount according to new subscription items
-        // 3. create new invoice items: amount according to new subscription items
-        const result = await ensureInvoiceAndItems({
-          customer,
-          currency: paymentCurrency,
-          subscription,
-          trialing: false,
-          metered: false,
-          lineItems: newItems,
-          applyCredit: false,
-          props: {
-            status: 'draft',
-            livemode: subscription.livemode,
-            description: 'Subscription update',
-            statement_descriptor: lastInvoice.statement_descriptor,
-            period_start: setup.period.start,
-            period_end: setup.period.end,
-            auto_advance: true,
-            billing_reason: 'subscription_update',
-            total: setup.amount.setup,
-            currency_id: paymentCurrency.id,
-            default_payment_method_id: subscription.default_payment_method_id,
-            custom_fields: lastInvoice.custom_fields || [],
-            footer: lastInvoice.footer || '',
-          } as Invoice,
+        const stripeItems = [...addedStripeItems, ...updatedStripeItems, ...deletedStripeItems].filter(Boolean);
+        logger.info('stripe subscription update attempt', {
+          subscription: req.params.id,
+          stripeSubscriptionId,
+          addedStripeItems,
+          updatedStripeItems,
+          deletedStripeItems,
         });
-        const { invoice } = result;
-        updates.latest_invoice_id = invoice.id;
-        logger.info('subscription update invoice created', { subscription: req.params.id, invoice: invoice.id });
-
-        // 4. create proration invoice items: amount according to proration amount
-        const prorationInvoiceItems = await Promise.all(
-          prorations.map((x: any) =>
-            InvoiceItem.create({
-              ...x,
-              livemode: subscription.livemode,
-              currency_id: subscription.currency_id,
-              customer_id: customer.id,
-              price_id: x.price_id,
-              invoice_id: invoice.id,
-              subscription_id: subscription.id,
-              subscription_item_id: x.subscription_item_id,
-              discountable: false,
-              discounts: [],
-              discount_amounts: [],
-              metadata: {},
-            })
-          )
-        );
-        logger.info('subscription proration invoice items created', {
+
+        await subscription.update({
+          pending_update: {
+            expires_at: dayjs().unix() + 30 * 60, // after 30 minutes
+            updates,
+            addedItems,
+            deletedItems,
+            updatedItems,
+          },
+        });
+
+        const client = paymentMethod.getStripeClient();
+        const result = await client.subscriptions.update(stripeSubscriptionId, {
+          proration_behavior: prorationBehavior as any,
+          metadata: updates.metadata,
+          description: updates.description,
+          items: stripeItems,
+        });
+        logger.info('stripe subscription update done', {
           subscription: req.params.id,
-          items: prorationInvoiceItems.map((x) => x.id),
+          stripeSubscriptionId,
+          prorationBehavior,
+          result,
         });
+      } else {
+        // update subscription period settings
+        // HINT: if we are adding new items, we need to reset the anchor to now
+        const setup = getSubscriptionCreateSetup(newItems, paymentCurrency.id, 0);
+        if (newItems.some((x) => x.price.type === 'recurring' && addedItems.find((y) => y.price_id === x.price_id))) {
+          updates.pending_invoice_item_interval = setup.recurring;
+          updates.current_period_start = setup.period.start;
+          updates.current_period_end = setup.period.end;
+          updates.billing_cycle_anchor = setup.cycle.anchor;
+          logger.info('subscription updates on reset anchor', { subscription: req.params.id, updates });
+        }
 
-        // 5. check do we need to connect
-        let hasNext = true;
-        if (due === '0') {
-          hasNext = false;
-        } else {
-          const delegation = await isDelegationSufficientForPayment({
-            paymentMethod,
-            paymentCurrency,
-            userDid: customer.did,
-            amount: setup.amount.setup,
+        // handle proration
+        if (prorationBehavior === 'create_prorations') {
+          // 0. cleanup open invoices
+          if (subscription.pending_update?.updates?.latest_invoice_id) {
+            await cleanupInvoiceAndItems(subscription.pending_update?.updates?.latest_invoice_id);
+            // @ts-ignore
+            await subscription.update({ pending_update: null });
+          }
+
+          // 1. create proration
+          const { lastInvoice, due, newCredit, appliedCredit, prorations } = await createProration(
+            subscription,
+            setup,
+            dayjs().unix()
+          );
+
+          // 2. create new invoice: amount according to new subscription items
+          // 3. create new invoice items: amount according to new subscription items
+          const result = await ensureInvoiceAndItems({
+            customer,
+            currency: paymentCurrency,
+            subscription,
+            trialing: false,
+            metered: false,
+            lineItems: newItems,
+            applyCredit: false,
+            props: {
+              status: 'draft',
+              livemode: subscription.livemode,
+              description: 'Subscription update',
+              statement_descriptor: lastInvoice.statement_descriptor,
+              period_start: setup.period.start,
+              period_end: setup.period.end,
+              auto_advance: true,
+              billing_reason: 'subscription_update',
+              total: setup.amount.setup,
+              currency_id: paymentCurrency.id,
+              default_payment_method_id: subscription.default_payment_method_id,
+              custom_fields: lastInvoice.custom_fields || [],
+              footer: lastInvoice.footer || '',
+            } as Invoice,
+          });
+          const { invoice } = result;
+          updates.latest_invoice_id = invoice.id;
+          logger.info('subscription update invoice created', { subscription: req.params.id, invoice: invoice.id });
+
+          // 4. create proration invoice items: amount according to proration amount
+          const prorationInvoiceItems = await Promise.all(
+            prorations.map((x: any) =>
+              InvoiceItem.create({
+                ...x,
+                livemode: subscription.livemode,
+                currency_id: subscription.currency_id,
+                customer_id: customer.id,
+                price_id: x.price_id,
+                invoice_id: invoice.id,
+                subscription_id: subscription.id,
+                subscription_item_id: x.subscription_item_id,
+                discountable: false,
+                discounts: [],
+                discount_amounts: [],
+                metadata: {},
+              })
+            )
+          );
+          logger.info('subscription proration invoice items created', {
+            subscription: req.params.id,
+            items: prorationInvoiceItems.map((x) => x.id),
           });
-          if (delegation.sufficient) {
+
+          // 5. check do we need to connect
+          let hasNext = true;
+          if (due === '0') {
             hasNext = false;
-          } else if (['NO_DID_WALLET'].includes(delegation.reason as string)) {
-            throw new Error('Subscription update can only be done when you do have connected DID Wallet');
-          } else if (['NO_TOKEN', 'NO_ENOUGH_TOKEN'].includes(delegation.reason as string)) {
-            // FIXME: this is not supported at frontend
-            connectAction = 'collect';
           } else {
-            connectAction = 'change-plan';
+            const delegation = await isDelegationSufficientForPayment({
+              paymentMethod,
+              paymentCurrency,
+              userDid: customer.did,
+              amount: setup.amount.setup,
+            });
+            if (delegation.sufficient) {
+              hasNext = false;
+            } else if (['NO_DID_WALLET'].includes(delegation.reason as string)) {
+              throw new Error('Subscription update can only be done when you do have connected DID Wallet');
+            } else if (['NO_TOKEN', 'NO_ENOUGH_TOKEN'].includes(delegation.reason as string)) {
+              // FIXME: this is not supported at frontend
+              connectAction = 'collect';
+            } else {
+              connectAction = 'change-plan';
+            }
           }
-        }
 
-        // 6. adjust invoice total
-        await invoice.update({
-          status: 'open',
-          amount_due: due,
-          amount_remaining: due,
-        });
+          // 6. adjust invoice total
+          await invoice.update({
+            status: 'open',
+            amount_due: due,
+            amount_remaining: due,
+          });
 
-        // 7. wait for succeed
-        if (hasNext) {
-          await subscription.update({
-            pending_update: {
-              expires_at: dayjs().unix() + 30 * 60, // after 30 minutes
-              updates,
+          // 7. wait for succeed
+          if (hasNext) {
+            await subscription.update({
+              pending_update: {
+                expires_at: dayjs().unix() + 30 * 60, // after 30 minutes
+                updates,
+                appliedCredit,
+                newCredit,
+                addedItems,
+                deletedItems,
+                updatedItems,
+              },
+            });
+            logger.info('subscription update invoice wait for connect', {
+              subscription: subscription.id,
+              invoice: invoice.id,
+            });
+          } else {
+            await invoiceQueue.pushAndWait({
+              id: invoice.id,
+              job: { invoiceId: invoice.id, retryOnError: false, waitForPayment: true },
+            });
+            logger.info('subscription update invoice processed', {
+              subscription: subscription.id,
+              invoice: invoice.id,
+            });
+
+            // check if we have succeeded
+            await Promise.all([invoice.reload(), subscription.reload()]);
+
+            if (invoice.status === 'paid') {
+              await subscriptionQueue.delete(subscription.id);
+              await addSubscriptionJob(subscription, 'cycle', false, subscription.trial_end);
+            } else {
+              throw new Error('Subscription update invoice failed to advance');
+            }
+
+            await finalizeSubscriptionUpdate({
+              subscription,
+              customer,
+              invoice,
+              paymentCurrency,
               appliedCredit,
               newCredit,
               addedItems,
               deletedItems,
               updatedItems,
-            },
-          });
-          logger.info('subscription update invoice wait for connect', {
-            subscription: subscription.id,
-            invoice: invoice.id,
-          });
-        } else {
-          await invoiceQueue.pushAndWait({
-            id: invoice.id,
-            job: { invoiceId: invoice.id, retryOnError: false, waitForPayment: true },
-          });
-          logger.info('subscription update invoice processed', { subscription: subscription.id, invoice: invoice.id });
-
-          // check if we have succeeded
-          await Promise.all([invoice.reload(), subscription.reload()]);
-
-          if (invoice.status === 'paid') {
-            await subscriptionQueue.delete(subscription.id);
-            await addSubscriptionJob(subscription, 'cycle', false, subscription.trial_end);
-          } else {
-            throw new Error('Subscription update invoice failed to advance');
+              updates,
+            });
           }
-
-          await finalizeSubscriptionUpdate({
-            subscription,
-            customer,
-            invoice,
-            paymentCurrency,
-            appliedCredit,
-            newCredit,
-            addedItems,
-            deletedItems,
-            updatedItems,
-            updates,
-          });
         }
       }
     } else if (req.body.billing_cycle_anchor === 'now') {
+      if (paymentMethod?.type === 'stripe') {
+        return res.status(400).json({ error: 'Update billing_cycle_anchor not supported for stripe subscriptions' });
+      }
+
       if (subscription.isActive() === false) {
         throw new Error('Updating billing_cycle_anchor not allowed for inactive subscriptions');
       }
@@ -1007,11 +1070,6 @@ router.get('/:id/change-plan', authPortal, async (req, res) => {
       return res.status(400).json({ error: 'Subscription plan change is not allowed until next billing cycle' });
     }
 
-    const paymentMethod = await PaymentMethod.findByPk(subscription.default_payment_method_id);
-    if (paymentMethod?.type === 'stripe') {
-      return res.status(400).json({ error: 'Update is not supported for subscriptions paid with stripe' });
-    }
-
     const table = await getUpdateTable(subscription);
     return res.json(table);
   } catch (err) {
@@ -1038,11 +1096,6 @@ router.post('/:id/change-plan', authPortal, async (req, res) => {
       return res.status(400).json({ error: 'Subscription plan change is not allowed until next billing cycle' });
     }
 
-    const paymentMethod = await PaymentMethod.findByPk(subscription.default_payment_method_id);
-    if (paymentMethod?.type === 'stripe') {
-      return res.status(400).json({ error: 'Update is not supported for subscriptions paid with stripe' });
-    }
-
     const { error } = updateSchema.validate(req.body);
     if (error) {
       return res.status(400).json({ error: `Subscription update request invalid: ${error.message}` });

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.13.270",
+  "version": "1.13.271",
   "scripts": {
     "dev": "blocklet dev --open",
     "eject": "vite eject",
@@ -43,32 +43,32 @@
   },
   "dependencies": {
     "@abtnode/cron": "1.16.26",
-    "@arcblock/did": "^1.18.121",
+    "@arcblock/did": "^1.18.123",
     "@arcblock/did-auth-storage-nedb": "^1.7.1",
-    "@arcblock/did-connect": "^2.9.89",
-    "@arcblock/did-util": "^1.18.121",
-    "@arcblock/jwt": "^1.18.121",
-    "@arcblock/ux": "^2.9.89",
-    "@arcblock/validator": "^1.18.121",
+    "@arcblock/did-connect": "^2.9.90",
+    "@arcblock/did-util": "^1.18.123",
+    "@arcblock/jwt": "^1.18.123",
+    "@arcblock/ux": "^2.9.90",
+    "@arcblock/validator": "^1.18.123",
     "@blocklet/logger": "1.16.26",
-    "@blocklet/payment-react": "1.13.270",
+    "@blocklet/payment-react": "1.13.271",
     "@blocklet/sdk": "1.16.26",
-    "@blocklet/ui-react": "^2.9.89",
+    "@blocklet/ui-react": "^2.9.90",
     "@blocklet/uploader": "^0.1.6",
-    "@mui/icons-material": "^5.15.18",
+    "@mui/icons-material": "^5.15.19",
     "@mui/lab": "^5.0.0-alpha.170",
-    "@mui/material": "^5.15.18",
-    "@mui/styles": "^5.15.18",
+    "@mui/material": "^5.15.19",
+    "@mui/styles": "^5.15.19",
     "@mui/system": "^5.15.15",
-    "@ocap/asset": "^1.18.121",
-    "@ocap/client": "^1.18.121",
-    "@ocap/mcrypto": "^1.18.121",
-    "@ocap/util": "^1.18.121",
-    "@ocap/wallet": "^1.18.121",
+    "@ocap/asset": "^1.18.123",
+    "@ocap/client": "^1.18.123",
+    "@ocap/mcrypto": "^1.18.123",
+    "@ocap/util": "^1.18.123",
+    "@ocap/wallet": "^1.18.123",
     "@react-pdf/renderer": "^3.4.4",
     "@stripe/react-stripe-js": "^2.7.1",
     "@stripe/stripe-js": "^2.4.0",
-    "ahooks": "^3.7.11",
+    "ahooks": "^3.8.0",
     "axios": "^0.27.2",
     "body-parser": "^1.20.2",
     "cls-hooked": "^4.2.2",
@@ -78,7 +78,7 @@
     "date-fns": "^3.6.0",
     "dayjs": "^1.11.11",
     "dotenv-flow": "^3.3.0",
-    "ethers": "^6.12.1",
+    "ethers": "^6.13.0",
     "express": "^4.19.2",
     "express-async-errors": "^3.1.1",
     "express-history-api-fallback": "^2.2.1",
@@ -98,7 +98,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.0.13",
-    "react-hook-form": "^7.51.4",
+    "react-hook-form": "^7.51.5",
     "react-international-phone": "^3.1.2",
     "react-router-dom": "^6.23.1",
     "recharts": "^2.12.7",
@@ -109,22 +109,22 @@
     "stripe": "^13.11.0",
     "typewriter-effect": "^2.21.0",
     "ufo": "^1.5.3",
-    "umzug": "^3.8.0",
+    "umzug": "^3.8.1",
     "use-bus": "^2.5.2",
     "validator": "^13.12.0"
   },
   "devDependencies": {
     "@abtnode/types": "1.16.26",
     "@arcblock/eslint-config-ts": "^0.3.0",
-    "@blocklet/payment-types": "1.13.270",
+    "@blocklet/payment-types": "1.13.271",
     "@types/cookie-parser": "^1.4.7",
     "@types/cors": "^2.8.17",
     "@types/dotenv-flow": "^3.3.3",
     "@types/express": "^4.17.21",
-    "@types/node": "^18.19.33",
-    "@types/react": "^18.3.2",
+    "@types/node": "^18.19.34",
+    "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@vitejs/plugin-react": "^4.3.0",
     "bumpp": "^8.2.1",
     "cross-env": "^7.0.3",
     "eslint": "^8.57.0",
@@ -135,11 +135,11 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^2.8.8",
     "prettier-plugin-import-sort": "^0.0.7",
-    "ts-jest": "^29.1.2",
+    "ts-jest": "^29.1.4",
     "ts-node": "^10.9.2",
-    "type-fest": "^4.18.2",
+    "type-fest": "^4.19.0",
     "typescript": "^4.9.5",
-    "vite": "^5.2.11",
+    "vite": "^5.2.12",
     "vite-plugin-blocklet": "^0.7.9",
     "vite-plugin-node-polyfills": "^0.21.0",
     "vite-plugin-svgr": "^4.2.0",
@@ -155,5 +155,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "99484b4bdf4b1bba8c9dc0e20764ad0e4217d82f"
+  "gitHead": "cf476c72b4c54fd56881e03828e4b2c764e76e84"
 }

package/src/components/price/form.tsx

@@ -214,7 +214,7 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
                       size="small"
                       sx={{ width: INPUT_WIDTH }}
                       error={!!getFieldState(fieldName).error}
-                      helperText={getFieldState(fieldName).error?.message}
+                      helperText={getFieldState(fieldName).error?.message as string}
                       InputProps={{
                         endAdornment: (
                           <InputAdornment position="end">

package/src/pages/customer/subscription/change-payment.tsx

@@ -27,7 +27,7 @@ import { useRequest, useSetState } from 'ahooks';
 import pWaitFor from 'p-wait-for';
 import { useEffect, useState } from 'react';
 import { Controller, FormProvider, useForm, useFormContext, useWatch } from 'react-hook-form';
-import { useParams } from 'react-router-dom';
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 import { joinURL } from 'ufo';
 
 import SectionHeader from '../../../components/section/header';
@@ -75,9 +75,10 @@ const waitForCheckoutComplete = async (sessionId: string) => {
 
 function CustomerSubscriptionChangePayment({ subscription, customer, onComplete }: Props) {
   const { t } = useLocaleContext();
-  const { settings } = usePaymentContext();
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const { settings, connect } = usePaymentContext();
   const { control, setValue, handleSubmit } = useFormContext();
-  const { connect } = usePaymentContext();
 
   const [state, setState] = useSetState<{
     submitting: boolean;
@@ -115,12 +116,23 @@ function CustomerSubscriptionChangePayment({ subscription, customer, onComplete
   const method = settings.paymentMethods.find((x: any) => x.id === selectedMethodId) as TPaymentMethod;
   const changed = selectedCurrencyId !== subscription.currency_id;
 
+  const handleCompleted = async () => {
+    await onComplete();
+
+    const redirectUrl = searchParams.get('redirectUrl');
+    if (redirectUrl) {
+      window.location.href = redirectUrl;
+    } else {
+      navigate(`/customer/subscription/${subscription.id}`);
+    }
+  };
+
   const handleConnected = async () => {
     try {
       await waitForCheckoutComplete(subscription.id);
       setState({ paid: true, paying: false });
       Toast.success(t('payment.customer.changePayment.completed', { time: subscription.current_period_end }));
-      await onComplete();
+      await handleCompleted();
     } catch (err) {
       Toast.error(formatError(err));
     } finally {
@@ -202,7 +214,7 @@ function CustomerSubscriptionChangePayment({ subscription, customer, onComplete
         <Stack
           direction="row"
           alignItems="center"
-          sx={{ fontWeight: 'normal', mt: 2 }}
+          sx={{ fontWeight: 'normal', mt: 2, cursor: 'pointer' }}
           onClick={() => goBackOrFallback(`/customer/subscription/${subscription.id}`)}>
           <ArrowBackOutlined fontSize="small" sx={{ mr: 0.5, color: 'text.secondary' }} />
           <SubscriptionDescription subscription={subscription} variant="h5" />