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

So you're going to want to make sure you have opened your payments page over in Stripe under test mode. And we'll see these roll in as we go ahead and create them. OK, so what we want to do is over in our checkout template,

just at the console log that we've got here, actually go ahead and confirm a card payment. So to do this, we're going to go ahead and await on the Stripe instance that we set up earlier with our init method.

And we're going to go ahead and say confirm card payment. Now into this, the first argument is going to be our payment intent client secret, which we already know we have down here under our card element. And that is here.

So let's go ahead and grab that. Go back up to the top. And let's put that as our first argument. And I'm just putting that down.

So it's a little bit clearer. Now the second argument is going to be an object with anything that you need to pass through in here. You can check out the Stripe docs to find out the kind of information

you can pass through in here. But we're going to pass through a payment method object. And we know that we are charging a card. So we're going to pass in the card element that we also created earlier

and set up here because we need to reference that again. Now the next thing and really important are the billing details. Now you're going to want to fill in as much of this information as you can. For now, though, I'm just going to go ahead and pass in the email address.

Now we don't quite have this at the moment. So I'm going to go ahead and fake this by just passing in my email address. So I can see that over on the Stripe payment dashboard. But we'll go ahead and change this in a later episode.

So this actually sends through the user's email address, whether they're a guest or whether they're already signed in. OK. So back from this, we're going to get an object of lots of different things.

But we want to specifically extract out or destructure out the payment intent itself. That's going to give us back the payment intent with a new successful status if this charge has been successful or if not, an error. So just underneath here, let's go ahead and console log both of these out.

So payment intent and error, just to see what's in both. OK. Let's go ahead and process a payment. Just to quickly recap, remember we're validating.

And only if we don't have any errors in our form are we going ahead and trying this charge. So let's go over and just test this out. So I'm going to give the page a refresh. We'll hit Confirm Order and Pay.

Of course, at this point, no payment gets sent through. Let's go ahead and just fill in some details in here. And let's go ahead and add a fake address. And let's fill in our card number.

Now, for this, you can use 4242 all the way along just to add in some fake data. There are lots of different cards that you can try for failures, which we're going to be looking at later. And also 3D Secure, which we'll be looking at later as well.

OK. So now that I've updated all of these validation errors and I've given a correct card, let's hit Confirm Order and Pay. And let's wait for this to go through.

OK. So once that's done, if we just head up here, we look like we've got an error here. So let's have a look. OK.

Yeah. So we've not passed this in correctly because, of course, what we're going to need to do is put this in single quotes. It's trying to look for a variable name with that client secret.

So let's try this out again. We'll keep the console open now. And let's go ahead and pass in an email address and a fake address. And again, we'll just use 42, which is just a successful card all the way along.

Hit Confirm Order and Pay. And we should now see the payment intent just here, which is this first object, and then undefined for the error because, of course, we don't have any errors. So if we take a look at this here, we've got the correct amount.

So this is exactly what we saw dumped out earlier on our server. And if we scroll all the way down here, we've got a status of succeeded. Now, if we head over to our payment dashboard here and we just give this a refresh, we should see, once this loads, a successful charge of $180.

And, of course, the customer email has been filled. That's what we manually put in here earlier. And, of course, you can add a first name, last name, and any other billing details you need in here.

OK. So we've successfully processed our payment, but we do need to handle errors. Let's just set up for this now. So if errors, then we're going to want to go ahead and show an error on the page.

Otherwise, we're going to want to go ahead and grab the payment intent ID. So grab payment intent ID, which we technically already have, set it to a property within Livewire, and then call the checkout method, I think we called it, to actually go ahead and process the order.

Because at the moment, we're processing a payment, but we're not actually processing the order. So, of course, the user is just going to be stuck over on the checkout. Now, notice, if we try and click this again, this is the whole point of a payment intent,

you can see here that, first of all, we're getting an error. That is probably just because this has not been updated. But if we did try to do this again, so if we just give the page an entire refresh, remember, we've already processed that payment.

We've still got the same payment intent over in our cart. But if we go ahead and try this charge again, it's not going to allow us to do it. So we've already been charged. But you can see here, if we just scroll all the way up.

Oh, yeah. So we've got errors is not defined. So that is error. Let's just double check that.

Yeah. So let's go over. And let's once again, and hopefully, finally, see that we can't be charged more than once for this particular cart session, which we've already technically and potentially created

an order for. So let's do this again and hit confirm. And there we go. So we get a 400 back.

If we look at the response from this and dive into it, you can see that we've got a payment intent unexpected state. You cannot confirm this payment intent because it has already been succeeded after being previously confirmed.

So Stripe is not letting us charge again, because at this point, it's pretty much assumed that the order has been created, or at least we've taken the payment. That's the most important thing. We don't want to charge the customer twice.

OK, so we've pretty much scaffolded this up. Obviously, the next thing we want to do is call checkout and make sure that this goes through. Let's do that in the next episode.