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
CalloutThe 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