9.2.0 – Payment Buttons not 100% width size

It’s to do with the change in the file

/build/express_checkout.css

As now it’s including all this

#wc-stripe-express-checkout-element iframe{max-width:unset}

#wc-stripe-express-checkout-element{margin-bottom:12px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

Where as previously all that was there was nothing to do with the display flex or wrap

Hi @mattthomas-photography,

Could you provide a screenshot of the button you’re referring to? I checked the page, and the only button I see is the “Add to Cart” button.

In 9.2.0 this was updated which is causing the issues

https://github.com/woocommerce/woocommerce-gateway-stripe/blob/8d95f3e613c235e6590dbabf3ab85cc388527bd6/client/entrypoints/express-checkout/styles.scss

The inclusion of the display flex CSS – if you check the previous version this wasn’t included and displayed the buttons fine. So looks like for stores that don’t have the updated Amazon payment (basically anything not in the US) there’s issues

Hello matt-thomas-photography,

Thank you for your reply.

I understand your concern regarding recent update in the CSS code of WooCommerce Stripe.

To better understand the issue, I need to see what you are seeing.
Is this issue occurring on the Pay for order page?
If yes, then please share a link to the page so I can inspect it from my side.

Once I have more information, I will be in a better position to assist you further.

Best regards.

I’ve linked to the page in question on my first post and I’ve been very clear where the issue is coming from! If there is not the correct place for detailed support then please let me know where I should raise this issue.

The problem is from the updated CSS that’s been added since last update to the plugin that causes styling issues wherever the following class appears #wc-stripe-express-checkout-element {

So this can be product pages, cart or checkout. Plus see the above comment about where the new styling comes from causing the conflict

Hello matt-thomas-photography,

Thank you for your clarification.

I checked the page you shared in the first post.
I could not find any payment buttons that were not 100% in width.
This is why I wanted to confirm with screenshots from your end.

Here is a screenshot from my end.

Once I have a better understanding of the issue, I will be able to help further.
I appreciate your cooperation.

Best regards.

That’s because if you inspect the page you’ll see I’ve had to add extra CSS to fix the issue

#wc-stripe-express-checkout-element {
display: grid !important;
justify-content: unset !important;
}

As in that file I’ve linked above the flex grid layout compresses the size, which was bought in since the last update as per the commit log on that file

Hi there!

Thank you for providing more information about the issue. I have tried to replicate the issue, and I can see that in version 9.1.1, the button appears full-width, while in version 9.2.0, the button does not appear full-width. I’m not sure if this adjustment was made intentionally so that when a user adds more than one express payment method, they appear side by side.

However, you can report this issue on GitHub here: https://github.com/woocommerce/woocommerce-gateway-stripe, so our developers can look into it and provide guidance or fix the issue in a future release.

Thank you!

–

• This reply was modified 1 month, 1 week ago by shahzeen(woo-hc).

The side by side of buttons is only appropriate when it’s displaying the Amazon as well as that’s what the whole link I sent to was about, however if you have a UK store or any store not in the US (where the Amazon payment is available) you’d have this issue. So it’s not a fix it’s an issue that needs to be looked into

Hi there!

Thank you for your feedback! I understand your concern. I recommend reporting this as a bug on our GitHub repository here: WooCommerce Stripe Gateway GitHub. This will help our developers look into it further.

Thank you

I’ve raised a bug report on the GitHub however nothing seems to be happening, therefore no support raising this issue which is still ongoing

Hi there!

Thank you for your update.

Could you please share the link to the GitHub issue you raised? This will help us review the report and check its current status.

Please note that while GitHub is the correct place to report bugs, issues are typically prioritized based on their impact, severity, and how many users are affected. Some bugs may take longer to resolve if they are considered low-priority or if there are more critical issues currently being worked on by the development team.

Once you share the link, I’ll be happy to check and provide any additional information I can.

Thanks for your patience and understanding!

Hi there! I’m closing this out for now since there hasn’t been a response. We’re here whenever you need us to pick things up again

Well the issue is still there, last update wasn’t addressed to the problem. Therefore it’s NOT resolved and still awaiting development to fix this.