npm package: @shockoe.com/react-google-pay
Description: Google Pay API with Custom Button
Author: Alejandro Estrada
Latest version: 1.0.3

# React Google Pay Button [![npm version](https://badge.fury.io/js/@shockoe.com%2Freact-google-pay.svg)](https://badge.fury.io/js/@shockoe.com%2Freact-google-pay)
by: SHOCKOE.COM, LLC.


This is the React component for the Google Pay button.

## Installation

```sh
npm install @shockoe.com/react-google-pay
```

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

## Example usage
```jsx
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](https://developers.google.com/pay/api/web/overview) for more information about
integrating Google Pay into your website.

### Properties

<table>
  <tr>
    <th align="left">Property</th>
    <th align="left">Type</th>
    <th align="left">Info</th>
  </tr>
  <tr>
    <td><p>children</p></td>
    <td><p><code>"element"</code></p></td>
    <td>
      <p>Requires.</p>
      <p>Child elements that will be displayed inside the button.</p>
    </td>
  </tr>
  <tr>
    <td><p>className</p></td>
    <td><p><code>"CSS/SASS Module Class Name" | "Class Name"</code></p></td>
    <td>
      <p>Optional.</p>
      <p>The class will directly affect the styles of the button and its children.</p>
    </td>
  </tr>
  <tr>
    <td><p>environment</p></td>
    <td><p><code>"string"</code></p></td>
    <td>
      <p>Optional.</p>
      <p>The Google Pay environment to target.</p>
      <p><code>"TEST"</code> environment. Initial development uses a TEST environment, which returns dummy payment methods that are suitable to reference the structure of a payment response.</p>
      <p><code>"PRODUCTION"</code> environment. In order to use the <code>"PRODUCTION"</code> environment, your website must be registered with Google Pay. This can be done through the <a href="https://pay.google.com/business/console/">Google Pay Business Console</a>.</p>
      <p>Default value <code>"TEST"</code>.</p>
    </td>
  </tr>
  <tr>
    <td><p>apiVersion</p></td>
    <td><p><code>"number"</code></p></td>
    <td>
      <p>Optional.</p>
      <p>Declare the version of the Google Pay API that your site uses.</p>
      <p>Default value <code>2</code>.</p>
    </td>
  </tr>
  <tr>
    <td><p>apiVersionMinor</p></td>
    <td><p><code>"number"</code></p></td>
    <td>
      <p>Optional.</p>
      <p>Declare the minor version of the Google Pay API that your site uses.</p>
      <p>Default value <code>0</code>.</p>
    </td>
  </tr>
  <tr>
    <td><p>allowedAuthMethods</p></td>
    <td><p><code>"array"</code></p></td>
    <td>
      <p>Optional.</p>
      <p>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.</p>
      <p>Before you set allowedCardAuthMethods, confirm with your payment processor and acquirer on whether device tokens (CRYPTOGRAM_3DS) are supported in your region.</p>
      <p>Default value <code>['PAN_ONLY', 'CRYPTOGRAM_3DS']</code>.</p>
    </td>
  </tr>
  <tr>
    <td><p>allowedCardNetworks</p></td>
    <td><p><code>"array"</code></p></td>
    <td>
      <p>Optional.</p>
      <p>Define the card networks supported by your site and your gateway.</p>
      <p>Default value <code>['AMEX', 'DISCOVER', 'MASTERCARD', 'VISA']</code>.</p>
    </td>
  </tr>
  <tr>
    <td><p>gateway</p></td>
    <td><p><code>"string"</code></p></td>
    <td>
      <p>Required.</p>
      <p>Identify your gateway</p>
      <p>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 <a href="https://developers.google.com/pay/api/web/guides/tutorial#tokenization">Gateway List</a>.</p>
    </td>
  </tr>
  <tr>
    <td><p>merchantId</p></td>
    <td><p><code>"string"</code></p></td>
    <td>
      <p>Required.</p>
      <p>Obtain your Merchant ID value from the Google Pay and Wallet Console, and update the merchantId property.</p>
      <p>See <a href="https://developers.google.com/pay/api/web/reference/request-objects#PaymentDataRequest"><code>PaymentDataRequest</code> reference</a> for more information.</p>
    </td>
  </tr>
  <tr>
    <td><p>merchantName</p></td>
    <td><p><code>"string"</code></p></td>
    <td>
      <p>Required.</p>
      <p>Define your Merchant Name.</p>
    </td>
  </tr>
  <tr>
    <td><p>transactionInfo</p></td>
    <td><p><code>"object"</code></p></td>
    <td>
      <p>Required.</p>
      <p>Define a total price and currency for a shopper to authorize.</p>
      <p>Provide Google Pay API with a payment amount, currency, and amount status</p>
    </td>
  </tr>
  <tr>
    <td><p>processGooglePayment</p></td>
    <td><p><code>"function"</code></p></td>
    <td>
      <p>Required.</p>
      <p>Function to handle payment authorization callback attempts.</p>
      <p>paymentData response from Google Pay API after a payer approves payment through user gesture.</p>
    </td>
  </tr>
</table>

## 🛠 Local Environment

## 💽 System Requirements
- node v12^
- yarn

## 🏛️ Resources
- [Create React App](https://create-react-app.dev/)
- [Google Pay for Web](https://developers.google.com/pay/api/web/guides/tutorial)
- [Husky](https://typicode.github.io/husky/#/?id=install-1)
- [ESLint](https://eslint.org/docs/latest/user-guide/getting-started)
- [Prettier](https://prettier.io/docs/en/install.html)

## 🧹 Linting
Linting is ran automatically on commit using Husky

This project was bootstrapped with [Create React App](https://github.com/facebook/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.<br />

The build is minified and the filenames include the hashes.<br />
Your Pack is ready to be deployed!

See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.


## Learn More

You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).

To learn React, check out the [React documentation](https://reactjs.org/).