Build a Pay Once For Access App
This episode is for members only

Sign up to access "Build a Pay Once For Access App" right now.

Get started
Already a member? Sign in to continue
Playing
10. Creating a Stripe webhook

Episodes

0%
Your progress
  • Total: 1h 11m
  • Played: 0m
  • Remaining: 1h 11m
Join or sign in to track your progress

Transcript

00:00
So we're going to ignore our app for a little while and focus on setting up a webhook which
00:06
you'll find over in the developer tab here to go ahead and notify our app when a payment intent was successful. So if we head over to this webhook section, I've got one set up here already which is disabled.
00:20
We're going to go ahead and create a new one. Now before we do any of that, we're going to need some way to expose our local environment publicly, of course, because Stripe is not on our local machine. We need some way of listening to these webhooks.
00:37
Now there are loads of solutions for this but I'm going to go ahead and use expose. It just tends to work really nicely and easily the first time. So go ahead and check this out or if you're using another solution, go ahead and set that up.
00:51
And once you have, if you are going to use expose, got this set up via the docs, you can pretty much just go ahead and run expose in your terminal and you can see that we now have a public URL payforaccess.sharedwithexpose.com which we can use to reference in our webhook. So if we just go ahead and duplicate this over, paste this in, you can see that this
01:15
is pretty much our app but it's now on a public domain. So we now have a public tunnel through to our app. That means we can go ahead and add an endpoint here. So let's go through this together.
01:27
We're going to go ahead and give the endpoint URL. I'm actually going to use the HTTPS version for this and we're going to need some sort of route for our webhook controller to handle our Stripe webhook. So I tend to bundle these all under a webhooks umbrella and then just give the name of the
01:47
service. So that's the route that we're going to create. Now we're not going to add a description but we are going to select an event. We just need one here.
01:57
We're going to search for intent and we want payment intent successful or in this case succeeded. So that's the only thing that we want to listen for. When a payment intent is succeeded, we're going to grab the user ID that we set in that
02:13
payment intent and we're going to upgrade that user. So let's go ahead and add that event in there. That's pretty much all we need to do and we hit add endpoint. So there we go.
02:22
We now have a webhook set up and this is waiting for events. Now we can test this if you are running expose in the terminal. This is going to give you any requests which are being made to your app. Now we can test this by going ahead and just making a payment.
02:38
So if we come over to the payment section here, of course go ahead and fill in our card details and just make sure they are right, 4242 and hit make payment. What's now going to happen is that payment intent is going to be successful and that will send a post request through to webhooks slash stripe over on our app and that will
03:03
contain all of the information about that payment intent including the user ID that we set earlier. Now at the moment, Stripe is now attempting to deliver this but of course we're getting a 404 because we haven't implemented this webhook controller just yet.
03:18
Now let's just go ahead and outline this and then the next episode we'll see how we can really nicely pick up these events from Stripe including future events if you need to do this. Okay.
03:30
So we're going to go ahead and create our new tab in here and we're going to go and create a controller to handle this. So make controller and we're just going to call this Stripe webhook controller. Keep it simple and over in routes and web, we can now go ahead and register this.
03:46
So let's just grab one of these, come down here and let's say webhooks and slash stripe. So that's going to reference the Stripe webhook controller. Let's go and just open this up and let's create an invoke method in here and let's just do nothing.
04:06
Okay. So now we have this created. Really importantly, we don't have cross-site request forgery protection enabled for our webhooks.
04:15
So we can again either say without middleware, if we were grouping all of our webhooks, that might be a really good idea or once again, you can go over to your verified cross-site request forgery token middleware and you can go ahead and disable webhook stripe or webhooks and everything.
04:33
So that will just not use cross-site request forgery protection on these webhook routes. Okay. So now that we've done that, let's make sure we switch this to post because that's the way that Stripe sends it through.
04:45
And we should now see a successful request through to our webhooks and Stripe. Let's just move this along a bit. Okay. So let's go ahead and go through the process of making a payment again.
04:58
Again, just entering these card details in here and hit make payment and let's come straight over to here and you can see this still doesn't look like it's available. So webhooks, if we spell it correctly, would help and Stripe will probably try again but let's just go ahead and make another payment just to be sure.
05:23
So let's go ahead and just fill these details in. And once that's done, we'll head straight over and there we go. We get a 200 through to our webhook controller. Now of course, our webhook controller at the moment is not doing anything.
05:37
It's not looking up this particular event that's being sent. And really importantly as well, this Stripe webhook controller is not protected, which is something that we're going to do using a signing secret. So in the next couple of episodes, let's handle those two things.

Episode summary

In this episode, we're taking a quick break from the main app to set up a Stripe webhook, which is essential for letting your app know when a payment succeeds. First, we walk through how to create a new webhook endpoint in the Stripe dashboard. Since Stripe needs to send requests to a publicly accessible URL (and your app is probably running locally), we use a tool called Expose to tunnel your local environment to the internet. This way, Stripe can communicate with your app for testing.

Once our local app is reachable on a public URL, we set up a specific endpoint (/webhooks/stripe) to listen for successful payment_intent.succeeded events. We go through selecting this event in the Stripe dashboard, adding the endpoint, and testing the setup by making a fake payment through the app. The initial tests give us a 404, as expected, since the controller isn't implemented yet, but that's about to change.

Next, we scaffold a basic Stripe webhook controller in our app, register it in the routes file, and make sure that CSRF protection is disabled for webhook routes (since Stripe won't be sending your site's CSRF token). After fixing a small typo and making sure the route is a POST, we confirm the endpoint is working by getting a 200 response from Stripe on subsequent test payments.

At this point, the controller is just a stub, not processing any data yet. The episode wraps up by highlighting that next, we'll handle inspecting the event type and securing the webhook using Stripe's signing secret, so no one else can send fake requests to your app.

Episode discussion

No comments, yet. Be the first!