Reactive web- how to define functions prior to calling external javascript

I've been working through an implementation of Hcaptcha in an Outsystems Reactive web application.   I have the standard implementation working as expected, but now I'm trying to get invisible mode working with explicit rendering.   As per below, I'm running into an issue because the only way I have found to call the <script src> is by adding that to the page header, but in order to use the onload feature I have to define my javascript function before the script loads.   

No matter what I've tried the hcaptcha remote script loads first and then I see onloadFunction not defined in the console, any suggestions on how to work around this?



https://docs.hcaptcha.com/configuration#render

<script src="https://hcaptcha.com/1/api.js?onload=onloadFunction&render=explicit" async defer></script>

Your custom callback function must be defined before the hCaptcha script loads. You can then call hcaptcha.render with the container ID and your site key to explicitly render the widget.

<script type="text/javascript">
   var onloadFunction= function() {
      console.log("hCaptcha is ready.");
      var widgetID = hcaptcha.render('captcha-1', { 'sitekey':'your_site_key' });
   };
</script>

Hi Josh,

Why don't you use on render event to define function

I have attached the sample oml as well for reference, you can follow the similar approach.

Hope this helps.

Regards,

Manish Jawla

Manish Jawla wrote:

Hi Josh,

Why don't you use on render event to define function

I have attached the sample oml as well for reference, you can follow the similar approach.

Hope this helps.

Regards,

Manish Jawla

I tried defining the function on render the problem is that the only way I can find to call the script below is to add it to the page header.    Hcaptcha specifies that the onloadFunction has to be defined BEFORE this script is loaded, but since it is added in the header anything I define anywhere else is after that.   So I end up with a message that onloadFunction is not defined regardless of where I try to add the javascript.

I can't just define my onloadFunction in a script file because I need access to the widget ID and siteKey so the captcha can render and I see no way to pass input parameters to scripts.

<script src="https://hcaptcha.com/1/api.js?onload=onloadFunction&render=explicit" async defer></scr