Integration

You can integrate with the CheckoutPro mobile SDK in 5 steps: 
​Include the SDK in your app project​​
​Set up the payment hashes​​
​Build the payment parameters​
​Initiate the payment​​
​​Handle the payment completion​​
​​(Optional) Customization​
1.Include the SDK in your app project (Mandatory Step)
The CheckoutPro SDK is offered via npm. 
Use below step to include CheckoutPro SDK in your app:
npm install payu-non-seam-less-react --save
react-native link payu-non-seam-less-react 
Next, add the following imports in the class where you need to initiate a payment
import PayUBizSdk from 'payu-non-seam-less-react';
For iOS
Checkoutpro is a dynamic framework. If you are not using 'use_frameworks!', then please add the following line at the end of your podfile.
  $dynamic_framework = ['PayUAssetLibraryKit', 'PayUBizCoreKit', 'PayUCheckoutProBaseKit', 'PayUCheckoutProKit', 'PayUCustomBrowser', 'PayULoggerKit', 'PayUNetworkingKit', 'PayUUPICoreKit', 'Socket.IO-Client-Swift', 'Starscream']
  pre_install do |installer|
    Pod::Installer::Xcode::TargetValidator.send(:define_method, :verify_no_static_framework_transitive_dependencies) {}
    installer.pod_targets.each do |pod|
      if $dynamic_framework.include?(pod.name)
        def pod.build_type;
        Pod::BuildType.dynamic_framework
      end
    end
  end
end
After updating the podfile, install the pod using below command.
pod install
2. Set up the payment hashes (Mandatory Step)
Detailed document is present here.
3. Build the payment parameters (Mandatory Step)
To initiate a payment, your app will need to send transactional information to the Checkout Pro SDK. 
Payment Params:
Parameter
Type
Description
Data Type & Validation
Mandatory
key
String
Merchant key received from PayU
Can not be null or empty
Yes
transactionId
String
It should be unique for each transaction
Can not be null or empty and should be unique for each transaction. It can not contain special characters like :-_/
Yes
amount
String
Total transaction amount
Can not be null or empty and should be valid double stringified eg, “100.0”
Yes
productInfo
String
Information about product
Can not be null or empty
Yes
firstName
String
Customer’s first name
Can not be null or empty
Yes
email
String
Customer’s email id
Can not be null or empty
Yes
phone
String
Customer’s phone number
Should be a valid phone number
Yes
ios_surl
String
[iOS] When the transaction gets success, PayU will load this url and pass transaction response
Should be a valid URL
Yes
ios_furl
String
[iOS] When the transaction gets fail, PayU will load this url and pass transaction response
Should be a valid URL
Yes
android_surl
String
[Android] When the transaction gets success, PayU will load this url and pass transaction response
Should be a valid URL
Yes
android_furl
String
[Android] When the transaction gets fail, PayU will load this url and pass transaction response
Should be a valid URL
Yes
environment
String
Environment of SDK
"0" for Production and "1" for Test
Yes
User Credential
String
This is used for the store card feature. PayU will store cards corresponding to passed user credentials and similarly, user credentials will be used to access previously saved cards
Should be a unique value
Format : <merchantKey>:<userId>
Here,
UserId is any id/email/phone number to uniquely identify the user
No
Additional Params:
Additional params are optional params that can be passed to SDK like udf params, static hashes. More details on static hash generation and passing is mentioned in hash generation section. Below is list of params that can be passed in additional params -
Parameter
Type
Description
Mandatory
udf1
String
User defined field, Merchant can store their customer id, etc.
No
udf2
String
User defined field, Merchant can store their customer id, etc.
No
udf3
String
User defined field, Merchant can store their customer id, etc.
No
udf4
String
User defined field, Merchant can store their customer id, etc.
No
udf5
String
User defined field, Merchant can store their customer id, etc.
No
Static Hashes
String
Covered in the Hash Generation section
No
Payment param and additional param can be passed as below:
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",
    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"
    }
}
4. Initiate the payment (Mandatory Step)
Initialise and launch the Checkout Pro SDK by calling the following method
var paymentObject = {
    payUPaymentParams: payUPaymentParams,
    // payUCheckoutProConfig is optional
    // Detail can be found in latter section
    payUCheckoutProConfig: payUCheckoutProConfig
}
PayUBizSdk.openCheckoutScreen(paymentObject);
 5.Handle the payment completion (Mandatory Step)
To get the callbacks for payment-related statuses create an object of NativeEventEmitter and subscribe to the below 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;
    // Pass hashStringWithoutSalt to server
    // Server will append salt at the end and generate sha512 hash over it
    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();
}
Native Changes For Android
Build.gradle
allprojects {
    repositories {
     ...
        maven { url "https://phonepe.bintray.com/PhonePeIntentSDK" }
     ...
    }
}
AndroidManifest.xml
In order to Autofill OTP on bank pages SDK requires "RECEIVE_SMS" permission so kindly add the same in your AndroidManifest.xml like below.
<uses-permission android:name="android.permission.RECEIVE_SMS" />
Native Changes For iOS
For UPI Intent (Optional Step)
Currently we support only PhonePe and GooglePay via Intent. Add the query schemes in info.plist
<key>LSApplicationQueriesSchemes</key>
<array>
<string>phonepe</string>
<string>tez</string>
</array>
Distributing your app (App Store / Ad-hoc) (Mandatory Step)
What you get by default is a fat framework that allows you to test your app seamlessly on device as well as simulator. But before archiving your app, you need to remove simulator slices from the framework. Please see the doc which assists in archiving your app with PayUChekoutPro integrated.

React-Native - Previous

PayUCheckoutPro

Set up the payment hashes

Last updated 2 months ago

Parameter	Type	Description	Data Type & Validation	Mandatory
key	String	Merchant key received from PayU	Can not be null or empty	Yes
transactionId	String	It should be unique for each transaction	Can not be null or empty and should be unique for each transaction. It can not contain special characters like :-_/	Yes
amount	String	Total transaction amount	Can not be null or empty and should be valid double stringified eg, “100.0”	Yes
productInfo	String	Information about product	Can not be null or empty	Yes
firstName	String	Customer’s first name	Can not be null or empty	Yes
email	String	Customer’s email id	Can not be null or empty	Yes
phone	String	Customer’s phone number	Should be a valid phone number	Yes
ios_surl	String	[iOS] When the transaction gets success, PayU will load this url and pass transaction response	Should be a valid URL	Yes
ios_furl	String	[iOS] When the transaction gets fail, PayU will load this url and pass transaction response	Should be a valid URL	Yes
android_surl	String	[Android] When the transaction gets success, PayU will load this url and pass transaction response	Should be a valid URL	Yes
android_furl	String	[Android] When the transaction gets fail, PayU will load this url and pass transaction response	Should be a valid URL	Yes
environment	String	Environment of SDK	"0" for Production and "1" for Test	Yes
User Credential	String	This is used for the store card feature. PayU will store cards corresponding to passed user credentials and similarly, user credentials will be used to access previously saved cards	Should be a unique value Format : <merchantKey>:<userId> Here, UserId is any id/email/phone number to uniquely identify the user	No