⚠️ This package has been deprecated in favor of https://github.com/google-pay/google-pay-button/tree/main/src/button-react

---

react-google-pay-button

A React Google Pay button component for the web.

Example

Googe Pay Button API

Make sure you have read and understood the official docs before implementing

Object Reference Docs

Google Developers Tutorial

Install

npm install --save react-google-pay-button

Usage

Development example

class Example extends Component {
  render () {
    return (
      <GPayButton
        totalPriceStatus={'FINAL'}
        totalPrice={'14.45'}
        currencyCode={'GBP'}
        countryCode={'GB'}
        development={true}
      />
    )
  }
}

Production example

To get a merchantId, follow this checklist

import React, { Component } from 'react'

import GPayButton from 'react-google-pay-button'

// allowed user payment methods 💰
const paymentMethods = [
  {
    type: 'CARD',
    parameters: {
      allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
      allowedCardNetworks: ['AMEX', 'DISCOVER', 'INTERAC', 'JCB', 'MASTERCARD', 'VISA']
    },
    tokenizationSpecification: {
      type: 'PAYMENT_GATEWAY',
      parameters: {
        'gateway': 'stripe',
        'stripe:version': '2019-03-14',
        'stripe:publishableKey': '<YOUR_PUBLIC_STRIPE_KEY>'
      }
    }
  },
  {
    type: 'PAYPAL',
    parameters: {
      'purchase_context': {
        'purchase_units': [{
          'payee': {
            'merchant_id': '<YOUR PAYPAL_ACCOUNT_ID>'
          }
        }]
      }
    },
    tokenizationSpecification: {
      type: 'DIRECT'
    }
  }
]

class Example extends Component {
  loadPaymentDataHandler = paymentData => {
    const paymentToken = paymentData.paymentMethodData.tokenizationData.token
  }

  render () {
    return (
      <GPayButton
        totalPriceStatus={'FINAL'}
        totalPrice={'14.45'}
        currencyCode={'GBP'}
        countryCode={'GB'}
        allowedPaymentMethods={paymentMethods}
        development={true}
        merchantInfo={{
          merchantName: '<YOUR MERCHANT NAME>',
          // A Google merchant identifier issued after your website is approved by Google ✅
          merchantId: '<YOUR MERCHANT ID>'
        }}
        onLoadPaymentData={this.loadPaymentDataHandler}
      />
    )
  }
}

Props

Prop	Type	default value
style	object	For wrapper div element
className	string	For wrapper div element
development	boolean	false
color	string	'black'
type	string	'long'
apiVersion	number	2
apiVersionMinor	number	0
currencyCode	string	required
totalPriceStatus	string	required
tokenizationSpecification	object	required
countryCode	string	required for merchants based in EEA countries
totalPrice	string | number	required unless totalPriceStatus is set to NOT_CURRENTLY_KNOWN
merchantInfo	object	merchantId is required in production
allowedPaymentMethods	PaymentMethod	optional (default)
displayItems	DisplayItem[]	optional
totalPriceLabel	string	optional
checkoutOption	string	optional
onLoadPaymentData	function	optional
onPaymentAuthorized	function	optional
onPaymentDataChanged	function	optional
onUserCanceled	function	optional

---

allowedPaymentMethods

Default value

[
  {
    type: 'CARD',
    parameters: {
      allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
      allowedCardNetworks: ['AMEX', 'DISCOVER', 'INTERAC', 'JCB', 'MASTERCARD', 'VISA']
    },
    tokenizationSpecification: {
      type: 'PAYMENT_GATEWAY',
      parameters: {
        gateway: 'example',
        gatewayMerchantId: 'exampleGatewayMerchantId'
      }
    }
  }
]

• CardParameters
• PayPalParameters