Apply promotion code to an incomplete subscription

Question

I'm writing an app for a SaaS where customers pay for a monthly subscription and I want to support entering promotion code.

This is the flow:

1. I need to create an incomplete subscription with invoice and payment intent so that I can get a client secret for my client side's Elements React component, to be able to show a payment form.
2. After showing the payment form, customer can enter a promotion code to get a discount.
3. I look up the promotion code and add it to the subscription.

All 3 steps happen without any issue but the problem is after doing this, the client still pays the original price (e.g. 100), not discounted. The discount is applied to their "next" invoice, not the existing one.

How can I fix this? I can not create the subscription at the final stage as I need it for clientSecret in the client side. And if I do create it early, it cannot be modified after customer wants to apply a promotion code to it.

Answer 1

You can pre-collect the card info using Elements, then create a Subscription specifying the promotion code you want.

Answer 2

My flow is identical, and for me the path of least resistance was to simply cancel the original (incomplete) subscription and create a new one if the user enters a coupon code. Creating a subscription with the coupon code or promotion code at the outset works as intended.