Integration
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';
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','PayUParamsKit', 'PayUCrashReporter', 'PayUNetworkReachability']
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
To initiate a payment, your app will need to send transactional information to the Checkout Pro SDK.
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 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"
},
payUSIParams: {
isFreeTrial:true,
billingAmount:'10',
billingInterval:1,
paymentStartDate:'2023-04-20',
paymentEndDate:'2023-04-30',
billingCycle:'daily', //Can be any of 'daily','weekly','yearly','adhoc','once','monthly'
remarks:'Test SI transcaction',
billingCurrency:'INR'
}
}
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);
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();
}
allprojects {
repositories {
maven {
url "https://phonepe.mycloudrepo.io/public/repositories/phonepe-intentsdk-android"
}
}
}
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" />
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>
<string>paytm</string>
</array>
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.
Last modified 10mo ago