Button doesn't respect "plain" type sometimes, rendering a long version with card info

[atsikov]

Describe the bug Button is rendered inconsistently when buttonType: 'plain' is used. Sometimes it still tries to include card information which results in min-width: 240px rule breaking narrow layouts.

To Reproduce Steps to reproduce the behavior:

1. Open Chrome in incognito mode
2. Go to modified jsfiddle Basic Example
3. Observe a cut GPay button 3.1 If button is rendered correctly, try to reload page a few times 3.2 Alternatively, try to open a url with Android Chrome - the issue is always reproducible there

Parameters used to render the button (though it feels like buttonSizeMode and buttonRadius have no impact)

        buttonSizeMode: 'fill',
        buttonType: 'plain',
        buttonRadius: 9999,

Expected behavior Button respects passed parameters and doesn't try to render card info when buttonType: 'plain' is used

Screenshots Correctly rendered button

Incorrectly rendered button

Component information:

Reproducible with a plain SDK. Initially found it with @google-pay/button-react however I believe it is applicable to other component libraries

• Component
  • [x] React component (@google-pay/button-react)
• Component version (e.g. 1.0.0): 3.1.0

Environment:

• Device: MacBook Pro M1 2021, Pixel 6 Pro
• OS: MacOS 14.5, Android 14
• Browser: Chrome MacOS 126, Safari MacOS 17.5, Chrome Android 126
• Country/region: UK

Additional information As mentioned in https://github.com/google-pay/google-pay-button/issues/292#issuecomment-2135879938, passing a deprecated buttonType: 'short' works as expected

[Blackbaud-MitchellThomas]

I am experiencing this issue as well. Our design is pretty width-contrained, and I do not have 240px to give it unless I change the whole layout. I am unable to use the 'short' workaround.

[dmengelt]

@atsikov so sorry that it took so long for me to give you an answer 😉 As you mentioned this is the same issue as reported in #292

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.

@Blackbaud-MitchellThomas please share your Google Pay merchant ID with me.

[Blackbaud-MitchellThomas]

@dmengelt, I need to figure out if there is a single merchant id that applies to all of our consumers. Is this change to the "plain" button style the intention long-term, or is this being treated as a bug that will be fixed?

[Blackbaud-MitchellThomas]

@dmengelt, I have determined that merchant id is not in use in our integration and instead uses a gateway from our payment provider desribed here:

https://developers.google.com/pay/api/web/guides/tutorial#tokenization

So, the merchantId deny list does not appear to be an option here.

[dmengelt]

@Blackbaud-MitchellThomas are you able to share a link to your integration with me?

[Blackbaud-MitchellThomas]

@dmengelt, we're actively resolving a bug related to this larger width, so the live integration is more difficult to share. But you can see an equivalent version here: https://docs.stripe.com/elements/express-checkout-element#try-demo

[dmengelt]

@Blackbaud-MitchellThomas I see. So you are using a Stripe integration and they don't support the short button type. I need to check if there is another way for you to not get the dynamic data.

[Blackbaud-MitchellThomas]

@dmengelt, correct, given that the short type is deprecated, it is excluded from their SDK. Thanks for looking into it!

[Blackbaud-MitchellThomas]

@dmengelt, did you have any luck finding an alternate workaround? We are trying to determine if we are going to be required to change our design or if we can restore the original behavior.

And on that note, I'm still very curious on the nature of this change if it means that sub-240px widths are essentially deprecated or if this change was less deliberate than that.