Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Recaptcha Example using Laravel, Blade Components, and Alpine
<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
<form method="POST"
x-data
@submit.prevent="$dispatch('recaptcha')"
>
@csrf
<!-- Your form inputs -->
<x-recaptcha />
<button type="submit">Submit</button>
</form>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.