gpay-test

NPM plugin using gpay nvm for payment and authorization

required below variables passing through props to the GooglePay package.

• GPAY_ALLOWED_CARD_AUTHMETHODS
• GPAY_ALLOWED_CARD_NETWORKS
• GPAY_GATEWAY_MERCHNAT_ID
• GPAY_ENVIRONMENT
• GPAY_API_VERSION
• GPAY_MERCHANT_ID
• GPAY_MERCHANT_NAME
• countryCode
• currencyCode
• amount

Below are the optional props to the GooglePay package to have a custom stylings to your google button.

• buttonColor
• buttonLocale
• buttonSizeMode
• buttonType
• buttonRadius
• className
• existingPaymentMethodRequired
• style

Below callback functions used by passing thorugh props to the googlePay component to get desired values from t hem

• gpaySuccess()
• gpayCancel()
• gpayError()

Below are the Steps to use GooglePay Npm Package in your component.

• install the package by using the command npm install gpay-test.
• import the package in your required component as below

import GooglePay from "gpay-test"

• use package by provided the above props in an object named as data and callback functions

• define the callback functions in your component as below

    const gpaySuccess = (data) =>{
        console.log("data", data);
    }

    const gpayCancel = () =>{
    console.log("payment cancel")
    }

    const gpayError = (error) =>{
    console.log("error", error)
    }

• create an object & place all the necessary variables need to pass as props to the package

    const data= {GPAY_ALLOWED_CARD_AUTHMETHODS: ["PAN_ONLY", "CRYPTOGRAM_3DS"], GPAY_ALLOWED_CARD_NETWORKS: ["AMEX", "DISCOVER", "INTERAC", "JCB", "MASTERCARD", "VISA"],GPAY_GATEWAY_MERCHNAT_ID: '****', GPAY_API_VERSION: 2 ,GPAY_MERCHANT_ID:'****', GPAY_MERCHANT_NAME: 'Example Merchant', GPAY_ENVIRONMENT: 'TEST', currencyCode: 'USD', countryCode: 'US', amount: "***", buttonColor:"white", buttonLocale:"en", buttonSizeMode:"fill", buttonType:"donate", buttonRadius:"12px", className:"gpayContainer", existingPaymentMethodRequired: false, style:{marginTop: "20px", background: "#000"}}

• Sample Data

    const data= {GPAY_ALLOWED_CARD_AUTHMETHODS: ["PAN_ONLY", "CRYPTOGRAM_3DS"], GPAY_ALLOWED_CARD_NETWORKS: ["AMEX", "DISCOVER", "INTERAC", "JCB", "MASTERCARD", "VISA"],GPAY_GATEWAY_MERCHNAT_ID: '****', GPAY_API_VERSION: 2 ,GPAY_MERCHANT_ID:'****', GPAY_MERCHANT_NAME: 'Example Merchant', GPAY_ENVIRONMENT: 'TEST', currencyCode: 'USD', countryCode: 'US', amount: "***", buttonColor:"white", buttonLocale:"en", buttonSizeMode:"fill", buttonType:"donate", buttonRadius:"12px", className:"gpayContainer", existingPaymentMethodRequired: false, style:{marginTop: "20px", background: "#000"}}

• use the package in you component as shown below

   <GooglePay data={data} gpaySuccess= {gpaySuccess} gpayError= {gpayError} gpayCancel= {gpayCancel} />

Below are the versions used for this gpay-test package

• React - 18.2.0
• webpack - 5.97.1

Reference links

• https://www.npmjs.com/package/@google-pay/button-react

• https://developers.google.com/pay/india/api/web/intro