How to send GRecaptcha V3 to WP Rest API using Nuxt js - php

Question

i want to send the Google Recaptcha V3 to WP Rest API using Contact Form 7.
This is what i have done so far:
I just use WP as BackEnd API provider, my frontend is in Nuxt app - full static generated code
Wordpress
Install Contact Form 7 plugin
Configured the Google Recaptcha V3 Site Key and Private Key
Create a specific form form my Nuxt App
Test the form in a Wordpress test page and it works fine
Nuxt
Install #nuxtjs/recaptcha
Insert in .env the site key and api URL of contact form
in nuxt.config.js
publicRuntimeConfig: {
contactFormApi: process.env.CONTACT_FORM_API,
// other staff
},
modules: [
['#nuxtjs/recaptcha', {
hideBadge: true
,siteKey: process.env.RECAPTCHA_SITE_KEY
,version: 3
}],
// other staff
],
in layout/default.vue:
async mounted() {
try {
await this.$recaptcha.init()
} catch (e) {
console.log(e);
}
},
beforeDestroy () {
this.$recaptcha.destroy();
// other staff
}
contact form component:
<template>
<form role="form">
<v-text-field v-model="email" name="email" :label="$t('form.yourEmail')" autocomplete="email" :placeholder="$t('form.yourEmailHint')" clearable
></v-text-field>
<v-textarea v-model="message" name="message" :label="$t('form.yourMessage')" rows="3" value="" :hint="$t('form.yourMessageHint')" clearable
></v-textarea>
<v-checkbox v-model="acceptPrivacy" :label="$t('form.acceptPrivacyTerms')"></v-checkbox>
<v-btn #click="submit">{{ $t('btns.send') }}</v-btn>
</form>
</template>
<script>
export default {
data: () => ({
email: '',
message: '',
acceptPrivacy: false,
}),
methods: {
async submit() {
if (!this.acceptPrivacy || this.email == '' || this.message == '') {
return false;
}
try {
const token = await this.$recaptcha.execute('login');
console.log('ReCaptcha token:', token);
const emailBody = {
"_wpcf7_recaptcha_response" : token,
"wpcf7_recaptcha_response" : token,
"recaptcha_response" : token,
"recaptcha" : token,
"token" : token,
"email": this.email,
"message" : this.message,
"privacy_terms" : this.acceptPrivacy? 1 : 0
};
const form = new FormData();
for (const field in emailBody) {
form.append(field, emailBody[field]);
};
const headers = {
'Content-Type': 'multipart/form-data',
};
const data = await this.$axios.$post(
this.$config.contactFormApi,
form,
{ headers: headers }
);
if (data == null || data == undefined || data.status !== 'spam') {
console.log('Email has NOT been sent');
console.log(data);
return;
}
console.log('Email has been sent');
console.log(data);
} catch (error) {
console.log('Login error:', error)
}
}
}
}
</script>
I try to send the email from my localhost:3000, the other API of WP in order to get pages, post, customPostTypes work as expected.
After every request to WPCF7 i get this response:
{
"into": "#",
"status": "spam",
"message": "There was an error trying to send your message. Please try again later.",
"posted_data_hash": ""
}
As you can see in the request i don't know the proper way to send the gRecaptcha token that i correctly get from google service response:
"_wpcf7_recaptcha_response" : token,
"wpcf7_recaptcha_response" : token,
"recaptcha_response" : token,
"recaptcha" : token,
"token" : token,
Can you help me for this issue?
Thanks in advance