Tengo un formulario HTMX básico, que quiero integrar con Google reCaptcha (v3) para que cuando el usuario haga clic en el botón de enviar, JavaScript llamará a la API de reCaptcha para obtener un token, que luego se agrega a un campo oculto que el la parte trasera puede recoger.

Aquí está mi formulario:

 <form id="form" hx-post="/page" hx-target="#content"> <input id="recaptcha-token" type="hidden" name="ReCaptchaToken" /> <button type="submit">Submit</button> </form>

Inicialmente, estaba pensando en conectarme al evento htmx:configRequest para modificar los parámetros enviados en la solicitud de esta manera:

 <script> document.body.addEventListener('htmx:configRequest', (e) => { grecaptcha.ready(function() { grecaptcha.execute('reCAPTCHA_site_key', {action: 'submit'}).then(function(token) { e.detail.parameters.ReCaptchaToken = token; }); }); }); </script>

Pero, por supuesto, esto no funciona debido a la naturaleza asíncrona de la execute , es decir, el controlador de eventos finaliza antes de resolver la promesa de ejecución.

¿Cómo puedo integrar la llamada reCaptcha antes de la publicación del formulario HTMX?