How to use Google Recaptcha before doing an AJAX Post

Question

I have a form which submits data to a Kulahub API, using AJAX, but I need to verify first that the user filling in the form is genuine, then upon getting the OK from Google, do the AJAX post, however, I can't find a simple solution.

The Post works fine, and submits the data to the API.

Its the recaptcha, i have tried the following threads solutions; Invisible ReCaptcha with jQuery ajax Invisible reCaptcha AJAX Call Google Invisible Recaptcha Using Jquery Ajax and PHP Ajax Form With Google Invisible Recaptcha

I am building the site in Umbraco, now i was under the impression i can verify the google recaptcha result, using ajax or javascript?

Here is the post which works;

$.ajax({
            type: "POST",
            url: "https://www.kulahub.net/Api/FormAdd",
            data: $('#kulaHubForm').serialize(),
            datatype: "html",
            success: function (data) {
                console.log("Success Posted");
                localStorage.setItem("isSubbed", "1");
            },
            error: function (jqXHR, textStatus, errorThrown) { 
                console.log("bad");
            }
        });

And here is the form

<form id="kulaHubForm" data-toggle="validator" novalidate="true"  class="newsletter-signup">
    <fieldset>
    <legend>Subscribe to our Newsletter »</legend>

    <div class="row">
        <div class="col-md-4" style="">
            <div class="form-group" style="position: static;">
                <label for="fname">First Name</label>
                <input type="text" id="fname" class="form-control" name="first_name" placeholder="First Name" required>
                <div class="help-block with-errors"></div>
            </div>
        </div>
        <div class="col-md-4" style="">
            <div class="form-group" style="position: static;">
                <label for="lname">Last Name</label>
                <input type="text" id="lname" class="form-control" name="last_name" placeholder="Last Name" required>
                <div class="help-block with-errors"></div>
            </div>
        </div>
        <div class="col-md-4" style="">
            <div class="form-group" style="position: static;">
                <label for="eadd">Email Address</label>
                <input type="email" id="eadd" class="form-control" value="@email" name="email" placeholder="Email" required>
                <div class="help-block with-errors"></div>
            </div>
        </div>
        <div class="col-md-4" style="">  
            <div class="form-group" style="position: static;">
                <label for="cname">Company Name</label>
                <input type="text" id="cname" class="form-control" name="custom_company" placeholder="Company Name" >
                <div class="help-block with-errors"></div>
            </div>
        </div>

        @*Honeypot*@
            <input type="checkbox" id="conCheckBox" name="conCheckBox" value="value1" style="display:none !important" tabindex="-1" autocomplete="off">
            <input type="text" name="flowers" id="flowers" style="" tabindex="-1" autocomplete="off"/>
            <input type="text" name="daisys" id="daisys" value="Subscription Form SAN" style="display:none !important;color:black !important;" tabindex="-1" autocomplete="off"> 
        @*End Honey, Pot?*@

        <div class="col-md-4" style="">  
            <div class="form-group" style="position: static;">
                <label for="jtitle">Job Title</label>
                <input type="text" id="jtitle" class="form-control" name="custom_position" placeholder="Job Title" >
                <div class="help-block with-errors"></div>
            </div>
        </div>
        <div class="col-md-4" style="">  
            <div class="form-group" style="position: static;">
                <label for="telno">Telephone Number</label>
                <input type="text" id="telno" class="form-control" name="custom_telno" placeholder="Telephone Number" required>
                <div class="help-block with-errors"></div>
            </div>
        </div>
        <div class="col-md-12">
            <input type="hidden" name="ClientId" value="XXX">
            <input type="hidden" name="FormTypeId" value="XXXX">
            <input type="hidden" name="redirect" value="">
            <button class="g-recaptcha" data-sitekey="my site key" data-callback='onSubmit'>Submit</button>

        </div>
    </div>
    </fieldset>
</form>

And the full call here

<script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <script>
    function onSubmit(token) {
        $.ajax({
            type: "POST",
            url: "https://www.kulahub.net/Api/FormAdd",
            data: $('#kulaHubForm').serialize(),
            datatype: "html",
            success: function (data) {
                console.log("Success Posted");
                localStorage.setItem("isSubbed", "1");
            },
            error: function (jqXHR, textStatus, errorThrown) { 
                console.log("bad");
            }
        });
        grecaptcha.reset();// to reset their widget for any other tries
    }
    </script>

But I just can't deduce what Google actually wants you to do, I think their documentation is lacking, especially for beginners.

I don't really care which version of Recaptcha I use, I wanted to use the newest but ultimately that looked even less documented than 2 online, so I went with 2 invisible here, but am open to whatever will work.

Is this possible? Thank you