Apply promotion code to an incomplete subscription

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.