Any idea how to implement invisible reCAPTCHA ?

[Youhan]

Thanks for the work done here. Awesome!

I just don't know how to implement the invisible reCAPTCHA. Any idea?

[greggilbert]

I think it should just work depending on which API key you give it. Is that not the case?

[maiolica]

Can confirm, invisible reCAPTCHA keys produce a v2 visibile reCAPTCHA.

[kilrizzy]

Here's a dirty solution that worked for me, it seems like the submission/validation end works as normal, just had to customize my frontend instead of using the render method:

<form id="hiddenCaptchaForm" method="POST">
... inputs ...
<div class="form-group">

    <button class="btn btn-primary g-recaptcha"
            data-sitekey="{{ config('recaptcha.public_key') }}"
            data-callback="submitHiddenCaptchaForm">
        Submit
    </button>

    @if ($errors->has('g-recaptcha-response'))
        <div class="help-block alert alert-danger">
            <ul class="error-list">
                @foreach ($errors->get('g-recaptcha-response') as $message)
                    <li><strong class="text-danger">{!! $message !!}</strong></li>
                @endforeach
            </ul>
        </div>
    @endif

</div>

<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script>
    function submitHiddenCaptchaForm(token) {
        document.getElementById("hiddenCaptchaForm").submit();
    }
</script>

[greggilbert]

So I've been digging into this, and due to the way this needs to be implemented with the callbacks and everything - and also needs to interface with any code you write - it's gonna be difficult to pull off. @kilrizzy's solution above uses the <button> implementation, but that may not be appropriate for other people's uses.

Happy to hear implementation suggestions from you folks.

[sunscreem]

@kilrizzy Thanks you for posting your code sample - its working a treat for me.

Just a FYI for anyone quickly using the same code, if you rely on html validation, it looks like that will be skipped using this implementation.

[Youhan]

I ended up to a solution similar to @kilrizzy but the captcha code can be generated like this,

$captcha = NoCaptcha::display( array(
      'id'            => 'recaptcha',
      'data-callback' => 'onCaptchaSubmit',
      'data-size'     => 'invisible'
), 'en' );

Since I was trying to submit the form using Ajax the JS code got more complicated.

[albertcht]

You can refer to this package: https://github.com/albertcht/invisible-recaptcha It can help you integrate invisible recaptcha to your projects more efficiently!