Implementing Google Recaptcha v2 on checkout fails during a specific scenario

[DinoDevRex]

Hi,

I have been implementing Google ReCaptcha v2 on the checkout page and have been able to get it working in the majority of cases but am running into an issue during one particular scenario.

I have implemented what I have so far using the Action Delegate Pipeline Integration. The reference can be found here.

The only time I have an issue is when doing the following.

1. Going to the Checkout page and filling out the billing, shipping, payment method, etc.
2. Ignoring the "I'm not a robot" ReCaptcha check box (in order to simulate a failed ReCapatcha submission).
3. Submitting the form by clicking the "Place Order" button and receiving the message that I need to fill out the Captcha which is returned from the BeforeCheckoutCompleted(..) method (as expected).

After completing the steps above and waiting from around 15 to 30 seconds, the ReCaptcha shows an error on the page which I can also see in the JavaScript console. The error rendered on the page is:

Could not connect to the reCAPTCHA service.

Please check your internet connection and reload to get a reCAPTCHA challenge.

and the error in the JavaScript console is:

Uncaught (in promise) Timeout

If I refresh the page then everything works fine unless I again "fail" the ReCaptcha. Finally, I did try running the grecaptcha.reset(); function in the console when encountering this error but the result is a valid ReCaptcha for about 15 to 30 seconds before it throws the same error.

I was curious if anyone else has encountered this issue and could perhaps point me in the right direction for getting it resolved.

Any help would be much appreciated,
Thanks

[WillStrohl]

So far, this appears to be the direction I'd start to take first. However, not having implemented this specific use case, I think you need a client-side call for ReCATCPTCH, don't you? This would make the ADPI irrelevant for this update. The update would need to be in the viewset only... Right?

[DinoDevRex]

Hi Will,
Thanks for the reply.

Yes, I'm editing the Checkout/Index.cshtml file from a custom viewset. In that razor template I am able to get the ReCaptcha to render properly. The second area I'm editing is in a custom integration (via the Action Delegate Pipeline Integration). There I do the server side part of the ReCaptcha verification.

I thought that the method BeforeCheckoutCompleted(..) was the proper place to run the server side part of the ReCaptcha and that I may have been over looking something since it works properly outside of the scenario in my initial post.

It sounds I may need to encompass everything in the custom viewset razor template/controller instead of doing the ReCaptcaha server side validation in the ADPI method.