1. Integration Steps

The React Native Custom Browser SDK integration involves the following steps:

  1. Installation
  2. Build the payment parameters
  3. Generate payment hash
  4. Make payment
  5. Register listeners

Step 1: Installation

The PayU Custom Browser 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:

var payUPaymentParams = {
      payu_payment_params: {
        key: <String>, //merchant key (Mandatory)
        transaction_id: new Date().getTime().toString(), //Mandatory
          url: <String>,  //Mandatory (This can be generated using PayU Core PG SDK)
          post_data: <String>, //Mandatory (This can be generated using PayU Core PG SDK)
          view_port_wide_enable : <String>, // "true","false"
          auto_approve: <String>, // "true","false"
          auto_select_otp: <String>, // "true","false"
          internet_restored_window_ttl: <String>, //numeric
          sms_permission: <String >, // "true","false"
          html_data: <String>,
          disable_intentseamless_failure: <String>, //numeric
          disable_backbutton_dialog: <String>, // "true","false"
          enable_ssl_dialog: <String>,// "true","false"
          email: <String>,
          first_name: <String>,
          last_name: <String>,
          package_name_for_specific_app: <String>,
          payment_type: <String>,
          phone_pe_user_cache_enabled: <String>, //numeric
          merchant_response_timeout: <String>, //numeric

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 more information, refer to Generate Hash.



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:

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

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);


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