Multiple Recaptcha keys per page

Implementation
#1

Hello,
I’m having an issue working out how to have multiple connections on one page of my frontend site.
I have functionality that requires two requests from two separate 3rd parties, which as far as I know requires two connections setup.

Concurrently with the requests I utilize the captcha v3 api to provide me with the correct x-api-key, however because recaptcha limits to only one key per load(security I’m assuming), and your process dictates what the key is, I find myself unable to make secondary requests without getting errors from recaptcha.

Is there a way for me to change the key required so both connections would have the same one? Or is there any alternative method I may have missed?

Many Thanks.

#2

That’s a great question, you can configure multiple Recaptcha keys in one site by injecting the script with a render parameter, such as""

<script src="https://www.google.com/recaptcha/api.js?render=reCAPTCHA_site_key"></script>

You can then customize behaviour for each Recaptcha by specifying thee the key within the execute method:

grecaptcha.ready(function() {          
   grecaptcha.execute('reCAPTCHA_site_key', {action: 'submit'}).then(function(token) {              
      // Add your logic to submit to your backend server here.          
   });        
});

If you’d like to get a specific example for the framework you’re using let me know.