How to handle plan switching in React/Next.js with Memberstack without creating duplicate subscriptions?

March 22, 2026 00:04
1 comment

Hi Team!

I'm building a subscription page in a React/Next.js app with two paid plans (Standard, Pro).

My question is simple:
When a user wants to switch plans (e.g., Pro → Standard or Standard → Pro), should I:

Option A — Use purchasePlansWithCheckout({ priceId: newPlanPriceId }) for plan switches, AND launchStripeCustomerPortal() only for billing/cancellation?

Option B — Use launchStripeCustomerPortal() for everything (plan changes + billing + cancellation)? (which seems to be a more simple option).

I've read that data-ms-price:update is recommended for plan switches on static HTML, but it doesn't seems to work in React components. I'm not sure if purchasePlansWithCheckout() is the correct JS equivalent, or if the Customer Portal can handle plan switching too.

What's the recommended approach?

I'm asking because I found this in the documentation:

"Note: There is currently no way for members to select a different plan inside the Stripe Customer Portal. For plan changes, you'll need to implement this functionality on your website using Memberstack's checkout functionality."

If I understand correctly, this means my "Manage Subscription" page would need 3 separate buttons:

Stripe Customer Portal — for billing, payment methods, cancellation
Switch to Pro — using purchasePlansWithCheckout()
Switch to Standard — using purchasePlansWithCheckout()

This feels a bit clunky UX-wise. Is this really the expected pattern, or is there a cleaner approach I'm missing?

I want to make sure I’m not going in the wrong direction.

For my use case (two monthly prices: €20 (Standard) and €40 (Pro), with upgrade proration and end-of-period downgrade), what is the correct Memberstack setup:

**Option 1**: Two separate plans in Memberstack (Standard + Pro)**Option 2**: A single Memberstack plan with two prices (€20 / €40), and users switch prices within the same subscription

What I want:- User must never end up with two active subscriptions.- Upgrade (€20 → €40) should be prorated.- Downgrade (€40 → €20) should apply at the end of the current billing period.- React / Next.js app, not Webflow.

Which option is the correct architecture?

Based on my current research, Option 2 seems more appropriate, but I’d really appreciate confirmation that this is the recommended approach.