How to manage the error message in Google reCaptcha v3 ( invisible )

We are implementing the "new" Google reCaptcha v3 in our website what's supposed to be invisible, but, if all is going ok with your implementation you will receive a sticky badge that verifies that your site is protected by this technology.

That one is not the problem, because Google provides information about how to hide it and the most important, if you could do it or not.

The problem comes when an user tries to go into your website with an old browser, the reCaptcha service stops working and also places this code at the end of your web:

<div>
  <div>
    <noscript>Enable JavaScript to get a reCAPTCHA challenge.<br></noscript>
    <div class="if-js-enabled">Get a <a href="https://support.google.com/recaptcha/?hl=en#6223828">compatible browser</a>
to get a reCAPTCHA challenge.
    </div>
    <br>
    <br>
    <a href="https://support.google.com/recaptcha#6262736" target="_blank">Why do I have to do this?</a>
  </div>
</div>

I did not found any documentation, thread, etc.. about how to manage this error..

I just want to manage this exception and hide this piece of code in the cleanest way possible.

Anyone else had to face with this error?

Solution

If you are just looking to hide this content from the user's view, you could do so with CSS:

.if-js-enabled, .if-js-enabled ~ * {
    display: none;
}

(I'll avoid the temptation to tell you to stop supporting old browsers and assume you have a good reason to do so 😁)

EDIT: Alternatively, if you don't want to rely on the class names from Google staying the same (even though they should in theory for a given version of reCAPTCHA), you could place the message within some other parent div. Assuming it is displayed in the same place as the badge, you could render the badge inline (see this answer) and apply the CSS rule to some custom class you assign to the parent div.