Site icon MageComp Blog

How to Solve Issue of TypeError: Unable to Process Binding renderReCaptcha in Magento 2.4.3 and Magento 2.4.3-P1

How to Solve Issue of TypeError Unable to Process Binding renderReCaptcha in Magento 243 and Magento 243 P1

Hello Magento Friends,

Today I am here with a very important and useful Magento solution for you. How to Solve Issue of TypeError: Unable to Process Binding renderReCaptcha in Magento 2.4.3 and Magento 2.4.3-P1.

When you upgrade to Magento 2.4.3, the JS Knockout throws the following error on the checkout.

Uncaught TypeError: Unable to process binding “afterRender: function(){return renderReCaptcha() }”

When you have disabled the Magento CAPTCHA on the storefront, this error occurs. Let us know how to solve the issue of RECAPTCHA on the checkout page.

Steps to Solve Issue of TypeError in Magento 2.4.3:

Step 1: Create requirejs-config.js in the below path

app\code\Vendor\Extension\view\frontend\

Now add the code as follows

var config = {
    config: {
        mixins: {
            'Magento_ReCaptchaFrontendUi/js/reCaptcha': {
                'Vendor_Extension/js/recaptcha-mixin': true
            }
        }
    }
};

Step 2: Create recaptcha-mixin.js in the below path

app\code\Vendor\Extension\view\frontend\web\js\

And add the below code

define([
    'uiComponent',
    'jquery',
    'ko',
    'underscore',
    'Magento_ReCaptchaFrontendUi/js/registry',
    'Magento_ReCaptchaFrontendUi/js/reCaptchaScriptLoader',
    'Magento_ReCaptchaFrontendUi/js/nonInlineReCaptchaRenderer'
], function(Component, $, ko, _, registry, reCaptchaLoader, nonInlineReCaptchaRenderer) {
    'use strict';

    return function(Component) {
        return Component.extend({
            initCaptcha: function () {
               //here is check for RECAPTCHA settings
                if (typeof this.settings === 'undefined')
                {
                    return;
                }
                          
                var $parentForm,
                    $wrapper,
                    $reCaptcha,
                    widgetId,
                    parameters;

                if (this.captchaInitialized)
                {
                    return;
                }

                this.captchaInitialized = true;
                             
                $wrapper = $('#' + this.getReCaptchaId() + '-wrapper');
                $reCaptcha = $wrapper.find('.g-recaptcha');
                $reCaptcha.attr('id', this.getReCaptchaId());

                $parentForm = $wrapper.parents('form');

                parameters = _.extend(
                    {
                        'callback': function (token) { // jscs:ignore jsDoc
                            this.reCaptchaCallback(token);
                            this.validateReCaptcha(true);
                        }.bind(this),
                        'expired-callback': function () {
                            this.validateReCaptcha(false);
                        }.bind(this)
                    },
                    this.settings.rendering
                );

                if (parameters.size === 'invisible' && parameters.badge !== 'inline')
                {
                    nonInlineReCaptchaRenderer.add($reCaptcha, parameters);
                }

                
                widgetId = grecaptcha.render(this.getReCaptchaId(), parameters);
                this.initParentForm($parentForm, widgetId);

                registry.ids.push(this.getReCaptchaId());
                registry.captchaList.push(widgetId);
                registry.tokenFields.push(this.tokenField);
            },

            getIsInvisibleRecaptcha: function ()
            {
                // checking getIsInvisibleRecaptcha  settings
                if (typeof this.settings === 'undefined')
                {
                    return;
                }              
                return this.settings.invisible;
            }
        });
    }
});

Final Words:

This way you can simply Solve the Issue of TypeError: Unable to Process Binding renderReCaptcha in Magento 2.4.3 and Magento 2.4.3-P1. If the error is still not resolved, you can reach me via the comment box. Share the article with your developer friends to help them get rid of Uncaught TypeError in Magento 2.4.3. 

Happy Coding!

Exit mobile version