1. Integration Steps

Step 1: Installation

The PayU CB SDK for React Native is offered through npm

For Android: To add the PayU CB plugin to your app run the following dependency in the root folder of your React native app:

npm install payu-custom-browser-react
import CBWrapper from  'payu-custom-browser-react'; 

For iOS: Install the pod using the following command. Make sure your minimum deployment target is iOS 11.

pod install

Step 2: Build the payment parameters

To initiate a payment, your app needs to send transactional information to the Custom Browser SDK. Build the payUPaymentParams object with the mandatory parameters as shown in the following code snippet:

Step 2: Build the Payment Parameters
To initiate a payment, your app needs to send transactional information to the Custom Browser SDK. Build the payUPaymentParams object with the mandatory parameters as shown in the following code snippet:

For details on Standing Instructions parameters, refer to PayU Standing Instruction Parameters.

Step 3: Generate Payment Hash

For hash generation testing salt needs to be put in the HASH generation method. For information, see Generate Hash.

📘

Remember

Always generate the hashes on your server. Do not generate the hashes locally in your app, as it will compromise the security of the transactions.

Step 4: Make payment

Use the code snippet mentioned below to make the payment:

CBWrapper.openCB(
Request Data <Map>, //payment params defined above
      (error) => {
        console.log("-----------Error Callback---------");
        console.log(error);
        console.log("------------------------------------");
      },
      (payuResponse) => {
       
        console.log("-----------Success Callback---------");
        console.log(payuResponse);
        console.log("--------------------------------------");
      }
  );

Step 5: Register listeners

Register Listener (in this case) Emitter to get the Response from Custom Browser SDK:

import {NativeEventEmitter} from 'react-native';
const eventEmitter=new NativeEventEmitter(CBWrapper);
eventEmitter.addListener("CBListener",(event)=>{
     
    })

Response

{
  "eveneType": <String>, (onPaymentFailure | onPaymentTerminate | onPaymentTerminate | onCBErrorReceived | onBackButton | onBackApprove | onBackDismiss)
  "payuResult": <String>, //conditional
  "merchantResponse": <String>, //conditional
  "errorMessage":<String>,
  "errorCode": <String>, //conditional
}