Search code examples
javascriptapirecaptchacaptcha

hCaptcha JavaScript API render: invalid container 'null'

I'm getting this error <[hCaptcha] render: invalid container 'null'.> on opera developer console. I replaced my site key and it returned invalid container null.

Here is my source code.

<html>
    <head>
        <script src="https://hcaptcha.com/1/api.js?onload=yourFunction&render=explicit" async defer></script>
      <script type="text/javascript">
        var yourFunction = function () {
          console.log('hCaptcha is ready.');
          var widgetID = hcaptcha.render('captcha-1', { sitekey: 'MY_SITE_KEY' });
        };
      </script>
    </head>
    <body>
        <div class="h-captcha" data-sitekey="MY_SITE_KEY" data-theme="dark"></div>
    </body>
</html>
Solution

  • When render is called implicitly, the default containerId is h-captcha, as defined in the class of the target div.

    When you call hcaptcha.render() explicitly, the first parameter is the containerId.

    Due to this behavior, your problem can be resolved by either changing your first parameter of your render() call to h-captcha rather than captcha-1, or changing the class value to captcha-1.