"Cannot read property 'includes' of undefined" when setting environment to "PRODUCTION"

Describe the bug When setting environment as PRODUCTION and using existingPaymentMethodRequired flag, getting Cannot read property 'includes' of undefined error and the Google Pay button no longer shows up.

To Reproduce Steps to reproduce the behavior:

• implement Google Pay React component
• set environment to “PRODUCTION” mode
• set existingPaymentMethodRequired to true
• see error

Expected behavior Except Google Pay button to show up

Screenshots

Component information:

• Component
  • React component (@google-pay/button-react)
• Component version (e.g. 1.0.0): 2.2.1

Environment:

• Device: MacBook Pro (15-inch, 2019)
• OS: Catalina 10.15.7
• All browsers
• Country/region: US

Additional context

• Our domain is verified for production in the Google Pay console
• The button works fine when set to TEST
• Verified that we are using the correct merchant ID

Here is the code used to render the button:

<GooglePay
            existingPaymentMethodRequired
            className="google-pay-button"
            environment="PRODUCTION"
            environment={
              process.env.CALM_ENV === 'production' ? 'PRODUCTION' : 'TEST'
            }
            buttonType="plain"
            buttonSizeMode="fill"
            paymentRequest={{
              apiVersion: 2,
              apiVersionMinor: 0,
              allowedPaymentMethods: [
                {
                  type: 'CARD',
                  parameters: {
                    allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
                    allowedCardNetworks: ['MASTERCARD', 'VISA'],
                  },
                  tokenizationSpecification: {
                    type: 'PAYMENT_GATEWAY',
                    parameters: {
                      gateway: 'stripe',
                      'stripe:version': '2018-10-31',
                      'stripe:publishableKey': process.env.STRIPE_TOKEN,
                    },
                  },
                },
              ],
              merchantInfo: {
                merchantId: process.env.GOOGLE_PAY_MERCHANT_ID,
                merchantName: 'Calm',
              },
              transactionInfo: {
                totalPriceStatus: 'FINAL',
                totalPriceLabel: 'Total',
                totalPrice:
                  purchaseType?.type === 'freetrial'
                    ? '00.00'
                    : (prices?.current[plan] / 100).toString(),
                currencyCode: prices?.current?.currency || 'USD',
                countryCode: 'US',
              },
            }}
            onLoadPaymentData={paymentRequest => {
              const stripeToken = JSON.parse(
                paymentRequest?.paymentMethodData?.tokenizationData?.token,
              );
              onSubmit(stripeToken);
            }}
            onReadyToPayChange={({ isReadyToPay }) =>
              setIsGoogleAvailable(isReadyToPay)
            }
          />

[socsieng]

Got it on the second try:

Testing it out now.

[mbillz]

Ah yes, I always forget about React Dev Tools. Thanks for your help! I’m good to close this, I have a solid direction.