Evergent Npm package for JusPay payment gateway webview setup

Please follow the steps

Step 1 :

$ npm i evergent-native-sdk-aha

Step 2 : If evergent-native-sdk-aha version > 1.0.3, uninstall/remove @react-native-community/async-storage package(As this package has deprecated) and install below packages.

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

Step 3 : In Android folder

Add following maven url in the allProjects > repositories section of root(top) build.gradle:

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

step 4 : In Android folder

Add the clientId ext property in root(top) build.gradle:

buildscript {
    ....
    ext {
        ....
        clientId = "<clientId shared by Juspay team>"
        hyperSDKVersion = "2.1.25"
        ....
    }
    ....
}

This is the same clientId present earlier in the MerchantConfig.txt file.

step 5 :

1. Delete MerchantConfig.txt file.

2. Remove useDynamicAssets property defined in root(top) build.gradle.

step 6 : Install evergent-native-sdk-aha and import below modules.

import {LoadSdk, EvntHyperSdkWebview} from 'evergent-native-sdk-aha';

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

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

import {LoadSdk} from 'evergent-native-sdk-aha';

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

LoadSdk(params);

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

Example

import {EvntHyperSdkWebview} from 'evergent-native-sdk-aha';
	
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} cleaverTapEventAction={cleaverTapEventAction} {...request}/>

step 9 : Create below functions to handle payment action and cleaver tap event from the package

Example

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

const cleaverTapEventAction = event => {
    ... Here we will receive the cleaver tap event data 
};