Skip to content

Instantly share code, notes, and snippets.

@JeffreyWay
Last active June 28, 2024 11:00
Show Gist options
  • Save JeffreyWay/b0dcc5975a3ca9a51493f282ed0966c2 to your computer and use it in GitHub Desktop.
Save JeffreyWay/b0dcc5975a3ca9a51493f282ed0966c2 to your computer and use it in GitHub Desktop.
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