fix: v2 widget in modal checkout

[dkoo]

All Submissions:

• Have you followed the Newspack Contributing guideline?
• Does your code follow the WordPress' coding standards and VIP Go coding standards?
• Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

In Woo checkout, certain actions will trigger a Woo updated_checkout or checkout_error jQuery event, which will destroy and recreate DOM elements inside the checkout form, causing our reCAPTCHA v2-related event listeners to also be destroyed. When this happens, the checkout form is no longer protected by reCAPTCHA, but since #3644 does a server-side reCAPTCHA verification, it's missing the token required to verify and thus returns an error that makes it impossible to complete checkout.

This PR should fix the issue with the following changes:

• Move the check for modal checkouts to decide whether to verify the reCAPTCHA token server-side from the Recaptcha::can_use_captcha() method to Recaptcha::verify_recaptcha_on_checkout(): this ensures that our own RAS auth/registration forms + modal checkout forms all do a server-side reCAPTCHA check, but a standard non-modal checkout does not (we should fix this ASAP, though)
• Always render v2 widgets for every form we handle as direct children of the document.body element, instead of inside the form itself: this will ensure that the widget remains in the DOM after updated_checkout or checkout_error events
• Upon successfully completing a v2 widget challenge, ensure that the form data being submitted actually has the success token (it may not during checkout since the hidden input may have been destroyed or lost its value from a updated_checkout or checkout_error event between when the submit button is clicked and the data is posted to the server)

How to test the changes in this Pull Request:

1. Enable/connect reCAPTCHA v2 and make sure the "Security preference" option in reCAPTCHA settings (in Google's dashboard) is turned all the way up to ensure you will always be challenged

3. Test auth modal (registration only), Newsletter Subscription Form, and Registration blocks: confirm all present a v2 widget challenge, and all submit the form after completing the challenge (successfully if required fields are filled out, with errors if not)
4. Test modal checkout: confirm that when submitting the payment details form (modal step 2), you are always presented with a v2 widget challenge, and that the form always submits after completing the challenge (successfully if checkout data passes validation, with errors if not)
5. Test modal checkout a few more times, making sure to submit the form with errors (e.g. without filling out required payment fields or with invalid values), after checking/unchecking the "cover fees" checkbox, after selecting different payment gateway options, etc. All of these actions will trigger a Woo updated_checkout or checkout_error jQuery event, which should now also trigger our JS to reattach reCAPTCHA-related event listeners to the form and its children.

Other information:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you written new tests for your changes, as applicable?
• Have you successfully ran tests with your changes locally?

[dkoo]

@miguelpeixe I think dca8d9a should fix the issues you were seeing in Safari—let me know!

[miguelpeixe]

Good call splitting the code. I was not able to get reCaptcha to prompt me a challenge on Safari or Chrome, but did on Firefox and it's working as expected.

The code looks good and I confirmed via @chickenn00dle test that the refactor into an intersection observer fixes the Safari issue.