1. SDK Integration
The React Native UPI SDK integration involves the following steps:
- Installation
- Build the payment parameters
- Generate payment hash
- Payment request post data (Intent flow)
- Payment request post data (Generic Intent flow)
- Payment request post data (Collect flow)
- Make payment
- VPA validation
- 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/_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
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"
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)
}
}
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"
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
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 about 1 month ago