Im trying to implements the reCaptchaV3 in my project with livewire, but every time that I enter data in some field, the captcha don’t works. I made a console.log in the js and if I click the button (whithout fill the form) the console.log is display, but when I fill some field the log is not showing.
Laravel version 7.30.4
LiveWire version 2.4.0
Alpine version 2.8.2
Livewire/information.blade.php
<form wire:submit.prevent="store">
<div class="form-group required">
<label for="name-card" class="control-label">Name:</label>
<input type="text" id="name" class="form-control" wire:model.lazy="name"></input>
@error('name') <span class="text-danger">{{ $message }}</span> @enderror
</div>
<div class="form-group required">
<label for="address" class="control-label">Address:</label>
<input type="text" id="address" class="form-control" wire:model.lazy="address"></input>
@error('address') <span class="text-danger">{{ $message }}</span> @enderror
</div>
<div class="form-group required">
<label for="city" class="control-label">City:</label>
<input type="text" id="city" class="form-control" wire:model.lazy="city"></input>
@error('city') <span class="text-danger">{{ $message }}</span> @enderror
</div>
<div class="form-group required">
<label for="state" class="control-label">State:</label>
<select id="state" class="form-control" wire:model.lazy="state">
@foreach( $states as $state)
<option value="{{ $state['abbreviation'] }}">{{ $state['name'] }}</option>
@endforeach
</select>
@error('state') <span class="text-danger">{{ $message }}</span> @enderror
</div>
<div class="form-group required">
<label for="zip" class="control-label">Zip Code:</label>
<input type="text" id="zip" class="form-control" onkeypress='return isNumeric(event)' maxlength="5" wire:model.lazy="zip"></input>
@error('zip') <span class="text-danger">{{ $message }}</span> @enderror
</div>
</div>
<div class="text-center">
<button type="submit" data-sitekey="{{env('CAPTCHA_SITEKEY')}}" data-callback='handle' data-action='submit' class="g-recaptcha" >Submit</button>
<a class="btn btn-md btn-secondary" href="/">Home</a>
</div>
</form>
Script
@push('scripts')
<script src="https://www.google.com/recaptcha/api.js?render={{env('CAPTCHA_SITEKEY')}}"></script>
<script>
function handle(e) {
console.log('execute')
grecaptcha.ready(function () {
grecaptcha.execute('{{env('CAPTCHA_SITEKEY')}}', {action: 'submit'})
.then(function (token) {
@this.set('captcha', token);
});
})
}
function isNumeric(event){
return event.charCode >= 48 && event.charCode <= 57;
}
</script>
@endpush
Information.php
public $captcha = 0; ...
public function updatedCaptcha($token)
{
$response = Http::post('https://www.google.com/recaptcha/api/siteverify?secret=' . env('CAPTCHA_SECRET') . '&response=' . $token);
$this->captcha = $response->json()['score'];
if (!$this->captcha > .3) {
$this->store();
} else {
return session()->flash('success', 'Google thinks you are a bot, please refresh and try again');
}
}
public function store()
{
dd('STORE');
}