Updating the payment request payload with an updated amount causes the Google Pay button to disappear and then reappear

[glennweb]

Summary:

The issue is specific to Android Chrome. Updating the payment request payload with an updated amount causes the Google Pay button to disappear and then reappear. Console logs show errors that are not present in other environments.

These are the console logs shown. 2 x Use JsonReader.setLenient(true) to accept malformed JSON at line 1 column 10 4 x Unable to download payment manifest "https://pay.google.com/gp/p/payment_method_manifest.json"

each time we update the paymentRequest payload.

The actual processing and display of card information work fine.

Steps to reproduce:

Programmatically update the amount in the payment request payload. The Google Pay button disappears and then reappears.

Expected behaviour:

The Google Pay button should remain visible while reloading payment data, and there should be no error console logs.

Screenshots:

A video attachment demonstrates the issue.

https://user-images.githubusercontent.com/9338759/236343163-863e7103-c77d-46b4-b6b1-96879d7758b4.mov

Component information:

Component: React component (@google-pay/button-react) Component versions: 3.0.0, 3.0.6, 3.0.9 Environment:

Device:

Moto G51 5G OS: Android Version 12 Browser: Chrome Country/region: Australia

Additional context:

The issue only occurs in Chrome Android and not in any other browser across various platforms.

[dmengelt]

@glennweb Are you able to share your code on how you update the amount?

Regarding the error messages. They should not affect your integration. For Unable to download payment manifest there is a Chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1405229

[glennweb]

Yeah, I saw that. Just strange the message occurs in the only problem platform.

I put together this basic component that is a more basic version of the implementation.

const GooglePayDeposits = (fiatCurrency: string, country: string) => {

  const [amount, setAmount] = useState("");

  const paymentRequest = useMemo(
    () =>
    ({
      apiVersion: 2,
      apiVersionMinor: 0,
      allowedPaymentMethods: [
        {
          type: "CARD",
          parameters: {
            allowedAuthMethods: ["PAN_ONLY", "CRYPTOGRAM_3DS"],
            allowedCardNetworks: [
              "AMEX",
              "DISCOVER",
              "JCB",
              "MASTERCARD",
              "VISA",
            ],
          },
          tokenizationSpecification: {
            type: "PAYMENT_GATEWAY",
            parameters: {
              gateway: "gateway",
              gatewayMerchantId: process.env.gatewayMerchantId,
            },
          },
        },
      ],
      merchantInfo: {
        merchantId: process.env.merchantId,
        merchantName: "company name",
      },
      transactionInfo: {
        totalPriceStatus: "FINAL",
        totalPriceLabel: "Total",
        totalPrice: amount !== "" ? amount : "0",
        currencyCode: fiatCurrency,
        countryCode: country,
      },
    }) as google.payments.api.PaymentDataRequest,
    [amount]
  );

  return (
    <>
      <input type={"text"} onChange={(e) => setAmount(e.target.value)} />
      <GooglePayButton        
        environment={
          appConfig.ENV === "production" ? "PRODUCTION" : "TEST"
        }
        buttonColor="white"
        buttonSizeMode="fill"
        buttonType={"plain"}
        paymentRequest={paymentRequest}
        onClick={() => {
          //todo
        }}        
        onError={(error) => {
          console.log(error);          
        }}
        onLoadPaymentData={(response) => {
          const {
            paymentMethodData: {
              tokenizationData: { token },
            },
          } = response;

          //todo - send token to backend
        }}
      />
    </>

  );
};

[glennweb]

any update?

Android

• Chrome -> flashes **** only happens here.
• Webview -> no flash

iOS

• Chrome -> no flash
• Safari -> no flash

Windows Desktop

• Edge -> no flash
• Chrome -> no flash

Mac

• Safari -> no flash
• Chrome -> no flash

[dmengelt]

@glennweb could you create a re-producer on something like https://stackblitz.com and then share a link? - that would greatly help us to have a look at the issue.

[xiaomei-wu]

Hi, is there already a fix for it? 🤔

[dmengelt]

@xiaomei-wu Do you mean for the "disappear and then reappear" problem?

[xiaomei-wu]

@dmengelt Exactly, the button "disappear and reappear" only on android chrome and error Unable to download payment manifest "https://pay.google.com/gp/p/payment_method_manifest.json" shows infinitely in the console every few seconds (same frequency as the button "disappear and reappear")

[dmengelt]

@xiaomei-wu any chance you could share a reproducer with me?

[xiaomei-wu]

@dmengelt I put the same code i am using in the project here expect the credentials: https://stackblitz.com/edit/stackblitz-starters-rdqmn8?file=src%2FGooglePayButton.tsx And you can open this page https://stackblitz-starters-rdqmn8.stackblitz.io on android chrome and inspect the console on chrome desktop: chrome://inspect/#devices. The same error occurs in the console but with less amount (10), and somehow the button is not flickering here 🤔

[dmengelt]

@xiaomei-wu I guess your example is missing some amount update logic? Or how do you trigger the flickering?

[xiaomei-wu]

@dmengelt Yes you are right! I added a state for the amount, it is flickering when i update the amount.

[dmengelt]

thanks very much @xiaomei-wu - this helped. can you try this example: https://google-pay-react-fuexpj.stackblitz.io does it flicker for you?

[xiaomei-wu]

@dmengelt You're welcome. Thank you very much for the quick response, i think my issue has been solved in this example - using plain button and black, changing amount doesn't flicker anymore. However, I've tested it on android chrome and android firefox for all the combinations. It still flickers in two scenarios when changing the amount:

1. when button color: white, button type: any, it flickers on android chrome See attached video: https://github.com/google-pay/google-pay-button/assets/69540154/47746f88-7592-479d-ae49-a0e78780f935

Besides of that, the error unable to download payment manifest occurs 500+ times in the console makes me a bit nervous...

2. when button type: buy, button color: any, it flickers on android firefox - loading from the G Pay | Card Info to Buy with G Pay See screenshots:
   • Screenshot_20230713-154229
   • Screenshot_20230713-154803

[glennweb]

Is there going to be a fix released? I cannot really use the Black button, as I have a dark site.

[dmengelt]

version 3.0.10 should contain the fix. See #239

@glennweb / @xiaomei-wu could you update your dependency to "@google-pay/button-react": "3.0.10" and try again here: https://google-pay-react-sfxj5f.stackblitz.io

[xiaomei-wu]

@dmengelt I can confirm that the flickering issue is fixed after upgrading to "@google-pay/button-react": "3.0.10". Thank you very much! 🎉 💙

[glennweb]

I can confirm the issue is resolved also..

Thank-you!

[dmengelt]

Unable to download payment manifest "https://pay.google.com/gp/p/payment_method_manifest.json" shows infinitely in the console every few seconds (same frequency as the button "disappear and reappear")

@xiaomei-wu this is now also fixed. This error should no longer occur when using Chrome on Android.