How to add reCAPTCHA to Woocommerce vendors registration from

Question

I note a number of other questions regarding WooCommerce registration, however not any concerning the WooCommerce Vendors Plugin and how vendors register on the site.

Research has allowed me to add additional fields and I have found some example reCAPTCHA code However I am missing the vital link between the two in order to get the reCAPTCHA viewable on the WooCommerce Vendors registration page.

Is it possible to hook into wcpv_shortcode_registration_form_process by doing something like this in the example code from above?

/**
 * Add reCapcha to the Vendor registration page 
 */

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( 'wcpv_shortcode_registration_form_process', 'wooc_validate_re_captcha_field', 10, 3 );

I have indeed tried this to no avail.

Many thanks for any help you can offer.

Answer 1

In order to make the captcha viewable on the vendor registration, you need to add some lines of javascript code in between the code you used to create the additional registration form.

Here, just before the function to create the fields in the view, add the following code:

vendors_reg_custom_field() { ?>
<script src='https://www.google.com/recaptcha/api.js' async defer></script>

Before closing the PHP function, add:

<p class="form-row form-row-wide">
<div class="g-recaptcha" data-sitekey="YOUR-RECAPTCHA-SITE-KEY-HERE</div>
</p>
<?php 
}

That will make the captcha viewable. Cheers.

You can find more help here