Adding recaptcha v2 to the checkout page

robetus · June 4, 2018

I found an older post regarding this but I wanted to post a working hook that adds recaptcha to the checkout page. I think this a great thing especially if you're being bombarded with fake accounts and orders.

/includes/hooks/checkout-recaptcha.php:

<?php

if (!defined("WHMCS")) die("This file cannot be accessed directly");

function limitOrders($vars)
	{
	$url = 'https://www.google.com/recaptcha/api/siteverify';
	$privatekey = "YOUR_RECAPTCHA_SECRET_KEY_HERE";
	$response = file_get_contents($url . "?secret=" . $privatekey . "&response=" . $_POST['g-recaptcha-response'] . "&remoteip=" . $_SERVER['REMOTE_ADDR']);
	$data = json_decode($response);
	if (isset($data->success) AND $data->success == true)
		{
		// everything is ok!
		}
	  else
		{
		$pm = $vars['paymentmethod'];
		if ($pm == "paypalpaymentspro")
			{
			global $errormessage;
			$errormessage.= "<li> Please, confirm that you are not a robot! <br/></li>";
			} //if CC
		}
	} //function
	
add_hook("ShoppingCartValidateCheckout", 1, "limitOrders");

Change YOUR_RECAPTCHA_SECRET_KEY_HERE to your the recaptcha private/secret key Google gives you. I'm using for my credit card checkout which is "paypalpaymentspro" but you can use it for any payment method. I think you really only need if you accept credits though. To get your payment method view source on the checkout page and search for "paymentmethod" your payment method will be near this.

In your checkout.tpl file you also need to add somewhere under the "Complete Payment" button:

<div class="g-recaptcha" data-sitekey="YOUR_RECAPTCHA_PUBLIC_KEY_HERE"></div>

Replace YOUR_RECAPTCHA_PUBLIC_KEY_HERE with your public recaptcha key provided by Google.

This is tested working on WHMCS v7.5.1.

Edited June 4, 2018 by robetus

brian! · June 4, 2018

12 hours ago, robetus said:

This is tested working on WHMCS v7.5.1.

when I quickly tried this, it didn't work - seemingly for many reasons, not the least of which being that it didn't even show the recaptcha image!

it's probably worth mentioning that the Recaptcha Public Key is available as a Smarty variable to the templates - so you could use it directly either in the template or in a hook...

I did rewrite it as 3 hooks (to remove the need to edit the template), but even when you specify a payment method in the hook, it doesn't seem to accept that the correct verification has been entered.

<?php

/**
* Recaptcha Hook @ Checkout
* @author brian!
*/

add_hook('ClientAreaHeadOutput', 1, function($vars) {
    
	return <<<HTML
<script src="https://www.google.com/recaptcha/api.js"></script>
HTML;

});

add_hook('ShoppingCartValidateCheckout', 1, function ($vars) {

	$url = 'https://www.google.com/recaptcha/api/siteverify';
	$response = file_get_contents($url . "?secret=" . $vars['reCaptchaPublicKey'] . "&response=" . $_POST['g-recaptcha-response'] . "&remoteip=" . $_SERVER['REMOTE_ADDR']);
	$data = json_decode($response);
	if (isset($data->success) AND $data->success == true)
		{
		// everything is ok!
		}
		else
		{
		if ($vars['paymentmethod'] == "paypalpaymentspro")
			{
			global $errormessage;
			$errormessage.= "<li> Please, confirm that you are not a robot! <br/></li>";
			} //if CC
		}

});

add_hook('ClientAreaFooterOutput', 1, function ($vars)
{
$output = '<div class="col-md-8 col-md-offset-4">
	<div class="g-recaptcha center-block" data-sitekey="'.$vars['reCaptchaPublicKey'].'">
	</div><p></div>';

    return '<script>
    jQuery("#btnCompleteOrder").before("' . preg_replace( "/\r|\n/", "", str_replace('"', '\"', $output)) . '");
</script>';
});

if you say it's working, then maybe i'm missing something... or i've broken it when converting to 3 hooks... i'll leave the code there for others to play with.

robetus · June 4, 2018

Sorry left out something big. I wish I could edit my original but I guess I can't. You also need to add this:

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

to the head.tpl file or just in the checkout.tpl file which is what I did.

brian! · June 4, 2018

Just now, robetus said:

You also need to add this:

I read that in the Google recaptcha documentation - so I used a head hook to add it to the header...

robetus · June 4, 2018

I just inserted inside my checkout.tpl file where I wanted to captcha to be and it works fine for me (with the hook I posted):

<script src='https://www.google.com/recaptcha/api.js'></script>
<div class="g-recaptcha" data-sitekey="YOUR_RECAPTCHA_PUBLIC_KEY_HERE"></div>

Try it. If you don't include the api.js it won't show any captcha.

robetus · June 4, 2018

It would be really cool if we could figure out a way to show/hide the captcha depending on which payment method was selected. So if a customer selects credit card then it would show the captcha but not for other payment methods.

brian! · June 4, 2018

showing the captcha isn't the issue... I just tried your original hook with your new template changes, and it doesn't accept the captcha verification when using the specified gateway. if I use another payment method, it ignores the captcha (that second part is expected - the first part isn't)... same thing occurs whether I use your solution or mine.

i'm not going to spend any time on this as I don't need it, but for others, WHMCS did post their own invisible recaptcha checkout hook last month...

13 minutes ago, robetus said:

It would be really cool if we could figure out a way to show/hide the captcha depending on which payment method was selected. So if a customer selects credit card then it would show the captcha but not for other payment methods.

i've been there on other projects - difficult to do... if you can find a simple way to do it, we'd all like to know!

robetus · June 4, 2018

Interesting, I just tried it again a few times because when you said it didn't work for you it made me paranoid. In all the tests I did it worked perfectly. I actually just commented out the payment method lines and have the captcha required for all payment methods. If this works for me I'm sure it will work for others.

brian! · June 5, 2018

16 hours ago, robetus said:

In all the tests I did it worked perfectly.

yet strangely for me, I can't make it work - your hook and template changes, or just my pure hook... even hard coding the public key didn't help.

it's entirely possible that it's perfectly working code, but something else is preventing it working for me - i'm certainly not discounting that as a possibility.

16 hours ago, robetus said:

If this works for me I'm sure it will work for others.

I hope it does.

btw - one other change you could make to make the error message is the users language...

$errormessage.= "<li>".Lang::trans('googleRecaptchaIncorrect')." <br/></li>";

that part certainly works!

robetus · June 5, 2018

I've been running it for the last 4 days and no problems or complaints from customers. With many orders placed. It's strange it's not working for you. Did you try commenting out the two payment methods lines and just using the captcha for all payment methods?

brian! · June 5, 2018

2 minutes ago, robetus said:

I've been running it for the last 4 days and no problems or complaints from customers. With many orders placed. It's strange it's not working for you. Did you try commenting out the two payment methods lines and just using the captcha for all payment methods?

i've tried adding and removing all sorts of options!

it could well be my dev, because there are certain default data feeds not working too - they're throwing up PHP errors and they shouldn't be... it's one of those things not worth fixing for now as other core features are working fine... if I get the chance, i'll try it on a v7.4 dev.

robetus · June 5, 2018

Oh okay, do you have a highly customized theme or module running? I have a highly customized theme and pretty crazy modules running on WHMCS install too though. Well we'll have to see if someone else trys it out.

brian! · June 5, 2018

2 minutes ago, robetus said:

Oh okay, do you have a highly customized theme or module running?

Plain old "Six"... I doubt if there are any hooks/template edits that could be breaking this.

3 minutes ago, robetus said:

I have a highly customized theme and pretty crazy modules running on WHMCS install too though. Well we'll have to see if someone else trys it out.

perhaps you could try it on a clean version of Six and see if it still works - it's possible you have something in the background of your custom that I don't have.

robetus · June 5, 2018

I actually tried six too with no difference in performance.

brian! · June 6, 2018

I just tried my hook on v7.4 and it didn't work... kept on showing the error message saying that captcha hadn't been entered.

robetus · June 6, 2018

Can you provide a screenshot of the error you're getting? Maybe I don't fully understand what you're talking about. I think you're error is even though you have checked the captcha it still shows the error:

Please, confirm that you are not a robot!

Correct? You're saying the hook does not read the captcha has been checked? Going on almost a week for me with no errors!

brian! · June 7, 2018

precisely that error (output is different because it's using a language string), but yes it's not detecting the captcha has been checked...

if it's working for you, then I wouldn't worry about it - it could well be my dev, though built-in recaptcha (at homepage, cart etc) is working without any issues.

vsooe · June 7, 2018

Hello, can i use this hook to show captcha not on order form, but on contact form/new ticket submission when user is not logged in? I have v. 6.3

robetus · June 7, 2018

5 hours ago, brian! said:

if it's working for you, then I wouldn't worry about it - it could well be my dev, though built-in recaptcha (at homepage, cart etc) is working without any issues.

Not worried, I just wanted to help you get it working is all.

robetus · June 7, 2018

4 hours ago, postcd said:

Hello, can i use this hook to show captcha not on order form, but on contact form/new ticket submission when user is not logged in? I have v. 6.3

Setup > General Settings > Security Tab > Captcha Form Protection > Choose "Always On"

brian! · June 7, 2018

4 hours ago, postcd said:

Hello, can i use this hook to show captcha not on order form, but on contact form/new ticket submission when user is not logged in? I have v. 6.3

I don't think either hook would work for that, not least because it's using the ShoppingCartValidateCheckout hook, and you're not in the cart...

the modified template that I gave you, in the other thread, should work for the contact and submit pages...

in another thread, I did post a hook that would add a required checkbox to the contact page, that would effectively prevent auto-submission (at least until they use a script to autotick the box lol) - so it's not a valid security replacement for captcha, but thought it worth mentioning.

30 minutes ago, robetus said:

Not worried, I just wanted to help you get it working is all.

and i'm genuinely grateful that you are trying!

Adding recaptcha v2 to the checkout page

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Similar Content

Important Information