Initial render of Google Pay's plain button `min-width` is `240px`
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:
- Go to Wix test site
- 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
containerwhich setswidth, stylemin-width:240pxis present in Google Paybutton.
Expected behavior
Google Pay button fits into the outer container.
Screenshots
Component information:
- Component
- [x] React component (
@google-pay/button-react) - [ ] Custom element (
@google-pay/button-element) - [ ] Angular component (
@google-pay/button-angular)
- [x] React component (
- Component version (e.g. 3.0.10):
Environment:
- Device (MacBook Pro):
- OS (macOS 14.4.1):
- Browser (Safari)
- Country/region: Europe
would buttonType="short" work for you? That did the trick for me, has a min width of 90px
@vsashyn / @jnsdrssn we are looking into this. so sorry for the inconvenience...
Potential workarounds for now:.
- Use buttonType: 'short' (as you mentioned already)
- 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.
Closing this for now. Feel free to open up a new issue if needed.