search

AuthorizeNet / accept-sample-app

This application provides examples of how to use the Authorize.Net Accept products to integrate secure payment acceptance into your applications.
Other
98 stars 87 forks source link

resizeWindow not firing when window is resized #36

Open dustingraham opened 6 years ago

dustingraham commented 6 years ago

I have gotten the form to display in an iframe on my page following README-AcceptHosted.md

The communicator seems to be working. I have a console.log printing any time onmessage fires.

If I make the browser window wide or narrow it does not fire resizeWindow (bug)

If I start with a wide window, then drag to a narrow window, the submit button is clipped off. I can, at that point, click on the alternative payment method (i.e. toggle between credit card or bank account) and it triggers a resizeWindow event. This then shows the button. But the simple act of resizing the window does not seem to be triggering an event.

Sometimes users will maximize or resize their window, and I can't seem to figure out a way to handle that gracefully without being able to access the height of the hosted form.

dustingraham commented 6 years ago

screenshot from 2018-08-07 10-11-50

Same issue with downloading the sample app. The page was loaded in full screen, then the window was no longer full screen and the submit button clips off. I believe authorize.net hosted form needs to send a resize event when the window resizes, not just on load, or when payment type is changed.

skjbulcher commented 1 year ago

I'm having the same issue on my integration (using the sandbox). The iframe communicator isn't receiving any message at all when the iframe resizes. I have confirmed this with logging in the iframe communicator.

This is what my form looks like when starting wide, where the iframe width is >= 450px. This triggers the double-column layout. Practically speaking, there is dead space between 450px and 673px where the second column doesn't display properly, so we've tweaked the page never to allow the iframe to take those widths. image

Reducing the width of the page such that the iframe width is <= 449px hides the pay button This triggers the single-column layout on the authorize.net payment form, but without resizing the iframe, there is no pay button at all. It makes our developers look very sloppy. image

Of course resizing in the reverse direction (from a narrow page to a wide page) causes a large whitespace to appear, because the iframe isn't notifying the communicator the height has been reduced. image

skjbulcher commented 1 year ago

I should mention that on page load resizeWindow does trigger, and I am handling the event properly (hence the difference in height between my two examples)

mithatb commented 1 year ago

i have the same problem