Recaptcha Example using Laravel, Blade Components, and Alpine

recaptcha.blade.php

<div
    x-data="recaptcha()"
    x-init="init"
    @recaptcha.window="execute"
></div>

@push('scripts')
    <script src="https://www.google.com/recaptcha/api.js?render=explicit"></script>

    <script>
        window.recaptcha = () => {
            return {
                init() {
                    grecaptcha.ready(() => {
                        grecaptcha.render(this.$el, {
                            sitekey: '{{ config('services.recaptcha.key') }}',
                            size: 'invisible',
                            callback: this.onComplete.bind(this)
                        });
                    });
                },

                execute() {
                    grecaptcha.execute();
                },

                onComplete() {
                    this.$el.closest('form').submit();
                }
            };
        };
    </script>
@endpush

usage.blade.php

<form method="POST"
      x-data
      @submit.prevent="$dispatch('recaptcha')"
>
    @csrf
    
    <!-- Your form inputs -->
    
    <x-recaptcha />
    
    <button type="submit">Submit</button>
</form>