React button: typeError: Cannot read properties of undefined (reading 'Symbol(includes)')

[scarballo]

Hello all,

We are using the React button component to display the Google Pay button in our checkout page. The button appears but if we add the "onPaymentAuthorized" callback function we get a javascript error when we click on the button. If we remove the callback, the popup to select a credit card is displayed as expected.

 {dataFetched && <GooglePayButton
          environment={googlePayDetails.environment} // value: TEST
          buttonType="pay"
          paymentRequest={{
            apiVersion: 2,
            apiVersionMinor: 0,
            allowedPaymentMethods: [
              {
                type: 'CARD',
                parameters: {
                  allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
                  allowedCardNetworks: googlePayDetails.allowedCardNetworks, // "MASTERCARD", "VISA"
                },
                tokenizationSpecification: {
                  type: 'PAYMENT_GATEWAY',
                  parameters: {
                    gateway: googlePayDetails.gatewayId,
                    gatewayMerchantId: googlePayDetails.merchantKey,
                  },
                },
              },
            ],
            merchantInfo: {
              merchantId: googlePayDetails.merchantId,
              merchantName: merchant.name,
            },
            transactionInfo: {
              totalPriceStatus: 'FINAL',
              totalPriceLabel: 'Total',
              totalPrice: (order.amount / 100).toString(),
              currencyCode: order.currencyCode,
              countryCode: googlePayDetails.merchantCountry,
              checkoutOption: 'COMPLETE_IMMEDIATE_PURCHASE',
            },
          }}
          onLoadPaymentData={(paymentRequest) => {
            console.log('Success', paymentRequest);
          }}
          onReadyToPayChange={(result) => {
            console.log('Ready to pay change', result);
          }}
          onPaymentAuthorized={() => ({
            transactionState: 'SUCCESS',
          })}
          onError={console.error}
          buttonLocale={googlePayLocale}
          />
        }

If we remove the "onPaymentAuthorized" callback the button works.

We have tried different options to define the onPaymentAuthorized callback based on your examples but all of them fail. Could you help us, please?

Other issue that we have detected when we load the component is that sometimes the component is not able to download the manifest from your environment and this breaks completely the flow:

How can we avoid this random issue?

Thank you very much in advance.

Steps to reproduce

1. Configure the component and add the callback "onPaymentAuthorized".
2. When the button appears click on it
3. A javascript error is displayed on the Chrome console.

Expected behaviour: Clicking on the pay button should display the Google Pay popup to select a valid credit card.

Component information:

• Component
  • [ ] React component (@google-pay/button-react)
• Component version: 3.0.7

Environment:

• React version: 18.2.0
• Device: MAC m1 PRO
• OS: Ventura 13.3
• Browser: Google Chrome Version 112.0.5615.137 (Official Build) (arm64)
• Country/region: Spain

[dmengelt]

@scarballo The error message is not nice. However, in order to use the onPaymentAuthorized callback you have to specify a callback intent:

callbackIntents: ['PAYMENT_AUTHORIZATION']

See an example here: https://developers.google.com/pay/api/web/guides/resources/demos#authorize-payments-example

The Unable to download payment manifest should not impact your integration. Check here for all the details: https://bugs.chromium.org/p/chromium/issues/detail?id=1405229

FYI please go ahead and use version 3.0.8 of the @google-pay/button-react. 3.0.7. introduced a regression.

[scarballo]

Thank you very much for your reply. What a stupid mistake of mine...it is quite clear in the documentation. Now it works as expected.

Following your advice we've updated our version to 3.0.8.