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-pay

yarn add @shockoe.com/react-google-pay

Example 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

🛠 Local Environment

💽 System Requirements

• node v12^
• yarn

🏛️ Resources

• Create React App
• Google Pay for Web
• Husky
• ESLint
• Prettier

🧹 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!

1. Clone the repo
2. Install dependencies: yarn install
3. Run the build script: yarn build
4. Run script: yarn pack
5. Copy the generated gzip file to the root of your project
6. in the package.json file, add the following script inside the dependencies section:

"dependencies": {
  ...,
  "react-google-pay": "file:./react-google-pay-v##.##.##.tgz"
}

7. 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.