React Google Pay Button 
by: SHOCKOE.COM, LLC.
This is the React component for the Google Pay button.
Installation
npm install @shockoe.com/react-google-payyarn add @shockoe.com/react-google-payExample usage
import GooglePayButton from '@shockoe.com/react-google-pay';
const processGooglePayment = (paymentData: any) => {
console.log('paymentData', paymentData);
return new Promise((resolve) => {
setTimeout(() => {
resolve({ transactionState: 'SUCCESS' });
}, 3000);
});
};
<GooglePayButton
className={styles.paymentMethod}
environment="TEST"
apiVersion={2}
apiVersionMinor={0}
allowedAuthMethods={['PAN_ONLY', 'CRYPTOGRAM_3DS']}
allowedCardNetworks={['AMEX', 'DISCOVER', 'MASTERCARD', 'VISA']}
gateway="example"
merchantId="12345678901234567890"
merchantName="Merchant Name"
transactionInfo={{
displayItems: [
{
label: 'Deposit Amount',
type: 'SUBTOTAL',
price: "1.00",
},
],
countryCode: 'US',
currencyCode: 'USD',
totalPriceStatus: 'FINAL',
totalPrice: "1.00",
totalPriceLabel: 'Total',
}}
processGooglePayment={processGooglePayment}>
<span>Google Pay</span>
</GooglePayButton>Documentation
Visit the Google Pay developer site for more information about integrating Google Pay into your website.
Properties
| Property | Type | Info |
|---|---|---|
children |
|
Requires. Child elements that will be displayed inside the button. |
className |
|
Optional. The class will directly affect the styles of the button and its children. |
environment |
|
Optional. The Google Pay environment to target.
Default value |
apiVersion |
|
Optional. Declare the version of the Google Pay API that your site uses. Default value |
apiVersionMinor |
|
Optional. Declare the minor version of the Google Pay API that your site uses. Default value |
allowedAuthMethods |
|
Optional. The Google Pay API might return cards on file on Google.com (PAN_ONLY) or a device token on an Android-powered device authenticated with a 3-D Secure cryptogram (CRYPTOGRAM_3DS). You can control whether both methods or just one of them can be returned. Before you set allowedCardAuthMethods, confirm with your payment processor and acquirer on whether device tokens (CRYPTOGRAM_3DS) are supported in your region. Default value |
allowedCardNetworks |
|
Optional. Define the card networks supported by your site and your gateway. Default value |
gateway |
|
Required. Identify your gateway In the following link you will find a table where you can identify the value or name that you need to enter in the property Gateway List. |
merchantId |
|
Required. Obtain your Merchant ID value from the Google Pay and Wallet Console, and update the merchantId property. See |
merchantName |
|
Required. Define your Merchant Name. |
transactionInfo |
|
Required. Define a total price and currency for a shopper to authorize. Provide Google Pay API with a payment amount, currency, and amount status |
processGooglePayment |
|
Required. Function to handle payment authorization callback attempts. paymentData response from Google Pay API after a payer approves payment through user gesture. |
🛠 Local Environment
💽 System Requirements
- node v12^
- yarn
🏛️ Resources
🧹 Linting
Linting is ran automatically on commit using Husky
This project was bootstrapped with Create React App.
🛠 Local Setup
Before building/running make sure you run one of the config commands!
- Clone the repo
- Install dependencies:
yarn install - Run the build script:
yarn build - Run script:
yarn pack - Copy the generated gzip file to the root of your project
- in the
package.jsonfile, add the following script inside the dependencies section:
"dependencies": {
...,
"react-google-pay": "file:./react-google-pay-v##.##.##.tgz"
}
- Install dependencies in your project:
yarn install
Available Scripts
In the project directory, you can run:
yarn lint
Runs eslint and outputs any errors. This is done automatically on commit.
yarn lint-fix
Runs eslint and fixes any errors that it possibly can. Useful to run this before staging your changes.
yarn prettier
Runs prettier and formats all files supported by Prettier in the current directory and its subdirectories..
yarn build
Builds the Pack for production to the lib folder.
The build is minified and the filenames include the hashes.
Your Pack is ready to be deployed!
See the section about deployment for more information.
Learn More
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.