Google pay has style issue when adding cvcRequired: true

[shirly-chen-awx]

Describe the bug After adding cvcRequired true into paymentRequest and buttonSizeMode is fill, it only shows "Buy with google pay" and text is not centered. see the demo in jsfiddle -> https://jsfiddle.net/txq0zpf8/14/

Expected behavior The button should be able to see the last four of the card number and the text is centered. see the demo implemented by js -> https://jsfiddle.net/Lrktw9x0/2/

Screenshots chrome:

safari:

Component information:

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

Environment:

• Browser: all browsers
• Country/region: all regions

[dmengelt]

Thanks for reporting this @shirly-chen-awx This behaviour is not optimal. Unfortunately, cvcRequired is not supported for our button components at the moment. You can find all the supported properties here:

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/googlepay/index.d.ts#L735

[shirly-chen-awx]

Hi, @dmengelt , are we going to support that? The cvcRequired function is working as expect(see the below picture), so the react google button only have the style issue. If you can support the button style, that would be very much appreciated.

Here is the background: we have contacted google as this this article said. We got the reply that we need to add cvcRequired into the paymentRequest and the cvcRequired field is not publicly documented on the dev site.

[dmengelt]

@shirly-chen-awx we are looking into it. I hope I have an update soon.

[dmengelt]

Seems like updating to @types/googlepay 0.7.0 (and therefore supporting cvcRequired) was not enough. Will investigate further...

[dmengelt]

Ok we finally found the issue. Will report back as soon as we have an update... Sorry for the inconvenience!

[shirly-chen-awx]

hey, @dmengelt, do we have any updates about this?

[dmengelt]

Hey @shirly-chen-awx We are still working on it.

[dmengelt]

@shirly-chen-awx Sorry for the delay. Still on it...

[shirly-chen-awx]

@dmengelt Thanks for the timely update

[dmengelt]

@shirly-chen-awx we just deployed a fix for this. Production deployment should still happen this week. Will keep you posted.

[dmengelt]

@shirly-chen-awx we rolled out a fix. The issue is now fixed.

[shirly-chen-awx]

@dmengelt Thanks a lot!!!