Build a File Marketplace with Laravel

Sign in Get started

This episode is for members only

Sign up to access "Build a File Marketplace with Laravel" right now.

Already a member? Sign in to continue

Playing

26. Starting the checkout flow

Episodes

0%

Your progress

Total: 3h 32m
Played: 0m
Remaining: 3h 32m

Join or sign in to track your progress

01. Introduction and setting up

01. Introduction and demo

02. A fresh project with Laravel Breeze

02. Onboarding with Stripe

03. The onboarding screen

04. Registering the Stripe PHP library

05. Automatically creating Stripe accounts for your users

06. Forwarding users to Stripe Connect

07. Verifying if payouts are enabled

03. Creating products

08. Setting up and listing products

09. Installing Livewire

10. Building the product creation form

11. Automatically generating the slug from the product title

12. Validating and creating a product

13. Handling product file uploads

14. Attaching files to a product

04. Editing products

15. Creating the product edit form

16. Reviving product state

17. Showing and modifying existing files

18. Pulling together the product update process

19. Flashing an update message

05. User subdomains

20. Adding a user subdomain on registration

21. Subdomain routing basics

22. Adding a string macro to properly display the user's name

23. Listing the user's live products

06. Product checkout

24. Showing the product page

25. Creating the checkout success page

26. Starting the checkout flow

07. Storing sales

27. Handling Stripe webhooks

28. Storing product sales

29. Sending a confirmation email to customers

30. Securing Stripe webhooks

08. Accessing purchased files

31. Creating and validating the product download page

32. Displaying and downloading files

09. Sales dashboard

33. Calculating and displaying download stats

34. Listing through sales

Transcript

00:00

By the end of this episode, we're going to be able to click on this button, go through to the Stripe checkout and make a payment.

00:06

So let's head over to our routes because we're going to need a checkout route in here, which we will post through to to then start this flow. So let's first of all, start out with a controller, and this is just going to be again under the subdomain folder and subdomain checkout. Or subdomain product checkout. Controller. OK, let's create that out and let's create out the route for this.

00:38

So this is going to be posting through to the product itself and then just checkout and we'll switch this out to subdomain product checkout controller and we'll say products.checkout and we're done. OK, so if we head over to here, let's go and just create an invoke magic method here and we'll just die dump on checkout and then we'll go over to the product show template under our subdomain and we're going to swap this outer div for a form. Let's implement our cross site request forgery token just down here so this can go through and be validated properly and we'll swap the method here to post. And of course, we're going to go ahead and hook this up to an action and that's just going to be the route that we just created.

01:22

So that's products or subdomain in this case and products and checkout. And let's go ahead and pass in the two things that we need, which we know are the user's subdomain. So that goes through to the right subdomain and the product slug and we should be good. So we should now be able to post through to that checkout.

01:43

Great. OK, so in terms of the actual checkout itself, what are we doing in this controller? Well, we're making a request to Stripe, setting up the checkout and then redirecting the user over to that checkout. So we're going to define all of the items that are within this purchase, the fee that we're going to charge as well and a load of other stuff as well.

02:06

So let's start out by defining a response in here. We're going to go ahead and pull Stripe out of the container. We're going to go into the checkout and sessions part of the API and we're going to create a checkout session. What we can then do is just die dump the response here and see what we get back.

02:23

So let's go through everything that we need to pass into here and I'll explain them as we go. The first thing is going to be the mode, which is just going to be payment. That's pretty obvious. The next thing are going to be the line items.

02:34

So because we don't have any predefined products on Stripe, because we don't know what them products are going to be, they're created on our app. What we're going to need to do here is to find out some price data. If you look at the Stripe API itself, this will tell you to reference a product that you've already created in your Stripe dashboard. But of course, we can't do that because the product exists on our app.

02:58

So for this price data, we need to go ahead and pass in the currency. Now we're using USD throughout the app. We're not configuring this anywhere. We don't have it in any config.

03:07

So we'll just hard code this in for now. The next thing is going to be the unit amount. So this is going to be the actual price of the product. Now we know that we have a product passed into here.

03:18

So let's go ahead and let's pass the user in here as well, because we may need that data. And let's go ahead and accept the product into here like we've done for every other controller in here. And from the product, we know that we want to grab the price, which is a money object. But then we want to say get amount.

03:38

That's going to give us the sent amount of that product, which is what Stripe needs. So the next thing is going to be the product data itself, which is going to be things like the name, the description, any icons. In our case, let's just pass in a really simple name here, which is just going to be the product title. Let's add that in.

03:58

And just outside the price data that we've defined here under this line item, we just want to give the quantity in here, which we know for our case is pretty simple, is just going to be one. So if we come all the way down here outside of those line items, we need to go ahead and give in the payment intent data. And this part is really important because this is going to be the application or contain the application fee amount. That is going to be how much you as a platform are deducting from this sale.

04:29

So, of course, we're going to represent that in a percentage. We're actually going to set this to null just for now, because we're going to come back to that in a second so we can calculate that properly. Let's fill in all of the other things that we need to in here, first of all. So the first one is going to be the success URL.

04:45

So we already built that in the last episode. So that's going to be subdomain products, checkout and success. And into this, we need to pass in the user's subdomain, so that goes through to the right place and the product slug. Great.

05:04

Next up is the cancellation URL, so if the user cancels this, where are we going to send them back to? That is, of course, up to you. But the best thing to do here would be just be to redirect them back to the product page itself. So again, in here, we're just going to pass in the user's subdomain and the product slug.

05:23

And we're good. Now, really importantly, after this, we're actually going to pass some metadata, which is a custom object of data over to Stripe. The reason being is that we need to know when we get our Stripe webhook back, which product has actually been purchased. So we're just going to give in the product ID.

05:41

This is entirely custom. You can pretty much call this whatever you want. And that's, of course, just going to be the product ID. So that means that once the product has been purchased, we're going to listen out for a webhook.

05:52

We know which product has been purchased then, and we can hook up the purchase to the right thing, basically. So finally, just before we go back to the application fee amount, the second array that we pass through to here is going to contain the Stripe account that this relates to. Because, of course, we need to put the money into the correct account for this particular user. So we're going to go ahead and grab the user or just the product user.

06:18

And this is just the Stripe account ID. So now when this checkout completes, that user will receive that money minus the application fee, which we're going to look at next. And that is going to go into our account. So the question is, how do we calculate this application fee?

06:34

Well, we're actually going to go ahead and do this over on the product model. Makes sense to do this because we might need to show this elsewhere in our app, for example, to a user who's creating a product. We might want to show how much we are taking from that particular product whenever a sale gets made. So it makes sense to define it in here and not just calculate it in that controller.

06:55

So we're going to call this application fee amounts. There's no confusion about what this is. And this is basically just going to be a percentage of the price of this product. Now, we know if we just return here the price object, we know this is a money instance.

07:11

And the benefit of using a money instance, that package that we pulled in, means we can do things like this. We can multiply this by 10, for example, and then divide it by 100 using these methods. And that effectively gives us 10% of the sale price. Of course, if it was $10, we'd be taking $1 from each of them sales.

07:31

So we're setting this up to take 10%. And now we can grab this method and we can use it inside of here to give us the application fee amount. Now, this is actually going to return a money object as well. So what we need to do is get the sent amount of this, not the dollar amount.

07:47

So we're going to use the get amount method again to bring back 100 in this case, because that's going to be 10% of $10. So now that we have done this, we're going to die dump on the response to see what we get when we click this button. Let's just wait for that API request to be sent over and we should see the following. So this will contain all of the information about this checkout session.

08:08

What we are interested, though, is in this URL, because that's going to pass us over to Stripe and it's going to allow that particular user who is purchasing a product to check out. So we're going to return a redirect here and we can just redirect to response and URL. Let's go over and check this out. So we can just refresh the post request here, wait for this to go through.

08:30

And sure enough, there is the name of our product. There is the price. Of course, we don't see anything about the application fee amount here because that has nothing to do with the person that's purchasing this. But now they can go ahead and enter all of their details.

08:44

So I'm going to go ahead and just enter some test card information here, give my name in here and hit pay. And of course, we've set up that success URL that we go back to once this payment has been successfully processed. So we should, once this is processed and gone through, go over to that success page that we built a little bit earlier. So that's just finished.

09:04

And sure enough, we're redirected over. Now, at the moment, our application has absolutely no idea about this purchase. What we're going to have to do in the next session is listen to a webhook to confirm that this has been purchased. And then we can start to create sale records, send out emails and anything else we need to do.

Episode summary

In this episode, we kick off the checkout flow by wiring up everything needed so users can buy products via Stripe. We start by setting up a new checkout route and controller, which handles the heavy lifting. Then, we update our product page so the "Buy" button actually posts to the newly created checkout route.

Inside the controller, we dive into setting up a Stripe Checkout session dynamically since our products live in our app (not hardcoded in Stripe). We carefully pass along the necessary details: product name, description, price, and handle the fee we (as the platform) want to charge per sale. There's a handy bit where we create an applicationFeeAmount method on the product model so we can re-use that logic everywhere we need it.

You'll see how to embed important metadata for later use, like the product ID, and how to redirect the buyer straight to Stripe's checkout page. We confirm everything works by doing a live test payment and seeing the whole flow in action—including being redirected to the success page when done.

At the end, we mention that while everything appears to work smoothly, the app doesn't yet know about the purchase itself—Stripe handles that. Next time, we'll set up a webhook so the app can react when a purchase comes in, make sale records, and send emails. So, this episode is all about laying the groundwork for a super slick, multi-tenant checkout experience!

Episode discussion

No comments, yet. Be the first!