How to inject Google recaptcha v2 into webpage?

I'm trying to inject code into a webpage so that it'll have google invisible recaptcha v2 on the page.

My current code is

const trueHTML = `
            <head>
                <meta charset="UTF-8">
                <title>Captcha Bank</title>
                <script src="https://www.google.com/recaptcha/api.js" async defer></script>
            </head>
            <body>
            
            <script>
                console.log(location.href);
            </script>

            <form action="http://` + siteName + `/submit" method="post" id="captcha">
                <button class="g-recaptcha" data-captcha-type="recaptcha" data-version="v2_invisible" data-sitekey="sitekey" data-callback="submit">captcha</button>
            </form>

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
            <script>
                function submit() {
                    $.ajax({
                        type: "POST",
                        url: "http://` + siteName + `/submit",
                        data: {"g-recaptcha-response": $('#g-recaptcha-response').val()}
                    });
                    grecaptcha.reset();
                }
            </script>
            </body>
            `
document.write(trueHTML);

I've created a server with Go that executes the HTML using a template, and it works perfectly the way I want it to, however when injecting it into a webpage I find that submitting the form redirects the browser and does not return a g-recaptcha-response (it is empty).

I've also tried changing the form so that it uses checkbox recaptcha v2, but injecting it does not load a captcha box, even though executing it on my server works fine.

<form action="http://` + siteName + `/submit" method="POST">
    <div class="g-recaptcha" data-sitekey="sitekey"></div>
    <br/>
    <input type="submit" value="Submit">
</form>

Any help would be appreciated, thank you