Selecting a credit card doesn't update the GooglePay button

[IonelLupu]

Describe the bug Selecting a credit card doesn't update the GooglePay button with the new credit card's last digits.

To Reproduce Steps to reproduce the behavior:

1. Click on the GooglePay button in order to select a credit card

2. Notice the GooglePay button is still rendering the previous credit card

https://github.com/google-pay/google-pay-button/assets/4083652/370314a0-e3cc-42f7-9433-2e0259b03e6e

Expected behavior Expected for the UI to update showing the last selected credit card. Notice how GooglePay is rendering the credit card if I have one set in my account after I login on Google:

Another issue is when GooglePay already selected the default credit card, but it doesn't update the UI when you select another credit card. It still shows the old credit card

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:

• Device (e.g. iPhone6): MacOS
• OS (e.g. iOS8.1): Sonoma 14.2
• Browser (e.g. stock browser, safari): Chrome
• Country/region: Romania

Additional context Add any other context about the problem here.

[dmengelt]

@IonelLupu if you would refresh the page you would see the new 4936 card. Is that right?

How it usually works is that once a user completes a Google Pay transaction you would continue with sending the token to your backend, do the actual authorization with your PSP and redirect the user to a success/error page. There is no need to come back to the checkout page where you show the button again.

You can play around with those scenarios in our demo shop: https://paydemo.withgoogle.com/

[IonelLupu]

@dmengelt oh. I understand now.

Isn't it a bit of bad UX to have that selected and not able to use it? 🤔

As a user myself, I know my credit card digits, and when I see it like that, I assume the card is already selected for me

---

The problem is, we have a page where the user can fill in a form with a lot of data and the Google pay button is in a section called "Payment". In there, the user can choose between multiple payment methods: credit card or Google.

If they pick "a normal credit card" option, they can manually enter the credit card details. After that, they can click our form's submit button called "Confirm purchase and pay" at the bottom of the page

When they pick Google, they can click the GooglePay button now to pick their card. Remember we still have a button at the bottom of the page. They basically click two buttons.

I think this is a problem of our UI. We don't have to have two button. Stripe, for example, has this UI:

After the user clicks the button at the bottom of the page, the Google Pay sheet shows up. I think we can implement the same thing for our UI.

[dmengelt]

@IonelLupu

think this is a problem of our UI. We don't have to have two button.

Yes. This is exactly the point. No need for two buttons. I actually wanted to mention this already in my first answer 😉

In general: The Google Pay button is not only about card selection. It is for card selection and doing the actual payment in one step.