AC-7836: Google ReCaptcha not working on checkout page.

Author: admanesachin

ReCaptchaCheckout/view/frontend/web/js/model/place-order-mixin.js

@@ -30,8 +30,15 @@ define([
                 });
                 //Trigger ReCaptcha validation
                 recaptchaRegistry.triggers['recaptcha-checkout-place-order']();
-                //remove listener so that place order action is only triggered by the 'Place Order' button
-                recaptchaRegistry.removeListener('recaptcha-checkout-place-order');
+
+                if (
+                    !recaptchaRegistry._isInvisibleType.hasOwnProperty('recaptcha-checkout-place-order') ||
+                    recaptchaRegistry._isInvisibleType['recaptcha-checkout-place-order'] === false
+                ) {
+                    //remove listener so that place order action is only triggered by the 'Place Order' button
+                    recaptchaRegistry.removeListener('recaptcha-checkout-place-order');
+                }
+
                 return recaptchaDeferred;
             }
 

ReCaptchaWebapiUi/view/frontend/web/js/webapiReCaptcha.js

@@ -43,14 +43,16 @@ define(
                 var self = this,
                     trigger;
 
+                trigger = function () {
+                    self.reCaptchaCallback(grecaptcha.getResponse(widgetId));
+                };
+                registry._isInvisibleType[this.getReCaptchaId()] = false;
+
                 if (this.getIsInvisibleRecaptcha()) {
                     trigger = function () {
                         grecaptcha.execute(widgetId);
                     };
-                } else {
-                    trigger = function () {
-                        self.reCaptchaCallback(grecaptcha.getResponse(widgetId));
-                    };
+                    registry._isInvisibleType[this.getReCaptchaId()] = true;
                 }
 
                 if (this.autoTrigger) {

ReCaptchaWebapiUi/view/frontend/web/js/webapiReCaptchaRegistry.js

@@ -26,6 +26,11 @@ define([], function () {
          */
         _listeners: {},
 
+        /**
+         * recaptchaId: bool map
+         */
+        _isInvisibleType: {},
+
         /**
          * Add a listener to when the ReCaptcha finishes verification
          * @param {String} id - ReCaptchaId

dev/tests/js/jasmine/tests/app/code/Magento/ReCaptchaCheckout/frontend/js/model/place-order-mixin.test.js

@@ -41,38 +41,40 @@ define(['squire'
 
             expect(placeOrderMixins['Magento_ReCaptchaCheckout/js/model/place-order-mixin']).toBe(true);
         });
+    });
+
+    describe('Magento_Checkout/js/action/redirect-on-success is called', function () {
+        var recaptchaId = 'recaptcha-checkout-place-order',
+            messageContainer = jasmine.createSpy('messageContainer'),
+            payload = {},
+            serviceUrl = 'test',
 
-        it('Magento_Checkout/js/action/redirect-on-success is called', function () {
-            let recaptchaId = 'recaptcha-checkout-place-order',
-                messageContainer = jasmine.createSpy('messageContainer'),
-                payload = {},
-                serviceUrl = 'test',
-
-                /**
-                 * Order place action mock
-                 *
-                 * @returns {{fail: fail, done: (function(Function): *)}}
-                 */
-                action =  function () {
-                    return {
-                        /**
-                         * Success result for request
-                         *
-                         * @param {Function} handler
-                         * @returns {*}
-                         */
-                        done: function (handler) {
-                            handler();
-                            return this;
-                        },
-
-                        /**
-                         * Fail result for request
-                         */
-                        fail: function () {}
-                    };
+            /**
+             * Order place action mock
+             *
+             * @returns {{fail: fail, done: (function(Function): *)}}
+             */
+            action =  function () {
+                return {
+                    /**
+                     * Success result for request
+                     *
+                     * @param {Function} handler
+                     * @returns {*}
+                     */
+                    done: function (handler) {
+                        handler();
+                        return this;
+                    },
+
+                    /**
+                     * Fail result for request
+                     */
+                    fail: function () {}
                 };
+            };
 
+        it('Only PlaceOrder button triggers place order action', function () {
             /**
              * Triggers declared listener
              *
@@ -93,9 +95,39 @@ define(['squire'
             registry.addListener = function (id, func) {
                 registry._listeners[id] = func;
             };
+
             registry.removeListener = jasmine.createSpy();
             mixin()(action, serviceUrl, payload, messageContainer);
             expect(registry.removeListener).toHaveBeenCalledWith(recaptchaId);
         });
+
+        it('PlaceOrder Listener is called for invisible google recaptcha', function () {
+            /**
+             * Triggers declared listener
+             *
+             * @returns {*}
+             */
+            registry.triggers[recaptchaId] = function () {
+                if (registry._listeners[recaptchaId] !== undefined) {
+                    return registry._listeners[recaptchaId]('token');
+                }
+            };
+
+            /**
+             * Registers a listener
+             *
+             * @param id
+             * @param func
+             */
+            registry.addListener = function (id, func) {
+                registry._listeners[id] = func;
+            };
+
+            registry._isInvisibleType[recaptchaId] = true;
+            registry.removeListener = jasmine.createSpy();
+            mixin()(action, serviceUrl, payload, messageContainer);
+
+            expect(registry.removeListener).not.toHaveBeenCalled();
+        });
     });
 });