For anyone looking for a different solution for this, involves changing the recaptcha.php module for the plugin though but gives more flexibility I believe.
There are two function in the module that need to be edited:
function wpcf7_recaptcha_enqueue_scripts() {
$service = WPCF7_RECAPTCHA::get_instance();
if ( ! $service->is_active() ) {
return;
}
$url = add_query_arg(
array(
// 'render' => $service->get_sitekey(),
'render' => 'explicit' // Render the widget explicitly, needed if setting grecaptcha.render parameters
),
'https://www.google.com/recaptcha/api.js'
);
wp_enqueue_script( 'google-recaptcha', $url, array(), '3.0', true );
}
and
function wpcf7_recaptcha_onload_script() {
$service = WPCF7_RECAPTCHA::get_instance();
if ( ! $service->is_active() ) {
return;
}
if ( ! wp_script_is( 'google-recaptcha', 'done' ) ) {
return;
}
?>
<script type="text/javascript">
( function( grecaptcha, sitekey ) {
var wpcf7recaptcha = {
clientId: null,
render: function() {
this.clientId = grecaptcha.render(
'google-recaptcha',
{
'badge' : 'bottomleft',
'sitekey' : sitekey,
'size' : 'invisible'
}
);
},
execute: function() {
grecaptcha.execute(
// sitekey,
this.clientId, // use client ID returned by grecaptcha.render instead.
{ action: 'homepage' }
).then( function( token ) {
var forms = document.getElementsByTagName( 'form' );
for ( var i = 0; i < forms.length; i++ ) {
var fields = forms[ i ].getElementsByTagName( 'input' );
for ( var j = 0; j < fields.length; j++ ) {
var field = fields[ j ];
if ( 'g-recaptcha-response' === field.getAttribute( 'name' ) ) {
field.setAttribute( 'value', token );
break;
}
}
}
} );
}
};
//grecaptcha.ready( wpcf7recaptcha.execute );
grecaptcha.ready( function() {
wpcf7recaptcha.render();
wpcf7recaptcha.execute();
} );
document.addEventListener( 'wpcf7submit', wpcf7recaptcha.execute, false );
} )( grecaptcha, '<?php echo esc_js( $service->get_sitekey() ); ?>' );
</script>
<?php
}