Creating Stripe Setup Intents With Laravel API and VueJS SPA

Originally published at: https://serversideup.net/creating-stripe-setup-intents-with-laravel-api-and-vuejs-spa/

When doing an API Driven Application, creating a Stripe Setup Intent is a little confusing. Follow along and we’ll implement it!

Thanks for writing this up! It’s very helpful. Question: You said in the tuturial to place the /user/setup-intent route behind the auth:api middleware.

My purchase flow (for subscription based SaaS) is like this:

  • Visitor loads pricing page
  • Visitor clicks buy now
  • Visitor completes payment
  • Visitor registers account

So when I collect payment, the user does not have an account and is not logged in. Therefore, if I place my setup-intent method behind Auth:api the visitor will not be allowed to access the endpoint.

Do you have a recommendation on how to set this up? Can I safely make that endpoint available to non-authenticated users?

Thanks!

Hi @witt!

So the reason I put the call behind the auth:api middleware is the method to create the set up intent is called on the user itself. In https://serversideup.net/installing-laravel-cashier-on-laravel-6-x/, we setup the user to use the Billable trait which includes that method. Putting the call behind the middleware ensures we have the user to call the method on.

To be honest, I haven’t encountered this situation, but thinking a little, there’s a couple flows you could go through to make this work.

The simplest one, would be to run through the checkout process using Stripe Checkout. With this information you wouldn’t need the intent from Laravel, however the “product” they’d be purchasing would be their subscription. Then in the callback from Stripe, create a user and manually bind them to the subscription they purchased (https://laravel.com/docs/7.x/billing#creating-subscriptions).

The other flow, which could result in a callback nightmare, but is possible is to use the information provided when the user is checking out (provided they enter their name). Then go with the following flow:

  1. Submit name from form to the API and create a user (on the POST /register or similar route not guarded by auth:api)
  2. Return the user along with the set up intent from the server
  3. Send the form to Stripe

You’d just have to make sure you account for anything that can go wrong in between and not send the CC data to your own server.

Let me know if this helps. I think I get the workflow you are going through, but if I’m completely off, I’ll gladly take a deeper look!

Thanks very much Dan!

I think I’m going to go a different way, and have the Buy button load a new page that will gather their registration and payment information all on one screen. So essentially the last two steps of the process I outlined above will be completed on a single page. That way I can generate the payment intent on the server when the registration page is requested, and it doesn’t have to be part of the API.

Thanks again for your reply!
Witt

Awesome, that works! Let me know if you have any other questions!

Can you also add the code for createSetupIntent() func?

Hi @Gadelkareem ,

So the createSetupIntent() function is applied to the User model when you add the Billable trait: Installing Laravel Cashier on Laravel 6.x - Server Side Up.

That should be a part of the Laravel Cashier package.

1 Like

Got it thanks! I am trying to adapt that into my project but it is in Golang Waleed Gadelkareem / Skeleton · GitLab

Oh that’s cool! Are you making a framework in Golang? I saw someone trying to replicate some of Laravel’s features in Swift which was a cool idea. It’d be neat to see what you come up with!

No I am making a boilerplate based on Beego framework but the whole project is inspired by Laravel because I wanted the same ready components but with Golang. Now I am adding a Stripe integration and I found your article the closest to want I need so thanks again!

1 Like

Awesome! Hope the boilerplate works out well!

1 Like