Accept Hosted reCAPTCHA Block covers Pay button

[Cognecy]

Has anyone solved the issue with the Accept Hosted (iframe/modal/lightbox method) reCAPTCHA block covering the Pay/Cancel Buttons?

There was a post on this a while ago but it did not seem like it was ever resolved and replies to that post were not allowed for me.

The issue is that when enabling the CAPTCHA feature for the iFrame window ("settingName": "hostedPaymentSecurityOptions"), the reCAPTCHA box covers the "PAY/Cancel" buttons.  If you close and re-open the popup, it is fine and the CAPTCHA block is above the Pay/Cancel Buttons.

I have reviewed the integration code in detail and there is no variance from the recommendations in the integration guide.  It seems the response that comes back from AuthNet has a [action=resizeWindow] parameter that gets passed in that tells the iFrame how big to make the popup window on "FIRST LOAD".  This value is not enough to account for the hight+padding of the reCAPTCHA block so it ends up overlayed on top of the PAY/Cancel buttons.  As I mentioned previously, if you close and then re-open the payment window, the sizing is correct since we already have the token response therefore the automatic sizing of the window is then applied.

Any suggestions or fixes would be most appreciated as this is impacting customer experience for several of my hosting customers.

[Cognecy]

I had hoped this developer's forum would have been more active but going through the posts I see the vast majority of posts go unanswered!  Regardless, I believe I found a solution to this issue or at a minimum, a viable work-around.

To review ... As I stated in my original post, AuthNet sends a [action=resizeWindow] parameter with the token response based on the options you have enabled (e.g. set to "true").  I suppose is to account for all the addon blocks in the modal/iFrame popup window.  This resize parameter overrides the preset initial size of this popup window.  In the case of enabling CAPTCHA, the parameter value they send does not account for the size (height) of that reCAPTCHA block.  The behavior is the PAY/Cancel buttons briefly appear and then the reCAPTCHA block is loaded but, without enough space, it ends up overlaying on top of the PAY/Cancel buttons.  This is only on first load.  If you close and re-open the payment window, it works properly as the session is open and you already have the token response which is not expired.  Annoying and certainly confusing for customers and their online experience.

To get around this issue I needed to place a buffer in the popup window that could not be ignored.  If you review the integration code sample for Accept Hosted you will see the "case" statement for resizing the window

		case "resizeWindow":
			var w = parseInt(params["width"]);
			var h = parseInt(params["height"]);
			var ifrm = document.getElementById("iframeAuthorizeNet");
			ifrm.style.width = w.toString() + "px";
			ifrm.style.height = h.toString() + "px";
			centerPopup();
			break;

The second directive of this case statement is:

var h = parseInt(params["height"]);

Since the parameter is being parsed as an Int, I used simple math to add a buffer to this value.  I changed that line to this:

var h = parseInt(params["height"])+70;

 The result is the form now loads properly on the First load.  I have tested this on both Desktop and Mobile and it does not create much (if any) blank space on the form popup window.

I would like to have some feedback from AuthNet on this or at a minimum, some other developers in the community.