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

which we're going to be doing in the next episode. This is really important because we don't want to try and process a payment until we know that this form is completely filled in, whatever data you're accepting and validating. So the first thing that we're going to do over in checkout is go ahead and call the

validate method within the LiveWire component from this Alpine submit method. How are we going to do that? Well, the first thing that we're going to do is convert this to an async function. We're going to come over to checkout, and we're going to create a kind of proxy to validate

our form. So we're going to call this maybe call validate, and it's just saying here this and validate. Now we know that we are doing this just up here when we submit the payment through. I think we called this checkout.

So we're doing this here, which is fine. We can keep it in there as well, but we also want that proxy to do this before we go and actually process a payment. So let's go ahead and call this call validate method directly from in here.

How do we do that? Well, we're going to go ahead and say await. We're going to use a special LiveWire property to go ahead and access any of the methods or properties that we have on our LiveWire component.

So we're just going to call call validate, and that's enough to go ahead and trigger that validation. Down here, we're going to go ahead and say console log submit payment or process payment. Now this is going to be called at this point even if validation fails.

We're going to see how we can cover that in a minute. Okay, let's go ahead and just get rid of our console for a second. Let's go ahead and hit confirm order and pay, and you can see here that the validation has happened exactly as we would expect, and we've got submit payment.

So we're triggering this validation, but we're also then going ahead and potentially submitting the payment information through the Stripe card form, which at the moment has disappeared. We'll cover that in just a second. Okay, so how are we going to work out if we actually have any errors and whether we want

to go ahead and submit the payment? Well, to do this, again, we're going to kind of proxy this. So let's go in here and create out a get error count method, and let's go ahead and return. We need to grab the validation error bag from Livewire.

If we just go over to our base component within Livewire, we've got this validates input trait. Inside of here, we've got this get error bag method, which returns to us the error bag, which could potentially be filled with any errors. So we're going to return this get error bag.

On its own, that's not going to work, but we're going to use the count property. So this is going to return to us how many errors there are. Now, if there are zero errors, we can go ahead and continue to process the payment. So once again, down here, what we're going to do is maybe just assign this.

So error count, I'm going to await on get error count, console log the error count, and we should see how many errors we get. Okay, let's go over and let's go up to the top here, hit confirm order and pay. This will be a little bit slow, but you can see that we've got four errors, 1, 2, 3, 4.

Now, if we go ahead and fill all this information in, so let's just enter some details in here, A, B, C, hit confirm, we get zero. Well, in our case, we get one because this is already an account in use. So let's try that again.

And there we go, we get zero. So we know now that we can compare this error count with zero and then only submit the payment if this is the case. So what I'm going to do is just go ahead and create an if statement out in here and just

do an early return. So if error count is greater than or equal to one, then just return and do nothing. We can improve on this later. Okay, let's go over and just give this a refresh, hit confirm order and pay.

And you can see the validation errors come in, but we don't submit the payment. Let's go ahead and fill in all of this information once again, A, B, and C, hit that. And there we go, we get the submit payment. So although this is a little bit of a roundabout way to do things, it means that we don't go

ahead and submit the payment until we know that we've got all of the information filled in our validation rules. Because we're now bringing in Alpine here to actually set Stripe up and process a payment, we need to talk between the Alpine and Livewire components.

Okay, so the payment form, as you can see at the moment, has disappeared. Now the reason for that is when Livewire is re-rendering this, this is disappearing because it was previously set up with Alpine. Now for this, what we can pretty much do is just go over to our card element, let's find

that on the page, and just do a wire ignore on this. So Livewire doesn't replace this out when it does a patch of the DOM. So what we can do now is just check and make sure that this stays in here. If we hit confirm order and pay, we get all of our error messages, but all of this stays

in here because Livewire is ignoring it. And once again, we can go ahead and fill all of this information in. And once we've done that, and that is successful, we still have our payment form, and we can go on and submit the payment, which is exactly what we're doing in the next episode.