#Feetscha - Subscription & Payment Element

1 messages · Page 1 of 1 (latest)

glass fjord
#

Hi 👋
What's your question?

true flax
#

Hey. I just implemented the subscription process but I'm not sure if i've done it the correct way. I'l brievly explain what my flow is

#

the user can choose between these plans. if I click Upgrade plan, a stripeSubscription is created on the backend which returns the ClientSecret from its paymentIntent

unknown.png
#

I'll get redirected to that page. with the clientSecret I'll render my PaymentElement. At that point I already have a subscription in my DB with the status incomplete

unknown.png
#

when the user submits its payment I'll listen for the subscription.update webhook which updates the status the subscription from incomplete to active

#

And my question is, what if the user clicks to Upgrade plan (I'll create the stripeSubscription and a subscriptionRow with some data in my DB) and then the user decides to just cancel or not complete the subscription. thats why I wonder if I should even create the subscription before the user clicks "submit payment". but the problem is I need the paymentIntent before I can render that PaymentElement component

#

Is that the recommended way? Or can I just create a paymentIntent and when the user submits the payment, I'll create a subscription with that paymentIntent? I'm not exactly sure whats the recommended way

glass fjord
#

The system is designed to tolerate plenty of incomplete subscriptions. The process you described is the recommended process.

true flax
#

okay thanks. I faced a problem yesterday when a user decides to upgrade its current plan.

#

let's say he has a standard plan and selects premium and clicks on "upgrade plan". I'll update the stripeSubscription on the backend and the webhook changes the status from active to past_due

#

when the user then finishes the paymentForm, the webhook updates the status from past_due to active again with some other data of the new subscription

#

but again what if the user clicks on "Upgrade paln", then the status isn't active anymore but past_due, and then he dicides not to update. how do I change the status back to active again

nova dune
#

👋 hello again! If i recall correctly, yesterday we were looking at the pending updates functionality. Did you explore using that?

#

(Apologies if that was someone else!)

#

For this case is it safe to assume we're talking about an existing/establish customer & subscription, vs a new one?

#

We should handle the new vs existing customer cases separately to avoid confusing the issues

true flax
#

Hey again 🙂

#

Yes we are talking about an existing customer & subscription. I tried to use the payment_behavior: "pending_if_incomplete" but I get an error that way:

#

Error: This customer has no attached payment source or default payment method.

#

if I change payment_behavior to "default_incomplete" again, I dont get the error anymore

nova dune
#

That scenario should not be possible for an existing customer. How is the subscription being paid for before that change?

#

This is part of why I want to make sure to separate these flows -- you're encountering an error that should only apply to a new customer without a payment method on the subscription yet

true flax
#

Hm I dont really get what you're saying, sorry.

Well I was testing with the PaymentElement and subscribed with creditCard

#

and after I want to update to another plan with payment_behavior: "pending_if_incomplete" I'm getting the error

# 
        return await this.stripeClient.subscriptions.create({
            customer: user.stripeCustomerId,
            payment_settings: { payment_method_types: ["card", "sepa_debit"] },
            items: [
                {
                    price: priceId,
                },
            ],
            payment_behavior: "default_incomplete",
            expand: ["latest_invoice.payment_intent", "items.data.price.product"],
        });
    }; ```
#

thats how I created the subscription

# 
        const subscription = await this.getSubscription(user);
        return await this.stripeClient.subscriptions.update(user.subscription.stripeSubscriptionId, {
            items: [
                {
                    id: subscription.items.data[0].id,
                    price: priceId,
                },
            ],
            proration_behavior: "always_invoice",
            payment_behavior: "pending_if_incomplete",
            expand: ["latest_invoice.payment_intent", "items.data.price.product"],
        });
    }; ```

and thats how I want to update to another price
nova dune
#

Sure but you need to complete the subscription first, right? So that it has a payment method to use.

#

So if you're creating a new subscription to test with these updates, you have to make sure you complete the payment and set either the subscription or customer invoice default payment method

true flax
#

so I never actually completed the subscription

nova dune
#

Correct -- the issue is that the subscription youre testing updates with isn't a realistic representation of an active/ongoing customer subscription

true flax
#

so after the paymentProcess I just listen to invoice.payment_succeeded webhook and set the default_payment_metod

#

?

nova dune
#

Yep! You can set it on the subscription directly or in the customer.invoice_settings

#

the customer invoice settings is likely to be the better option unless your application logic would not work well with a single default for a customer

#

(you can always set a default payment method for a specific subscription if one should behave different than the customer default)

true flax
#

Okay I get that. I think i can get the flow done now.

Thanks alot for your time !!

nova dune
#

Ok great! My pleasure, and good luck! I'll leave this open for a bit so you can try testing and come back if its not working out like you need it to 🙂

true flax
#

Alright thanks alot 🙂