React Native Custom Browser SDK
This document describes how to integrate Custom Browser SDK with React Native. To integrate Custom Browser SDK with React Native, see Integrate Custom Browser SDK with React Native.
Watch Out!React Native Custom Browser SDK has dependancy on React Native Core SDK. See React Native Core SDK to learn more.
Features
OTP assist: This feature helps you automatically read OTP messages on bank pages to ease the payment experience. Bank Page Optimization: PayU optimizes bank pages for a good payment experience.
Compatibility
Android
- Min SDK Version: 21
- Compile SDK Version: 31
- Kotlin 1.6.10
iOS
- iOS version 11
The React Native Custom Browser SDK integration involves the following steps:
SDK Installation
Step 1: Installation
The PayU Custom Browser SDK for React Native is offered through NPM:
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'; Step 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:
Sample code
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:
Sample code
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:
Sample code
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
}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.
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 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.
Test wallets
You can use the following wallets and their corresponding credentials to test wallet integration.
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 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.
Sample app
The sample application for integration with React-Native CustomBrowser SDK : https://github.com/payu-intrepos/payu-core-pg-react.git
Updated 8 days ago