Issue resolved in 2.3.3 but if you want to fix it in 2.3.2 follow the steps below:
create one module with the following structure
1) module.xml
<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Levosoft_MSPRecaptchaFixLang" setup_version="1.0.0"/>
</config>
2) requirejs-config.js
var config = {
map: {
'*': {
'MSP_ReCaptcha/js/reCaptcha': "Levosoft_MSPRecaptchaFixLang/js/reCaptcha",
}
},
};
3) reCaptcha.js
'use strict';
define(
[
'uiComponent',
'jquery',
'ko',
'MSP_ReCaptcha/js/registry'
],
function (Component, $, ko, registry, undefined) {
return Component.extend({
defaults: {
template: 'MSP_ReCaptcha/reCaptcha',
reCaptchaId: 'msp-recaptcha'
},
_isApiRegistered: undefined,
initialize: function () {
this._super();
this._loadApi();
},
/**
* Loads recaptchaapi API and triggers event, when loaded
* @private
*/
_loadApi: function () {
var element, scriptTag;
if (this._isApiRegistered !== undefined) {
if (this._isApiRegistered === true) {
$(window).trigger('recaptchaapiready');
}
return;
}
this._isApiRegistered = false;
// global function
window.globalOnRecaptchaOnLoadCallback = function () {
this._isApiRegistered = true;
$(window).trigger('recaptchaapiready');
}.bind(this);
element = document.createElement('script');
scriptTag = document.getElementsByTagName('script')[0];
element.async = true;
element.src = 'https://www.google.com/recaptcha/api.js'
+ '?onload=globalOnRecaptchaOnLoadCallback&render=explicit';
if (this.settings === undefined || this.settings.lang === null || this.settings.lang === undefined) {
element.src = element.src + '&hl=' + window.navigator.language.replace(/-.*/, '');
} else {
element.src = element.src + '&hl=' + this.settings.lang;
}
scriptTag.parentNode.insertBefore(element, scriptTag);
},
/**
* Return true if reCaptcha is visible
* @returns {Boolean}
*/
getIsVisible: function () {
return this.settings.enabled[this.zone];
},
/**
* Checking that reCaptcha is invisible type
* @returns {Boolean}
*/
getIsInvisibleRecaptcha: function () {
return this.settings.size !== 'invisible';
},
/**
* Recaptcha callback
* @param {String} token
*/
reCaptchaCallback: function (token) {
if (this.settings.size === 'invisible') {
this.tokenField.value = token;
this.$parentForm.submit();
}
},
/**
* Initialize reCaptcha after first rendering
*/
initCaptcha: function () {
var me = this,
$parentForm,
$wrapper,
$reCaptcha,
widgetId,
listeners;
if (this.captchaInitialized) {
return;
}
this.captchaInitialized = true;
/*
* Workaround for data-bind issue:
* We cannot use data-bind to link a dynamic id to our component
* See: https://stackoverflow.com/questions/46657573/recaptcha-the-bind-parameter-must-be-an-element-or-id
*
* We create a wrapper element with a wrapping id and we inject the real ID with jQuery.
* In this way we have no data-bind attribute at all in our reCaptcha div
*/
$wrapper = $('#' + this.getReCaptchaId() + '-wrapper');
$reCaptcha = $wrapper.find('.g-recaptcha');
$reCaptcha.attr('id', this.getReCaptchaId());
$parentForm = $wrapper.parents('form');
me = this;
// eslint-disable-next-line no-undef
widgetId = grecaptcha.render(this.getReCaptchaId(), {
'sitekey': this.settings.siteKey,
'theme': this.settings.theme,
'size': this.settings.size,
'badge': this.badge ? this.badge : this.settings.badge,
'callback': function (token) { // jscs:ignore jsDoc
me.reCaptchaCallback(token);
me.validateReCaptcha(true);
},
'expired-callback': function () {
me.validateReCaptcha(false);
}
});
if (this.settings.size === 'invisible') {
$parentForm.submit(function (event) {
if (!me.tokenField.value) {
// eslint-disable-next-line no-undef
grecaptcha.execute(widgetId);
event.preventDefault(event);
event.stopImmediatePropagation();
}
});
// Move our (last) handler topmost. We need this to avoid submit bindings with ko.
listeners = $._data($parentForm[0], 'events').submit;
listeners.unshift(listeners.pop());
// Create a virtual token field
this.tokenField = $('<input type="text" name="token" style="display: none" />')[0];
this.$parentForm = $parentForm;
$parentForm.append(this.tokenField);
} else {
this.tokenField = null;
}
registry.ids.push(this.getReCaptchaId());
registry.captchaList.push(widgetId);
registry.tokenFields.push(this.tokenField);
},
validateReCaptcha: function (state) {
if (this.settings.size !== 'invisible') {
return $(document).find('input[type=checkbox].required-captcha').prop("checked", state);
}
},
/**
* Render reCaptcha
*/
renderReCaptcha: function () {
var me = this;
if (this.getIsVisible()) {
if (window.grecaptcha && window.grecaptcha.render) { // Check if recaptcha is already loaded
me.initCaptcha();
} else { // Wait for recaptcha to be loaded
$(window).on('recaptchaapiready', function () {
me.initCaptcha();
});
}
}
},
/**
* Get reCaptcha ID
* @returns {String}
*/
getReCaptchaId: function () {
return this.reCaptchaId;
}
});
}
);
4) registration.php
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Levosoft_MSPRecaptchaFixLang',
__DIR__
);
That's it run setup upgrade and clear cache.
