Who Me Too'd this topic

Authorize.Net API questions and help with your payment integration.

Member
Posts: 2
Registered: ‎05-12-2017
Accept Hosted in iFrame: resizeWindow is not sent when form height changes because of window resize

I'm currently evaluating the possibility of using Accept Hosted form inside an iFrame in one of my projects. I've run into an issue while building a small test app, which, I believe, can also be reproduced in the Accept Sample App.

 

In step 3 of the "Accept Hosted Step-by-Step" guide there is a remark regarding "resizeWindow" message:

 

"An important message to receive is the resizeWindow message. Because our Accept Hosted form is responsive, we need to let your application know when the iframe should be resized. For example, when the form becomes single column on a phone, the height is increased and this height increase is sent in a ResizeWindow message."

 

However, in my tests this does not appear to be the case: when the iFrame that hosts the payment form is set to have a width as a percentage of the browser window width and the browser is resized so that the form changes from a two-column layout to a single-column one, the "resizeWindow" message is not sent. This results in both "Pay" and "Cancel" buttons being pushed below the visible area of the iFrame, making the form unusable. If a user manipulates the form in such a way that does trigger "resizeWindow" message (for example, if user checks the "bank account" or "credit card" radio button), the height is updated so that all form controls are visible again.

Here are the steps to reproduce the issue using Accept Sample App:

  1. Install and run the sample app as described in the "How to Use the Sample App" section
  2. Login with a customer profile ID and navigate to "pay" tab
  3. Observe that the payment form is loaded, it has a two-column layout and both "pay" and "cancel" buttons are visible
  4. Change the browser window width so that the form switches from two- to one-column layout
  5. Observe that while window width is changing the form height does not change, while certain inputs and both "pay" and "cancel" buttons are pushed down and become invisible.
  6. Select "Bank account"  payment option at the top of the form
  7. Observe the form height now changed and all controls are now visible again.

Is there a way to have the form send the "resizeWindow" notification in step 5? 

 

While I certainly could listen to "resize" event on window in my host application, I don't believe that I can query the height of the payment form because of the browser restrictions on the cross-domain iFrame contents access. 

 

I would really appreciate any suggestions on the topic. 

 

Thanks,

Maxim. 

Who Me Too'd this topic