Checkout – Stripe style

Hello,
checkout is also changing Stripe style.
It could also be fine, but it turns out to be very narrow.

This would also show Apple Pay or Google Pay based on your devide or browser.
Maybe it’s changing these views too, because I can’t see either Apple Pay or Google Pay. I tried on Safari, Crome browsers and on my phone.
Instead they are shown in the cart without problems.

How to resolve the style on all payment cases?
Or how is it possible not to change the Stripe style?

Thank you

Hello
I found other style errors when activating Paypal.

The PayPal button is not full width, or centered.
The “empty fields” message that appears above is beyond the layout.

However, with Apple Pay via Paypal it works and is visible, the button has the right width and the message is correctly displayed.
Watch the video.

Hi,

1. Stripe payment form. In the one of recent Stripe updates, plugin developers guided by security needs moved all payment form inside iframe (screenshot https://prnt.sc/FCS9HbH2K1A8). Unfortunately, it’s impossible to style content located inside of iframe using WordPress theme, because all content located in iframe are hosted on an external server different from your site (https://prnt.sc/htPWEHCKAvTu).

2. PayPal button width. Same as the payment form, PayPal button is located inside of iframe (https://prnt.sc/duoxlOFLOQ4b) which has its own style that adds maximum width to the button equal to 750px (https://prnt.sc/dF1a_NcIxibn). Unfortunately, this button width is unreachable for styles outside of iframe. In this situation, the easiest way to fix this issue is to make the other buttons’ width equal to the PayPal button by adding the following custom code snippet to the Custom CSS area in Theme Settings:

.woocommerce-checkout .ppc-button-wrapper,
.place-order > button {
	max-width: 750px;
	margin-inline: auto;
}

3. Notice width. Try to add the following custom code snippet to the Custom CSS area in Theme Settings to equalize notices width:

.woocommerce-checkout form > .woocommerce-error {
	max-width: 695px;
	margin-inline: auto;
}

Kind Regards

Hello,
Thank you for your answer.

What I mean is that there is something about the theme or style of the page that is influencing Stripe’s style anyway, and perhaps it is also annoying Apple Pay, which is not shown on this page, but in the cart it is.

As you can see on this page, the style should be different with higher fields.
https://woo.com/document/stripe/#new-checkout-experience

I also attach a screenshot taken from another site I created,
it looks very similar to the screen visible in the link.
https://www.dropbox.com/scl/fi/e9xmyr5lxibu7zzm69t5c/checkout-STRIPE.png?rlkey=pkvlb4k1c8io1mj8c0jmb8qgw&dl=0

Thank you

Could you please check how it works with some default WordPress themes like TwentyTwenty or WooCommerce Storefront to understand is it our theme issue or not?

Regards

Hello Bogdan,
here is a video where you can see how it is shown with the Hello theme, but you can try it with other themes.
In the video I show you how Stripe is displayed in the checkout, on Crome and on Safari.

I hope it’s clear now
Thank you

1. Stripe payment form. We have checked how the Stripe plugin works with default themes by checking themes’ input styles and applying them to iframe content. Since the plugin checks parent theme styles this issue cannot be fixed by simple custom code, but we will fix this in the next 7.4 theme update which will be released in the next few weeks.

2. PayPal button width. Unfortunately, the same solution can’t be applied to the PayPal button because its button is limited by a max-width equal to 750px by plugin styles located inside the iframe. We have checked similar issues (link https://wordpress.org/support/topic/button-layout-issue/) and found that plugin support recommends a similar solution related to the button centering as we suggested in the previous reply.

Kind Regards

Hi Bogdan,
okay thanks, I’m happy to have reported something useful, and above all that you were able to reproduce it. 😉
I’m waiting for the update

Thank you

You are welcome!

Hi,
It’s been a while, do you know when it can be resolved?

Thank you

Hi,

The issue with the form styles should have been fixed in the 7.4 update, if it hasn’t, please provide links to the site with the problem so we can investigate the issue further.

Kind Regards

[Author]

Posts