Integration Guide

Android Integration

Suggest Edits

To integrate with the CheckoutPro mobile SDK for Android:

  • Include the SDK in your app project​
  • ​Set up the payment hashes​
  • ​Build the payment parameters​
  • ​Initiate the payment​
  • ​Handle the payment completion​
  • Customization

Step 1: Include the SDK in your app project

The CheckoutPro SDK is offered through npm.

Add the following entries to include CheckoutPro SDK in your app:

npm install payu-non-seam-less-react --save
react-native link payu-non-seam-less-react

Add the following imports in the class where you need to initiate a payment:

import PayUBizSdk from 'payu-non-seam-less-react';

Step 2: Set up payment hashes

This step describes how to pass the static and dynamic hashes. For detailed information, refer to Hash Generation.

Pass Static Hashes

To pass static hashes during integration, use the following code snippet:

var payUPaymentParams = {
    key: "Merchant key",
    ...
    ...
    ...
    additionalParam: {
        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"
    }
}

Passing dynamic hashes

To pass dynamic hashes, the merchant will receive a call on the generateHash method. In the method parameter, you will receive a dictionary or hashMap, then extract the value of hashString from that. Pass that value to the server to append the Salt at the end and generate the sha512 hash over it. The server gives that hash back to your app, and the app will pass that hash to PayU through a callback mechanism. For passing dynamic hashes during integration, use the following code snippet:

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);
}

Step 3: Build the payment parameters

To initiate a payment, your app needs to send transactional information to the Checkout Pro SDK.

Payment parameters

ParameterDescription
Key
mandatory		String This parameter must contain your merchant key received from PayU.
transactionId
mandatory		String It should be unique for each transaction.
Amount
mandatory		String Total transaction amount.
productInfo
mandatory		String Information about the product.
firstName
mandatory		String Customer’s first name
Email
mandatory		String Customer’s email id
Phone
mandatory		String Customer’s phone number. Max character limit : 10 Digits
ios_surl
mandatory		String When the transaction gets successful, PayU will load this URL and pass the transaction response.
Note: This field is applicable for iOS integration
ios_furl
mandatory		String When the transaction fails, PayU will load this URL and pass the transaction response.
Note: This field is applicable for iOS integration
android_surl
mandatory		String When the transaction gets successful, PayU will load this URL and pass the transaction response.
Note: This field is applicable for Android integration
Sample URL: https://cbjs.payu.in/sdk/success
android_furl
mandatory		String When the transaction gets fail, PayU will load this url and pass transaction response.
When the transaction gets success, PayU will load this url and pass transaction response.
Note: This field is applicable for Android integration
Sample URL: https://cbjs.payu.in/sdk/failure
Environment
mandatory		String Environment of SDK
User Credential
mandatory		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. Format:
<merchantKey>:<userId>
Here,
UserId is any id/email/phone number to uniquely identify the user.
user_token
mandatory		String The use for this param is to allow the offer engine to apply velocity rules at a user level.

-Card Based Offers (CC, DC, EMI): For card payment mode offers, if this parameter is passed then the velocity rules would be applied on this token, if not passed the same would be applied to the card number.

-NB, Wallet: It is mandatory for UPI, NB, and Wallet payment modes. If not passed the validation rules would not apply.
Note:- When we use Offer features then it's a mandatory parameter otherwise it's not required.

📘

Note:

The sample URLs mentioned in surl and furl are for temporary use. PayU recommends you to design or use your own surl and furl after testing is completed.

For details on Standing Instructions parameters, refer to PayU Standing Instruction Parameters.

Additional parameters (Optional)

The additional parameters that are optional that can be passed to SDK are udf parameters, static hashes, and other parameters. For more details on Static Hash generation and passing them, refer to generate hashes. The following is a list of parameters that can be passed in additional parameters:

ParameterDescription
PayUCheckoutProConstants.CP_UDF1String User defined field, Merchant can store their customer id, etc.
PayUCheckoutProConstants.CP_UDF2String User defined field, Merchant can store their customer id, etc.
PayUCheckoutProConstants.CP_UDF3String User defined field, Merchant can store their customer id, etc.
PayUCheckoutProConstants.CP_UDF4String User defined field, Merchant can store their customer id, etc.
PayUCheckoutProConstants.CP_UDF5String User defined field, Merchant can store their customer id, etc.
Static hashesString The static hashes is specified in this parameter. For more information, refer to Hash Generation section.
PayUCheckoutProConstants.SODEX_OSOURC_EIDString Sodexo Source ID, Merchant can store it from the third field of PayU response.
PaymentParamConstant.walletUrnString Pass this parameter if closed loop wallet (clw) payment mode is enabled for your account.

The payment parameters and additional parameters can be passed using the following code snippet:

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",
    userToken: "<pass the User Token>", //Optional, Only use for Offer
    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",
        walletUrn: "<walletUrn>"
    },
    payUSIParams: {
      isFreeTrial:true,
    	billingAmount:'10',
    	billingInterval:'1',
    	paymentStartDate:'2023-04-20',
    	paymentEndDate:'2023-04-30',
      billingCycle:"DAILY", //Can be any of  YEARLY | MONTHLY | WEEKLY | DAILY | ONCE | ADHOC
    	remarks:'Test SI transcaction',
    	billingCurrency:'INR'
    }
}

For details on Standing Instructions parameters, refer to PayU Standing Instruction Parameters.

Step 4: Initiate the payment

Initialize and launch the Checkout Pro SDK by calling the following code snippet:

var paymentObject = {
payUPaymentParams: payUPaymentParams,
// payUCheckoutProConfig is optional
// Detail can be found in latter section
payUCheckoutProConfig: payUCheckoutProConfig
}
PayUBizSdk.openCheckoutScreen(paymentObject);

Step 5: Complete the payment

To get the callbacks for payment-related statuses, create a NativeEventEmitter object and subscribe to the following 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();
}

Step 6: Customization (Optional)

Build.gradle

allprojects {
    repositories {
        maven {
            url "https://phonepe.mycloudrepo.io/public/repositories/phonepe-intentsdk-android"
        }
    }
}

AndroidManifest.xml

To automatically fill OTP on bank pages, SDK requires the RECEIVE_SMS permission so kindly add the same in your AndroidManifest.xml like below.

<uses-permission android:name="android.permission.RECEIVE_SMS" />

Updated 3 days ago