vf-recaptcha.js

<apex:page showHeader="false">

    <div id="widget1" class="g-recaptcha"></div>

    <style>
        body, div {
            background: transparent !important;
        }
        #widget1 {
            transform: scale(0.74);
            transform-origin: 0 0;
            -webkit-transform:scale(0.74);
            -webkit-transform-origin: 0 0
        }
    </style>

    <script type="text/javascript">
        var sitekey = null;
        var hostUrl = null;

        var onloadCallback = function () {
            grecaptcha.render('widget1', {
                'sitekey': sitekey,
                'callback': grecaptchaRenderCallback
            });
        };

        function grecaptchaRenderCallback(res) {
            parent.postMessage({
                action: "checkCAPTCHAState",
                isValid: res ? true : false
            }, '*');
        }

        window.addEventListener("message", function(event) {

            if (event.data.type === 'CAPTCHA-SITEKEY') {
                sitekey = event.data.key;
                hostURL = event.data.hostURL;
                /*
                 * Adding the captcha script to the header if it's not there already. We're doing this manually so that
                 * we can control when the script loads (ie. not until the sitekey is available).
                 */
                var gCaptchaScript = document.getElementById('g-captcha-script')

                if (!gCaptchaScript) {
                    var script = document.createElement('script');
                    head = document.head || document.getElementsByTagName('head')[0];
                    script.src = `https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit`
                    script.id = 'g-captcha-script'
                    document.head.insertBefore(script, head.firstChild);
                }
            }

            /*
             *  If a message was received not from the expected origin, let's bail.
             */
            if (event.origin !== hostURL){
                return;
            }

            /*
             *  Let's check for a recaptcha token and send back the result to our component.
             */
            if (event.data.action == "alohaCallingCAPTCHA"){
                var token = document.getElementById("g-recaptcha-response").value;

                if (token == ""){
                    parent.postMessage({
                        action: "alohaCallingCAPTCHA",
                        alohaResponseCAPTCHA : "NOK"
                    }, hostURL);
                }  else {
                    parent.postMessage({
                        action: "alohaCallingCAPTCHA",
                        alohaResponseCAPTCHA : "OK",
                        response: token
                    },  hostURL);
                }
            }
        }, false);

    </script>
</apex:page>