1. SDK Integration
The React Native Custom Browser SDK integration involves the following steps:
Step 1: Installation
The PayU Custom Browser SDK for React Native is offered through NPM:
For Android: To add the PayU CB plugin to your app run the following dependency in the root folder of your React native app:
npm install payu-custom-browser-react
import CBWrapper from 'payu-custom-browser-react'; For iOS: Install the pod using the following command. Make sure your minimum deployment target is iOS 11.
pod installStep 2: Build the payment parameters
To initiate a payment, your app needs to send transactional information to the Custom Browser 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 (Mandatory)
transaction_id: new Date().getTime().toString(), //Mandatory
cb_config:{
url: <String>, //Mandatory (This can be generated using PayU Core PG SDK)
post_data: <String>, //Mandatory (This can be generated using PayU Core PG SDK)
view_port_wide_enable : <String>, // "true","false"
auto_approve: <String>, // "true","false"
auto_select_otp: <String>, // "true","false"
internet_restored_window_ttl: <String>, //numeric
sms_permission: <String >, // "true","false"
html_data: <String>,
disable_intentseamless_failure: <String>, //numeric
disable_backbutton_dialog: <String>, // "true","false"
enable_ssl_dialog: <String>,// "true","false"
email: <String>,
first_name: <String>,
last_name: <String>,
package_name_for_specific_app: <String>,
payment_type: <String>,
phone_pe_user_cache_enabled: <String>, //numeric
merchant_response_timeout: <String>, //numeric
}
}
}
}For details on Standing Instructions parameters, refer to PayU Standing Instruction Parameters.
Step 3: Generate payment hash
For hash generation testing salt needs to be put in the HASH generation method. For more information, refer to Generate Hash.
Note: 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: Make payment
Use the code snippet mentioned below to make the payment:
CBWrapper.openCB(
Request Data <Map>, //payment params defined above
(error) => {
console.log("-----------Error Callback---------");
console.log(error);
console.log("------------------------------------");
},
(payuResponse) => {
console.log("-----------Success Callback---------");
console.log(payuResponse);
console.log("--------------------------------------");
}
);Step 5: Register listeners
Register Listener (in this case) Emitter to get the Response from Custom Browser SDK:
import {NativeEventEmitter} from 'react-native';
const eventEmitter=new NativeEventEmitter(CBWrapper);
eventEmitter.addListener("CBListener",(event)=>{
})Response
{
"eveneType": <String>, (onPaymentFailure | onPaymentTerminate | onPaymentTerminate | onCBErrorReceived | onBackButton | onBackApprove | onBackDismiss)
"payuResult": <String>, //conditional
"merchantResponse": <String>, //conditional
"errorMessage":<String>,
"errorCode": <String>, //conditional
}Updated 9 days ago