Woocommerce - How to add the new Google "no Captcha" reCaptcha into frontend registration form

Question

I need to use the new Google "no Captcha" reCaptcha in frontend Woocommerce registration form page.

I've inserted following code before the < / head > tag:

<script src='https://www.google.com/recaptcha/api.js'></script>

and this one inside form tab in file "woocommerce\myaccount\form-login.php":

<div class="g-recaptcha" data-sitekey="xxxxxxxxx MY ID xxxxxxxxx"></div>

where, obviously, "xxxxxxxxx MY ID xxxxxxxxx" is my google id code.

It shows the new captcha box but if I try to register a new user without check the captcha, it doesn't stops registration process and complete registration without errors.

Answer 1

It's being a while since Stimart opened this question but I'll give here my suggestion in case someone needed it.

Stimart here need to add some PHP code to validate the reCaptcha response value that google sends to the page when the user ticks the reCaptcha box to confirm they are not a robot.

The hard way would be to write something like this in the functions.php file:

function wooc_validate_re_captcha_field( $username, $email, $wpErrors )
{
    $remoteIP = $_SERVER['REMOTE_ADDR'];
    $recaptchaResponse = $_POST['g-recaptcha-response'];

    $response = wp_remote_post( 'https://www.google.com/recaptcha/api/siteverify', [
        'body' => [
            'secret'   => 'PRIVATE KEY HERE !!!',
            'response' => $recaptchaResponse,
            'remoteip' => $remoteIP
        ]
    ] );

    $response_code = wp_remote_retrieve_response_code( $response );
    $response_body = wp_remote_retrieve_body( $response );

    if ( $response_code == 200 )
    {
        $result = json_decode( $response_body, true );

        if ( ! $result['success'] )
        {
            switch ( $result['error-codes'] )
            {
                case 'missing-input-secret':
                case 'invalid-input-secret':
                    $wpErrors->add( 'recaptcha', __( '<strong>ERROR</strong>: Invalid reCAPTCHA secret key.', 'woocommerce' ) );
                    break;

                case 'missing-input-response' :
                case 'invalid-input-response' :
                    $wpErrors->add( 'recaptcha', __( '<strong>ERROR</strong>: Please check the box to prove that you are not a robot.', 'woocommerce' ) );
                    break;

                default:
                    $wpErrors->add( 'recaptcha', __( '<strong>ERROR</strong>: Something went wront validating the reCAPTCHA.', 'woocommerce' ) );
                    break;
            }
        }
    }
    else
    {
        $wpErrors->add( 'recaptcha_error', __( '<strong>Error</strong>: Unable to reach the reCAPTCHA server.', 'woocommerce' ) );
    }
}
add_action( 'woocommerce_register_post', 'wooc_validate_re_captcha_field', 10, 3 );

You can check this article http://www.themelocation.com/how-to-add-custom-fields-to-user-registration-form-in-woocommerce/ and the way this plugin https://wordpress.org/plugins/theme-my-login/ handle this problem.

or a lot easier is to install and set up a plugin like this one. ;)

Hope that it helps. :)

Answer 2

For Woocommerce Registration form, I think one can add Google Recaptcha using this simple code rather a plugin. Just need to grab 'site-key' from Google account http://www.google.com/recaptcha/admin#whyrecaptcha

1. Define JS in the theme's header.php file

<script src="https://www.google.com/recaptcha/api.js" async defer> </script>

2. Add this code in the theme's functions.php file (Don't forget to replace '##your-google-captcha-key##' with your google captcha site-key)

// Add field into the registration form

    function nada_woocommerce_edit_registration_form() {
            ?>
            <p id="recaptcha" class="g-recaptcha" data-sitekey="##your-google-captcha-key##"></p>
            <?php
        }
        add_action( 'woocommerce_register_form', 'nada_woocommerce_edit_registration_form', 15 );

    /**
     * Validate Woocommerce Registration form fields
     */

    function nada_validate_extra_register_fields( $errors, $username, $email ) {
        if ( empty( $_POST['g-recaptcha-response'] ) ) {
                $errors->add( 'captcha-error', wp_kses_post( '<strong>Error</strong>: Captcha is missing.', 'nada' ) );
        }
        return $errors;
    }
    add_filter( 'woocommerce_registration_errors', 'nada_validate_extra_register_fields', 10, 3 );