Captchas not completing client-side check

[samroberts707]

Describe the bug

I'm integrating a form to signup for a newsletter, it has 4 fields, two text for name, an email and a consent. We're also integrating with Mailchimp which is working fine, the issue arises when trying to add any form of Captcha to the form.

I've tried both reCaptcha and hCaptcha. (Not both at the same time in case of conflicts). When submitting the form every submission gets marked as spam, the reason given is "Client-side token missing.". Site keys have been set using .env variables the same as I have countless times before.

I've checked the console and no error for either is being thrown before or after the submission. I've double checked the URLs provided for both services to work and they are correct.

I'm using the craft.formie.renderForm() function to render the form to the template and all the fields are rendered correctly. When Captcha's are disabled the forms submit perfectly fine and send data through to Mailchimp.

The only difference I can think of with this form opposed to previous times i've used Formie is this is on a Commerce site and something may be conflicting?

Steps to reproduce

1. Create a simple 4 field Formie form. Fields mentioned are above. All are required.
2. Add Mailchimp Integration
3. Add either reCaptcha or hCaptcha and then submissions start failing

Form settings

• Multi-page form: No
• Submission Method: Both Ajax and Page Reload
• Client-side Validation: Yes
• Custom Form Templates: No

Craft CMS version

5.5.9

Plugin version

3.0.20

Multi-site?

No

Additional context

No response

[engram-design]

So that error message means that the JS on the client-side was unable to generate a token with the captcha provider when the submit button was pressed, and it wasn't passed on to the server to verify.

I can confirm on my end that those captchas are working correctly.

Can you let me know if there's any JS errors on your front-end? Particularly, when submitting the form.

Another thing to check is the payload sent to the server. This is easiest in Ajax mode for the form, where you can inspect the network request in your web developer tools to see what's being sent to the server.

[samroberts707]

I checked my console and there are no errors before form submission, this gets printed after I submit the form.

My Payload doesn't contain a g-captcha-response value. Double checked the reCaptcha integration is enabled for this form and enabled "Show on All pages" too just to make sure.

[engram-design]

Thanks for confirming that. What are your captcha settings (which reCAPTCHA version, placement), and just triple check that it's enabled globally, and for the form that you're trying to protect it with. Does the captcha actually render?

[samroberts707]

No problem, here is my reCaptcha integration settings:

And the settings for the corresponding form:

I don't see any reCaptcha elements being rendered to the page.

[engram-design]

All seems to be in order based on your settings, but seems odd that the captcha isn't showing. Likely part of the problem.

What's the "Badge Type" set to in the captcha settings?

Is the page cached or anything? I note you mentioned using the renderForm() function, so it seems very strange that's not working out of the box for captchas.