Implement the new Invisible reCaptcha from Google
<p>I'm building a PHP website where I would like to put a captcha on the login form. I went with Google's new <a href="https://www.google.com/recaptcha/intro/comingsoon/invisible.html" rel="noreferrer">Invisible reCaptcha</a> but I'm having trouble with implementing it (HTML part, the PHP is working).</p>

<p>The code I've got now for the "normal" reCaptcha is the following (as according to the Google reCaptcha instructions and this works):</p>

<pre><code>&lt;form action=test.php method="POST"&gt;
   &lt;input type="text" name="email" placeholder="Email"&gt;
   &lt;input type="password" name="password" placeholder="Password"&gt;

   &lt;!-- &lt;Google reCaptcha&gt; --&gt;
   &lt;div class="g-recaptcha" data-sitekey="&lt;sitekey&gt;"&gt;&lt;/div&gt;
   &lt;!-- &lt;/Google reCaptcha&gt; --&gt;

   &lt;input type="submit" name="login" class="loginmodal-submit" value="Login"&gt;
&lt;/form&gt;
</code></pre>

<p>There were some instructions sent in the confirmation email when I signed up (took about 24 hours to get the confirmation). That says the following:</p>

<blockquote>
  <p>Invisible reCAPTCHA Integration</p>
  
  <ol>
  <li><p>If you haven’t integrated your site with reCAPTCHA v2, please follow our developer guide for implementation details.</p></li>
  <li><p>Please make sure that your site key that has been whitelisted for Invisible reCAPTCHA.</p></li>
  <li><p>To enable the Invisible reCAPTCHA, rather than put the parameters in a div, you can add them directly to an html button.</p>
  
  <p>3a. data-callback=””. This works just like the checkbox captcha, but is required for invisible.</p>
  
  <p>3b. data-badge: This allows you to reposition the reCAPTCHA badge (i.e. logo and ‘protected by reCAPTCHA’ text) . Valid options as ‘bottomright’ (the default), ‘bottomleft’ or ‘inline’ which will put the badge directly above the button. If you make the badge inline, you can control the CSS of the badge directly.</p></li>
  <li><p>Verifying the user’s response has no changes.</p></li>
  </ol>
</blockquote>

<p>The problem I have is with the HTML implementation (therefore I need help with step 3. 1,2 and 4 is working for me). The rest I have working with normal reCaptcha and according to the instructions, it should be the same thing. I do not understand what the data-callback and data-badge is and how it works. A code example of how to implement invisible reCaptcha with how my form is setup would be great!</p>