Merge pull request #114 from nstapelbroek/feature/invisible-recaptcha-challenge-button

Feature/invisible recaptcha challenge button

README.md

@@ -84,6 +84,14 @@ With [custom attributes](https://developers.google.com/recaptcha/docs/display#re
 {!! NoCaptcha::display(['data-theme' => 'dark']) !!}
 ```
 
+Invisible reCAPTCHA using a [submit button](https://developers.google.com/recaptcha/docs/invisible):
+
+```php
+{!! NoCaptcha::displaySubmit('my-form-id', 'submit now!', ['data-theme' => 'dark']) !!}
+```
+Notice that the id of the form is required in this method to let the autogenerated 
+callback submit the form on a successful captcha verification.
+
 #### Validation
 
 Add `'g-recaptcha-response' => 'required|captcha'` to rules array :

src/NoCaptcha.php

@@ -53,14 +53,47 @@ class NoCaptcha
     /**
      * Render HTML captcha.
      *
-     * @param array  $attributes
+     * @param array $attributes
      *
      * @return string
      */
     public function display($attributes = [])
     {
-        $attributes['data-sitekey'] = $this->sitekey;
-        return '<div class="g-recaptcha"'.$this->buildAttributes($attributes).'></div>';
+        $attributes = $this->prepareAttributes($attributes);
+        return '<div' . $this->buildAttributes($attributes) . '></div>';
+    }
+
+    /**
+     * @see display()
+     */
+    public function displayWidget($attributes = [])
+    {
+        return $this->display($attributes);
+    }
+
+    /**
+     * Display a Invisible reCAPTCHA by embedding a callback into a form submit button.
+     *
+     * @param string $formIdentifier the html ID of the form that should be submitted.
+     * @param string $text the text inside the form button
+     * @param array $attributes array of additional html elements
+     *
+     * @return string
+     */
+    public function displaySubmit($formIdentifier, $text = 'submit', $attributes = [])
+    {
+        $functionName = 'onSubmit' . str_replace(['-', '=', '\'', '"', '<', '>', '`'], '', $formIdentifier);
+        $attributes['data-callback'] = $functionName;
+        $attributes = $this->prepareAttributes($attributes);
+
+        $button = sprintf('<button%s><span>%s</span></button>', $this->buildAttributes($attributes), $text);
+        $javascript = sprintf(
+            '<script>function %s(){document.getElementById("%s").submit();}</script>',
+            $functionName,
+            $formIdentifier
+        );
+
+        return $button . $javascript;
     }
 
     /**
@@ -171,6 +204,24 @@ class NoCaptcha
         return json_decode($response->getBody(), true);
     }
 
+    /**
+     * Prepare HTML attributes and assure that the correct classes and attributes for captcha are inserted.
+     *
+     * @param array $attributes
+     *
+     * @return array
+     */
+    protected function prepareAttributes(array $attributes)
+    {
+        $attributes['data-sitekey'] = $this->sitekey;
+        if (!isset($attributes['class'])) {
+            $attributes['class'] = '';
+        }
+        $attributes['class'] = trim('g-recaptcha ' . $attributes['class']);
+
+        return $attributes;
+    }
+
     /**
      * Build HTML attributes.
      *

tests/NoCaptchaTest.php

@@ -4,6 +4,9 @@ use Anhskohbo\NoCaptcha\NoCaptcha;
 
 class NoCaptchaTest extends PHPUnit_Framework_TestCase
 {
+    /**
+     * @var NoCaptcha
+     */
     private $captcha;
 
     public function setUp()
@@ -29,10 +32,23 @@ class NoCaptchaTest extends PHPUnit_Framework_TestCase
     {
         $this->assertTrue($this->captcha instanceof NoCaptcha);
 
-        $simple = '<div class="g-recaptcha" data-sitekey="{site-key}"></div>';
-        $withAttrs = '<div class="g-recaptcha" data-theme="light" data-sitekey="{site-key}"></div>';
+        $simple = '<div data-sitekey="{site-key}" class="g-recaptcha"></div>';
+        $withAttrs = '<div data-theme="light" data-sitekey="{site-key}" class="g-recaptcha"></div>';
 
         $this->assertEquals($this->captcha->display(), $simple);
         $this->assertEquals($this->captcha->display(['data-theme' => 'light']), $withAttrs);
     }
+
+    public function testdisplaySubmit()
+    {
+        $this->assertTrue($this->captcha instanceof NoCaptcha);
+
+        $javascript = '<script>function onSubmittest(){document.getElementById("test").submit();}</script>';
+        $simple = '<button data-callback="onSubmittest" data-sitekey="{site-key}" class="g-recaptcha"><span>submit</span></button>';
+        $withAttrs = '<button data-theme="light" class="g-recaptcha 123" data-callback="onSubmittest" data-sitekey="{site-key}"><span>submit123</span></button>';
+
+        $this->assertEquals($this->captcha->displaySubmit('test'), $simple . $javascript);
+        $withAttrsResult = $this->captcha->displaySubmit('test','submit123',['data-theme' => 'light', 'class' => '123']);
+        $this->assertEquals($withAttrsResult, $withAttrs . $javascript);
+    }
 }