google-pay / google-pay-button

Google Pay button - React, Angular, and custom element
Apache License 2.0
246 stars 60 forks source link

Initial render of Google Pay's plain button `min-width` is `240px` #292

Open vsashyn opened 1 month ago

vsashyn commented 1 month ago

Describe the bug
Safari only. With buttonType="plain" the style min-width=240px is applied during button's initial render, even though it seems this min-width is relevant only to pay button type.

To Reproduce
I'm not able to reproduce on Customize your button. It seems selection of button type in dropdown rerenders button and there is no min-width.

Steps to reproduce:

  1. Go to Wix test site
  2. See Google Pay button that is outside of the wrapping container. Sometimes it is not reproducible from first attempt. Also, please try different window sizes. Although there is a container which sets width, style min-width:240px is present in Google Pay button.

Expected behavior
Google Pay button fits into the outer container.

Screenshots

Screenshot 2024-05-27 at 19 12 06 Screenshot 2024-05-27 at 19 14 01

Component information:

Environment:

jnsdrssn commented 1 month ago

would buttonType="short" work for you? That did the trick for me, has a min width of 90px

dmengelt commented 1 month ago

@vsashyn / @jnsdrssn we are looking into this. so sorry for the inconvenience...

dmengelt commented 3 weeks ago

Potential workarounds for now:.

  1. Use buttonType: 'short' (as you mentioned already)
  2. Share your Google Pay merchantId here and I will add it to a deny list. This will no longer show dynamic card info on the button.
Y145O