Invisible reCAPTCHA v3 Integration
March 19, 2025 Β· AI Conversations
### **Step 1: Register for Google reCAPTCHA v3 API**
1. Go to [Google reCAPTCHA Admin Console](https://www.google.com/recaptcha/admin/create).
2. Register your site and select **reCAPTCHA v3**.
3. Copy the **Site Key** and **Secret Key**.
—
### **Step 2: Add API Keys in `wp-config.php`**
To store your API keys securely, edit your `wp-config.php` file and add:
define('RECAPTCHA_SITE_KEY', 'your-site-key-here');
define('RECAPTCHA_SECRET_KEY', 'your-secret-key-here');
Replace `'your-site-key-here'` and `'your-secret-key-here'` with your actual keys.
—
### **Step 3: Enqueue reCAPTCHA Script in Child Theme**
Add the following code to your **child themeβs `functions.php`** to load reCAPTCHA v3:
function enqueue_recaptcha_v3() {
if (!is_admin()) {
wp_enqueue_script('google-recaptcha-v3', 'https://www.google.com/recaptcha/api.js?render=' . RECAPTCHA_SITE_KEY, [], null, true);
}
}
add_action('wp_enqueue_scripts', 'enqueue_recaptcha_v3');
—
### **Step 4: Add reCAPTCHA Token to Forms**
To integrate reCAPTCHA v3 in a form, modify the form in your **child theme**:
<form id="custom-form" action="<?php echo esc_url(admin_url('admin-post.php')); ?>" method="POST">
<input type="text" name="user_name" placeholder="Your Name" required>
<input type="email" name="user_email" placeholder="Your Email" required>
<input type="hidden" name="recaptcha_token" id="recaptcha-token">
<button type="submit">Submit</button>
</form>
<script>
grecaptcha.ready(function() {
grecaptcha.execute('<?php echo RECAPTCHA_SITE_KEY; ?>', {action: 'submit'}).then(function(token) {
document.getElementById('recaptcha-token').value = token;
});
});
</script>
—
### **Step 5: Verify reCAPTCHA in Backend**
To validate the reCAPTCHA response, add this to your **`functions.php`**:
function verify_recaptcha_v3($token) {
$secret_key = RECAPTCHA_SECRET_KEY;
$response = wp_remote_post('https://www.google.com/recaptcha/api/siteverify', [
'body' => [
'secret' => $secret_key,
'response' => $token
]
]);
$response_body = wp_remote_retrieve_body($response);
$result = json_decode($response_body, true);
return ($result['success'] && $result['score'] >= 0.5);
}
—
### **Step 6: Process Form Submission with Hook**
Create a custom form handler in `functions.php`:
function handle_custom_form_submission() {
if (isset($_POST['recaptcha_token'])) {
$recaptcha_token = sanitize_text_field($_POST['recaptcha_token']);
if (!verify_recaptcha_v3($recaptcha_token)) {
wp_die('reCAPTCHA verification failed. Please try again.');
}
// Process form data here
echo "Form submitted successfully!";
wp_redirect(home_url('/thank-you'));
exit;
}
}
add_action('admin_post_nopriv_custom_form', 'handle_custom_form_submission');
add_action('admin_post_custom_form', 'handle_custom_form_submission');
—
### **Step 7: Modify Form Action**
Ensure your form's action is set to:
<form id="custom-form" action="<?php echo esc_url(admin_url('admin-post.php?action=custom_form')); ?>" method="POST">
—
### **That's it!** π
This will:
β
Load Google reCAPTCHA v3 **invisibly**
β
Generate a reCAPTCHA token dynamically
β
Verify the reCAPTCHA score on the **backend**
β
Process form submissions **securely**
Let me know if you need customization! π
—
### **Step 1: Register for Google reCAPTCHA v3 API**
1. Go to [Google reCAPTCHA Admin Console](https://www.google.com/recaptcha/admin/create).
2. Register your site and select **reCAPTCHA v3**.
3. Copy the **Site Key** and **Secret Key**.
—
### **Step 2: Add API Keys in `wp-config.php`**
To store your API keys securely, add these lines to `wp-config.php`:
define('RECAPTCHA_SITE_KEY', 'your-site-key-here');
define('RECAPTCHA_SECRET_KEY', 'your-secret-key-here');
Replace `'your-site-key-here'` and `'your-secret-key-here'` with your actual reCAPTCHA keys.
—
### **Step 3: Enqueue reCAPTCHA Script in WooCommerce Checkout**
Add the following code to your **child themeβs `functions.php`**:
function enqueue_recaptcha_v3_wc() {
if (is_checkout() && !is_admin()) {
wp_enqueue_script('google-recaptcha-v3', 'https://www.google.com/recaptcha/api.js?render=' . RECAPTCHA_SITE_KEY, [], null, true);
wp_add_inline_script('google-recaptcha-v3', "
grecaptcha.ready(function() {
grecaptcha.execute('" . RECAPTCHA_SITE_KEY . "', {action: 'checkout'}).then(function(token) {
document.getElementById('recaptcha-token').value = token;
});
});
");
}
}
add_action('wp_enqueue_scripts', 'enqueue_recaptcha_v3_wc');
—
### **Step 4: Add reCAPTCHA Hidden Input to WooCommerce Checkout Form**
Modify the WooCommerce checkout form by adding a hidden input field using a filter:
function add_recaptcha_field_to_checkout() {
echo '<input type="hidden" name="recaptcha_token" id="recaptcha-token">';
}
add_action('woocommerce_review_order_before_submit', 'add_recaptcha_field_to_checkout');
—
### **Step 5: Validate reCAPTCHA Before Checkout Submission**
To validate the reCAPTCHA response, add this function to `functions.php`:
function verify_recaptcha_v3($token) {
$secret_key = RECAPTCHA_SECRET_KEY;
$response = wp_remote_post('https://www.google.com/recaptcha/api/siteverify', [
'body' => [
'secret' => $secret_key,
'response' => $token,
]
]);
$response_body = wp_remote_retrieve_body($response);
$result = json_decode($response_body, true);
return ($result['success'] && $result['score'] >= 0.5); // Ensure minimum score threshold
}
Now, hook this into WooCommerce checkout validation:
function validate_recaptcha_on_checkout($fields) {
if (!isset($_POST['recaptcha_token']) || empty($_POST['recaptcha_token'])) {
wc_add_notice(__('reCAPTCHA verification failed. Please try again.', 'woocommerce'), 'error');
return;
}
$recaptcha_token = sanitize_text_field($_POST['recaptcha_token']);
if (!verify_recaptcha_v3($recaptcha_token)) {
wc_add_notice(__('reCAPTCHA verification failed. Are you a robot?', 'woocommerce'), 'error');
}
}
add_action('woocommerce_checkout_process', 'validate_recaptcha_on_checkout');
—
### **Step 6: Prevent Fake Orders via Hooks**
To prevent checkout submission if reCAPTCHA validation fails, use this additional hook:
function stop_checkout_if_recaptcha_fails($order_id) {
if (!isset($_POST['recaptcha_token']) || empty($_POST['recaptcha_token'])) {
throw new Exception(__('reCAPTCHA verification failed. Please refresh the page and try again.', 'woocommerce'));
}
$recaptcha_token = sanitize_text_field($_POST['recaptcha_token']);
if (!verify_recaptcha_v3($recaptcha_token)) {
throw new Exception(__('reCAPTCHA verification failed. Order not processed.', 'woocommerce'));
}
}
add_action('woocommerce_checkout_order_processed', 'stop_checkout_if_recaptcha_fails', 10, 1);
—
### **Final Steps**
β
reCAPTCHA **loads invisibly** at checkout.
β
**Validates** user action before **order submission**.
β
Blocks **bots & fake orders** with Googleβs AI score.
π **Test** your checkout to confirm everything is working smoothly.
Let me know if you need modifications! π―
—
### **Step 1: Register for Google reCAPTCHA v3 API**
1. Go to [Google reCAPTCHA Admin Console](https://www.google.com/recaptcha/admin/create).
2. Register your site and select **reCAPTCHA v3**.
3. Copy the **Site Key** and **Secret Key**.
—
### **Step 2: Add API Keys in `wp-config.php`**
To store your API keys securely, edit your `wp-config.php` file and add:
define('RECAPTCHA_SITE_KEY', 'your-site-key-here');
define('RECAPTCHA_SECRET_KEY', 'your-secret-key-here');
Replace `'your-site-key-here'` and `'your-secret-key-here'` with your actual keys.
—
### **Step 3: Enqueue reCAPTCHA v3 Script Site-Wide**
Add this function to your **child themeβs `functions.php`**:
function enqueue_recaptcha_v3() {
if (!is_admin()) {
wp_enqueue_script('google-recaptcha-v3', 'https://www.google.com/recaptcha/api.js?render=' . RECAPTCHA_SITE_KEY, [], null, true);
wp_add_inline_script('google-recaptcha-v3', "
grecaptcha.ready(function() {
grecaptcha.execute('" . RECAPTCHA_SITE_KEY . "', {action: 'homepage'}).then(function(token) {
document.getElementById('recaptcha-token').value = token;
});
});
");
}
}
add_action('wp_enqueue_scripts', 'enqueue_recaptcha_v3');
—
### **Step 4: Add Hidden reCAPTCHA Input Field**
Place the following in your **child themeβs footer** (`footer.php`) before “:
<input type="hidden" id="recaptcha-token" name="recaptcha_token">
Alternatively, add it dynamically using a WordPress action:
function add_recaptcha_hidden_field() {
echo '<input type="hidden" id="recaptcha-token" name="recaptcha_token">';
}
add_action('wp_footer', 'add_recaptcha_hidden_field');
—
### **Thatβs It! π**
β
This **loads reCAPTCHA v3 site-wide** (invisible).
β
Adds a **hidden reCAPTCHA token** that can be used in forms.
β
Helps **protect your website** from spam & bots.
Let me know if you need further customizations! π
—
## **π Step 1: Check reCAPTCHA Score Threshold**
Google reCAPTCHA v3 assigns a **score between 0.0 and 1.0**:
– **1.0 β Very likely human**
– **0.0 β Very likely a bot**
– If your threshold is too **strict**, valid users may get rejected.
### **Modify Your Validation to Accept a Lower Score**
In `functions.php`, update your validation:
function verify_recaptcha_v3($token) {
$secret_key = RECAPTCHA_SECRET_KEY;
$response = wp_remote_post('https://www.google.com/recaptcha/api/siteverify', [
'body' => [
'secret' => $secret_key,
'response' => $token
]
]);
$response_body = wp_remote_retrieve_body($response);
$result = json_decode($response_body, true);
// Log the reCAPTCHA response for debugging
error_log(print_r($result, true));
// Adjust the score threshold (default is 0.5)
return ($result['success'] && $result['score'] >= 0.3); // Try lowering to 0.3
}
π **Try lowering the score to `0.3`** to allow more users through.
—
## **π Step 2: Ensure Token is Passed in the Form**
Check that the **hidden input field** is being populated with a token.
In **your form**, you should have:
<input type="hidden" name="recaptcha_token" id="recaptcha-token">
<script>
grecaptcha.ready(function() {
grecaptcha.execute('<?php echo RECAPTCHA_SITE_KEY; ?>', {action: 'submit'}).then(function(token) {
document.getElementById('recaptcha-token').value = token;
});
});
</script>
β **Fix:** If `#recaptcha-token` is empty, the form is not getting a token.
—
## **π Step 3: Check API Key & Secret**
Make sure your API keys in `wp-config.php` are **correct**:
define('RECAPTCHA_SITE_KEY', 'your-site-key-here');
define('RECAPTCHA_SECRET_KEY', 'your-secret-key-here');
If incorrect, reCAPTCHA will **always fail**.
—
## **π Step 4: Debug reCAPTCHA Response**
If issues persist, **log the reCAPTCHA response** to find errors:
function debug_recaptcha_response($token) {
$secret_key = RECAPTCHA_SECRET_KEY;
$response = wp_remote_post('https://www.google.com/recaptcha/api/siteverify', [
'body' => [
'secret' => $secret_key,
'response' => $token
]
]);
$response_body = wp_remote_retrieve_body($response);
$result = json_decode($response_body, true);
error_log(print_r($result, true)); // Debugging - View in WordPress logs
return $result;
}
Then check **error logs**:
– **For WordPress:** `wp-content/debug.log`
– **For Server:** Apache/Nginx logs
—
## **π Final Fixes**
1. β
Lower the **reCAPTCHA score threshold**.
2. β
Ensure **token is generated & sent** in the form.
3. β
Check **API key and secret**.
4. β
**Log reCAPTCHA response** for debugging.
If you still get **"You must be a human"**, share the error log output here. π
—
### **Step 1: Register for Google reCAPTCHA v3 API**
1. Go to [Google reCAPTCHA Admin Console](https://www.google.com/recaptcha/admin/create).
2. Register your site and select **reCAPTCHA v3**.
3. Copy the **Site Key** and **Secret Key**.
—
### **Step 2: Add API Keys in `wp-config.php`**
To store your API keys securely, edit your `wp-config.php` file:
define('RECAPTCHA_SITE_KEY', 'your-site-key-here');
define('RECAPTCHA_SECRET_KEY', 'your-secret-key-here');
Replace `'your-site-key-here'` and `'your-secret-key-here'` with your actual reCAPTCHA keys.
—
### **Step 3: Enqueue reCAPTCHA v3 Script on Your Site**
Add the following function to your **child themeβs `functions.php`**:
function enqueue_recaptcha_v3_sitewide() {
if (!is_admin()) {
wp_enqueue_script('google-recaptcha-v3', 'https://www.google.com/recaptcha/api.js?render=' . RECAPTCHA_SITE_KEY, [], null, true);
wp_add_inline_script('google-recaptcha-v3', "
grecaptcha.ready(function() {
grecaptcha.execute('" . RECAPTCHA_SITE_KEY . "', {action: 'homepage'}).then(function(token) {
console.log('reCAPTCHA Token:', token);
});
});
");
}
}
add_action('wp_enqueue_scripts', 'enqueue_recaptcha_v3_sitewide');
—
### **Step 4: Verify reCAPTCHA is Loaded**
1. Visit any page on your website.
2. **Open the browser console** (`F12` or `Ctrl + Shift + I` in Chrome).
3. Look for the log message:
reCAPTCHA Token: XYZ...
If you see a token, **reCAPTCHA v3 is successfully added! π**
—
### **π Thatβs It!**
β
reCAPTCHA v3 is now **integrated invisibly** on your website.
β
It will **help detect bots and spam traffic** in Google Analytics.
β
No **form integration** is needed.
Let me know if you need further modifications! π
—
## **π Step 1: Verify API Keys**
1. Go to your **Google reCAPTCHA Admin Console**:
π [https://www.google.com/recaptcha/admin](https://www.google.com/recaptcha/admin)
2. Ensure:
– The **Site Key** and **Secret Key** match what you added in `wp-config.php`.
– You selected **reCAPTCHA v3** (not v2).
– Your **domain** is correctly registered.
—
## **π Step 2: Check If reCAPTCHA Script Loads**
Open your **browser console (`F12` in Chrome) β Console Tab** and check if the reCAPTCHA script is loading.
Run this command in the **browser console**:
console.log(typeof grecaptcha);
If the output is **"undefined"**, the script is not loading.
If it returns **"object"**, reCAPTCHA is available.
### **β
Fix: Force Load the Script in `functions.php`**
Modify your `functions.php`:
function force_load_recaptcha_script() {
wp_enqueue_script('google-recaptcha-v3', 'https://www.google.com/recaptcha/api.js?render=' . RECAPTCHA_SITE_KEY, [], null, true);
}
add_action('wp_enqueue_scripts', 'force_load_recaptcha_script');
—
## **π Step 3: Ensure Token is Generated**
Modify the inline script to **log errors if the token fails**.
Replace the existing `wp_add_inline_script()` with this:
function load_recaptcha_token_debug() {
wp_add_inline_script('google-recaptcha-v3', "
grecaptcha.ready(function() {
grecaptcha.execute('" . RECAPTCHA_SITE_KEY . "', {action: 'homepage'}).then(function(token) {
console.log('reCAPTCHA Token:', token);
}).catch(function(error) {
console.error('reCAPTCHA Error:', error);
});
});
");
}
add_action('wp_footer', 'load_recaptcha_token_debug');
### **Now, check the browser console again:**
– β
If **a token appears**, it's working!
– β If you see **"reCAPTCHA Error"**, check the error message.
—
## **π Step 4: Check for JavaScript Errors**
– Open **DevTools (`F12`) β Console Tab**.
– Look for errors like:
Uncaught ReferenceError: grecaptcha is not defined
β **Fix:** Ensure the script is properly enqueued in **Step 2**.
—
## **π Step 5: Test on a Live Site (Not Localhost)**
**Google reCAPTCHA may not work properly on localhost.**
If you're testing locally, deploy it on a **live domain**.
### **β
Fix: Use `"localhost"` in Google reCAPTCHA Admin**
1. Go to [Google reCAPTCHA Admin](https://www.google.com/recaptcha/admin).
2. Add **localhost** as an **allowed domain**.
—
## **π Step 6: Clear Cache**
– If using **WP Super Cache / Cloudflare**, **purge cache**.
– If using a **CDN**, try disabling it temporarily.
—
## **π Final Check**
– β
Verify the **API keys**.
– β
Ensure **script is loading** in the **browser console**.
– β
Log **errors for debugging**.
– β
Test on a **live domain**.
– β
**Clear cache**.
Let me know if the issue persists! π
—
## **π Step 1: Check If reCAPTCHA Script Is Still Loading**
Even if you've removed reCAPTCHA from `functions.php`, the script might still be loading from:
– A **plugin** (e.g., Contact Form 7, WooCommerce, security plugins).
– A **theme option** (some themes have built-in reCAPTCHA settings).
– A **cached version** of your site.
### **β
Fix: Check If the Script Exists in Source Code**
1. Open your **website in a browser**.
2. Right-click and select **"View Page Source"** (`Ctrl + U`).
3. Search for:
https://www.google.com/recaptcha/api.js
If you find it, a plugin or theme is still loading it.
—
## **π Step 2: Check If a Plugin Is Adding reCAPTCHA**
Some common WordPress plugins **auto-load reCAPTCHA**, such as:
– **Contact Form 7** (`wpcf7-recaptcha`).
– **WooCommerce checkout security** plugins.
– **Login security plugins** (Wordfence, Google Captcha, etc.).
– **Anti-spam plugins**.
### **β
Fix: Disable reCAPTCHA from Plugins**
1. Go to **WordPress Admin > Plugins**.
2. Look for plugins with **reCAPTCHA** settings.
3. Disable reCAPTCHA in each plugin **or temporarily deactivate the plugin**.
4. Clear your **cache** and check again.
—
## **π Step 3: Check If Your Theme Is Adding reCAPTCHA**
Some themes (e.g., **Astra, Divi, Avada**) have built-in reCAPTCHA settings.
### **β
Fix: Disable reCAPTCHA from the Theme**
1. Go to **WordPress Admin > Theme Settings / Customizer**.
2. Look for **Security** or **Forms** settings.
3. Disable any **Google reCAPTCHA** option.
—
## **π Step 4: Clear Cache & CDN**
If you've **removed** reCAPTCHA but still see the error, your site **may be cached**.
### **β
Fix: Clear Cache**
– If using **WP Super Cache / W3 Total Cache / Cloudflare**:
1. **Clear the cache** in the plugin settings.
2. Purge **Cloudflare / CDN cache** if applicable.
– If using a **server-side cache (e.g., LiteSpeed, Nginx, Varnish)**:
1. Restart the cache or **clear it via cPanel**.
—
## **π Step 5: Check for Hardcoded reCAPTCHA in Theme Files**
If you (or a developer) **manually added reCAPTCHA** to your theme files, it's still active.
### **β
Fix: Remove Any reCAPTCHA Code from Theme**
1. Open **Appearance > Theme File Editor**.
2. Check `header.php`, `footer.php`, `functions.php` for:
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
3. Remove any remaining reCAPTCHA script.
—
## **π Step 6: Check Google reCAPTCHA Site Key**
If you still want reCAPTCHA but see **"Invalid site key"**, it means:
– The **wrong site key** is used.
– The site key is **not registered** for your domain.
### **β
Fix: Verify Site Key**
1. Go to **[Google reCAPTCHA Admin](https://www.google.com/recaptcha/admin)**.
2. Make sure the **site key matches** whatβs in your settings.
3. Check if your **domain is registered** under reCAPTCHA.
—
## **π Final Steps**
β
**Find and remove** reCAPTCHA scripts from **plugins, themes, or hardcoded files**.
β
**Clear cache** from WordPress, Cloudflare, or your hosting provider.
β
**Disable reCAPTCHA in Contact Form 7, WooCommerce, or security plugins**.
β
If you still want reCAPTCHA, **verify your API key in Google Admin**.
Let me know if the error still persists! π
—
## **π Step 1: Identify Where reCAPTCHA Is Being Applied**
Even though you removed the integration, reCAPTCHA might still be enabled in:
– A **plugin** (Contact Form 7, WooCommerce, WPForms, Wordfence, etc.).
– Your **themeβs security settings**.
– A **cached version** of your site.
### **β
Fix: Check If reCAPTCHA Script Is Still Loading**
1. Open your **website in Chrome**.
2. **Right-click β Inspect β Console Tab (`F12`)**.
3. Search for errors like:
ERROR for site owner: Invalid site key
4. **Check Page Source**:
– Press `Ctrl + U` (View Page Source).
– Search for:
https://www.google.com/recaptcha/api.js
β If found, reCAPTCHA is **still active**.
—
## **π Step 2: Disable reCAPTCHA from Plugins**
Some WordPress plugins force reCAPTCHA on **forms, login pages, checkout, or contact pages**.
### **β
Fix: Disable reCAPTCHA in Plugins**
1. Go to **WordPress Admin > Plugins**.
2. Check the settings of these common **reCAPTCHA plugins**:
– **Contact Form 7** (`wpcf7-recaptcha`)
– **WooCommerce Checkout Security**
– **Google Captcha by BestWebSoft**
– **Wordfence Login Security**
– **WPForms / Gravity Forms**
3. **Disable reCAPTCHA in each plugin** or **temporarily deactivate** them.
β **Test your form again.**
—
## **π Step 3: Disable reCAPTCHA in Your Theme**
Some themes have **built-in** reCAPTCHA settings (e.g., **Avada, Astra, Divi**).
### **β
Fix: Disable reCAPTCHA from the Theme**
1. **Go to WordPress Admin > Theme Options / Customizer**.
2. Look under **Security** or **Forms Settings**.
3. **Disable Google reCAPTCHA**.
β **Test the form again.**
—
## **π Step 4: Clear Cache & CDN**
If you've disabled reCAPTCHA but still see the error, **your site may be cached**.
### **β
Fix: Clear Cache**
– **If using WP Super Cache / W3 Total Cache / Cloudflare**:
– Clear cache in the plugin settings.
– Purge **Cloudflare / CDN cache**.
– **If using server-side cache (LiteSpeed, Nginx, Varnish)**:
– Restart or **clear the cache** via **cPanel** or hosting panel.
β **Test your form again.**
—
## **π Step 5: Remove Hardcoded reCAPTCHA Scripts**
If reCAPTCHA was **manually added**, check for leftover code.
### **β
Fix: Remove Any reCAPTCHA Code from Theme**
1. **Go to WordPress Admin > Appearance > Theme File Editor**.
2. Open:
– `header.php`
– `footer.php`
– `functions.php`
3. Look for and **remove**:
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
4. Save changes and **refresh the page**.
β **Test the form again.**
—
## **π Final Steps**
– β
**Find and remove** reCAPTCHA from **plugins, themes, or hardcoded files**.
– β
**Clear cache** from WordPress, Cloudflare, or your hosting provider.
– β
**Disable reCAPTCHA in Contact Form 7, WooCommerce, or security plugins**.
π₯ **Still seeing the error?**
Try **temporarily disabling all plugins** and switching to a default theme (e.g., Twenty Twenty-Four) to see if reCAPTCHA disappears.
Let me know what you find! π