This is the turnstile widget. So we can go ahead and self-close this off. And without doing much else, let's just head over to the browser and see what happens. OK, so we do actually have an invalid domain here.

So let's go ahead and change this over in our settings. And we call this turnstile live wire dot test. OK, let's add that custom domain. Let's update this and we should see this rendered out now.

OK, great. So that's working. Now, the next job is to hook up the response that we get back from this widget to a property in our live wire component. Let's go ahead and do that now. So we can actually do this with wire model.

So let's go ahead and hook up wire model and let's call this turnstile response. Go ahead and create a property for this. That means that we can validate that within our component as well. OK, so we'll go ahead and open up our newsletter index and let's create a new property up here.

And again, we'll call that turnstile response. And let's just go ahead and dump this out within the newsletter index blade component just so we can see that this is working. So let's go ahead and output the turnstile response that we get back. And when we head over and give this a refresh, once that has validated and we get a success, we should see this massive token, which we will then use to send through to the cloud for that API to validate.

Now, one thing about the rendering of this component, the nature of live wire means that when we go ahead and say enter an email address in here or don't enter an email address and hit subscribe, the entire thing here will get re-rendered. What this means is that this will potentially change with the re-render of our component here. What we want is really this just to be run once.

So what we can do here and something that is necessary is to go ahead and use wire ignore. So I'm going to wrap this in just a single div to ignore the turnstile component. We can't apply the ignore directly to this component. But what we're saying now is just ignore this so it doesn't get re-rendered.

That's not going to have any effect on when we refresh. It's still going to work. We will still get the token back. But it means now that when we hit subscribe, this section here doesn't get re-rendered and we'll still have the same token.

Okay. So we've rendered out our widget. Now, how do we go ahead and validate this token? Let's take a look next.