In this episode, we're diving into rendering the Turnstile widget using the Blade component provided by the package we installed. We'll walk through setting up a new container in our view to house the widget and try rendering it out on the page.
You'll see how to handle a small hiccup with invalid domain errors by updating the allowed domains in the settings, making sure the widget appears correctly in the browser. Once that's working, we connect the response from the widget to a property in our Livewire component using wire:model
, allowing us to capture the token generated by the widget.
We then set up this new property inside our Livewire component and display its value right on the page, so you can see the token coming through as expected. This helps to confirm that everything is wired up properly.
There's also a subtle but important detail: because Livewire re-renders the whole component on changes, we need to wrap the widget in a wire:ignore
div. This prevents the widget from being reset or re-rendered each time the component updates (like when a user hits 'subscribe'), ensuring continuous access to the token until it's used.
By the end of this episode, you'll have the widget on your page, hooked up to Livewire, reliably passing the Turnstile token, and ready to validate it in the next step!