Question posted in 
Stripe Express Checkout buttons are being clipped – apparently they are afforded insufficient height by the iframe(?).
Considered approaches:
- I can use setTimeout to set the height after load (‘ready’ listener). But the wait after ‘ready’ varies, and – more substantially – this doesn’t seem to work for mobile.
- I have also tried using the class names the buttons are embedded with (as solutions to similar problems suggest) but I haven’t got this to work. I’m unsure whether that’s me, or that solution doesn’t hold for the express checkout element.
- I have also seen suggestion of ‘custom’ integrations – which I think suggests hiding the buttons, and creating proxies. I am considering this a last resort at the moment.
Is anyone familiar with this problem – better yet a solution?
Express checkout js reference: https://docs.stripe.com/js/elements_object/create_express_checkout_element
2
Answers
I ended up using a mutation observer on the iframe to monitor for changes to the height attribute.
This works, but ideally I'd have worked out why the iframe was loading with the incorrect height and could ensure it loaded with the correct one.
I’m not sure what you mean by "buttons are being clipped". If you want all buttons to be shown and hide the overflow menu, you should set overflow to "never"