05-12-2017 09:50 AM
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:
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.
06-01-2017 03:21 PM
It's been a while since you posted this question, are you still experiencing this issue or did you find a solution?
06-02-2017 02:12 AM
I was not able to find a solution, mainly because of the difficulties of determining an actual height of the content inside the iframe. I assume that one approach would be to have payment form itself detect the viewport width change and send the same resizeWindow message it does when the height of the content changes because of other reasons, such as switching between payment methods (CC or check). But that would require changes on the Accept Hosted side.
We've also considered using a fixed width container to host the iframe for our project, thus circumventing the whole issue.
Ultimately (this issues was not a deciding factor), we decided to spend some extra time and build a custom payment form using the Accept.js instead.
08-09-2017 08:26 AM
The only time I see a resizeWindow message is when I click the radio button to change from credit card mode to bank account mode or vice-versa.
I have never seen a resizeWindow message when resizing the window.
08-09-2017 05:34 PM
I'll look into this. I honestly don't know whether it should be sending resize messages every time the layout changes or just when it's first loaded. I'm guessing the thinking might be that it needs to send its size when it's first loaded so you can set the iframe size appropriately.
It's going to load up at different sizes depending on whether it's loaded on mobile or desktop, for example, so setting the size at that time is important. However, it might be being assumed that the window size is not typically changed during the payment.
I'll have to double-check with some folks to see what the design was, whether it's working as designed, and clarify in documentation as appropriate.
04-18-2018 11:05 AM
Sorry to resurrect an old thread, but I don't see a resolution here, and I'm having the same problem as the OP. Accept.js and AcceptUI.js won't work for us because of PCI and payment flow issues.
@Aaron wrote, "...it might be being assumed that the window size is not typically changed during the payment."
This assumption doesn't always hold, particularly when you consider orientation changes on tablets and phones. Starting in landscape and rotating to portrait after the iframe is rendered can make the buttons overflow out of the bottom.
Is there any resolution or workaround? Iframes are known to be quirky in responsive designs. I'm continuing my research and experimentation, but I'm hoping someone here can save me.