https://community.developer.cybersource.com/t5/Integration-and-Testing/Accept-Hosted-reCAPTCHA-Block-covers-Pay-button/m-p/89048#M56120 <P>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!&nbsp; Regardless, I believe I found a solution to this issue or at a minimum, a viable work-around.<BR /><BR />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").&nbsp; I suppose is to account for all the addon blocks in the modal/iFrame popup window.&nbsp; This resize parameter overrides the preset initial size of this popup window.&nbsp; In the case of enabling CAPTCHA, the parameter value they send does not account for the size (height) of that reCAPTCHA block.&nbsp; 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.&nbsp; This is only on first load.&nbsp; 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.&nbsp; Annoying and certainly confusing for customers and their online experience.<BR /><SPAN><BR />To get around this issue I needed to place a buffer in the popup window that could not be ignored.&nbsp; If you review the integration code sample for Accept Hosted you will see the "case" statement for resizing the window<BR /><BR /></SPAN></P><LI-CODE lang="markup"> 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;</LI-CODE><P><SPAN>The second directive of this case statement is:<BR /></SPAN></P><LI-CODE lang="markup">var h = parseInt(params["height"]);</LI-CODE><P><SPAN>Since the parameter is being parsed as an Int, I used simple math to add a buffer to this value.&nbsp; I changed that line to this:<BR /></SPAN></P><LI-CODE lang="markup">var h = parseInt(params["height"])+70;</LI-CODE><P><SPAN>&nbsp;The result is the form now loads properly on the First load.&nbsp; I have tested this on both Desktop and Mobile and it does not create much (if any) blank space on the form popup window.<BR /><BR />I would like to have some feedback from AuthNet on this or at a minimum, some other developers in the community.&nbsp;&nbsp;<BR /><BR /></SPAN></P> Wed, 20 Mar 2024 13:46:49 GMT Cognecy 2024-03-20T13:46:49Z https://community.developer.cybersource.com/t5/Integration-and-Testing/Accept-Hosted-reCAPTCHA-Block-covers-Pay-button/m-p/89034#M56109 <P>Has anyone solved the issue with the Accept Hosted (iframe/modal/lightbox method) reCAPTCHA block covering the Pay/Cancel Buttons?<BR /><BR />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.<BR /><BR />The issue is that when enabling the CAPTCHA feature for the iFrame window ("settingName": "hostedPaymentSecurityOptions"), the reCAPTCHA box covers the "PAY/Cancel" buttons.&nbsp; If you close and re-open the popup, it is fine and the CAPTCHA block is above the Pay/Cancel Buttons.<BR /><BR />I have reviewed the integration code in detail and there is no variance from the recommendations in the integration guide.&nbsp; 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".&nbsp; 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.&nbsp; 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.<BR /><BR />Any suggestions or fixes would be most appreciated as this is impacting customer experience for several of my hosting customers.</P><P><BR /><BR /><BR /></P> Mon, 18 Mar 2024 22:34:13 GMT https://community.developer.cybersource.com/t5/Integration-and-Testing/Accept-Hosted-reCAPTCHA-Block-covers-Pay-button/m-p/89034#M56109 Cognecy 2024-03-18T22:34:13Z https://community.developer.cybersource.com/t5/Integration-and-Testing/Accept-Hosted-reCAPTCHA-Block-covers-Pay-button/m-p/89048#M56120 <P>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!&nbsp; Regardless, I believe I found a solution to this issue or at a minimum, a viable work-around.<BR /><BR />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").&nbsp; I suppose is to account for all the addon blocks in the modal/iFrame popup window.&nbsp; This resize parameter overrides the preset initial size of this popup window.&nbsp; In the case of enabling CAPTCHA, the parameter value they send does not account for the size (height) of that reCAPTCHA block.&nbsp; 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.&nbsp; This is only on first load.&nbsp; 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.&nbsp; Annoying and certainly confusing for customers and their online experience.<BR /><SPAN><BR />To get around this issue I needed to place a buffer in the popup window that could not be ignored.&nbsp; If you review the integration code sample for Accept Hosted you will see the "case" statement for resizing the window<BR /><BR /></SPAN></P><LI-CODE lang="markup"> 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;</LI-CODE><P><SPAN>The second directive of this case statement is:<BR /></SPAN></P><LI-CODE lang="markup">var h = parseInt(params["height"]);</LI-CODE><P><SPAN>Since the parameter is being parsed as an Int, I used simple math to add a buffer to this value.&nbsp; I changed that line to this:<BR /></SPAN></P><LI-CODE lang="markup">var h = parseInt(params["height"])+70;</LI-CODE><P><SPAN>&nbsp;The result is the form now loads properly on the First load.&nbsp; I have tested this on both Desktop and Mobile and it does not create much (if any) blank space on the form popup window.<BR /><BR />I would like to have some feedback from AuthNet on this or at a minimum, some other developers in the community.&nbsp;&nbsp;<BR /><BR /></SPAN></P> Wed, 20 Mar 2024 13:46:49 GMT https://community.developer.cybersource.com/t5/Integration-and-Testing/Accept-Hosted-reCAPTCHA-Block-covers-Pay-button/m-p/89048#M56120 Cognecy 2024-03-20T13:46:49Z