Evergent Npm package for JusPay payment gateway webview setup

Please follow the steps

Step 1 :

$ npm i evnt-hyper-sdk-webview

Step 2 :

$ npm i hyper-sdk-react react-native-webview @react-native-community/async-storage

Link async-storage library in react native application

$ react-native link @react-native-community/async-storage

Step 3 : In Android folder

Add following maven url in top build.gradle:

maven { url "https://maven.juspay.in/jp-build-packages/hyper-sdk/"}

step 4 : Add following dependencies in android/app/build.gradle (For Gpay):

dependencies {
    implementation 'in.juspay:google-pay-client-api:1.0.0'
}
	

step 5 : In Android folder

Dynamic Assets Add the following ext property in top build.gradle if you are using the Dynamic Assets Feature:

buildscript {
    ....
    ext {
        ....
        hyperSDKVersion = "2.0.3-rc.46"
        useDynamicAssets = true
        ....
    }
    ....
}

step 6 : Add following code into AndroidManifest.xml

android:allowBackup="true"
	

step 7 : In Android folder

Create a text file with name 'MerchantConfig.txt' alongside the root(top) build.gradle file. The contents of the file should be as follows.

clientId = <client_Id> (quotes not required)

step 8 : Install evnt-hyper-sdk-webview and import below modules.

import {LoadSdk, EvntHyperSdkWebview} from 'evnt-hyper-sdk-webview';

step 9 : Call LoadSdk atleaset 5sec before loading the EventHyperSdkWebview,

Note: Suggested to call LoadSdk in initial state of the plans screen.

import {LoadSdk} from 'evnt-hyper-sdk-webview';

let params = {
    channelPartnerID:<channelPartnerId>,
    accessToken:<accessToken>,
    country:<country>,
    url:<url>
}

LoadSdk(params);

step 10 : Need to send the below request perameters as props to EvntHyperSdkWebview

Example

import {EvntHyperSdkWebview} from 'evnt-hyper-sdk-webview';
	
let request = {
    url: {Evergent URL},
    country: {Country code},
    platform: {platform},
    deviceType: {deviceType},
    serviceID: {serviceID},
    channelPartnerID: {channelPartnerID},
    locale: {locale},
    stateCode: {stateCode},
    accessToken:{accessToken}
};

<EvntHyperSdkWebview onPaymentAction={onPaymentAction} {...request}/>

step 11 : Create a function to handle payment action from the package

Example

const onPaymentAction = event => {
    ... Here we will receive the payment operation result like success or failure 
};