charistheo / react-google-pay-button

⛔️ [DEPRECATED] A React Google Pay button component for the web

⚠️ 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

react-google-pay-button's Issues

Google Pay API V1

Hello. How I can use GPay Api v1. My provider uses API version 1. Your component fails to pay and reports the error 'cardRequirements' is missing!'. The documentation says that in addition to allowedPaymentMethods, you must specify cardRequirements. How can I pass this parameter?

Suppor for shipping costs

Add support for onPaymentDataChanged handler function and shipping information in PaymentDataRequest object.

Support for prefetch paymentData?

Is there a way to support https://developers.google.com/pay/api/web/reference/client#prefetchPaymentData?