React Native UPI SDK

This cluster aims to document all the knowledge base for UPI transactions. Implementation of most of the UPI flows is different when compared to normal transactions.

There are broadly two types of UPI transactions, Collect and Intent(Pure Intent/In-App). For collect transactions, PayU informs the payment gateway to trigger a transaction to the app linked to the provided VPA, which asks the user for approval.

For intent transactions, we delegate the transaction process to an external app like BHIM, Google Pay, etc, which lets users transfer money to a VPA specified by us. After that, we use the PG (related to the specified VPA) for verification. PayU has a pre-configured VPA (distinct on the PG-Merchant level) on which the app makes the user pay the amount. To integrate UPI SDK with React Native, see Integrate UPI SDK with React Native.

❗️
Callout

To start transacting through Google Pay™, register your business on Google using the Google Onboarding form, In this registration process, you need to add the merchant VPAs created by PayU for you. In the case of multiple VPAs, all of them need to be registered with Google.

To enable Google Pay, contact your Point of Contact at Google. For any further queries or help with onboarding, send a mail to PayU Mobile Integration Team.

Compatibility

Android

Min SDK Version: 21
Compile SDK Version: 31+
Kotlin 1.6.10

iOS

iOS version: 11

SDK Integration

The React Native UPI SDK integration involves the following steps:

Step 1: Installation

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

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'

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/_payment" for production, "https://test.payu.in/_payment" for Stage
        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') // package_name parameter used for Android only
        intent_app : <String>, //scheme name for the specific UPI intent (i.e. 'phonepe') // intent_app parameter used for IOS only
        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.

📘
Note: 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') // package_name parameter used for Android only
        intent_app : <String>, //scheme name for the specific UPI intent (i.e. 'phonepe') // intent_app parameter used for IOS only
    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)

📘
Note: Generic Intent Flow is only supported for Android

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"
        post_url: <String>, // "https://secure.payu.in/_payment" for production, "https://test.payu.in/_payment" for Stage
        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)
    }
  }

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"
        post_url: <String>, // "https://secure.payu.in/_payment" for production, "https://test.payu.in/_payment" for Stage
        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

(Launch with Activity)

Use the code snippet mentioned below to make the payment:

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

(Launch with Fragment)

Use the code snippet mentioned below to make the payment:

PayUUPI.makeUPIPaymentSeamless(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"
  }
}

For IOS, UPI Intent (Mandatory)

For fetch the Installed UPI apps, Kindly add the query schemes in theinfo.plist:

	<key>LSApplicationQueriesSchemes</key>
	<array>
		<string>phonepe</string>
		<string>tez</string>
		<string>paytm</string>
		<string>bhim</string>
		<string>credpay</string>
	</array>

Test the Integration and Go-Live

Test the Integration

After the integration is complete, you must test the integration before you go live and start collecting payment. You can start accepting actual payments from your customers once the test is successful.

You can make test payments using one of the payment methods configured at the Checkout.

Test credentials for supported payment methods

Following are the payment methods supported in PayU Test mode.

Test credentials for Net Banking

Use the following credentials to test the Net Banking integration:

user name: payu
password: payu
OTP: 123456

Test VPA for UPI

❗️
Callout
The UPI in-app and UPI intent flow is not available in the Test mode.

You can use either of the following VPAs to test your UPI-related integration:

For Testing the UPI Collect flow, Please follow the below steps:-

Once you enter the VPA click on the verify button and proceed to pay.
In NPCI page timer will start, Don't "CLICK" on click text. Please wait on the NPCI page.
The below link opens in the browser Paste the transaction ID at the end of the URL then click on the success/failure simulator page. After that, your app will redirect to your app with the transaction response.

https://pgsim01.payu.in/UPI-test-transaction/confirm/ <Txn_id>

For Android

You can add the below metadata under the application tag in the manifest file to test the UPI Collect flow on test env:-

🚧
Ensure to remove the code from the manifest file before going live.

<application>
<meta-data android:name="payu_debug_mode_enabled" android:value="true" /> <!-- set the value to false for production environment -->
<meta-data android:name="payu_web_service_url" android:value="https://test.payu.in" /> <!-- Comment in case of Production -->
<meta-data android:name="payu_post_url" android:value="https://test.payu.in"/> <!-- Comment in case of Production -->
</application>

Test cards for EMI

You can use the following Debit and Credit cards to test EMI integration.

Test wallets

You can use the following wallets and their corresponding credentials to test wallet integration.

Go-live Checklist

Ensure these steps before you deploy the integration in a live environment.

Collect Live Payments

After testing the integration end-to-end, once you are confident that the integration is working as expected, you can switch to live mode to start accepting payments from your customers.

🚧
Watch Out!
Ensure that you are using the production merchant key and salt generated in the live mode.

Checklist 2: Configure environment() parameter

Set the value of the environment()to 0 in the payment integration code. This enables the integration to accept live payments.

Checklist 4:- Remove/comment meta -data code from manifest file :-

For Android

You must be comment/remove the below metadata code from the manifest file to use the UPI Collect flow on Production env:-

<application>
<meta-data android:name="payu_debug_mode_enabled" android:value="true" /> // set the value to false for production environment
<meta-data android:name="payu_web_service_url" android:value="https://test.payu.in" /> //Comment in case of Production-->
<meta-data android:name="payu_post_url" android:value="https://test.payu.in"/> //Comment in case of Production-->
</appliction>

Checklist 5: Configure verify payment method

Configure the Verify payment method to fetch the payment status. We strongly recommend that you use this as a back up method to handle scenarios where the payment callback is failed due to technical error.

Checklist 6: Configure Webhook

We recommend that you configure Webhook to receive payment responses on your server. For more information, refer to Webhooks.

Sample app

The sample application for integration with React-Native UPI SDK : https://github.com/payu-intrepos/payu-core-pg-react.git

Updated 3 days ago

Callout

Compatibility

Android

iOS

SDK Integration

Test the Integration and Go-Live

Test credentials for supported payment methods

Test credentials for Net Banking

Test VPA for UPI

Callout

For Android

Ensure to remove the code from the manifest file before going live.

Test cards for EMI

Test wallets

Collect Live Payments

Watch Out!

Checklist 2: Configure environment() parameter

Checklist 4:- Remove/comment meta -data code from manifest file :-

For Android

Checklist 5: Configure verify payment method

Checklist 6: Configure Webhook

Sample app

EXAMPLE QUESTIONS