Sign up to access "Build an E-Commerce Platform" right now.

so the first thing that we're going to do is head over to the docs and we're going to grab the Script snippet for this and we're going to pop this in app.blade.php Now this does get called on every single page of your site, but this is what stripe recommends to prevent against fraud So we add this to our script section come over to our site and that is stripe loaded in great

Okay. So the next thing to do is actually set this up for this We're going to use Alpine and we're going to attach this to our entire form with an init method So we can go ahead and set this up when this form loads up We'll also use Alpine to submit this form for us

So we can do things like validate the entire area here before we start to process a payment Okay, so for this we're going to go ahead and initialize Alpine with X data and inside of here We're going to go ahead and create out an init method that goes ahead and initializes Alpine as we've already seen or runs When this is initialized, okay, so in here, we're going to need some properties

So let's create out a stripe property at the top to hold our stripe instance for this we're going to go ahead and just set this to a New stripe instance into this we're going to need our Publishable key which we set earlier over in config and stripe. So for this we can just go ahead and directly put this in with blade

so config and Stripe key and that's pretty much it. We now have a stripe instance ready to start creating our our form elements So let's go ahead and say elements this stripe

Elements and then we're going to go ahead and create our card element Which we're also going to attach up here because we're going to need to reference that later. So we're going to say this Card element, which is what we're going to see on the page and we're going to go ahead and create out a Card element. That's it. Now. We need to go ahead and mount it to the page

So down here where we have our stripe card form, we need to create out a div with maybe an ID of Card element. I think that's what's in the documentation and we're going to mount it into here. Let's just comment out this client secret Before we go ahead Okay, so we're going to go ahead and mount it this card

element and Mount and we're just going to pass in the selector for that card Element and that's it Now if we come over and give this a refresh

We should see our stripe card form and we can fill this in with any data that we need just while we're here Let's hook up the submission of this form So when we do submit this we don't go ahead and call checkout immediately But instead we defer to a submit method directly within here

So let's go ahead and create out a submit method and what we're actually going to do is later on Using live wire call that checkout method from within Alpine. So for now, let's just go ahead and console log Submit and that's just change that around to go ahead and call submit now Of course, we can't use live wire to do this

So we're just going to change this to X on submit prevent and of course that will now call the Alpine method in here Let's go over and just check this out Of course by bringing up our console to keep an eye on this and when I click this, there we go You