SaaS application using stripe - charge customers card before completing signup?

Question

We are using Stripe subscriptions to handle payment for a SaaS application we are building

Currently, our development team has implemented the following logic:

1. User enters card details into Stripe elements UI as the final step of signup to our app.

2. If the credit card is deemed valid by Stripe Elements, the signup process to our app completes successfully.

3. A stripe customer & subscription is created.

4. Our server processes the webhook from stripe to confirm if the initial payment succeeds/fails

The problem we have is that the customers card isn't being charged until after the signup process to our app is complete. In some cases this results in a poor user experience, where the user is told by our signup process that they have signed up successfully, then they receive a 'payment failed' email from our software if the stripe charge doesn't succeed.

What is the best way to handle this signup flow? Since we are relying on the stripe webhook to tell us if the charge has succeeded - a suggestion has been made that we could monitor for the webhook response (eg. every 1 second, in a loop) and confirm payment has succeeded before completing the user signup for our app. The flow would then become:

1. User enters card details into Stripe elements UI as the final step of signup to our app.

2. If the credit card is deemed valid by Stripe Elements, we create the stripe customer / subscription

3. Monitor (in a loop) for a response from the Stripe webhook to confirm if payment was successful

4. The signup process to our app completes successfully (if charge is successful), or fails if the charge is unsuccessful.

This also seems like a bandaid solution - what is the best way to handle our issue?

I have noticed there is an option to use 'pre-authorisation' of a card, but I'd prefer not to go down this road if it leads to extra items on a customers bank statement.

This seems like something that would be very common - we would greatly appreciate any advice

Thanks

Answer 1

The most straightforward solution seems to be that your integration isn't waiting for the payment to complete.

With Subscription, you can wait synchronously on your backend for a status: active on your backend, before returning a response to your frontend. You don't even need to poll for the webhook response, cause your backend creates a Customer, creates a Subscription, and returns that response to your frontend, to show an error or success.

(waiting for webhooks is good but when your integration is manually starting the Subscription, you don't necessarily need webhooks)

From the frontend perspective, your user sees a loading spinner, until your backend is able to say "payment successful, you are signed up!"