Google ReCaptcha v3 - form.addHiddenFields not working
I am trying to implement Google Recaptcha v3 in our instance. However, I am stuck with passing the Google Response back to Marketo using form.addHiddenFields (it is not working as expected - empty value is being passed to Marketo for some reason).
Google docs recommend adding this (https://developers.google.com/recaptcha/docs/v3). My sample code is below which is not working:
MktoForms2.whenReady(function (form) {
var response;
form.onValidate(function () {
grecaptcha.ready(function () {
grecaptcha.execute('KEY', {
action: 'submit'
}).then(function (token) {
response = token;
console.log(response);
console.log("RESPONSE");
form.addHiddenFields({
'RecaptchaResponse': response
});
});
});
form.addHiddenFields({
'TestField': 'TEST VALUE'
});
});
});
A few things:
1. console.log(response) shows the correct response value received from Google.
2. form.addHiddenFields({'TestField':'TEST VALUE'}) works as expected (when adding it outside grecaptcha.execute)
3. form.addHiddenFields({'RecaptchaResponse':response}) is not working as expected. I can't figure out why.
Any help is appreciated.