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
06. Creating the Stripe card form

Episodes

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

Transcript

00:00
So by the end of this episode, we'll have a Stripe card form where we can, of course, enter a card. We won't be able to submit this just yet,
00:08
but we'll cover that in the next episode. Now before we do anything, I want to mention one thing about payment intents here. Now if we refresh this page here again and again,
00:18
what this is actually going to do is create multiple payment intents. Now this isn't really what we want to do. Ideally, what we want to do is for a single user,
00:28
have one payment intent. Now if you'd imagine a user comes over to the Payment page, maybe goes back again to the Home page and comes back to the Payments page,
00:36
there are lots of different ways that the user can interact with the site. We don't want to just keep creating payment intents in here.
00:43
Ideally, what we want is to store the ID of this in a session, and then go ahead and re-look this up within Stripe. We will be changing that a little bit later.
00:53
For now, we're just going to leave it like this so we can get it working. We'll come back a little bit later to tidy this up, because we really don't want to keep creating payment intents.
01:03
OK, so of course, what we now need to do is create our view where we can output these car details. So I'm going to go ahead and return a view in here. We're not going to pass any information down yet.
01:13
Let's call that payments.index. So let's open up our Resources section here under Views, and let's create a Payments folder. And in here, let's create index.blade.php.
01:25
Once again, we'll just grab the dashboard template here and just copy this over and just change the title to Payment. And this is where our card form is going to sit. So now, if we head over here, of course,
01:36
that's going to create the payment intent, and we're going to show the card form. OK, so to create the card form, we're going to use AlpineJS, just because it allows us to have
01:45
a little bit more interactivity. We already saw from earlier that Alpine is already pulled in, but we also need the StripeJS library pulled in as well. So this is really easy, and the recommended way to do this
01:58
is just to grab the script and paste this into your main template, which is app.blade.php under Layouts, which is what every single one of our pages here extends.
02:09
So we're going to put this at the top just here underneath the Script section, and that's going to be on every single page, which is recommended for Stripe to detect things like fraud.
02:19
So if we come over now and give this a refresh, the Stripe library should be pulled in. If we just head over to Network and JS, you should see the Stripe library here pulled in.
02:29
Great. OK, let's get started on our form. So we're going to create an overall wrapping form, because we are going to submit this through.
02:36
We'll talk about that a little bit later. And we're going to make this entire form a Alpine component. So I'm going to go ahead and get rid of the action for now. I'm going to pull this down, and to initialize
02:47
this Alpine component, we're going to define out, using the xData attribute, an object in here. Now, inside of here, we're going to keep reference to the Stripe library.
02:59
We're going to keep reference to the card element that we're going to create, which is what the user is going to type in. And we'll leave it at that for now, just to keep things
03:08
simple. Now, within Alpine, we can implement an init method in here, which will do something when this component initializes.
03:16
So I'm just going to say Alpine init. Let's go over and just pull up our console real quick, give this a refresh, and you can see that that's initialized. So what we can do now, rather than just write raw JavaScript
03:29
on the page somewhere within a script tag, we can just start to use this Stripe library, set it up, apply it to Stripe, create the card element directly within this form.
03:39
So let's go ahead and assign something to the Stripe property that we've created within here. And this is basically just going to be a new Stripe instance, and we're
03:49
going to pass through our Stripe public key, which, remember, we added over in EMV here, and we also added to our Stripe config just here. So because we're technically working within Blade,
04:02
we can just use Blade syntax to access the config helper and say Stripe and key. So that's now a Stripe instance created for us. So all we need to do now is go ahead
04:14
and create out our card element, and then create a button that submits this. So let's create out an elements variable in here, and we're going to reference the Stripe instance
04:25
that we've just created, and we're going to access the elements part of this. And then we're going to go ahead and set this card element to use elements that we've just created,
04:35
and we're going to say create and card, and then we can pass some additional options in here if we need to. We'll just leave that as an empty object.
04:42
Now we need to go ahead and mount this to somewhere on the page. Now we don't have a container for this at the moment, so we can do that directly within our form here.
04:51
Let's just create a div out with an ID of card element, and that's exactly where our card element is going to sit. So to mount this, we just want to go ahead and say this card element, and mount, and give
05:04
the selector, which is just the ID of card element. And that's as simple as it is to get our card element on the page. Let's give this a refresh, and we should see that in there.
05:14
We can start to type in any of our card details. OK, now we're going to need a button here, and we can actually reuse the button element that comes with Laravel Breeze.
05:27
This is in the form of X button, so this is a blade component. And in here, we can just say make payment, and we can give this a class in here, maybe of margin top three just to space this out.
05:39
If we just give that a refresh here, you can see we now have our button. And if you're interested in where these come from, if you just go ahead and open up your views under components,
05:49
we've got all of these blade components in here, and this is the one that we're using. So if you need to change the styling of that, you can go ahead and do that in there.
05:58
So we're not going to make a payment just yet, but what we can do on this form is attach an event listener with Alpine. So we're going to say X on submit.
06:08
We're going to go ahead and add a modifier to prevent the default behavior, and we're going to go ahead and call a method to confirm this card payment.
06:16
So let's call this confirm card payment. Let's grab the name of this, and then we can pretty much just go ahead and create out this method in here.
06:24
Let's just go ahead and console log out, make payment, and let's go over and see if this works. Just give that a refresh, hit make payment, and there we go.
06:33
Sure enough, you can see that that kicks the process off of actually processing our payment. And that's exactly what we're going to do in the next episode.

Episode summary

In this episode, we walk through setting up the Stripe card form for our payments page. By the end, you'll have a proper card input field where users can enter their card details—though we won't submit payments just yet (that's coming in the next video).

We kick things off by talking a bit about payment intents and why you shouldn't keep creating a new intent every time someone reloads the payment page. For now, we leave it as is just to get things working, but we'll loop back and tidy up that logic later.

The main focus here is creating the view for the payment form. We set up a new Blade template in Laravel and use Alpine.js to make our form interactive. We also pull in the Stripe.js library—adding it to our main layout so Stripe can do its thing on every page (this helps with things like fraud detection).

After that, we set up the basic structure of the card form, initialize Alpine.js components, and connect everything with the Stripe API using our public key straight from config. You'll see how easy it is to mount the Stripe Card Element onto the page and visually confirm it's working by typing in card information.

Finally, we add a payment button (using Laravel Breeze's Blade components for quick styling) and wire up a submit handler with Alpine. For now, it just logs to the console, but everything's in place to start processing payments in the next episode. If you're curious where that button styling comes from, we also show you how to check the Blade components directory so you can customize as needed.

So, by the end of this episode, you'll have Stripe's secure card input form rendering on your Laravel site and ready for the final payment step next time!

Episode discussion

No comments, yet. Be the first!