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!