yes I have this too. I had to correct it with my own css.
I can solve it with CSS also, but this shouldn’t happen.
Plugin developers should look into:
Why is JavaScript calculating “1” as the width for that iframe?
Maybe some theme incompatibility?
Plugin Support
dougaitken
(@dougaitken)
Automattic Happiness Engineer
Hey @webdados
That sounds like a conflict to me is happening somewhere. I can see the part of the CSS that has width: 1px !important; on my own site but I’m not seeing the same issue with displaying the Payment Request button – https://d.pr/i/ghUNb7
Here is my test product – https://doug.press/product/coffee-single-product
No CSS or additional tweaks should be needed to display the Payment Request buttons – this is Apple Pay or also Google / Microsoft Pay / etc. If you have to add extra code to “expose” these buttons, then this points to a conflict is happening.
If you can replicate your problem on a site with only our Storefront theme, the core WooCommerce plugin, and our Stripe payment gateway, please do link me there to take a look.
Thanks,
Hi @dougaitken,
It works fine with Storefront, of course.
My post is exactly about this conflict, to try to find out other people that might have the same problem and know how they fixed it, or if they found the conflicting plugin/theme. (Also help the team avoid that conflict if possible)
I do not want to mess with CSS to fix this, of course.
BTW, how does the IFRAME grows if the width CSS declaration stays with 1px? If I know how that happens maybe it’s easier to find the conflict.
I found the problem. This happens when #wc-stripe-payment-request-wrapper is a direct child of an HTML element with display: flex
Still haven’t found solution thou.
Plugin Support
slash1andy
(@slash1andy)
Automattic Happiness Engineer
Hey there!
I’ve seen this pop up recently, and almost all of the cases were using Elementor on the product pages. That seemed to be the common denominator in all the cases of this happening.
Hopefully that info helps
We haven’t heard back from you in a while, so I’m going to mark this as resolved – if you have any further questions, you can start a new thread.
– Joey
I’ve seen this pop up recently, and almost all of the cases were using Elementor on the product pages. That seemed to be the common denominator in all the cases of this happening.
Maybe you could install Elementor on your development environment and try to fix it for everyone?
Does anybody have a fix for this, even using CSS?
It appears to happen using elementor on the product page, same using Astra or Hello theme.
They gave me the below CSS but doesn’t work.
/* Temporary fix for Apple Pay button layout */
selector form.cart.variations_form .woocommerce-variation-add-to-cart,
selector form.cart:not(.grouped_form):not(.variations_form) {
display: block;
}
Any help would be great!
This is not resolved. Given the number of users rising this question and using Elementor, I really think you should try to fix it on the plugin itself.
This happens when #wc-stripe-payment-request-wrapper is a direct child of an HTML element with display: flex
I’ve seen this pop up recently, and almost all of the cases were using Elementor on the product pages. That seemed to be the common denominator in all the cases of this happening.
And yes I have the same issue some three months later than the previous post. Using Elementor for editing
Is no one looking at the plugin? 🙁
Plugin Support
dougaitken
(@dougaitken)
Automattic Happiness Engineer
Hi all,
As Elementor is a page builder, please reach out to them for support with this. The Payment Request buttons are displayed in a large range of themes and as this only happens when using Elementor, this is something that they should look into resolving.
Thanks,
