Steps to Integrate
The Cordova Checkout SDK integration involves the following steps:
Note: You can do iOS specific customization during integration. For more information, refer to iOS-specific Integration customization (Optional).
Step 1: SDK Integration
Step 1: Include the Cordova plugin in your app project
The PayUCheckoutPro for Cordova plugin is offered through npm. To Include the Cordova Plugin in your app project:
- Include the PayUCheckoutPro Cordova Plugin in Ionic Capacitor app by running the following commands that install the dependencies in the root folder of your app:
npm install cordova-payu-checkoutpro
npx cap sync //Sync the plugin added above
For IOS deployment, run the command pod installs to Install the pod inside the following folders:
- ios/App folder in ionic
- platform/ios folder in Cordova.
Note: Ensure that your minimum deployment target is iOS 11.
- Include the CheckOutPro Cordova plugin in Cordova app by running the following commands that depend in the root folder of your app:
cordova plugin add cordova-payu-checkoutpro
cordova build
Step 2: Set up Callback
Include the following callbacks and methods in your Cordova app to receive callbacks from the CheckOutPro SDK:
var responseCallBack = function (response) {
// payment successful
if ("generateHash" in response) {
generateHash(response);
} else if ("onPaymentSuccess" in response) {
onPaymentSuccess(response);
} else if ("onPaymentFailure" in response) {
onPaymentFailure(response);
} else if ("onPaymentCancel" in response) {
onPaymentCancel(response);
} else if ("onError" in response) {
onError(response);
}
};
//Handle Callback methods from SDK
function generateHash(response) {
// Pass response param to your backend server
// Backend will generate the hash which you need to pass to SDK
// hashResponse: is the response which you get from your server
var merchantSalt = `<Salt>`; //Keep Salt in the backend only.
var resultValue = response.generateHash;
var hashString = resultValue.hashString;
var hashName = resultValue.hashName;
var hash = {};
hash[hashName] = sha512(hashString + merchantSalt);
//Convert the hash data using sh512 and pass it to SDK.
cordova.plugins.PayUCheckoutProCordova.hashGenerated(hash);
}
function onPaymentSuccess(response) {
//Handle on Payment Success Response
}
function onPaymentFailure(response) {
//Handle on Payment Failure Response
}
function onPaymentCancel(response) {
//Handle on Payment Cancel Response
}
function onError(response) {
//Handle on Error Response
}
Step 3: Build the payment parameters
Your app needs to send transactional information to the CheckoutPro SDK to initiate a payment. Build the transactional information using the following code snippet:
var payUPaymentParams = {
key: `<key>`,
transactionId: `<transaction id should be less than 25 character>`,
amount: "1.0",
productInfo: `<string>`,
firstName: `<string>`,
email: `<customer email>`,
phone: `<customer phone>`,
ios_surl: `<ios_surl>`,
ios_furl: `<ios_furl>`,
android_surl: `<android_surl>`,
android_furl: `<android_furl>`,
environment: `<environment>`, //"0" = Prooduction, "1" = Staging
userCredential: `<userCredential>`, //Optional
additionalParam: `<additionalParam>`, //Optional
enableNativeOTP: `<boolean>`, //true:false, //Optional
userToken: "", //Optional
payUSIParams: `<Standing Instructions>`, //Optional
splitPaymentDetails: `<Split Payment>`, //Optional
};
var 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",
merchantAccessKey: "", //This is for lookup API, optional
sourceId: "", //Sodexo source ID, optional
};
var spitPaymentDetails = [
{
type: "absolute",
splitInfo: {
imAJ7I: {
aggregatorSubTxnId: "Testchild123",
aggregatorSubAmt: "5",
},
qOoYIv: {
aggregatorSubTxnId: "Testchild098",
aggregatorSubAmt: "5",
},
},
},
];
var siParamObject = {
isFreeTrial: `<bool>`,
billingAmount: `<number>`, //Required
billingInterval: `<number>`, //Required
paymentStartDate: "yyyy-dd-mm", //Required
paymentEndDate: "yyyy-dd-mm", //Required
billingCycle: "once", //Required //Can be any of 'daily','weekly','yearly','adhoc','once','monthly'
remarks: "Test SI transcaction",
billingCurrency: "INR",
billingLimit: "ON", //ON, BEFORE, AFTER
billingRule: "MAX", //MAX, EXACT
};
Note: For more details on Standing Instructions parameters, refer to PayU Standing Instructions Parameters.
Step 4: Set up payment hashes
This step describes how to pass the dynamic hashes. For detailed information, refer to Generate Hash.
The SDK will send the hash string without salt in responseCallBacktoopenCheckoutScreen
. Use the generate hash key to get the HashMap <HashName, HashString>
in the callback response. Pass that hashMap to the server to generate the hash. Get the Hash from the server and pass it to SDK using the cordova.plugins.PayUCheckoutProCordova.hashGenerated
(<HashName hash>
)
var responseCallBack = function (response) {
if ("generateHash" in response) {
generateHash(response);
}
"generateHash";
...................
};
function generateHash(response) {
var merchantSalt = `<salt>`; //keep this in the backend.
var resultValue = response.generateHash;
var hashStringWithoutSalt = resultValue.hashString;
var hashName = resultValue.hashName;
var hashType = resultValue.hashType;
var postSalt = response[resultValue.postSalt];
var hash = `<Get Hash Backend with < hashStringWithoutSalt, hashType , postSalt >`;
//Convert the hash data using sh512.
//Call Call hashGenerated with HashResponse< hashName, Hash> to pass the hash from server to SDK.
cordova.plugins.PayUCheckoutProCordova.hashGenerated(hash);
}
Notes:
- You need the following type of hashes to be generated at your backend: v1 Hash, v2 Hashes, MCP Lookup, and Post Salt Hash.
- You must generate the hashes on your server. Do not generate the hashes locally in your app, as it may compromise the security of the transactions.
The CheckoutPro SDK uses hashes to ensure the security of the transaction and prevent any unauthorized intrusion or modification. The CheckoutPro SDK requires two types of hashes. For more information on the two types of hashes, refer to Generate Hash for CheckoutPro SDK.
Step 5: Initiate the payment
Initialize and launch the Checkout Pro SDK by calling the following code snippet:
let payuParams = {
payUPaymentParams: `<PayUPaymentParams>`,
payUCheckoutProConfig: `<PayUCheckoutProConfig>`,
};
cordova.plugins.PayUCheckoutProCordova.openCheckoutScreen(
callbackResponse,
payuParams
);
Step 6: Update AndroidManifest.xml
To automatically fill OTP on bank pages, SDK requires the RECEIVE_SMS
permission. Add the following code snippet to your AndroidManifest.xml
like below.
<uses-permission android:name="android.permission.RECEIVE_SMS" />
iOS-specific Integration customization (Optional)
- UPI Intent: Currently, PayU supports only PhonePe, Paytm, and GooglePay through Intent. Add the following query schemes in the
info.plist
.
<key>LSApplicationQueriesSchemes</key>
<array>
<string>phonepe</string>
<string>paytm</string>
<string>tez</string>
</array>
- Card Scanner, Camera Permission:
<key>NSCameraUsageDescription</key>
<string>Please mention the description to give user info</string>
Step 2. 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.
CalloutThe UPI in-app and UPI intent flow is not available in the Test mode.
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. See Genearate 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.
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 Credential for Card
Card Number | Expiry | CVV | OTP |
---|---|---|---|
5123456789012346 | 05/25 | 123 | 123456 |
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
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
Go-Live Checkist
Ensure these steps before you deploy the integration in a live environment.
Collect Live Payments
After testing the integration end-to-end, after you are sure 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.
Distributing your app (App Store / Ad-hoc)
What you get by default is a fat framework that allows you to test your app seamlessly on the device and simulator. But before archiving your app, you need to remove simulator slices from the framework. For detailed information on archiving your app with PayUChekoutPro, refer to Releasing Apple App Store.
Updated 3 days ago