b33f_subscription-upsell

[covert lodge]

👋 Welcome to your new thread!

⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.

🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1285262935110713446

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

[tropic pond]

Hello

Is this to start a Subscription or to upgrade?

[pastel arch]

Hey 👋
Relevant code:
-# configuration

    const stripe = getStripe();
    const [subscription, futurePrice] = await Promise.all([
        stripe.subscriptions.retrieve(stripeSubscriptionId),
        stripe.prices.retrieve(newSubscriptionPriceId)
    ]);

    const newPriceProduct = futurePrice.product;
    if (typeof newPriceProduct !== "string")
        return NextResponse.json({message: "Stripe Price Product not found."}, {status: 404})

    const configuration = await stripe.billingPortal.configurations.create({
        features: {
            subscription_update: {
                products: [
                    {
                        prices: [newSubscriptionPriceId],
                        product: newPriceProduct,
                    },
                ],
                enabled: true,
                default_allowed_updates: ['price'],
            },
            payment_method_update: {
                enabled: true,
            },
        },
        business_profile: {
            privacy_policy_url: getFormattedUrl(`${process.env.NEXT_PUBLIC_ROOT_DOMAIN}/datenschutz`),
            terms_of_service_url: getFormattedUrl(`${process.env.NEXT_PUBLIC_ROOT_DOMAIN}/agb`),
        },
    });

-# billing portal session

const baseReturn = getFormattedUrl(`app.${process.env.NEXT_PUBLIC_ROOT_DOMAIN}/${siteId}/plan`)
    try {
        const billingPortalSession = await stripe.billingPortal.sessions.create({
            customer: session.user.stripeCustomerId,
            return_url: baseReturn + "/available",
            configuration: configuration.id,
            flow_data: {
                type: "subscription_update_confirm",
                after_completion: {
                    type: "redirect",
                    redirect: {
                        return_url: baseReturn
                    }
                },
                subscription_update_confirm: {
                    subscription: stripeSubscriptionId,
                    items: [
                        {
                            id: subscription.items.data[0].id,
                            price: newSubscriptionPriceId,
                            quantity: 1,
                        },
                    ]
                }
            }
        });

[tropic pond]

This looks fine -- you just need to create two different Prices for that Product and list both Price IDs within features.subscription_update.products.prices

Then that should work fine

Are you seeing a particular issue at the moment?

[pastel arch]

oh, the first one is only the configuration. The second code snipped is where the user get redirected. Maybe I should create a variable if he want to subscribe monthly/yearly and put it somewhere inside the request

[tropic pond]

Hmm I'm not sure I understand the issue you are running into still

[pastel arch]

Right now the user click a button and my server creates the configuration and the subscription update flow. However: this update flow only contains the monthly payment. But what if the user chose to pay yearly (with discount)?

[tropic pond]

Right that's because your newSubscriptionPriceId only contains 1 Price ID, right?

You need that to contain 2 Price IDs -- one for a monthly Price and one for a Yearly Price

[pastel arch]

yes, that's the price that the customer selected. Like the customer is on a page and on this page are 3 plans (3 price ids). The user clicks on button which plan he want to subscribe for

[pastel arch]

But for which priceId will the subscription confirmation flow be (I can't do both, because than the user would end up with 2 subscriptions) ?

[tropic pond]

Ah I see

If you want to provide options for the user to select then you should use subscription_update not subscription_update_confirm: https://docs.stripe.com/api/customer_portal/sessions/create#create_portal_session-flow_data-subscription_update

[pastel arch]

hm ok, got it. I have a custom page for the user where he selects the correct plan (that he want to subscribe to). How can I combine both?

[tropic pond]

You would need to handle that on your custom page in that case

So you would offer the annual option there to and then redirect to the specific Price

Otherwise, you don't have them choose between the two on your custom page and you let them do that on Customer Portal

[pastel arch]

ah, so I get the variable that the user want to pay yearly (update my page when the user selects that) and with that also update the pricing ids that the user can click. When the user now choose a plan and want to get billed yearly the (yearly) pricing id is already there and just needs the confirmation and for this confirmation is the confirmation flow there, right?

[tropic pond]

Yep

Recommend testing it out!

[pastel arch]

ah got it 👍 thanks 🙂