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>
For Merchant logo
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.
Releasing to Apple
Next - React-Native
Non-Seamless Wrapper
Last updated 3 weeks ago