1. Integration Steps

Suggest Edits

The React Native UPI SDK integration involves the following steps:

  1. Installation
  2. Build the payment parameters
  3. Generate payment hash
  4. Payment request post data (Intent flow)
  5. Payment request post data (Generic Intent flow)
  6. Payment request post data (Collect flow)
  7. Make payment
  8. VPA validation
  9. List the UPI apps

Step 1: Installation

The PayU UPI SDK for React Native is offered through npm.

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

npm install payu-upi-react --save
import PayUUPI from 'payu-upi-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 UPI 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 
        transaction_id: <String>, // i.e. new Date().getTime().toString()
        amount: <String>, // amount in Double format
        product_info: <String>,
        first_name: <String>,
        email: <String>,
        phone: <10 digit Numeric>,
        ios_surl: <String>,
        ios_furl: <String>,
        android_surl: <String>,
        android_furl: <String>,
        disable_intent_seamless_failure: <String>, // -1 | 0 
        merchant_response_timeout: <String>, //numeric time millis
        phone_pe_user_cache_enabled: <String>, // true | false
        beneficiary_account_number: <String> , //for TPV transaction
        beneficiary_ifsc: <String> , // for TPV transaction
        vpa: <String>, //virtual payment address for UPI (i.e. 1234567890@payu)
        post_url: <String>, // "https://secure.payu.in" for production, "https://test.payu.in" for Stage
        payment_mode: <String>, // for Intent flow use "INTENT", for collect flow use "upi"
        user_credentials: <String>, // unique user identifier
        hashes: {
          payment: <String>, // generated hash for payment
          validate_vpa: <String> // generated hash for validating virtual payment address
          },
        additional_param:{
          udf1: "user defined value 1",
          udf2: "user defined value 2",
          udf3: "user defined value 3",
          udf4: "user defined value 4",
          udf5: "user defined value 5",
         merchant_access_key:"", //This is for lookup API, optional
         source_id:"", //Sodexo source ID, optional 
      },
      si_params:{
        si_details:{
            billing_amount:"1.00",
            billing_currency:"INR",
            billing_cycle:"DAILY", // YEARLY | MONTHLY | WEEKLY | DAILY | ONCE | ADHOC
            billing_interval:"1",
            payment_end_date:"2023-12-24", // yyyy-mm-dd
            payment_start_date:"2022-12-24" // yyyy-mm-dd
            billing_limit:'ON',      //ON, BEFORE, AFTER
            billing_rule:'MAX',      //MAX, EXACT
          },
        is_free_trial:"0", // 1 | 0 (true | false) //Optional
        si:"1" //Mandatory
    }
  }
}

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

Step 3: Generate payment hash

Generate the payment hash and pass the hash in the JSON payUPaymentParams.hashes.payment parameter or in payUPaymentParams.hashes.validate_vpa as shown below:

{
  payu_payment_params: {
    hashes:{
      payment: <String>, // hash for payment sha512(key|txnid|amount|productinfo|firstname|email|udf1|udf2|udf3|udf4|udf5||||||salt)
      validate_vpa: <String>, // hash for validating VPA sha512(key|<validateVPA>|vpa|salt)
    }
  }
}

For hash generation logic refer to Generate Hash.

📘

Remember

You must 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: Payment request post data (Intent flow)

Build Mandatory parameters for UPI intent flow in JSON as shown in the code snippet below:

var params={
  payu_payment_params: {
        key: <String>, //merchant key 
        transaction_id: <String>, // i.e. new Date().getTime().toString()
        amount: <String>, // amount in Double format
        product_info: <String>,
        first_name: <String>,
        email: <String>,
        phone: <10 digit Numeric>,
        ios_surl: <String>,
        ios_furl: <String>,
        android_surl: <String>,
        android_furl: <String>,
        environment: <String>, // "1" for Stage,"0" for production
        payment_mode: <String>, // for Intent flow use "INTENT", for collect flow use "upi"
        user_credentials: <String>, // unique user identifier
        package_name: <String>, //package name for the specific UPI intent (i.e. 'net.one97.paytm')
    hashes:{
      payment: <String> // hash for payment sha512(key|txnid|amount|productinfo|firstname|email|udf1|udf2|udf3|udf4|udf5||||||salt)
    }
  }

Step 5: Payment request post data (Generic Intent flow)

Build Mandatory parameters for generic intent flow in JSON as shown in the code snippet below:

var params={
  payu_payment_params: {
        key: <String>, //merchant key 
        transaction_id: <String>, // i.e. new Date().getTime().toString()
        amount: <String>, // amount in Double format
        product_info: <String>,
        first_name: <String>,
        email: <String>,
        phone: <10 digit Numeric>,
        ios_surl: <String>,
        ios_furl: <String>,
        android_surl: <String>,
        android_furl: <String>,
        environment: <String>, // "1" for Stage, "0" for production
        payment_mode: <String>, // for Intent flow use "INTENT", for collect flow use "upi"
        user_credentials: <String>, // unique user identifier
    hashes:{
      payment: <String> // hash for payment sha512(key|txnid|amount|productinfo|firstname|email|udf1|udf2|udf3|udf4|udf5||||||salt)
    }
  }

Generic Intent Flow is only supported in Android devices.

Step 6: Payment request post data (Collect flow)

Build Mandatory parameters for Collect flow in JSON as shown in the code snippet below:

var params={
  payu_payment_params: {
        key: <String>, //merchant key 
        transaction_id: <String>, // i.e. new Date().getTime().toString()
        amount: <String>, // amount in Double format
        product_info: <String>,
        first_name: <String>,
        email: <String>,
        phone: <10 digit Numeric>,
        ios_surl: <String>,
        ios_furl: <String>,
        android_surl: <String>,
        android_furl: <String>,
        vpa: <String>, //virtual payment address for UPI (i.e. 1234567890@payu)
        environment: <String>, // "1" for Stage, "0" for production
        payment_mode: <String>, // for Intent flow use "INTENT", for collect flow use "upi"
        user_credentials: <String>, // unique user identifier
    hashes:{
      payment: <String>, // hash for payment sha512(key|txnid|amount|productinfo|firstname|email|udf1|udf2|udf3|udf4|udf5||||||salt)
			validate_vpa: <String> // hash for validating virtual payment address -  sha512(key|command|var1|salt)
    }
  }

Step 7: Make payment

Use the code snippet mentioned below to make the payment:

PayUUPI.makeUPIPayment(params,
      (error) => {
        //Failure or error response
      },
      (result) => {
        //success response
      }
    );

Step 8: VPA validation

Initialise and launch the React Native UPI SDK by calling the following code snippet to validate the VPA:

PayUUPI.validateVPA(
      params,
      (error) => {
       //Failure or error response
      },
      (params) => {
        //success response
      }
    );

Response

The sample response of a VPA validation request is similar to the following:

{
  "status": "SUCCESS",
  "vpa": "1234567890@payu",
  "isVPAValid": 0,
  "payerAccountName": "PayUNeer",
  "isAutoPayVPAValid": 0,
  "isAutoPayBankValid": "NA"
}

Step 9: List the UPI apps

Initialise and launch the UPI SDK by calling the following code snippet to get the list of UPI apps installed on Android and iOS devices:

PayUUPI.intentApps((intentApps) => {
        //list of installed UPI Apps
      });

Response

Here is how a sample response of UPI list request looks like:

{
  "data": {
    "value": "net.one97.paytm",
    "title": "Paytm"
  }
}

Updated 26 days ago