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
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>
Updated 5 days ago