handling multiple instances of reCaptcha

assets/js/src/public.js

@@ -8,6 +8,16 @@ function ( // eslint-disable-line func-names
   jQuery
 ) {
   jQuery(function ($) { // eslint-disable-line func-names
+    window.reCaptchaCallback = function () {
+      $('.mailpoet_recaptcha').each(function() {
+        var sitekey = $(this).attr('data-sitekey');
+        var container = $(this).find('> .mailpoet_recaptcha_container').get(0);
+        var field = $(this).find('> .mailpoet_recaptcha_field');
+        var widget_id = window.grecaptcha.render(container, {sitekey: sitekey, size: 'compact'});
+        field.val(widget_id);
+      });
+    };
+
     function isSameDomain(url) {
       var link = document.createElement('a');
       link.href = url;
@@ -37,8 +47,8 @@ function ( // eslint-disable-line func-names
             return true;
           }
 
-          if (formData['g-recaptcha-response']) {
+          if (window.grecaptcha && formData.recaptcha) {
-            formData.data.recaptcha = formData['g-recaptcha-response'];
+            formData.data.recaptcha = window.grecaptcha.getResponse(formData.recaptcha);
           }
 
           // ajax request
@@ -55,7 +65,14 @@ function ( // eslint-disable-line func-names
                   return error.message;
                 }).join('<br />')
               ).show();
+<<<<<<< HEAD
           }).done(function (response) { // eslint-disable-line func-names
+=======
+            if (window.grecaptcha) {
+              window.grecaptcha.reset(formData.recaptcha);
+            }
+          }).done(function (response) {
+>>>>>>> handling multiple instances of reCaptcha
               // successfully subscribed
             if (
                 response.meta !== undefined
@@ -74,7 +91,7 @@ function ( // eslint-disable-line func-names
             parsley.reset();
             // reset captcha
             if (window.grecaptcha) {
-              window.grecaptcha.reset();
+              window.grecaptcha.reset(formData.recaptcha);
             }
 
               // resize iframe

lib/API/JSON/v1/Subscribers.php

@@ -90,13 +90,13 @@ class Subscribers extends APIEndpoint {
       ));
     }
 
-    if(!empty($recaptcha['enabled']) && $recaptcha['enabled'] && !isset($data['recaptcha'])) {
+    if(!empty($recaptcha['enabled']) && !isset($data['recaptcha'])) {
       return $this->badRequest(array(
         APIError::BAD_REQUEST => __('Please check the captcha.', 'mailpoet')
       ));
     }
 
-    if(!empty($recaptcha['enabled']) && $recaptcha['enabled']) {
+    if(!empty($recaptcha['enabled'])) {
       $res = wp_remote_post('https://www.google.com/recaptcha/api/siteverify', array(
         'body' => array(
           'secret' => $recaptcha['secret_token'],
@@ -109,7 +109,7 @@ class Subscribers extends APIEndpoint {
         ));
       }
       $res = json_decode(wp_remote_retrieve_body($res));
-      if(empty($res) || !$res->success) {
+      if(empty($res->success)) {
         return $this->badRequest(array(
           APIError::BAD_REQUEST => __('Error while validating the captcha.', 'mailpoet')
         ));

lib/Form/Renderer.php

@@ -48,7 +48,10 @@ class Renderer {
     foreach($blocks as $key => $block) {
       if($block['type'] == 'submit' && Setting::getValue('re_captcha.enabled')) {
         $site_key = Setting::getValue('re_captcha.site_token');
-        $html .= '<div class="g-recaptcha" data-size="compact" data-sitekey="'. $site_key .'"></div>';
+        $html .= '<div class="mailpoet_recaptcha" data-sitekey="'. $site_key .'">
+          <div class="mailpoet_recaptcha_container"></div>
+          <input class="mailpoet_recaptcha_field" type="hidden" name="recaptcha">
+        </div>';
       }
       $html .= static::renderBlock($block) . PHP_EOL;
     }

lib/Form/Widget.php

@@ -14,8 +14,6 @@ use MailPoet\WP\Hooks;
 if(!defined('ABSPATH')) exit;
 
 class Widget extends \WP_Widget {
-  const RECAPTCHA_API_SCRIPT = '<script src="https://www.google.com/recaptcha/api.js"></script>';
-
   private $renderer;
 
   function __construct() {
@@ -51,6 +49,7 @@ class Widget extends \WP_Widget {
     wp_print_scripts('jquery');
     wp_print_scripts('mailpoet_vendor');
     wp_print_scripts('mailpoet_public');
+    echo '<script src="https://www.google.com/recaptcha/api.js?onload=reCaptchaCallback&render=explicit" async defer></script>';
     $scripts = ob_get_contents();
     ob_end_clean();
 
@@ -111,6 +110,14 @@ class Widget extends \WP_Widget {
       true
     );
 
+    if(!empty(Setting::getValue('re_captcha')) && Setting::getValue('re_captcha.enabled')) {
+      wp_enqueue_script(
+        'mailpoet_recaptcha',
+        'https://www.google.com/recaptcha/api.js?onload=reCaptchaCallback&render=explicit',
+        array('mailpoet_public')
+      );
+    }
+
     wp_localize_script('mailpoet_public', 'MailPoetForm', array(
       'ajax_url' => admin_url('admin-ajax.php'),
       'is_rtl' => (function_exists('is_rtl') ? (bool)is_rtl() : false)
@@ -274,12 +281,6 @@ EOL;
 
     if(!empty($body)) {
       $form_id = $this->id_base . '_' . $form['id'];
-      if(Setting::getValue('re_captcha.enabled')) {
-        if(empty($before_widget)) {
-          $before_widget = '';
-        }
-        $before_widget .= self::RECAPTCHA_API_SCRIPT;
-      }
       $data = array(
         'form_id' => $form_id,
         'form_type' => $form_type,