**Unexpected developer error, please try again later.

Working on google chrome, but issue in Safari & Microsoft edge:

1. Click on google pay button
2. Add Email and password
3. On submit get this error, Unexpected developer error, please try again later.
4. In console this error appeared Unable to download payment manifest "https://pay.google.com/gp/p/payment_method_manifest.json".

Expected behavior

Screenshots

Console

Describe the bug

Hey folks! 👋 In our setup we have incorporated the React GP button inside a relatively small (width = ~400px) popup. Unfortunately this setup is causing cropping problems for some of our users that are using Google Chrome + Windows. When the user clicks the GP Button inside our popup the GP Payment window that pops up is being cropped. Due to this the user cannot see the 'Pay' button and is therefore not able to pay until they resize the window. We can solve this on our side by changing the width of our popup, but in my opinion GP should also work inside these smaller browser windows.

To Reproduce

1. Setup a GooglePay button (react) inside a window having a width smaller than 600px.
2. Open the app using Google Chrome on Windows.
3. Click the button.
4. See that the opened payment window is cropped.

Screenshots

Expected behavior

Obviously this window should not be cropped.
For example, on Google Chrome + MacOS the window is not being cropped:

Component information:

• Component

  • 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): 2.6.0

Environment:

• OS (e.g. iOS8.1): Windows 10
• Browser (e.g. stock browser, safari): Chrome 96.0.4664.110
• Country/region: US

This question is related to:

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

Hi everyone,

Due to some compliance requirements we cannot inject remote JS files into our FE app, and this library loads the script pay.js file from CDN.

This can be a a very specific requirement that we have, but perhaps other people also have the same requirement, so it would be nice if the library supports loading it from a local file.

In case you don't think this change is suitable for the library, do you have any advices on what we can do to workaround this?

Describe the bug A clear and concise description of what the bug is.

To Reproduce Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior A clear and concise description of what you expected to happen.

Screenshots If applicable, add screenshots to help explain your problem.

Component information:

• Component
  • 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):
• OS (e.g. iOS8.1):
• Browser (e.g. stock browser, safari)
• Country/region:

Additional context Add any other context about the problem here.

Describe the bug Sometimes, sentry catches and raises a "ReferenceError: Can't find variable: google". Seems to happen only on iOS devices

To Reproduce Difficult to reproduce:

1. Load the GooglePay button (I suppose it happens during the mount)
2. Try to load multiple times...
3. ...Until the error occurs

Expected behavior No error

Screenshots

Component information:

• Component
  • [+] 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: All iPhones
• OS: All iOS version
• Browser: Safari / Mozilla iOS / Chrome iOS
• Country/region: Europe

Additional context Add any other context about the problem here.

Describe the bug
The example code on stackblitz does not open a payment page, but does so on a desktop browser, or if page is loaded as desktop

To Reproduce Steps to reproduce the behavior:

1. Go to https://stackblitz.com/edit/google-pay-react on mobile
2. Click on pay
3. Does not open payment page

Component information:

• Component
  • React component (@google-pay/button-react)

Environment:

• Device: samsung j5
• OS: android
• Browser: chrome
• Country/region: nigeria/africa

This question is related to:

• React component (@google-pay/button-react)
• Custom element (@google-pay/button-element)
• Angular component (@google-pay/button-angular)
  can we use this for angular 2 version ?

I am facing one issue, it's occurring a few times only. even after successful payment I see an error pop up I have attached. but after that, it's redirecting to our success page. that means that transaction is done successfully.

I am not able to figure out why this error is occurring

When I click save to phone button for passed, if the account is not login, a window is opened for login the account, but the button breaks after this

To Reproduce Steps to reproduce the behavior:

https://youtu.be/TsEyiVx5i9o

I use to the React Component an have the same issue.

How can we know in advance if the browser supports gpay?

I looked into the official documentation and it seems the correct way is to create an instance of the PaymentsClient, call the isReadyToPay method, and wait for the async result.

const paymentsClient = new google.payments.api.PaymentsClient({environment: 'TEST'});
paymentsClient.isReadyToPay(isReadyToPayRequest)
.then(function(response) {
      if (response.result) {
        // add a Google Pay payment button
      }
    })
    .catch(function(err) {
      // show error in developer console for debugging
      console.error(err);
    });

This question is related to:

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

Discussed in #91

<GooglePayButton
  environment="TEST"
  paymentRequest={{...}}
  onSelect={() => {
    // Additional logic that should happen before popup is open
  }}
/>

Describe the bug: Button not appearing in Firefox/Safari

To Reproduce: Open the page with GPay Button

Expected behavior: Button works in all browsers

Screenshots
Firefox:

Safari:

Chrome:

Component information:

• Component
  • React component (@google-pay/button-react)
• Component version: 3.0.5

Environment:

• Device: Macbook Air M1
• OS: MacOS 13.0.1 (22A400)
• Browsers:
  • Firefox 108.0.2 x64
  • Safari 16.1 (18614.2.9.1.12)

I am trying to integrate this into my existing React app, which uses Typescript. I am getting an incompatible types error: Type 'string' is not assignable to type 'PaymentMethodType'.

This is my payment request object where the payment method type is 'CARD', but it is not recognizing this as an acceptable value.

const paymentRequest = {
	apiVersion: 2,
	apiVersionMinor: 0,
	allowedPaymentMethods: [
		{
			type: 'CARD',
			parameters: {
				allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
				allowedCardNetworks: ['AMEX', 'DISCOVER', 'MASTERCARD', 'VISA']
			},
			tokenizationSpecification: {
				type: 'PAYMENT_GATEWAY',
				parameters: {
					gateway: 'cardconnect',
					gatewayMerchantId: gatewayMerchant,
				}
			}
		}
	],
	merchantInfo: {
		merchantId: '12345678901234567890',
		merchantName: 'Test Merchant',
	},
	transactionInfo: {
		totalPriceStatus: 'FINAL',
		totalPrice: paymentAmount.toString(),
		currencyCode: 'USD',
		countryCode: 'US'
	}
};

Is there a way to get around this?

Is there any way to disable the button with some property?

This question is related to:

• Angular component (@google-pay/button-angular)

Describe the bug After adding cvcRequired true into paymentRequest and buttonSizeMode is fill, it only shows "Buy with google pay" and text is not centered. see the demo in jsfiddle -> https://jsfiddle.net/txq0zpf8/14/

Expected behavior The button should be able to see the last four of the card number and the text is centered.
see the demo implemented by js -> https://jsfiddle.net/Lrktw9x0/2/

Screenshots
chrome:

safari:

Component information:

• Component
  • 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:

• Browser: all browsers
• Country/region: all regions

There's a workaround in place to handle when the button is used within a shadow DOM. This should ideally be fixed in pay.js. Once it is, this workaround should be removed.

I noticed that when printing the error using the onError property on the component, the error was stringified for some reason. Therefore, it was only printing Error.

Furthermore, to access the "actual error", I had to console.log(error.statusCode) or console.log(error.statusMessage), as the documentation indicates that this is the actual shape of the Google Pay error: https://developers.google.com/pay/api/web/reference/error-objects

However, the expected type in this package (@google-pay/button-react/dist/index.d.ts, line 33) expects the standard Error from TypeScript, which doesn't have the statusCode and statusMessage properties, causing the error handling difficult without overwriting the type at least locally.

Unless I mistunderstood something, I think it should instead use a custom error with statusCode and statusMessage properties.

My suggestion would be to define an interface just above the Config interface:

interface GooglePayError extends Error {
    statusCode?: string;
    statusMessage?: string;
}

And using it instead of Error in the Config interface:

interface Config {
    environment: google.payments.api.Environment;
    existingPaymentMethodRequired?: boolean;
    paymentRequest: google.payments.api.PaymentDataRequest;
    onPaymentDataChanged?: google.payments.api.PaymentDataChangedHandler;
    onPaymentAuthorized?: google.payments.api.PaymentAuthorizedHandler;
    onLoadPaymentData?: (paymentData: google.payments.api.PaymentData) => void;
    onCancel?: (reason: google.payments.api.PaymentsError) => void;
-   onError?: (error: Error) => void;
+   onError?: (error: GooglePayError) => void;
    onReadyToPayChange?: (result: ReadyToPayChangeResponse) => void;
    onClick?: (event: Event) => void;
    buttonColor?: google.payments.api.ButtonColor;
    buttonType?: google.payments.api.ButtonType;
    buttonSizeMode?: google.payments.api.ButtonSizeMode;
    buttonLocale?: string;
}

I am using Sandbox of Braintree GPAY. When I select a Card and click Continue from within the GPAY Popup; I get the following error :
"{"error":{"message":"Authorization fingerprint is invalid"},"fieldErrors":[{"field":"authorizationFingerprint","code":"93201","message":"Authorization fingerprint is required"}]}" in the following callback :
onLoadPaymentData

Does anyone have any idea around this bug ? Need help as it is stopping us ffrom going LIVE.

Following is my source code :

<GooglePayButton buttonColor="white" buttonType="checkout" environment="TEST" paymentRequest={{ apiVersion: 2, apiVersionMinor: 0, allowedPaymentMethods: [ { type: 'CARD', parameters: { allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'], allowedCardNetworks: ['MASTERCARD', 'VISA'], }, tokenizationSpecification: { type: 'PAYMENT_GATEWAY', parameters: { /*Based of this article https://developers.google.com/pay/api/web/guides/tutorial#tokenization I have added config specific to Braintree */ gateway: 'braintree', 'braintree:apiVersion': 'v1', 'braintree:sdkVersion': '3.85.2', 'braintree:merchantId': process.env.BRAINTREE_MERCHANT_ID, 'braintree:clientKey': clientToken, }, }, }, ], merchantInfo: { merchantId: 'SOME_ID', merchantName: 'SOME_MERCHANT_NAME', }, transactionInfo: { totalPriceStatus: 'FINAL', totalPriceLabel: 'Total', totalPrice: total.toFixed(2), currencyCode: 'USD', countryCode: 'US', }, }} onLoadPaymentData={(paymentRequest) => { debugger console.log(paymentRequest) }} />

Following is the Screenshot of the error : https://www.screencast.com/t/YahH1XRtZc2E

Describe the bug A clear and concise description of what the bug is.

This module is not being transpiled to a distributable that can be used easily. There are two problems I'm running into with webpack.

1. There is an import React from 'react'; statement in index.js.
2. It is compiled to ES6+ language level and requires babel to transpile it.

Is it possible to create a dist that is ES5 compatible?

To Reproduce Steps to reproduce the behavior:

1. import the module in code
2. bundle with webpack/babel
3. failures unless this module is specifically included

Expected behavior A clear and concise description of what you expected to happen.

Should be able to include this in a webpack build with no additional configuration.

When integrated with React and continued the payment
CODE:

import React from "react";
import GooglePayButton from "@google-pay/button-react";
const Gpay = () => {
  console.log("here");
  return (
    <GooglePayButton
      environment="TEST"
      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": "v3",
                "stripe:publishableKey":
               "<pub_key_added>",
              },
            },
          },
        ],
        merchantInfo: {
          merchantId: "12345678901234567890",
          merchantName: "Demo Merchant",
        },
        transactionInfo: {
          totalPriceStatus: "FINAL",
          totalPriceLabel: "Total",
          totalPrice: "100.00",
          currencyCode: "USD",
          countryCode: "US",
        },
      }}
      onLoadPaymentData={(paymentRequest) => {
        console.log("load payment data", paymentRequest);
      }}
    />
  );
};

export default Gpay;

ERROR:

Describe the bug A clear and concise description of what the bug is.

To Reproduce Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior A clear and concise description of what you expected to happen.

Screenshots If applicable, add screenshots to help explain your problem.

Component information:

• Component
  • 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):
• OS (e.g. iOS8.1):
• Browser (e.g. stock browser, safari)
• Country/region:

Additional context Add any other context about the problem here.

Describe the bug A clear and concise description of what the bug is.

When installing @google-pay/button-angular via yarn add @google-pay/button-angular on an Angular 14 project, you will encounter the following error.

Error: node_modules/@google-pay/button-angular/button-angular/lib/google-pay-button.component.d.ts:35:18 - error TS2707: Generic type 'ɵɵDirectiveDeclaration' requires between 6 and 8 type arguments.

35     static ɵdir: i0.ɵɵDirectiveDeclaration<GooglePayButtonComponent, "google-pay-button", never, { "paymentRequest": "paymentRequest"; "environment": "environment"; "existingPaymentMethodRequired": "existingPaymentMethodRequired"; "buttonColor": "buttonColor"; "buttonType": "buttonType"; "buttonSizeMode": "buttonSizeMode"; "buttonLocale": "buttonLocale"; "paymentDataChangedCallback": "paymentDataChangedCallback"; "paymentAuthorizedCallback": "paymentAuthorizedCallback"; "readyToPayChangeCallback": "readyToPayChangeCallback"; "loadPaymentDataCallback": "loadPaymentDataCallback"; "cancelCallback": "cancelCallback"; "errorCallback": "errorCallback"; "clickCallback": "clickCallback"; }, {}, never, never, false, never

To Reproduce Steps to reproduce the behavior:

1. Initialize a blank Angular 14 repository
2. yarn add @google-pay/button-angular
3. Observe that the project fails to compile.
4. Update the dependency to 3.0.1 / 3.0.0
5. Observe that the project now compiles.

Expected behavior No type error

Component information:

• Component

  • 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):

  > 3.0.1

Additional context Add any other context about the problem here.

Workaround

3.0.1-3.0.0 compile fine. Suspect something went wrong during the Angular 15 upgrade in the 3.0.2 release.

You could also keep the 3.0.5 and skipLibCheck: true in your tsconfig.json

See a functional example on a fresh Ang14 repository here using 3.0.0 and the non-functional 3.0.5 example here

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

Describe the bug A clear and concise description of what the bug is.
I have the google pay button working on a form, but if that form is embedded on another page and that page is being viewed on a mobile device the google window never loads credit cards and instead shows a loading spinner and says processing forever

To Reproduce Steps to reproduce the behavior:

1. Load google pay react button within an iframe on mobile device
2. Click on google pay button
3. google pay window hangs on "processing" view

Expected behavior A clear and concise description of what you expected to happen.
google window finishes processing and shows credit cards

Screenshots If applicable, add screenshots to help explain your problem.

Component information:

• Component
  • 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:

only appears to occur on chrome from a mobile view (whether an actual phone or using the mobile view from dev tools)
Google button must be embedded within an iframe.
Was using the react google pay button in the TEST environment

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)
            }
          />

How to create Google Pay Button in React Native. Can some help me with the document.

Thanks in Advance

I am trying to show different states for the Google Pay Button for React (https://github.com/google-pay/google-pay-button/tree/main/src/button-react)

Is there a way to show that the button is disabled or loading?

I see the other issues and understand that this is possible on Angular, but there does not seem to be the option for customisation with the React version, based on the typescript setting.

How can catch this err

Hi,

I've noticed today that the google pay button color is converted to black, although i'm setting the buttonColor property explicitly to be white, yet i'm getting the black version.

not sure what's wrong in this, i've tried also the stackBlitz example
https://stackblitz.com/edit/google-pay-react?file=src%2FApp.js

it does show the same issue:

Describe the bug A clear and concise description of what the bug is.
The issue im seeing is when the google pay script doesnt load, an unhandled exception is thrown instead of passing the error to the config.onError.

To Reproduce Steps to reproduce the behavior:

1. Go to this stackblitz
2. Click on update all dependencies to latest
3. inspect the page and block https://pay.google.com/gp/p/
4. See error

Expected behavior A clear and concise description of what you expected to happen.
The updateElement function should have a check that google is defined before invoking this.client = new google.payments.api.PaymentsClient(this.createClientOptions(this.config));

Screenshots If applicable, add screenshots to help explain your problem.

Component information:

• Component
  • 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):
• OS (e.g. iOS8.1):
• Browser (e.g. stock browser, safari)
• Country/region:

Additional context Add any other context about the problem here.

Describe the bug

I'm getting an import error when using the Google Pay React component with any NextJS projects. I've tried with both a fresh project as well as my company's web project.

To Reproduce

1. Setup blank Typescript enabled NextJS project (npx create-next-app, rename file to pages/index.tsx and install necessary dependencies when prompted).
2. npm install Google Pay React Button and include on page
3. See error thrown

Expected behavior

Expect Google Pay Button to render

Screenshots

Component information:

• Component
  • React component (@google-pay/button-react)
• Component version 2.1.5

Environment:

• Device: MacBook Pro 15-inch, 2019
• OS: Mac OS 10.15.7
• Browser: Chrome 88.0.4324.146
• Country/region: US

Describe the bug
safari browser couldn't load the script 'https://pay.google.com/gp/p/js/pay.js'

To Reproduce Steps to reproduce the behavior:

1. See error

Expected behavior Browser should load the script and show the google pay button

Screenshots

Component information:

• Component
  • 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:

• OS (Mac OS X 10_15_7):
• Browser (Safari)

The Google Pay button supports a "Donate with Google Pay" variant (see https://jsfiddle.net/9a8oLzng/), however the Google Pay type declarations does not support this.

Update the Google Pay type definitions to support the donate button type.

Depends on: DefinitelyTyped/DefinitelyTyped#46326.

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.

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.

Describe the bug

Hi everyone, thanks for this React button implementation!
I have an UX issue that produce error on during my Google Pay payment process.
It is due to the fact that in handler onPaymentDataChanged with callbackTrigger === 'INITIALIZE', there is no loader displayed. For other callbackTrigger params, the loader is displayed.
Due to the absence of loader + grey overlay, users can click on button "Pay" even if the Promise returned is not resolved (required because I have to fetch data from my backend: price, shipment options, etc.)

To Reproduce

1. Use following onPaymentDataChange:

onPaymentDataChanged={({ callbackTrigger }) => {
  console.log('start:', callbackTrigger);
  return new Promise((resolve, reject) =>
    setTimeout(() => {
      resolve({});
      console.log('end:', callbackTrigger);
    }, 2000),
  );
}}

2. Click on Google Pay button: there is no loader
3. Trigger a call to this handler (change address for example): there is a loader

Expected behavior A clear and concise description of what you expected to happen.
Display loader while callback with callbackTrigger === 'INITIALIZE' Promise is not resolved, to block interaction with Google Pay popup.

Screenshots If applicable, add screenshots to help explain your problem.

Component information:

• Component
  • 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): Desktop (Asus UX430U)
• OS (e.g. iOS8.1): Ubuntu 21.04
• Browser (e.g. stock browser, safari): Firefox, Chromium
• Country/region: FR

Additional context Add any other context about the problem here.

here i integrated gpay using hyperlink(upi scheme) but in the response its giving me following fields, i am interested in signature field which is mentioned in docs link is below.
LINK: https://developers.google.com/pay/india/api/web/googlepay-response
RESPONSE

    "ApprovalRefNo":
    "Status": 
    "TrtxnRef": 
    "response"
    "responseCode": 
    "txnId":
    "txnRef": 

Code that inferred request parameters based on the presence of other values was removed to keep the button API consistent with the loadPaymentData request parameters.

The downside to this is that unless developers read the API documentation, exploring the API and just trying things out could increase the chances that the user receives an error.

I would like to revisit this and re-enable this type of inference if we can get consensus on this approach.

Is your feature request related to a problem? Please describe.

It is too easy to forget to include environment and have the button default to the TEST integration.

Describe the solution you'd like A clear and concise description of what you want to happen.

Make the environment property a required field so that I can't accidentally forget to specify an environment and have it silently default to TEST

Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.

N/A

Additional context Add any other context or screenshots about the feature request here.

N/A

Hello,

When there's already a PaymentRequest UI open in a different tab, the Google Pay button doesn't work and it just logs an error in the console.

Another PaymentRequest UI is already showing in a different tab or window.

I would like to be able to handle this exception and show some message to the users, however I couldn't find a way yet. I was expecting to be able to use one of the component callbacks such as onError to handle that, but apparently this isn't the right way.

Do you have any advices on how to do that?

Here are the steps to reproduce:

1. Click on google pay button in a tab and leave the PaymentRequest opened
2. Go to a different tab and click the google pay button again.

This question is related to:

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

Hi team,

I see that the current API does not support a white background Google Pay Button. I came into this problem when integrating with our app which has a black background

It would be great if the Button component has an extra optional prop theme or variant to support the white background version

The alternative that I'm using in order to follow the brand guideline is to use the HTML-and-CSS-only version of the button which can be found here at https://developers.google.com/pay/india/api/otherapis/omnichannel/brand-guidelines

Describe the bug An error is being thrown by pay.js when opening/closing the Google Pay window several times

To Reproduce:

1. Click on the Google Pay button (like if you want to break it).
2. Close the Google Pay window (try to break it again).
3. Repeat 1 and 2 until you get the error.

Expected behavior We expect it to not fail, so Sentry is not alarming us all the time.

Screenshots

Component information:

• Component
  • 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. PC):
• OS (e.g. Windows 10):
• Browser (e.g. Edge 111.0.1661)
• Country/region: USA

Additional context It also happens in many other devices and OS/Browsers. E.g Samsung S21 Ultra / Samsung Mobile browser

Is your feature request related to a problem? Please describe.
Lacking documentation for https://developers.google.com/pay/api/web/reference/client#prefetchPaymentData

Describe the solution you'd like A clear and concise description of what you want to happen.
Add use cases or code examples for https://developers.google.com/pay/api/web/reference/client#prefetchPaymentData

Describe the bug

Latest version v3.0.2 breaks in Angular with the following error

The entrypoint for '@google-pay/button-angular' could not successfully be resolved

To Reproduce Steps to reproduce the behavior:

1. Go to StackBlitz obtained from example page at https://github.com/google-pay/google-pay-button/tree/main/src/button-angular
2. Install the new version
   
3. See error

Expected behavior

Described error should not happen

Screenshots If applicable, add screenshots to help explain your problem.

Component information:

• Component
  • 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): 3.0.2

Environment:

• Browser (e.g. stock browser, safari)

In Angular Universal v6, I have installed the npm google pay module after running the code with "npm run start" I am getting this error: ERROR in node_modules/@google-pay/button-angular/button-angular/lib/google-pay-button.component.d.ts(36,9): error TS1086: An accessor cannot be declared in an ambient context.

Here is my package.json

{
  "name": "ng-universal-demo",
  "version": "0.0.0",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "https://github.com/angular/universal-starter.git"
  },
  "contributors": [
    "AngularClass <[email protected]>",
    "PatrickJS <[email protected]>",
    "Jeff Whelpley <[email protected]>",
    "Jeff Cross <[email protected]>",
    "Mark Pieszak <[email protected]>",
    "Jason Jean <[email protected]>",
    "Fabian Wiles <[email protected]>"
  ],
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "lint": "ng lint ng-universal-demo",
    "build:client-and-server-bundles": "ng build --prod && ng run ng-universal-demo:server:production",
    "build:prerender": "npm run build:client-and-server-bundles && npm run webpack:server && npm run generate:prerender",
    "build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
    "generate:prerender": "cd dist && node prerender",
    "webpack:server": "webpack --config webpack.server.config.js --progress --colors",
    "serve:prerender": "cd dist/browser && http-server",
    "serve:ssr": "node dist/server",
    "prod": "npm run build:ssr && npm run serve:ssr",
    "prod:pre": "npm run build:prerender && npm run serve:prerender"
  },
  "pre-commit": [],
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.4",
    "@angular/cdk": "^6.2.1",
    "@angular/common": "^6.0.0",
    "@angular/compiler": "^6.0.0",
    "@angular/core": "^6.0.0",
    "@angular/flex-layout": "^6.0.0-beta.16",
    "@angular/forms": "^6.0.0",
    "@angular/http": "^6.0.0",
    "@angular/material": "^6.2.1",
    "@angular/platform-browser": "^6.0.0",
    "@angular/platform-browser-dynamic": "^6.0.0",
    "@angular/platform-server": "^6.0.0",
    "@angular/router": "^6.0.0",
    "@google-pay/button-angular": "^2.5.0",
    "@nguniversal/common": "^6.0.0",
    "@nguniversal/express-engine": "^6.0.0",
    "@nguniversal/module-map-ngfactory-loader": "^6.0.0",
    "@ngx-translate/core": "^10.0.2",
    "@ngx-translate/http-loader": "^3.0.1",
    "@types/file-saver": "^1.3.0",
    "bullet": "^0.1.0",
    "core-js": "^2.4.1",
    "file-saver": "^1.3.8",
    "hammerjs": "^2.0.8",
    "ng2-opd-popup": "^1.1.21",
    "ng2-overlay": "^0.7.2",
    "ng2-popup": "^0.4.0",
    "ng2-track-scroll": "^1.1.5",
    "ng2-validation": "^4.2.0",
    "plotly.js": "^1.38.2",
    "primeng": "4.3.0",
    "q": "^1.5.1",
    "rxjs": "^6.2.0",
    "rxjs-compat": "^6.2.0",
    "webpack-cli": "^2.0.14",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.6.0",
    "@angular/cli": "6.0.0",
    "@angular/compiler-cli": "6.0.0",
    "@angular/language-service": "6.0.0",
    "@types/node": "7.0.7",
    "codelyzer": "^4.0.2",
    "cpy-cli": "^1.0.1",
    "css-loader": "^0.28.11",
    "express": "^4.15.2",
    "http-server": "^0.10.0",
    "pre-commit": "^1.2.2",
    "reflect-metadata": "^0.1.10",
    "ts-loader": "^4.2.0",
    "tslint": "^5.7.0",
    "typescript": "~2.7.2"
  }
}

Describe the bug

Sorry I'm not sure if this is the right repo to report this but it's the closest I can find.

We use the Google Pay React button library in our project. Today we received reports our checkout was broken. Upon investigation we discovered that the "buttonType" property is causing an issue.

If a site specifies a buttonType that is anything other than "buy", pay.js will throw an exception and cause an error. In our situation the page became stuck and unresponsive. Once I removed this property and allowed the default, it worked again.

I can reproduce this on the Google demo site.

To Reproduce

1. Go to 'https://developers.google.com/pay/api/web/guides/resources/customize'
2. Observe a Google Pay button is shown
3. Click the "buttonType" and select some other value than "buy"
4. Observe the button disappears and a stack trace is shown in the developer console

In this stack trace example I changed the buttonType to "donate" and it seems it is trying (and failing) to read a property of that string value.

pay.js:275 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'donate')
    at m.pa (pay.js:275:150)
    at m.pa (pay.js:286:382)
    at l.<anonymous> (index.umd.min.js:15:4764)
    at Generator.next (<anonymous>)
    at index.umd.min.js:15:692
    at new Promise (<anonymous>)
    at e (index.umd.min.js:15:437)
    at l.updateElement (index.umd.min.js:15:4150)
    at l.configure (index.umd.min.js:15:2849)
    at index.umd.min.js:15:8645

Expected behavior

It works as we would expect

Component information:

At least the pay.js component.

Environment:

Reproduced on Chrome for Windows, Chrome for Android and Chrome for iOS.

Angular is in version 12 now but Google Pay Button Angular component here is for previous Angular version, v11.
An update is required.

This question is related to:

• React component (@google-pay/button-react)

I have a problem with displaying a button on the screen. Everything works fine on all platforms in all browsers in test and production enviroment except firefox ios.

<GooglePayButton
                      environment={googlePayEnvironment as google.payments.api.Environment}
                      paymentRequest={{
                        emailRequired: true,
                        apiVersion: 2,
                        apiVersionMinor: 0,
                        allowedPaymentMethods: [
                          {
                            type: 'CARD',
                            parameters: {
                              allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
                              allowedCardNetworks: ['MASTERCARD', 'VISA'],
                            },
                            tokenizationSpecification: {
                              type: 'PAYMENT_GATEWAY',
                              parameters: {
                                gateway: gateway,
                                gatewayMerchantId: gatewayMerchantId,
                              },
                            },
                          },
                        ],
                        merchantInfo: {
                          merchantId: googlePayMerchantId,
                          merchantName: googlePayMerchantName,
                        },
                        transactionInfo: {
                          totalPriceStatus: 'FINAL',
                          totalPriceLabel: 'Total',
                          totalPrice: `100.00`,
                          currencyCode: 'UAH',
                          countryCode: 'UA',
                        },
                      }}
                      onLoadPaymentData={(paymentRequest) => {
                        myownmethodhere(paymentRequest)
                      }}
                      buttonType="plain"
                    />

Hi there! Does this button support redirect mode vs. pop-up mode?

This question is related to:

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