Google recaptcha on wordpress throws 500 Error

Question

I followed the tutorial given here.

I've added google_recaptcha.php file in my /inc folder of the theme

<?php

    $data;
    header('Content-Type: application/json');
    error_reporting(E_ALL ^ E_NOTICE);

    if(isset($_POST['g-recaptcha-response'])){
        $captcha=$_POST['g-recaptcha-response'];
    }

    if(!$captcha){
        $data=array('nocaptcha' => 'true');
        echo json_encode($data);
        exit;
    }

    $google_secret_recaptcha = get_option('recaptcha_secret_key');

    $response=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$google_secret_recaptcha."&response=".$captcha."&remoteip=".$_SERVER['REMOTE_ADDR']);

    if($response.success==false) {
        $data=array('spam' => 'true');
        echo json_encode($data);
    } else {
        $data=array('spam' => 'false');
        echo json_encode($data);
    }

I've made it so that I can add google site and secret keyes as settings from wp backend. And they work, since captcha is showing on the comments on the front end.

In my comments.php I've added

add_filter('comment_form','add_google_captcha');

function add_google_captcha(){
    $google_site_recaptcha = get_option('recaptcha_site_key');
    echo '<div class="g-recaptcha" data-sitekey="'.$google_site_recaptcha.'"></div>';
}

In my functions.php I've enqued the recaptcha api

wp_enqueue_script( 'google_recaptcha_js', 'https://www.google.com/recaptcha/api.js','',THEME_VERSION, false);

I've tried setting it in the footer, and in the header, and still the same thing happens.

I've also localized my google_recaptcha.php so that I can access it in my ajax call

wp_localize_script( 'custom', 'ajax_posts', array(
    'ajaxurl'                => $ajaxurl,
    'google_captcha'         => get_template_directory_uri(). '/inc/google_recaptcha.php' ,
    'google_captcha_check'   => esc_html__('Please fill in the required fields and check the captcha', 'mytheme'),
));

My on click event looks like:

/* Google */
    $("#comment-submit").on('click', function(e){
        console.log('bla');
        var data_2;
        $.ajax({
            type: "POST",
            url: 'ajax_posts.google_captcha',
            data: $('#commentform').serialize(),
            async: false,
            success: function(data) {
                console.log(data);
                if(data.nocaptcha === "true"){
                    data_2=1;
                } else if(data.spam === "true") {
                    data_2=1;
                } else {
                    data_2=0;
                }
                console.log(ajax_posts.google_captcha);
            },
            error : function (jqXHR, textStatus, errorThrown) {
                console.log(jqXHR + ' :: ' + textStatus + ' :: ' + errorThrown);
            }
        });

        if( data_2 !== 0 ){
            e.preventDefault();
            if(data_2 == 1){
                $('.form-submit').after('<p class="captcha_alert">'+ajax_posts.google_captcha_check+'</p>');
                    setTimeout(function() { $(".captcha_alert").fadeOut(); }, 4000);
            } else {
                $('.form-submit').after('<p class="captcha_alert">'+ajax_posts.google_captcha_check+'</p>');
                    setTimeout(function() { $(".captcha_alert").fadeOut(); }, 4000);
            }
        } else {
            $("#commentform").submit();
        }
    });

When I don't check the recaptcha I get

Object {nocaptcha: "true"}

Which is ok, the captcha wasn't checked. But if I check it, and fill in the comments (or don't for that matter) I get

POST http://www.example.com/wp-content/themes/mytheme/inc/google_recaptcha.php 500 (Internal Server Error)

Which points to my ajax function (when I expand it in the console, there is: send, m.extend.ajax, (anonymous function) <- this is my ajax call, m.event.dispatch, r.handle)

I checked everything and I don't know what could be wrong. The keys work, because the captcha works. The url in ajax points to the http://www.example.com/wp-content/themes/mytheme/inc/google_recaptcha.php, which is ok.

When I check the Form Data from the Network I get the g-recaptcha-response and I paste that in the link with the secret key and the IP address and I get

{
  "success": false,
  "error-codes": [
    "missing-input-response",
    "invalid-input-secret"
  ]
}

Any help is appreciated.

EDIT

Added:

error : function (jqXHR, textStatus, errorThrown) {
    console.log(jqXHR + ' :: ' + textStatus + ' :: ' + errorThrown);
}

to my ajax, but get only:

[object Object] :: error :: Internal Server Error

In my console.

EDIT 2

Now when I paste my response I get invalid-input-response and invalid-input-secret :\

Answer 1

Solved it!

I don't know why I didn't do this sooner, as I've done this before many times. I created a handle for ajax

<?php

add_action( 'wp_ajax_google_recaptcha', 'mytheme_ajax_google_recaptcha' );
add_action( 'wp_ajax_nopriv_google_recaptcha', 'mytheme_ajax_google_recaptcha' );

function mytheme_ajax_google_recaptcha() {

    $data;
    header('Content-Type: application/json');
    error_reporting(E_ALL ^ E_NOTICE);

    if(isset($_POST['g-recaptcha-response'])){
        $captcha=$_POST['g-recaptcha-response'];
    }

    if(!$captcha){
        $data=array('nocaptcha' => 'true');
        echo json_encode($data);
        exit;
    }

    $google_secret_recaptcha = get_option('recaptcha_secret_key');

    $response=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$google_secret_recaptcha."&response=".$captcha."&remoteip=".$_SERVER['REMOTE_ADDR']);

    if($response.success==false) {
        $data=array('spam' => 'true');
        echo json_encode($data);
    } else {
        $data=array('spam' => 'false');
        echo json_encode($data);
    }

}

And then in my ajax I just added, instead of url, action: 'google_recaptcha',

And it works now :D