ACP2E-1338: Google reCaptcha in Incorrect position

Author: bubasuma

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

@@ -4,23 +4,24 @@
  */
 
 /* eslint-disable max-nested-callbacks */
-/* eslint-disable max-depth */
 
 define([
     'jquery',
     'mage/utils/wrapper',
-    'Magento_ReCaptchaWebapiUi/js/webapiReCaptchaRegistry',
-    'Magento_Checkout/js/model/quote'
-], function ($, wrapper, recaptchaRegistry, quote) {
+    'Magento_ReCaptchaWebapiUi/js/webapiReCaptchaRegistry'
+], function ($, wrapper, recaptchaRegistry) {
     'use strict';
 
     return function (placeOrder) {
         return wrapper.wrap(placeOrder, function (originalAction, serviceUrl, payload, messageContainer) {
             var recaptchaDeferred,
-                reCaptchaId;
+                reCaptchaId,
+                $activeReCaptcha;
 
-            if (quote.paymentMethod()) {
-                reCaptchaId = 'recaptcha-checkout-place-order-' + quote.paymentMethod().method;
+            $activeReCaptcha = $('.recaptcha-checkout-place-order:visible .g-recaptcha');
+
+            if ($activeReCaptcha.length > 0) {
+                reCaptchaId = $activeReCaptcha.last().attr('id');
             }
 
             if (reCaptchaId !== undefined && recaptchaRegistry.triggers.hasOwnProperty(reCaptchaId)) {

ReCaptchaCheckout/view/frontend/web/js/reCaptchaCheckout.js

@@ -11,6 +11,9 @@ define(
     function (Component, $) {
         'use strict';
 
+        var reCaptchaIds = new WeakMap(),
+            uuid = 0;
+
         return Component.extend({
             defaults: {
                 template: 'Magento_ReCaptchaCheckout/reCaptcha',
@@ -38,7 +41,10 @@ define(
              * @returns {String}
              */
             getReCaptchaIdFor: function (method) {
-                return this.getReCaptchaId() + '-' + method.getCode();
+                if (!reCaptchaIds.has(method)) {
+                    reCaptchaIds.set(method, this.getReCaptchaId() + '-' + uuid++);
+                }
+                return reCaptchaIds.get(method);
             },
 
             /**

ReCaptchaCheckout/view/frontend/web/template/reCaptcha.html

@@ -5,7 +5,7 @@
  */
  -->
 <!-- ko if: (isCheckoutReCaptchaRequiredFor($parents[1]))-->
-<div data-bind="{
+<div class="recaptcha-checkout-place-order" data-bind="{
     attr: {
         'id': getReCaptchaIdFor($parents[1]) + '-wrapper'
     },