Thanks for your reply. Your suggestion helps a bit and the error "Invalid key type" on the badge has gone and the badge appears normal. However, I'm still having a couple of issues:
a) The deferred function with token attached to .execute() is not being called.
b) There is a JS error saying:
recaptcha__en.js:418 Uncaught Error: Invalid site key or not loaded in api.js: XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX at Object.Bj [as execute] (recaptcha__en.js:418)
These two issues don't happen with the floating badge.
This is the code I am using:
<script type="text/javascript" src="https://www.google.com/recaptcha/api.js?render=explicit&onload=onCaptchaLoaded"></script>
<script type="text/javascript">
function onCaptchaLoaded() {
console.log("Google reCaptcha 3 : Rendering");
var grecaptchav3_sitekey = 'XXXXXXXXXXXXX';
grecaptcha.render(
'recaptcha_container',
{
'sitekey': grecaptchav3_sitekey,
'badge': 'inline',
'size': 'invisible'
}
);
grecaptcha.ready(function() {
console.log("Google reCaptcha 3 : Executing");
grecaptcha.execute(grecaptchav3_sitekey, {action: 'my_test_action'})
.then(function(token) {
console.log("Google reCaptcha 3 : Executed, token = " + token);
});
});
}
</script>