How to enable invisible ReCAPTCHA on checkbox onclick – Blancer.com Tutorials and projects

I am struggling with an recaptcha issue on my local. I am trying to build a register form. All examples about recaptcha are about buttons. What I want is to pop-up recaptcha modal to user when he/she clicks on checkbox which says ‘ I have read and accept terms and conditions.’ When he/she solves recaptcha then checkbox would be checked. Here what I am trying

<html>
  <head>
     <script src="https://www.google.com/recaptcha/api.js" async defer></script>
     <script>
       function onSubmit(token) {
         document.getElementById("checkbox-form").submit();
       }
     </script>
  </head>
  <body>
    <form id='checkbox-form' action="?" method="POST">
     <input type="checkbox" class="g-recaptcha" data-sitekey="MY_KEY_IS_HERE" data-callback='onSubmit' id="termsConditions" class="termsOkay">
     <label for="termsConditions" generated="true">I have read and accepted <a target="_blank" href="/sales-terms-and-conditions/">Terms and Conditions</a> </label>
      <br/>
    </form>
  </body>
</html>

I know code is a mess because I tried so many different thing and this is what I got. I am really confused. All I want is if user checks the checkbox let captcha popup. When solved, checkbox is checked. How can I do it? I tried to use handleChange but could not make it either.