PayUCheckoutPro

This is the integration doc for v2 of payu-non-seam-less-react which is based on PayUCheckoutPro Native SDKs.

Installation

For installing it to your project follow the below steps.

$ npm install payu-non-seam-less-react --save
$ react-native link payu-non-seam-less-react

For iOS

Checkoutpro is a dynamic framework, therefore you have to use "use_frameworks!" in podfile. After updating the podfile, install the pod using below command.

pod install

Usage

import PayUBizSdk from 'payu-non-seam-less-react';

Creating Payment Params

var payUPaymentParams = {
key: <Merchant key>,
transactionId: <Transaction Id>,
amount: <Transaction amount>,
productInfo: <productInfo>,
firstName: <Customer firstName>,
email: <Customer email>,
phone: <Customer phone>,
ios_surl: <Success Url for Android>,
ios_furl: <Failure Url for Android>,
android_surl: <Success Url for Android>,
android_furl: <Failure Url for Android>,
environment: 0/1,<0 for Production/1 for Staging>
userCredential: userCredential,
additionalParam: {
payment_related_details_for_mobile_sdk: <payment_related_details_for_mobile_sdk hash>,
vas_for_mobile_sdk: <vas_for_mobile_sdk hash>,
payment: <Payment Hash>
}

Creating CheckoutProConfig Object

For information about CheckoutProConfig refer here

var payUCheckoutProConfig = {
//iOS specific property
primaryColor: <Color Hex Code e.g. "#aabbcc">,
secondaryColor: <Color Hex Code e.g. "#aabbcc">,
merchantLogo: <Image asset name like 'Jio'>,
//Properties common for both platforms (Android &iOS)
merchantName: <Merchant Name>,
showExitConfirmationOnCheckoutScreen: <true/false>,
showExitConfirmationOnPaymentScreen: <true/false>,
cartDetails: <Cart Details like [{ 'Order': 'Value' }, { 'Key Name': 'Value1' }]>,
paymentModesOrder: <Checkout Order like [{ 'UPI': 'TEZ' }, { 'Wallets': 'PAYTM' }]>,
surePayCount: <0-3>,
merchantResponseTimeout: <In milliseconds e.g. 1000>,
autoSelectOtp: <true/false>,
// Android specific property
autoApprove: <true/false>,
merchantSMSPermission: <true/false>,
showCbToolbar: <true/false>,
}

For generating below hashes use method described as here where command name is same as their type and var1 is userCredentials which uniquely identifies your Customer or default.

Command/Hash Type

  • vas_for_mobile_sdk

  • payment_related_details_for_mobile_sdk

For generating Payment Hash(to be set under payment key visit here.

Launching Payment

Create a hashmap of payment params and config object(optional) like below.

var paymentObject = {
payUPaymentParams: payUPaymentParams,
payUCheckoutProConfig: payUCheckoutProConfig
}

Call openCheckoutScreen method available in PayUBizSdk module like below.

PayUBizSdk.openCheckoutScreen(paymentObject);

Callbacks

To get the callbacks for payment-related statuses create an object of NativeEventEmitter and subscribe to the below events.

//App.js
import {NativeEventEmitter } from 'react-native';
//Register event emitters here.
componentDidMount() {
const eventEmitter = new NativeEventEmitter(PayUBizSdk);
this.paymentSuccess = eventEmitter.addListener('onPaymentSuccess', this.onPaymentSuccess);
this.paymentFailure = eventEmitter.addListener('onPaymentFailure', this.onPaymentFailure);
this.paymentCancel = eventEmitter.addListener('onPaymentCancel', this.onPaymentCancel);
this.error = eventEmitter.addListener('onError', this.onError);
this.generateHash = eventEmitter.addListener('generateHash', this.generateHash);
}
onPaymentSuccess = (e) => {
console.log(e.merchantResponse);
console.log(e.payuResponse);
}
onPaymentFailure = (e) => {
console.log(e.merchantResponse);
console.log(e.payuResponse);
}
onPaymentCancel = (e) => {
console.log('onPaymentCancel isTxnInitiated -' + e);
}
onError = (e) => {
console.log(e);
}
generateHash = (e) => {
console.log(e.hashName);
console.log(e.hashString);
this.sendBackHash(e.hashName, e.hashString);
}
//Do remember to unregister eventEmitters here
componentWillUnmount() {
this.paymentSuccess.remove();
this.paymentFailure.remove();
this.paymentCancel.remove();
this.error.remove();
this.generateHash.remove();
}

Passing Hashes to SDK

Native sdk request hashes on runtime via generateHash event callback which can be calculated at your server end and has to be passed back to sdk like below.More information about hashString and hashName here.

sendBackHash = (hashName, hashString) => {
var hashValue = <Calculate Hash at your server using hashString provided>
var result = { [hashName]: hashValue };
PayUBizSdk.hashGenerated(result);
}

Native Changes For iOS

For UPI Intent

Currently, we support only PhonePe and GooglePay via Intent in iOS. Add the query schemes in the info.plist of your Xcode project.

<key>LSApplicationQueriesSchemes</key>
<array>
<string>phonepe</string>
<string>tez</string>
</array>

Add your logo image in the Xcode project with the same name as provided in payUCheckoutProConfig's merchantLogo property.

Native Changes For Android

Build.gradle

allprojects {
repositories {
...
maven { url "https://phonepe.bintray.com/PhonePeIntentSDK" }
...
}
}

AndroidManifest.xml

In order to Autofill OTP on bank pages SDK requires "RECEIVE_SMS" permission so kindly add the same in your AndroidManifest.xml like below.

<uses-permission android:name="android.permission.RECEIVE_SMS" />

FAQ

Q1. Facing issue while installing pods?

A1: Do check you have "use_frameworks!" in podfile.