Okay, let's take a look at Laravel Cashier. Cashier provides an expressive, fluent interface to Stripe's subscription billing services. It handles all the subscription-based features that Stripe has to offer. You can take a look at all the features here, including customers, payment methods, and subscriptions, but instead of going through that one by one, let's build the beginning stages of a SaaS app with subscriptions and Stripe. So I have a fresh app here. I'm making use of Jetstream as well. So let's go ahead and install Cashier. So as always, composer require it.

So let's go ahead and install Cashier. So as always, composer require it. Okay, and now we have to migrate the database, and if you want to publish the migrations and make any customizations, you can do this command, but we'll just leave it to whatever is default. And this created some new columns on the users table and a new subscriptions table, okay? And let's go ahead and add this Billable trait to our User model. So let's go into User, and let's add billable here, okay? And what's next? That's just a default, so that's fine.

And what's next? That's just a default, so that's fine. Now we can set our API keys, so let's add this to our .env file, okay? And let's grab this information from our Stripe dashboard. So I'm logged into Stripe here. As you can see, my testing data is on, and let's go ahead and grab our keys here. This one's the public key, so let's copy that, paste that in here, and I will do this behind the scenes for the secret key. Okay, so I pasted that in, and now we want to create a product in Stripe and have two plans or two prices associated with this product.

Okay, so I pasted that in, and now we want to create a product in Stripe and have two plans or two prices associated with this product. So as you can see, I have a demo one here already, so let's make a new one. Let's just call it Cashier, and let's add two prices, like I said. Standard's fine. Let's say the first plan is going to be $10 a month, and let's make it US dollars. That's fine. And this one will be $20 a month, and we'll add this to our front end as well. Monthly is fine, and let's go ahead and save this product, okay? And now we have this identifier for each of the products, which we'll add to our front.

Monthly is fine, and let's go ahead and save this product, okay? And now we have this identifier for each of the products, which we'll add to our front end in a second. So let's go ahead and make a form that allows the User to select a plan and also have a field where they can fill in their creditCard information. So ideally, I'd like to do this in the register view, but the way Cashier works, we need to have an existing User. So we'll just do it from within the login. So let's go ahead and make a User here and just make a new form here that allows us to do what I just said.

So let's go ahead and make a User here and just make a new form here that allows us to do what I just said. So select a plan and enter our credit card information. So I believe there is a section here, views. So navigation, we'll add a new navigation link for subscribe. So let me just duplicate this, and we'll make a new route called subscribe, okay? And we'll just call it subscribe here. Let's go ahead and add that in our routes/web.php. So let's duplicate this one here, and we'll call it subscribe. So let's grab this, this, and this, subscribe.

So let's duplicate this one here, and we'll call it subscribe. So let's grab this, this, and this, subscribe. And now we just have to make the view. So I'm just going to duplicate the dashboard, and let's name it subscribe.blade.php. So let's change this to subscribe, and we'll just delete this and make a new div here with some padding. And this is where the form will go, okay? And let's see if this works. Okay, so there it is. So let's go ahead and create the form here.

Okay, so there it is. So let's go ahead and create the form here. So for the form, we'll make use of Stripe elements. So this allows you to embed a credit card input, which is actually an iframe and lives on Stripe's servers. So let's go ahead and grab this. So this is how it looks like. So let's grab the HTML. Actually, before we do that, we need to add a script section here. So I'm going to go to our layout, so app.blade.php.

Actually, before we do that, we need to add a script section here. So I'm going to go to our layout, so app.blade.php. And let's go ahead and add another stack for scripts. And let's push to the scripts and subscribe. So we can put this anywhere. Let's put it here. Let's push to the scripts. And it's end push. And now we can add this to import the JavaScript for Stripe. And I guess we'll start with the JavaScript.

So let's put it after this and just paste that in. OK. So let's just see if the form renders correctly. And then we'll start modifying it. OK, so there is the input for the credit card. Let's just make it look decent. So let's just say width: 1/2 since we have Tailwind installed. OK, so that's fine. And let's change the submit button here. So let's grab the one from, where is it, auth/login.

And let's change the submit button here. So let's grab the one from, where is it, auth/login. And we have this XJet button, which we can make use of. So back to subscribe and let's replace this. And let's just call it subscribe. And let's put a margin-top. Subscribe now. OK. OK, so that looks pretty decent. So now let's add the radio buttons or the selections that the user can make for the two plans that we have in Stripe.

OK, so that looks pretty decent. So now let's add the radio buttons or the selections that the user can make for the two plans that we have in Stripe. So I'm just going to paste some code in here. So you'd have to watch me do that. OK, and let's just paste it right in here. So here's fine. OK, and we have two plans, one for the $10 a month. And I'm calling that standard and one for the $20 a month. And I'm calling that premium. So that should show and that looks OK.

And I'm calling that premium. So that should show and that looks OK. So we have to make sure that the value for these plans match the identifier in Stripe. So right now it's just standard and premium. But the $10 a month one, we want to replace with our $10 a month plan in Stripe. Let's grab this, put it in here. And the same for the $20 one. OK. OK, so now everything is set up, but we still have to make some changes here. So essentially what we want to do is let's go back up here to creating a subscription.

OK, so now everything is set up, but we still have to make some changes here. So essentially what we want to do is let's go back up here to creating a Subscription. We want to make use of this method and create a new Subscription for whatever the User selects. But it requires a payment method. So before you can just pass in a token, which is injected by the JavaScript that Stripe provides. So let me show you what I mean. So let's make an endpoint here for our form. So where's our form? Right here. Actually, let's put a csrf field in here so it works.

So where's our form? Right here. Actually, let's put a CSRF field in here so it works. And let's make a new route here. Let's call it subscribe.post. Actually, no, sorry. It has to be like this route subscribe.post. And it's making the endpoint and we'll just chuck it in the routes file. And it's going to be this one, but it's going to be a POST request. So let's do that. And the endpoint subscribe is fine. And it's also grabbed the request.

So let's do that. And the endpoint subscribe is fine. And it's also grabbed the request. So request, request. And let's just import that. OK. And let's just dd everything from the request. So request->all(). OK. So what I'm trying to show you is that let me just show you the JavaScript. So we create a new Stripe element. We initialize it. This is just some styles. This is just some validation. And here is where Stripe creates a token. And again, more validation here. But if it's successful,

This is just some validation. And here is where Stripe creates a token. And again, more validation here. But if it's successful, then what it does is it creates a new hidden field and adds it to the form and then submits the form. Let me just indent this. So we should see this Stripe token. It's called Stripe token when we submit the form, if I did everything correctly. So let me just refresh this. subscribeThatPost is not defined. Let's make sure we named it right. subscribeThatPost. OK. So now let's just see if it works. OK, so that's not going to work. Let's put in a test credit card.

OK. So now let's just see if it works. OK, so that's not going to work. Let's put in a test credit card. So 4242 4242 4242 4242 is the test credit card for Stripe. OK. And it's submit the form. OK. So now we get _token, which is the CSRF token in Laravel. The plan is the one we selected. And the Stripe token is the hidden token that Stripe added. So before in previous versions of Cashier, we can just pass this into here. And that would work. So that would create a new subscription within Stripe. But now it requires a payment method.

And that would work. So that would create a new subscription within Stripe. But now it requires a payment method. So we have to do some extra stuff on the front end. And that's actually up here. So let's scroll up to payment methods for subscriptions. So what we have to do is set up Stripe's intense API and do some extra work to pass it into the front end. And then instead of calling this createToken method, then we call something else, which we'll do in a second. So let's do this step by step. So we have to pass this into the front end. So let's do that in a routes file.

So let's do this step by step. So we have to pass this into the front end. So let's do that in a routes file. So that would be for this route here. OK, let's pass that in. And our $user is going to be Auth::user() since we're logged in. OK. What's next? So next we have to. I'll put the secret or the intent client secret somewhere on our front end. So you can put this anywhere you want. They put it on the button. I'll put it on the form. So into our subscribe, let's go into the form here and I'll put that at the end. OK. Next. We have to initialize Stripe elements,

let's go into the form here and I'll put that at the end. OK. Next. We have to initialize Stripe elements, which we've done already. And here is where we have to change. This createToken method here. So this Stripe::createToken, it's almost the same thing, but we will modify this. So first we need a cardholderName because it's required here and it's probably better to have this for security reasons. So let's go ahead and add that field. So it's going to paste it in to save some time. Let's go up here and I will put it above the radio button. So somewhere here. OK. It's called cardholderName.

So we can just do card card or we can just do card like this. And the billing details is the cardholder name. Not value, which we have here. OK. And now if we get an error, we can do the same thing we did before, which is here in our commented out code. So let's put that back. And for the success case, it should be this case over here. And we have to make some changes to this method as well. So we are no longer passing in the result token like we did here. We are passing in the setupIntent. So that's what we get back from this call. So let's pass that in. setupIntent. Actually, let's just console.log that so we can see what we're doing.

So let's pass that in. setupIntent. Actually, let's just console.log that so we can see what we're doing. setupIntent. And this should have a token or console.log setupIntent. So let's see if we can get that field. OK. Refresh. Let's open up DevTools to make sure I have no errors. OK, that's fine. And it's fill this out again. Let's just mash for two. Yes, we can put my name here. And just do for two here. And let's see if we get anything here. OK, and we do. So we have what we have here. Let's expand this. So the token that we're interested in or the string that we're interested in is this paymentMethod.

OK, and we do. So we have what we have here. Let's expand this. So the token that we're interested in or the string that we're interested in is this paymentMethod. So let's modify our method here. So this is now a setupIntent. Let's name the attribute paymentMethod. And the value of that is going to be the setupIntent. PaymentMethod is what's called. So this is the field that's going to be passed in through to our server. So this is exactly what we need. So this key is what we need for the createSubscription. So creating subscriptions right here. PaymentMethod. OK. So as you saw, it starts with what? PM, right? Yeah. PM. So now let's re-comment this back in.

OK. So as you saw, it starts with what? PM, right? Yeah. PM. So now let's re-comment this back in. Let's remove this. Put this back in. OK. And I'm still dying and dumping the $request all. Let's see if we get that PM key in our dying dump here. And if we do, then we just have to call this method here. And that should work. After all that work. OK. So refresh. Say premium and mash for two again. And let's see if we get anything. Result is not defined. So I have an error somewhere. What result are we doing here? Let's comment it out.

Result is not defined. So I have an error somewhere. What result are we doing here? Let's comment it out. So this is just error message. OK. Sorry. Error message. OK. One more time. Premium mash for two. And let's go ahead and subscribe now. And it's saying name is empty. I forgot my name here. subscribe now. And there we go. Yeah. So we are getting the correct key. So now finally we can make use of this method here in our back end. So. Let's grab this. And back to our routes file.

So now finally we can make use of this method here in our back end. So. Let's grab this. And back to our routes file. Right here. Instead of dying and dumping, let's just comment that out. Paste this in. And it's going to be off User. NewSubscription. OK. And the first argument is the name of the product. And this is also going to be stored in our database. So we can just call it 'cashier'. And this has to correspond to whatever plan the User selected. So in our case. That is the request plan. So we can grab that. A request plan. And the payment method is the request payment method.

Because as you see, there are a lot of cases that you should handle when doing a SaaS app. So, yeah, definitely be sure to check out Spark and I'll see you in the next video where we'll take a look at a few more features.