Merge pull request #79 from danmatthews/master

Add partial/split render methods to allow usage with restrictive javascript frameworks.

README.md

@@ -62,14 +62,14 @@ INVISIBLE_RECAPTCHA_DEBUG=false
 
 Before you render the captcha, please keep those notices in mind:
 
-* `render()` function needs to be called within a form element.
+* `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 `submit`.
 * There can only be one submit button in your form.
 
 ##### Display reCAPTCHA in Your View
 
 ```php
-{!! app('captcha')->render(); !!}
+{!! app('captcha')->render() !!}
 
 // or you can use this in blade
 @captcha
@@ -78,12 +78,45 @@ Before you render the captcha, please keep those notices in mind:
 With custom language support:
 
 ```php
-{!! app('captcha')->render('en'); !!}
+{!! app('captcha')->render('en') !!}
 
 // or you can use this in blade
 @captcha('en')
 ```
 
+##### Usage with Javascript frameworks like VueJS:
+
+The `render()` process includes three distinct sections that can be rendered separately incase 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:)
+
+```php
+{!! app('captcha')->renderPolyfill() !!}
+// Or with blade directive:
+@captchaPolyfill
+```
+
+You can render the HTML using this following, this needs to be INSIDE your `<form>` tag:
+
+```php
+{!! app('captcha')->renderCaptchaHTML() !!}
+// Or with blade directive:
+@captchaHTML
+```
+
+And you can render the neccessary `<script>` tags including the optional language support by using:
+
+```php
+// The argument is optional.
+{!! app('captcha')->renderFooterJS('en') !!}
+
+// Or with blade directive:
+@captchaScripts
+// blade directive, with language support:
+@captchaScripts('en')
+
+```
+
 ##### Validation
 
 Add `'g-recaptcha-response' => 'required|captcha'` to rules array.

src/InvisibleReCaptcha.php

@@ -90,11 +90,47 @@ public function getPolyfillJs()
      */
     public function render($lang = null)
     {
-        $html = '<script src="' . $this->getPolyfillJs() . '"></script>' . PHP_EOL;
-        $html .= '<div id="_g-recaptcha"></div>' . PHP_EOL;
+        $html = $this->renderPolyfill();
+        $html .= $this->renderCaptchaHTML();
+        $html .= $this->renderFooterJS($lang);
+        return $html;
+    }
+
+    /**
+     * Render the polyfill JS components only.
+     *
+     * @return string
+     */
+    public function renderPolyfill()
+    {
+        return '<script src="' . $this->getPolyfillJs() . '"></script>' . PHP_EOL;
+    }
+
+    /**
+     * Render the captcha HTML.
+     *
+     * @return string
+     */
+    public function renderCaptchaHTML()
+    {
+        $html = '<div id="_g-recaptcha"></div>' . PHP_EOL;
+        if ($this->getOption('hideBadge', false)) {
+            $html .= '<style>.grecaptcha-badge{display:none;!important}</style>' . PHP_EOL;
+        }
+
         $html .= '<div class="g-recaptcha" data-sitekey="' . $this->siteKey .'" ';
         $html .= 'data-size="invisible" data-callback="_submitForm" data-badge="' . $this->getOption('dataBadge', 'bottomright') . '"></div>';
-        $html .= '<script src="' . $this->getCaptchaJs($lang) . '" async defer></script>' . PHP_EOL;
+        return $html;
+    }
+
+    /**
+     * Render the footer JS neccessary for the recaptcha integration.
+     *
+     * @return string
+     */
+    public function renderFooterJS($lang = null)
+    {
+        $html = '<script src="' . $this->getCaptchaJs($lang) . '" async defer></script>' . PHP_EOL;
         $html .= '<script>var _submitForm,_captchaForm,_captchaSubmit,_execute=true;</script>';
         $html .= "<script>window.addEventListener('load', _loadCaptcha);" . PHP_EOL;
         $html .= "function _loadCaptcha(){";
@@ -112,7 +148,6 @@ public function render($lang = null)
             $html .= $this->renderDebug();
         }
         $html .= "}</script>" . PHP_EOL;
-
         return $html;
     }
 

src/InvisibleReCaptchaServiceProvider.php

@@ -75,5 +75,14 @@ public function addBladeDirective(BladeCompiler $blade)
         $blade->directive('captcha', function ($lang) {
             return "<?php echo app('captcha')->render({$lang}); ?>";
         });
+        $blade->directive('captchaPolyfill', function () {
+            return "<?php echo app('captcha')->renderPolyfill({$lang}); ?>";
+        });
+        $blade->directive('captchaHTML', function () {
+            return "<?php echo app('captcha')->renderCaptchaHTML(); ?>";
+        });
+        $blade->directive('captchaScripts', function ($lang) {
+            return "<?php echo app('captcha')->renderFooterJS({$lang}); ?>";
+        });
     }
 }