Why doesn't CF7+Fancybox+reCAPTCHA work?

Question

fancyBox

Good afternoon.
The essence of the problem: the captcha does not work in the modal window (fancybox)
I tried such a script in the header, in functions regarding the fantasybox form, etc.

var onloadCallback = function() {
        grecaptcha.render('html_element', {
          'sitekey' : 'your_site_key'
        });
      };

I tried to put this code to fensibox

ajax: {
         complete: function(jqXHR, textStatus) {
            grecaptcha.render('recaptcha', {
                sitekey: [RECAPTCHA_SITE_KEY],
                callback: function(response) {
                    console.log(response);
                }           
            });
        }
      }

And a few more options with placing scripts in the header, the body of the form - as a result, just an empty div for the captcha.
Has anyone encountered a similar problem?

Answer 1

The problem is solved by the following:
1) We connect the script to the form itself through the CF7 interface

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
        async defer>
var onloadCallback = function() {
            grecaptcha.render('recaptcha', {
            'sitekey' : 'key'
            });
        };</script>

2) Put the captcha in the right place
3) Add the following to the fancybox call script:

onComplete: function(){
                //настройки формы cf7, если необходимо
                var widgetId = grecaptcha.render('conatiner_id');
    grecaptcha.reset(widgetId);
            },

UPD.
In this case, after closing the captcha in fensibox, the captcha came out with the error "reCAPTCHA has already been rendered in this element" Applicable to fensibox
, it is solved as follows: like this (we pull the captcha from here):

$.fancybox({
   $.getScript("https://www.google.com/recaptcha/api.js");
   onComplete: function(){
     $(".captcha_wrapper").append("<div class='g-recaptcha' id='recaptcha' data-sitekey='your_key'></div>");
        var widgetId = grecaptcha.render('recaptcha');
      },
    onCleanup: function(){
      $('#recaptcha').remove();
      }
});

grecaptcha.reset didn't work for me, so I used .remove();