Button sometimes stays invisible when it should show up

[Parxer]

The GooglePay react button sometimes doesn't render as visible on our staging/prod environment and I can't figure out why. What I know so far is:

• it never happens in dev environment,
• it happens when I navigate to the page that contains the button for the first time since displaying the page; when I navigate back and there again, it does display, same as when I hit refresh while on the page with the button - in that case it shows up correctly straight away,
• it's not 100% reliably reproducible, in fact sometimes it's a pain to replicate, while other times it happens almost every time,
• when I attached a debug log to onReadyToPayChange, I see that a working button triggers that handler once with isReadyToPay: true and isButtonVisible: true, but when the button doesn't render, it isn't triggered at all.

My question is: is this a bug, a race condition of some kind with loading dependencies, or am I not aware of some reason why the button would decide the user is not readyToPay? I'll paste my full config below, but note that existingPaymentMethodRequired is explicitly set to false.

const locale = useLocale()
return <GooglePayButton
      environment={APP_ENV === 'production' ? 'PRODUCTION' : 'TEST'}
      buttonType='pay'
      buttonColor={'white'}
      buttonRadius={6}
      buttonBorderType='no_border'
      buttonSizeMode='fill'
      style={{ width: '100%', height: '50px' }}
      buttonLocale={locale}
      onError={(error) => {
        console.error('[GPAY] error', error)
      }}
      onClick={onClick}
      onReadyToPayChange={(readyToPay) => {
        console.log('[GPAY] onReadyToPayChange', readyToPay)
      }}
      existingPaymentMethodRequired={false}
      paymentRequest={{
        apiVersion: 2,
        apiVersionMinor: 0,
        allowedPaymentMethods: [
          {
            type: 'CARD',
            parameters: {
              allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
              allowedCardNetworks: ['MASTERCARD', 'VISA'],
            },
            tokenizationSpecification: {
              type: 'PAYMENT_GATEWAY',
              parameters: {
                gateway: 'payu',
                gatewayMerchantId: GATEWAY_MERCHANT_ID,
              },
            },
          },
        ],
        merchantInfo: {
          merchantId: GOOGLE_MERCHANT_ID || '12345678901234567890',
          merchantName: GOOGLE_MERCHANT_NAME || 'Demo Merchant',
        },
        transactionInfo: {
          totalPriceStatus: 'FINAL',
          totalPriceLabel: 'Total',
          totalPrice: amountNumber.toString(),
          CURRENCY_CODE,
          COUNTRY_CODE,
        },
      }}
      onLoadPaymentData={async (paymentRequest) => {
        [...]
      }}
    />

This question is related to:

• React component (@google-pay/button-react)
• Custom element (@google-pay/button-element)
• Angular component (@google-pay/button-angular)

[hanumanteshvar07-design]

This is likely a race condition with script loading, combined with SPA client-side routing, or a property key mismatch.

1. Script Preloading (Most Likely Cause)
   The component dynamically injects https://pay.google.com/gp/p/js/pay.js on mount. On initial SPA client-side navigation in production/staging (where assets load faster due to CDN/minification), the custom element can mount before pay.js is fully initialized. Because of this, isReadyToPay() is never called, onReadyToPayChange doesn't trigger, and the button defaults to display: none.

Fix: Preload the Google Pay SDK in your tag so window.google is already loaded before React mounts the component:

HTML

<script src="https://pay.google.com/gp/p/js/pay.js" async defer></script>

2. Transaction Info Property Names
   In your transactionInfo object, double check the property names. Google Pay API expects camelCase key names:

TypeScript
// ❌ Incorrect key names
transactionInfo: {
totalPriceStatus: 'FINAL',
totalPriceLabel: 'Total',
totalPrice: amountNumber.toString(),
CURRENCY_CODE,
COUNTRY_CODE,
}

// ✅ Correct key names
transactionInfo: {
totalPriceStatus: 'FINAL',
totalPriceLabel: 'Total',
totalPrice: amountNumber.toString(),
currencyCode: CURRENCY_CODE, // e.g. 'USD'
countryCode: COUNTRY_CODE, // e.g. 'US'
}
If these keys evaluate to undefined or an unexpected schema on initial render, Google Pay silently fails the readiness check.

3. Keying the Component
   If amountNumber, locale, or other props load asynchronously from a hook, the initial mount might evaluate with empty values. Adding a dynamic key forces the wrapper to re-trigger the readiness check once values resolve:

TypeScript
<GooglePayButton
key={${locale}-${amountNumber}}
// ... rest of your config
/>