Blog Detail


How to easily integrate Invisible reCAPTCHA in Laravel cover image

arrow_back How to easily integrate Invisible reCAPTCHA in Laravel

Invisible reCAPTCHA is an improved version of reCAPTCHA v2(no captcha). In reCAPTCHA v2, users need to click the button: “I’m not a robot” to prove they are human. In invisible reCAPTCHA, there will be not an embed captcha box for users to click. It’s totally invisible! Only the badge will show on the bottom of the page to hint to users that your website is using this technology. (The badge could be hidden, but not suggested.)


You can install this package via composer by running this command.

composer require albertcht/invisible-recaptcha


Add ServiceProvider to the providers array in app/config/app.php.



Before you set your config, remember to choose invisible reCAPTCHA while applying for keys. You can see this image


// required

// optional

There are three different captcha styles you can set: bottomright, bottomleft, inline

If you set INVISIBLE_RECAPTCHA_BADGEHIDE to true, you can hide the badge logo. You can see the binding status of those captcha elements on the browser console by setting INVISIBLE_RECAPTCHA_DEBUG as true.


Before you render the captcha, please keep those notices in mind:

  • render() or renderHTML() function needs to be called within a form element.
  • You have to ensure the type attribute of your submit button has to be submitted.
  • There can only be one submit button in your form.

Display reCAPTCHA in Your View

{!! app('captcha')->render() !!}

// or you can use this in blade

With custom language support:

{!! app('captcha')->render('en') !!}

// or you can use this in blade

Usage with Javascript frameworks like VueJS:
The render() process includes three distinct sections that can be rendered separately in case you’re using the package with a framework like VueJS which throws console errors when script tags are included in templates.

You can render the polyfill (do this somewhere like the head of your HTML:)

{!! app('captcha')->renderPolyfill() !!}
// Or with blade directive:

You can render the HTML using the following, this needs to be INSIDE your form tag:

{!! app('captcha')->renderCaptchaHTML() !!}
// Or with blade directive:

And you can render the necessary script tags including the optional language support by using:

// The argument is optional.
{!! app('captcha')->renderFooterJS('en') !!}

// Or with blade directive:
// blade directive, with language support:


Add ‘g-recaptcha-response’ => ‘required|captcha’ to rules array.

$validate = Validator::make(Input::all(), [
    'g-recaptcha-response' => 'required|captcha'

Take Control of Submit Function

Use this function only when you need to take all control after clicking submit button. Recaptcha validation will not be triggered if you return false in this function.

_beforeSubmit = function(e) {
    console.log('submit button clicked.');
    // do other things before captcha validation
    // e represents reference to original form submit event
    // return true if you want to continue triggering captcha validation, otherwise return false
    return false;

Customize Submit Function

If you want to customize your submit function, for example: doing something after clicking the submit button or changing your submit to ajax call, etc.

The only thing you need to do is to implement _submitEvent in javascript

_submitEvent = function() {
    console.log('submit button clicked.');
    // write your logic here
    // submit your form

Here’s an example to use an ajax submit (using jquery selector)

_submitEvent = function() {
        type: "POST",
        url: "{{route('message.send')}}",
         data: {
            "name": $("#name").val(),
            "email": $("#email").val(),
            "content": $("#content").val(),
            // important! don't forget to send `g-recaptcha-response`
            "g-recaptcha-response": $("#g-recaptcha-response").val()
        dataType: "json",
        success: function(data) {
            // success logic
        error: function(data) {
            // error logic

You can check out the invisible-recaptcha package for the documentation and source code on Github.

Published at : 02-12-2021

Author : Rizwan Aslam
Rizwan Aslam

I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.

Launch your project

Launch project