magento2: JS error in console on checkout when recaptcha for checkout/placing order is not enabled

Preconditions (*)

  1. Magento 2.4.3
  2. ‘Stores > Configuration > Security > Google reCAPTCHA Storefront > Storefront > Enable for Checkout/Placing Order’ set to ‘No’ (that’s the default config)

Steps to reproduce (*)

  1. Add a product to cart
  2. Go to checkout
  3. Open element inspector, see the JS error

Expected result (*)

  1. No JS errors on checkout
  2. Besides not wanting to run into errors, I wouldn’t expect checkout to load any recaptcha JS when all the recaptcha options are not enabled.

Actual result (*)

  1. Error message from recaptcha JS:
knockout.js:3753 Uncaught TypeError: Unable to process binding "afterRender: function(){return renderReCaptcha() }"
Message: Cannot read property 'rendering' of undefined
    at UiClass.initCaptcha (reCaptcha.js:117)
    at UiClass.renderReCaptcha (reCaptcha.js:182)
    at afterRender (eval at createBindingsStringEvaluator (knockout.js:3221), <anonymous>:3:134)
    at init (after-render.js:17)
    at knockout.js:3730
    at Object.ignore (knockout.js:1563)
    at knockout.js:3729
    at Object.arrayForEach (knockout.js:168)
    at applyBindingsToNodeInternal (knockout.js:3715)
    at applyBindingsToNodeAndDescendantsInternal (knockout.js:3573)

Please provide Severity assessment for the Issue as Reporter. This information will help during Confirmation and Issue triage processes.

  • Severity: S0 - Affects critical data or functionality and leaves users without workaround.
  • Severity: S1 - Affects critical data or functionality and forces users to employ a workaround.
  • Severity: S2 - Affects non-critical data or functionality and forces users to employ a workaround.
  • Severity: S3 - Affects non-critical data or functionality and does not force users to employ a workaround.
  • Severity: S4 - Affects aesthetics, professional look and feel, “quality” or “usability”.

ps. I think severity should be higher, because any dev working om checkout will spot this, and will be looking for a fix. (I first checked all of my modules, themes and 3rd party modules: it’s time consuming.)

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Reactions: 6
  • Comments: 38 (25 by maintainers)

Most upvoted comments

Hi @mrtuvn I would give it P2: Checkout doesn’t break (the recaptcha component isn’t used, so the JS error doesn’t actually hurt) it’s not critical and no work-around is needed, which follows P3 description.

But this is awful for developers working on checkout: I have several custom ui components, layout processors and mixins on any checkout i work on. If there’s an issue after upgrading, I will first look at my customisations, then at third party modules, then Magento.

Imagine every dev going through this process after seeing this issue, that’s a lot of wasted time - and a lot of unhappy devs.

For anyone looking for a patch on Magento v2.4.3-p1

github-issue-33741.patch

diff --git a/vendor/magento/module-re-captcha-checkout/Block/LayoutProcessor/Checkout/Onepage.php b/vendor/magento/module-re-captcha-checkout/Block/LayoutProcessor/Checkout/Onepage.php
index 3ee2rd..8349152 111644
--- a/vendor/magento/module-re-captcha-checkout/Block/LayoutProcessor/Checkout/Onepage.php
+++ b/vendor/magento/module-re-captcha-checkout/Block/LayoutProcessor/Checkout/Onepage.php
@@ -79,7 +79,8 @@
             ['place-order-recaptcha']['settings'] = $this->captchaUiConfigResolver->get($key);
         } else {
             if (isset($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
-                ['payment']['children']['beforeMethods']['children']['place-order-recaptcha'])) {
+                ['payment']['children']['beforeMethods']['children']['place-order-recaptcha-container']['children']
+                ['place-order-recaptcha'])) {
                 unset($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
                     ['payment']['children']['beforeMethods']['children']['place-order-recaptcha-container']
                     ['children']['place-order-recaptcha']);

Hi @mrtuvn I would give it P2: Checkout doesn’t break (the recaptcha component isn’t used, so the JS error doesn’t actually hurt) it’s not critical and no work-around is needed, which follows P3 description.

@basvanpoppel ? install a clean instance of m2 you can’t checkout cause of those issues without reCaptcha configuration being enabled and valid means Magento2 does not work out of the box.

By default if extension is in system and is not configured to be used should mean no assets are included in storefront at all. Aim for this in your PR, thanks.

In addition to this:

  • adds a global place order mixin . what this does is that even if functionality is not configured , mixins are added in all cases see : https://github.com/magento/magento2/issues/15967
  • mixin has a hardcoded dependency to Magento_ReCaptchaWebapiUi not mentioned in module.xml that extension itself adds a mixin to jquery .o0 see: https://github.com/magento/magento2/issues/15967
  • adds a afterRender call to template forcing to init this functionality even if not configured or needed or each time the template is rendered , bad practice and hard UI dependency

I would have expected this to be released as a Magento Quality Patch, or is this issue too small for that?

Just updated from 2.4.3 to 2.4.3-p1 and still experiencing this error in checkout unless reCAPTCHA is configured.

image

Errors being thrown due to optional configuration not being configured wastes a lot of time. As covered above when updating between versions going through a smashing any log exceptions or console errors thrown post upgrade is standard process and this error in checkout is just another distraction and another pointless issue to investigate. I don’t know why errors are seen as acceptable, when the goal should be 0 errors and warnings.

Is there actually going to be a fix put in place for this?

Unbelievable !!! we need the information what is finally be done to fix this issue. We do not want to wait till 2.4.3-p1 is out as it could take a few weeks/months till it is released.

@chittima: could you leave some more detailed info please? Like providing commits that fixed this. Just closing an issue with so little explanation is a bit rude … Also: have you tested this while magento/security-package was installed? The comments above seem to indicate that the bug is part of that package.

Looks like issue is already fixed. The issue is not reproducible on the latest 2.4-develop

p2 label is lower priority than p1/p0. It’s depend on specific case of ticket. It’s not related with fix order deliver to next release. i’m not sure magento team will deliver this fixes as patch (seperate) or regular fix as normal. I saw a pull request related in the case owner disabled captcha from backend but captcha js files still request from server. But we already have PR for that here Put here for anyone interesting https://github.com/magento/magento2/pull/33200. In this specific issue imho captcha js should only available if user put both user/key pair value in backend

Fix for the impatient (Magento composer installations).

@basvanpoppel -this implements your suggested PR (https://github.com/magento/security-package/pull/302) changes 😃

/patches/composer/github-issue-33741.diff

diff --git a/Block/LayoutProcessor/Checkout/Onepage.php b/Block/LayoutProcessor/Checkout/Onepage.php
index 390bf712..b2d5b777 100644
--- a/Block/LayoutProcessor/Checkout/Onepage.php
+++ b/Block/LayoutProcessor/Checkout/Onepage.php
@@ -79,7 +79,8 @@ class Onepage implements LayoutProcessorInterface
             ['place-order-recaptcha']['settings'] = $this->captchaUiConfigResolver->get($key);
         } else {
             if (isset($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
-                ['payment']['children']['beforeMethods']['children']['place-order-recaptcha'])) {
+                ['payment']['children']['beforeMethods']['children']['place-order-recaptcha-container']['children']
+                ['place-order-recaptcha'])) {
                 unset($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
                     ['payment']['children']['beforeMethods']['children']['place-order-recaptcha-container']
                     ['children']['place-order-recaptcha']);
@@ -89,3 +90,4 @@ class Onepage implements LayoutProcessorInterface
         return $jsLayout;
     }
 }
+

/composer.json

{
(...)
    "extra": {
        (...)
        "patches": {
            (...)
            "magento/module-re-captcha-checkout": {
                "Fixed checkout reCaptcha disabling #33741": "patches/composer/github-issue-33741.diff"
            }
        }
    }
}

It’s actually pretty close, the release of 2.4.3-p1 😉

Thanks @sdzhepa for the extra info, however it would still be nice if somebody could figure out how it got fixed.

The fix already mentioned above links