Android Integration
To integrate with the CheckoutPro mobile SDK for Android:
SDK Integration Steps
Step 1: Include the SDK in your app project
The CheckoutPro SDK is offered through npm.
Add the following entries to include CheckoutPro SDK in your app:
Install the SDK
npm install payu-non-seam-less-react --save
react-native link payu-non-seam-less-react
Import the SDK in your payment component
Add the following imports in the class where you need to initiate a payment:
import PayUBizSdk from 'payu-non-seam-less-react';
Update Root build.gradle
Add the repository details for SDK dependencies under allprojects
in android/build.gradle
::
allprojects {
repositories {
maven {
url "https://phonepe.mycloudrepo.io/public/repositories/phonepe-intentsdk-android"
}
}
}
Step 2: Build the payment parameters
To initiate a payment, your app needs to send transactional information to the Checkout Pro SDK.
Payment parameters
Parameter | Description |
---|---|
Key
|
|
transactionId
|
|
Amount
|
|
productInfo
|
|
firstName
|
|
Email
|
|
Phone
|
|
ios_surl
|
|
ios_furl mandatory |
|
android_surl
|
|
android_furl
|
|
Environment
|
|
User Credential
|
|
user_token
| String The use for this param is to allow the offer engine to apply velocity rules at a user level. -**Card Based Offers (CC, DC, EMI):**For card payment mode offers, if this parameter is passed then the velocity rules would be applied on this token, if not passed the same would be applied to the card number. -NB, Wallet: It is mandatory for UPI, NB, and Wallet payment modes. If not passed the validation rules would not apply. Note:- When we use Offer features then it's a mandatory parameter otherwise it's not required. |
additionalCharges | String This parameter is required if merchant want to take additional charge from user, should be string with PG:Amount or IBIBOCode:Amount Sample : CC:10,NB:20,SBIB:15 |
percentageAdditionalCharges | String This parameter is required if merchant want to take percentage of TDR as additional charge from user for this feature dynamicConvFeeMerchant flag must be enable, should be string with PG:Amount or IBIBOCode:Amount Sample : CC:100,NB:50,SBIB:25 |
Note:The sample URLs mentioned in surl and furl are for temporary use. PayU recommends you to design or use your own surl and furl after testing is completed.
For details on Standing Instructions parameters, refer to PayU Standing Instruction Parameters.
Additional parameters (Optional)
The additional parameters that are optional that can be passed to SDK are udf parameters, static hashes, and other parameters. For more details on Static Hash generation and passing them, refer to generate hashes. The following is a list of parameters that can be passed in additional parameters:
Parameter | Description |
---|---|
PayUCheckoutProConstants.CP_UDF1 | String User defined field, Merchant can store their customer id, etc. |
PayUCheckoutProConstants.CP_UDF2 | String User defined field, Merchant can store their customer id, etc. |
PayUCheckoutProConstants.CP_UDF3 | String User defined field, Merchant can store their customer id, etc. |
PayUCheckoutProConstants.CP_UDF4 | String User defined field, Merchant can store their customer id, etc. |
PayUCheckoutProConstants.CP_UDF5 | String User defined field, Merchant can store their customer id, etc. |
Static hashes | String The static hashes is specified in this parameter. For more information, refer to Hash Generation section. |
PayUCheckoutProConstants.SODEX_OSOURC_EID | String Sodexo Source ID, Merchant can store it from the third field of PayU response. |
PaymentParamConstant.walletUrn | String Pass this parameter if closed loop wallet (clw) payment mode is enabled for your account. |
For split Payments details (Optional)
For a split payment transaction, create a JSON string with the split payment parameters as shown below:
JSON Request Structure of splitInfo Field Here is a sample JSON structure for the splitPaymentDetails field:
{
"type":"absolute",
"splitInfo":{
"P**\*_Y":{
"aggregatorSubTxnId":"9a70ea0155268101001ba",
"aggregatorSubAmt":"50",
"aggregatorCharges":"20"
},
"P_**K":{
"aggregatorSubTxnId":"9a70ea0155268101001bb",
"aggregatorSubAmt":"30"
}
}
}
Then create an object of the PayUPaymentParam class and set the splitPaymentDetails property of the object to the JSON string you created in the earlier step.
splitPaymentDetails = '<pass the splitPayment Json Data>';
Kindly refer to the below link for more details about the Split During Transaction
The payment parameters and additional parameters can be passed using the following code snippet:
var payUPaymentParams = {
key: "Merchant key",
transactionId: "Transaction Id",
amount: "Transaction amount",
productInfo: "product Info",
firstName: "Customer firstName",
email: "Customer email",
phone: "Customer phone",
ios_surl: "Success Url for iOS",
ios_furl: "Failure Url for iOS",
android_surl: "Success Url for Android",
android_furl: "Failure Url for Android",
environment: "0 or 1",//<0 for Production/1 for Staging>
userCredential: "key:CustomerID",
userToken: "<pass the User Token>", //Optional, Only use for Offer
additionalCharges:"CC:10,NB:20,SBIB:15", //Optional, Only use if want to take addional charges from user
percentageAdditionalCharges:"CC:10,NB:20,SBIB:15", //Optional, Only use if want to take addional charges dynamically from user
additionalParam: {
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",
payment_related_details_for_mobile_sdk: "payment_related_details_for_mobile_sdk hash",
vas_for_mobile_sdk: "vas_for_mobile_sdk hash",
payment: "Payment Hash",
walletUrn: "<walletUrn>"
},
splitPaymentDetails: splitPaymentData, // //Optional, Only use for Split Payment
payUSIParams: {
isFreeTrial:true,
billingAmount:'10',
billingInterval:'1',
paymentStartDate:'2023-04-20',
paymentEndDate:'2023-04-30',
billingCycle:"DAILY", //Can be any of YEARLY | MONTHLY | WEEKLY | DAILY | ONCE | ADHOC
remarks:'Test SI transcaction',
billingCurrency:'INR'
}
}
For details on Standing Instructions parameters, refer to PayU Standing Instruction Parameters.
Step 3: Initiate the payment
Initialize and launch the Checkout Pro SDK by calling the following code snippet:
var paymentObject = {
payUPaymentParams: payUPaymentParams,
// payUCheckoutProConfig is optional
// Detail can be found in latter section
payUCheckoutProConfig: payUCheckoutProConfig
}
PayUBizSdk.openCheckoutScreen(paymentObject);
Step 4: Handle Payment Completion (Callbacks)
To get the callbacks for payment-related statuses, create a NativeEventEmitter object and subscribe to the following events.
import { NativeEventEmitter } from 'react-native';
//Register event emitters here.
componentDidMount() {
const eventEmitter = new NativeEventEmitter(PayUBizSdk);
this.paymentSuccess = eventEmitter.addListener('onPaymentSuccess', this.onPaymentSuccess);
this.paymentFailure = eventEmitter.addListener('onPaymentFailure', this.onPaymentFailure);
this.paymentCancel = eventEmitter.addListener('onPaymentCancel', this.onPaymentCancel);
this.error = eventEmitter.addListener('onError', this.onError);
this.generateHash = eventEmitter.addListener('generateHash', this.generateHash);
}
onPaymentSuccess = (e) => {
console.log(e.merchantResponse);
console.log(e.payuResponse);
}
onPaymentFailure = (e) => {
console.log(e.merchantResponse);
console.log(e.payuResponse);
}
onPaymentCancel = (e) => {
console.log('onPaymentCancel isTxnInitiated -' + e);
}
onError = (e) => {
console.log(e);
}
generateHash = (e) => {
console.log(e.hashName);
console.log(e.hashString);
var hashStringWithoutSalt = e.hashString;
var hashName = e.hashName;
var postSalt = e.postSalt; // compulsory for Additional Charges and Split Payment
// Pass hashStringWithoutSalt to server
// Server will append salt at the end and generate sha512 hash over it
// "<create SHA -512 hash of 'hashString+salt+postSalt'>"
var hashValue = "<Set hash here which is fetched from server>";
var result = { [hashName]: hashValue };
PayUBizSdk.hashGenerated(result);
}
//Do remember to unregister eventEmitters here
componentWillUnmount() {
this.paymentSuccess.remove();
this.paymentFailure.remove();
this.paymentCancel.remove();
this.error.remove();
this.generateHash.remove();
}
Step 5: Generate Hash (Dynamic Hash Generation)
This step describes how to pass the dynamic hashes. For detailed information, refer to Hash Generation.
Passing dynamic hashes
To pass dynamic hashes, the merchant will receive a call on the generateHash method. In the method parameter, you will receive a dictionary or hashMap, then extract the value of hashString from that. Pass that value to the server to append the Salt at the end and generate the sha512 hash over it. The server gives that hash back to your app, and the app will pass that hash to PayU through a callback mechanism. For passing dynamic hashes during integration, use the following code snippet:
generateHash = (e) => {
console.log(e.hashName);
console.log(e.hashString);
var hashStringWithoutSalt = e.hashString;
var hashName = e.hashName;
var postSalt = e.postSalt; // compulsory for Additional Charges and Split Payment
// Pass hashStringWithoutSalt to server
// Server will append salt at the end and generate sha512 hash over it
// "<create SHA -512 hash of 'hashString+salt+postSalt'>"
var hashValue = "<Set hash here which is fetched from server>";
var result = { [hashName]: hashValue };
PayUBizSdk.hashGenerated(result);
}
Notes:
- Always generate hashes on your backend.
- URLs like https://cbjs.payu.in/sdk/success are placeholders; replace with your backend URLs post-testing.
- Split payment and SI (Standing Instruction) are optional features—only use them if needed.
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.
Testing checklistThings to remember while testing an integration:
- To test the integration make sure that you are making a transaction call to the test endpoint.
- Use your test key and salt for the transaction requests. For more information, refer to Access Test Key and Salt.
- Set the value of the
environment
parameters to1
.
Test cards only for Test environmentThese test cards, UPI, and Wallet credentials must only be used in the sandbox environment. Using these test cards in production environment may cause validation error.
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.
Bank/Card Type | Card Details |
---|---|
Kotak DC EMI |
|
AXIS DC EMI |
|
HDFC CC EMI |
|
ICICI CC EMI |
|
Test wallets
You can use the following wallets and their corresponding credentials to test wallet integration.
Wallet | Mobile Number | OTP |
---|---|---|
PayTM | 7777777777 | 888888 |
PhonePe | Use the Phonepe Pre-Prod app for testing purposes as described in the following PhonePe doc. location: [https://developer.phonepe.com/v1/docs/setting-up-test-account](https://developer.phonepe.com/v1/docs/setting-up-test-account) Download the app and register your mobile number and follow the instructions as described in the above PhonePe docs. | NA |
AmazonPay | You can test using your original Amazon account details. |
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 1: Update Production Key and Salt
To generate the live merchant key and salt:
- Log in to the PayU Dashboard and switch to Live Mode on the menu.
- Navigate to Developers → API Keys tab.
- Copy the key and salt using the copy button.
- Replace the Test key and salt with the Production key and salt in the payment integration code and start accepting actual payments.
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.
Updated 4 days ago