datasam123

[dark bobcat]

Are you managing both scenarios from Customer Portal?

[worn bloom]

Yes, this is all on customer portal. This is how I'm configuring the customer/billing portal

      const configuration = await stripe.billingPortal.configurations.create({
        features: {
          invoice_history: {
            enabled: true,
          },
          payment_method_update: {
            enabled: true,
          },
          subscription_cancel: {
            enabled: true,
            mode: "at_period_end",
          },
          customer_update: {
            enabled: true,
            allowed_updates: ['address', 'email', 'phone', "name"],
          },
          subscription_update: {
            default_allowed_updates: ['price'],
            enabled: true,
            products: [
              {
                prices: [SUB_ID_MONTHLY, SUB_ID_ANNUALLY],
                product: process.env.STRIPE_PRODUCT_ID ?? ""
              }
            ],
            proration_behavior: "none"
          }
        },
      });

      const session = await stripe.billingPortal.sessions.create({
        customer: input.customerID,
        return_url: `${YOUR_DOMAIN}/pricing`,
        configuration: configuration.id,
      });

[dark bobcat]

Thanks for sharing!

When a user goes to update from monthly to yearly or vice versa while they are still on the free trial they have to immediately pay instead of making the switch and charging them when the trial ends. (I offer a 14 day trial on both versions of the product)
This is the known limitation in https://stripe.com/docs/customer-management#customer-portal-limitations:
Customer modifications to a trialing subscription will end the free trial and create an invoice for immediate payment.

When a user goes to update from one to the other, there is the "monthly" and "yearly" tabs, but when they navigate to each, they are both marked as "selected" which is confusing to the user (see attached screenshots). When I'm on the stripe customer portal UI on stripe.com it has "select" next to the one that is not selected. Is there a way to get it to be like the one on the stripe website?
I'm afraid this is not customisable. Can I suggest you writing in to Support https://support.stripe.com/contact for the feedback?

[worn bloom]

This is what I see when I try to configure the billing portal from stripe.com ui. It gives me the behavior I want, but when I actually go to the billing portal I get the screenshots I shared in the first message I sent

[worn bloom]

what's the alternative way to address this if not through customer portal?

[dark bobcat]

It'll be direct API integration with the guide of following docs:

• Changing a subscription price: https://stripe.com/docs/billing/subscriptions/upgrade-downgrade
• Maintaining the trial: https://stripe.com/docs/billing/subscriptions/billing-cycle#add-a-trial-to-change-the-billing-cycle

That's the preview! It can be different in the actual Customer Portal. I'd suggest writing to Support with the differences, so that they can share with the product team

[worn bloom]

Thank you, I just sent an email to support

Just a quick follow-up @dark bobcat will I have to build out my own UI to display changes in subscription to the user instead of depending on a stripe hosted customer portal?