@google-pay/button-react

Google Pay React button

This is the React component for the Google Pay button.

Installation

npm install @google-pay/button-react

Example usage

<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: 'gateway name',
          },
        },
      },
    ],
    merchantInfo: {
      merchantId: '12345678901234567890',
      merchantName: 'Demo Merchant',
    },
    transactionInfo: {
      totalPriceStatus: 'FINAL',
      totalPriceLabel: 'Total',
      totalPrice: '100.00',
      currencyCode: 'USD',
      countryCode: 'US',
    },
  }}
  onLoadPaymentData={paymentRequest => {
    console.log('Success', paymentRequest);
  }}
/>

More React examples can be found in the examples folder of this repository.

Documentation

Visit the Google Pay developer site for more information about integrating Google Pay into your website.

Properties

Property	Type	Remarks
buttonColor	"default" | "black" | "white"	Optional. "default"/"black" buttons are suitable to be used on light colored backgrounds, with "white" being appropriate for dark colored backgrounds. Default value "default".
buttonType	"long" | "short"	Optional. "long" buttons are presented with the But with prefix (localized based on the user's browser settings) in front of the Google Pay logo, while "short" buttons only displays the Google Pay logo. Default value "long".
className	string	Optional. The CSS class name to apply to the element.
environment	"TEST" | "PRODUCTION"	Optional. The Google Pay environment to target. Note: in the "TEST" environment, fake payment credentials are returned. In order to use the "PRODUCTION" environment, your website must be registered with Google Pay. This can be done through the Google Pay Business Console. Default value "TEST".
existingPaymentMethodRequired	boolean	Optional. When set to true (and environment is Production), the Google Pay button will only be displayed if the user already has an existing payment that they can use to make a purchase. Default value false.
paymentRequest	PaymentDataRequest	Required. Request parameters that define the type of payment information requested from Google Pay. See PaymentDataRequest reference for more information.
style	CSSProperties	Optional. The CSS style attributes to apply to the element.

Callbacks

Callback	Remarks
onCancel	Invoked when a user cancels or closes the Google Pay payment sheet.
onError	Invoked an error is encountered in the process of presenting and collecting payment options from the Google Pay payment sheet.
onPaymentAuthorized	Invoked when a user chooses a payment method. This callback should be used to validate whether or not the payment method can be used to complete a payment. This would be typically used to perform pre-authorization to ensure that the card is valid and has sufficient funds. See payment authorization reference for more information.
onPaymentDataChanged	Invoked when payment the user changes payment data options including payment method, shipping details, and contact details. This callback can be used to dynamically update transactionInfo when payment details, shipping address, or shipping options change. See payment data changed reference for more information.
onReadyToPayChange	Invoked when the user's isReadyToPay state changes. This callback can be used to change the application's behaviour based on whether or not the user is ready to pay.
onLoadPaymentData	Invoked when a user has successfully nominated payment details. This callback receives the PaymentData response which includes the PaymentMethodData that can be sent to supported payment processors.