⚠️ This package has been deprecated in favor of https://github.com/google-pay/google-pay-button/tree/main/src/button-react
A React Google Pay button component for the web.
Make sure you have read and understood the official docs before implementing
npm install --save react-google-pay-buttonclass Example extends Component {
render () {
return (
<GPayButton
totalPriceStatus={'FINAL'}
totalPrice={'14.45'}
currencyCode={'GBP'}
countryCode={'GB'}
development={true}
/>
)
}
}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}
/>
)
}
}| 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 |
[
{
type: 'CARD',
parameters: {
allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
allowedCardNetworks: ['AMEX', 'DISCOVER', 'INTERAC', 'JCB', 'MASTERCARD', 'VISA']
},
tokenizationSpecification: {
type: 'PAYMENT_GATEWAY',
parameters: {
gateway: 'example',
gatewayMerchantId: 'exampleGatewayMerchantId'
}
}
}
]