cancel
Showing results for 
Search instead for 
Did you mean: 

Accept.JS Hosted Payment Form Styles

Hello!

We are using the AcceptJS hosted form in an application and found an odd behavior. When the form is displayed or hidden, the styles applied to show the form are _opacity_ and _visibility_. This is causing issues with how the form is being rendered on mobile devices (Specifically in the Safari and Chrome browsers on iOS). The _div_ element that contains the form (id="AcceptUIContainer") seems to still be rendered over the content on the page. This makes all of the content under this element visible but the user cannot interact with these elements.

 

I wrote up a quick demo to illustrate the issue: 

 

<!DOCTYPE html>
<html>

<head>
  <script type="text/javascript" src="https://jstest.authorize.net/v3/AcceptUI.js" charset="utf-8"></script>
  <style>
    #clickBtn {
      margin-left:45%;
    }
  </style>
</head>

<body>
  <h1>Hello Authorize.NET!</h1>
  <p>
    Click the link to open the Authorize.NET Accept.js window. Exit the window by either entering test information or by clicking the exit button at the top right. At this point try to click the button that was obscured by the modal window.
  </p>
  <p>
    On desktop environments there is no issue. On mobile environments, the modal window is blocking the button from being clicked.(Specifically in the Sarafi browser on iOS)
  </p>
  <br/>
  <br/>
  <a class="AcceptUI" href="#">Click to pay</a>
  <br/>
  <br/>
  <div id="btnBox">
    <button id="clickBtn" onclick="displayProperties()">Click Me</button>
  </div>
  <br/>
  <br/>
  <div id="display">
  </div>
  
  <script type="text/javascript">
    let count = 0;
    function displayProperties() {
      const display = document.getElementById('display');
      display.innerHTML += ++count + ' clicked<br/>';
    }
  </script>
  <p>
    In some in-house testing, adding <code>display: none</code> to the <code>#AcceptUIContainer</code> and <code>#AcceptUIContainer.show</code> styles will remediate this issue. The same fix is necessary for the <code>#AcceptUIBackground</code> styles. The last part of the solution will be to remove the <code>display: block</code> style from the inline styles on the <code>AcceptUIContainer</code> and <code>AcceptUIBackground</code> HTML elements.
  </p>
</body>

</html>

 

It looks like some small changes in the styling would solve this issue.

 

If any more information would be helpful, let me know. 

 

Thanks!

dillon-adams
Member
3 REPLIES 3

So here are two reproductions

 

https://acceptui.azurewebsites.net/

https://acceptui.azurewebsites.net/index2.html

 

Link one: https://acceptui.azurewebsites.net/ From Chrome on the desktop you can click the "Click Me" button. When browsing from an IOS device (we used iOS 12.1.4 and Chrome ver 73.0.3) and could not click the "Click Me" button.

 

Link two: https://acceptui.azurewebsites.net/index2.html This link does not have AcceptUI script linked and you could click the "Click Me" button on both enviroments - desktop and IOS device.

cdowney
Member

Adding this bit of CSS to my html file worked around the issue for me:

 

  #AcceptUIContainer {max-width:0}#AcceptUIContainer.show {max-width:100%}

 

If you look at the divs that are created by Accept.js you can see how this fixes the issue. It will break if they set a max-width in their style sheet.

It would appear that iOS treats visibilily: hidden and opacity: 0 differently than other browsers.  Interaction events still work on such elements in iOS where they do not on others.

rkajbaf
Member