Captcha Challenge 404 On Custom Forms

Shopify Discussion
,
8

Hi everyone. I have a simple and proper solution to this problem. No need to add spam to your inbox by disabling recaptcha through Shopify support.

First let’s bread down what the issue is.
Shopify has hooks that automatically add the recaptcha validation token to the form right before it submits. In order to mimic/replicate the functionality of a standard submit, you have to just add the recaptcha token to the form submission request. I’m going to use jQuery code here to make the code mode readable.

The first step

Unbind Shopify’s submit hook on the form. You can either do it by using “off()”:

$('#FORM_ID').off('submit');

Or you can create a non-submit button and run your custom form validation/etc on button click.

Second step
Attach your own submit callback.

$('#FORM_ID').on('submit', submitHandleCallback);

Third step
Call the RecaptchaV3 JS API yourself.

const submitHandleCallback = (e) => {
    e.preventDefault();

    // Here we fetch your site key.
    const siteKey = window.Shopify.recaptchaV3.siteKey;
    
    // Probably a good idea to do some form input validation here

    // Now get the recaptcha validation token
    grecaptcha.ready(function() {
        // do request for recaptcha token
        grecaptcha.execute(siteKey, {action:'validate_captcha'}).then(function(token) {
            // Serialize the form and add the token to the payload
           let payload = $('#FORM_ID').serializeObject();
           payload['g-recaptcha-response'] = token;
           
           // Now we have to payload, let's submit it.  But first we get the submit location
           const action = $('#FORM_ID').attr('action');
           $.ajax('POST', payload, function(){
               // Success action here
           },
           function(){
               // Error action here
           }
        });
    });
}

The issue is that you don’t get some kind of JSON or serialized payload. You get either an error header or a success header.

You can either parse out the result, or you can rely on the success/error responses.