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
09. Redirecting after successful payment

Episodes

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

Transcript

00:00
So because we're working within Alpine, once we go ahead and successfully process a payment, because we're not doing this on the back end, we really want to redirect the user over somewhere. Now, rather than mess around and do this directly within JavaScript, what we're going to do is submit the form that this Alpine component is. And what we're going to do is have a action in here
00:24
of a particular location. So what that will do is when we go ahead and submit this form, it will post through to that particular page. Now, there's a load of different ways we could do this. We could technically set the action to our dashboard, and we could set the method to get. And then when we submit, and submit being in quotes this form, that will go back over to
00:46
our dashboard page. Let's look at this method first, and then we'll discuss why that might not be the best idea. So how do we submit this form first of all? Well, just down here in this else, which means we don't have an error, all we really need to do is access this and L, which references this form itself. And we just need to call the native submit method on this. That will submit
01:09
through this form to the intended location, which is just here. So let's go ahead and test this out. So we're going to go ahead and in fact, to test this rather than having to enter our details every single time, let's just grab this else submit. And maybe we could just put this directly in here and just comment out all of this, just so we don't have to go through the process of entering
01:38
the details every single time. Okay, so let's just give this a refresh and hit make payment. And you can see sure enough, we're redirected straight back to the dashboard. Now, that's fine if that's what you want to do, but we don't really then get the benefit of being able to flash a message on the server side to tell the user that their payment has been successful. So what we're
01:58
instead going to do is create out a new route here, and we're going to post through to say payment slash redirect. We could use get, but it kind of makes more sense that we're posting through to a form. So I'm going to call this payment redirect controller. So let's name this in here before we create it. Let's comment this out and go ahead and say PHP artisan mate controller
02:23
and payment redirect controller. Okay, let's bring this back in and then bring the namespace in for this. And let's update our payment redirect controller to properly redirect us on the backend. So again, we're going to use an invoke magic method here. And let's just redirect the user really simply back to the dashboard page just to see this working. And you could add some middleware
02:44
in here if you wanted to, but since we're not doing anything specific in here that wouldn't require a user to be authenticated, it doesn't matter too much. Okay, so now that we've got this payment slash redirect, we can go over to our form and we can update this to payment slash redirect. And we can post through to this instead. So let's try this again, make payment and yeah,
03:09
we get a 419 page expired. That's because we're trying to post through to somewhere. And technically when we do that within Laravel, we need a cross-site request forgery token. Now there's a couple of ways that we could do this. We could come over to the cross-site request forgery middleware, which is under HTTP and middleware, and we could exclude payment slash
03:33
redirect. That would work. We just try this out again. There we go. We get a nice redirect. Or what you could do is directly exclude this over on the web route. So you could say without middleware and you could use the cross-site request forgery middleware in here. And that would exclude that particular middleware. It's really up to you. So let's go over here and hit
03:56
make payment and you can see it works as we expect. Okay, so now that we've got the redirection down, let's go back over to our form here and let's actually flash a message. So on the payment redirect controller, let's go ahead and say with status and we'll just say payment accepted, something boring in there. Now what we can do over on the dashboard.play.php page or globally
04:23
is create an if statement in here to check if that particular session has the status in it. So if session status, we're going to end the if there and we're just going to write flash in here for now, just so we get the idea of what we're trying to do. So if we just come over here now and hit make payment, you can see that we get flash. Now for this, what we can then go ahead
04:45
and do is just start to build up some sort of flash message. I'm not going to make this pretty, I'll let you go ahead and style it if you want to. But in here, we're now just going to say session and status. And in fact, let's just give this a little bit of a design. So let's set the background to blue 500 and the text to white, make that full width. And let's set that to rounded and just give
05:09
this a little bit of padding. We'll just keep it really, really simple. So because we've added some styling here, we just need to run npm run dev. And once that has compiled, we should now be able to go over to the payments page, hit make payment and see our flash message that of course doesn't look great at the moment. So that's the kind of thing that we're getting at now. What we can now
05:30
do is come over to our index page, undo all of our comments that we created earlier. So let's just make sure we properly uncomment all of this. And we should be good to go. So let's uncomment that. And that looks good. Okay, so let's just test this out from the entire flow. So let's go over to payments. Let's go ahead and enter some car details that we know are correct. And
06:01
there we go. Hit make payment. And that looked a little bit quick. I think we probably forgot to, yeah, we forgot to remove the submit up here, which is not helpful. So let's go back and just try this again. Over to payments. Let's go ahead and enter our car details and hit make payment. We'll see a slight delay, of course, while that payment goes through. And then we're finally
06:25
redirected over to a successful payment. And we see if we head over to payments, our successful payment just here. Great. Okay, so now that we've done that, and we've got a pretty ugly confirmation message, we can now focus on creating out a Stripe webhook to actually notify our app when this payment was successful.

Episode summary

In this episode, we're taking care of what happens after a user makes a successful payment in our Alpine-powered frontend. Instead of handling redirection purely with JavaScript, we lean on good old HTML forms and Laravel's backend.

First, we look at a super simple method: just submitting the form and redirecting straight to the dashboard. It works, but it's not super flexible—you can't easily flash messages or show users a confirmation.

So, instead, we set up a new route (payment/redirect), and create a controller in Laravel to handle the post-payment redirect. This lets us do backend stuff like flashing a "payment accepted" message to the session. We also touch on CSRF protection—what happens when you post and get a 419 error, and how to work around it (either by excluding your route from middleware or using Laravel's tools in your route definitions).

Lastly, we add a little styling to the flash message (it’s simple and not pretty, but it works!), and run through the full workflow: enter fake card details, make a payment, and see that satisfying confirmation message.

By the end of this video, you’ll know how to redirect users after payment, display a confirmation message, and you’re all set up to move onto handling backend events with Stripe webhooks in the next episode.

Episode discussion

No comments, yet. Be the first!