react-google-pay-button v1.1.3

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

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