Stripe Payment popup in resizable iframe

Anvil Q&A
1

I have a static site in which I embed Anvil forms via iframes. I use data-anvil-embed for the iframes, so that their height resizes to match what the Anvil form needs as it resizes. This works splendidly for most use-cases, but breaks with the Stripe payment popup.

If the current Anvil form’s height is not tall enough to display the Stripe payment popup, the iframe gets a vertical scrollbar instead of resizing.

This seems like a bug based on the expected behavior of data-anvil-embed, but since it’s using what’s probably a Stripe provided Javascript library, I wasn’t sure if there was some nice way to get around it.

2

Hi @jshaffstall

I’m afraid that the Stripe popup occurs inside an iframe, which for security reasons does not tell us any information about its contents (including their height). This means our auto-sizing mechanism can’t actually tell when it’s scrolling…

You can work around this by putting a Spacer with appropriate height on your page, which will give your app an appropriate minimum height. (You can add it dynamically just before calling stripe.checkout if you prefer.)

3

Thanks! I’ll play around with adding the spacer.