Несколько невидимых google recaptcha на одной странице

Я несколько часов потратил на эту задачу, надеюсь эта заметка поможет вам сделать её за считанные минуты.

Ранее я уже делал что-то подобное для галки "Я не робот" и это работало. Но когда встала задача эту галку заменить на невидимую капчу всё сломалось :'-(

Подготовим формы

Кнопки сабмита форм

<button type="submit"/>

Меняем на просто кнопки с классом g-recaptcha

<button class="g-recaptcha" type="buttom"/>

Подключаем капчу правильно

<script>
/* функция будет вызываться, когда скрипт гугл рекпатчи загрузился */
    function loadCaptcha() {
        /* 
        у меня все формы, в которых нужна капча имеют класс .webforms 
        перебираем и рендерим капчу для кажой
        */
        var forms = document.querySelectorAll('.webforms');
        forms.forEach(function(form) {
            grecaptcha.render(
                form.querySelector('.g-recaptcha'), // наши кнопки отправки
                {
                    "sitekey": "ТУТ ДОЛЖЕН БЫТЬ САЙТКЕЙ ИЗ НАСТРОЕК",
                    "callback": function() { form.submit() } // в случае успешного прохождения капчи отправляем форму
                }
            )
        })
    }
</script>
<!-- Важно! Скрипт подключается с параметрами onload=наша-функция и render=explicit
<script src='https://www.google.com/recaptcha/api.js?onload=loadCaptcha&render=explicit' async defer></script>

Подключение галки "я не робот"

Здесь всё совершенно аналогично, за исключением двух моментов: 1. Вместо манипуляций с кнопкой, просто добавить пустой <div class="g-recaptcha"></div> в форму. На то место, где должна быть галка. 2. Не передавать callback