Integration Guide

Integrate with iOS

Suggest Edits

The React Native Core SDK integration with iOS involves the following steps:

  1. Installation
  2. Generate payment hash
  3. Build the Payment Parameters
  4. Make Payment
  5. Register Listeners
  6. Check the Response

Step 1: Installation

React Native SDK for PayU’s Core PG is offered through Node Package Manager (NPM). Run the following command to install PayU Core PG SDK for React:

npm i payu-core-pg-react

Setup Command

git clone https://github.com/payu-intrepos/payu-core-pg-react.git payuSdkExample
  cd payuSdkExample
  npm i
  cd example
  npm i
  react-native start
  react-native run-android

Step 2: Generate payment hash

Generate the payment hash and pass the hash in the JSON payUPaymentParams.hashes.payment parameter as shown below:

{
  payUPaymentParams: {
    hashes:{
      payment: <String>, // hash for payment sha512(key|txnid|amount|productinfo|firstname|email|udf1|udf2|udf3|udf4|udf5||||||salt)
    }
  }
}

To learn more about sash generation, see Hash Generation.

📘

Remember

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 3: 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 = {
      payUPaymentParams: {
        key: <String>, //merchant key 
        transaction_id: new Date().getTime().toString(),
        amount: <String>, // amount in Double format
        product_info: <String>,
        first_name: <String>,
        email: <String>,
        phone: <phoneNumber>,
        ios_surl: <String>,
        ios_furl: <String>,
        android_surl: <String>,
        android_furl: <String>,
        environment: <String>, // "1" for Stage, "0" for production
        user_credentials: <String>, // "user:password"
        hashes: {
          payment: <String>, // generated hash for payment
          },
        additional_param:{
          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",
         merchantAccessKey:"", //This is for lookup API, optional
         sourceId:"", //Sodexo source ID, optional 
      },
    }
  }
}

Build parameters for different payment methods:

Set Net Banking params for payment

To build the mandatory parameters to integrate Net Banking as a payment Method in JSON, use the following code snippet:

var params={
  payUPaymentParams: {
        bankcode:<String>, // ex: ICIB,AXIB 
  }

Set Card payment parameters

To build the mandatory parameters to integrate Cards as a payment Method in JSON, use the following code snippet:

var params={
  payUPaymentParams: {
        bankcode:"CC", 
        card_number:<String>,
        cvv: <String>,
        expiry_year: <String>,
        expiry_month: <String>,
        name_on_card: <String>,
        store_card: <String>, // 0,1 (true | false)
        user_credentials: <String>, // "user:password"
  }

Set Wallet payment parameters

To build the mandatory parameters to integrate wallets as a payment Method in JSON, use the following code snippet:

var params={
  payUPaymentParams: {
        bankcode: <String>, // Payu provide Wallet Id (ex: AMON) 
  }

Step 4: Make payment

Use the following code snippet to start a payment:

CBWrapper.startPayment(
params,
Payment Mode <String> , // CC(CARD), CASH(WALLET), NB (NET BANKING)
      (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 event listener (DeviceEventEmitter for this SDK)to capture the response of the transaction from Custom Browser SDK. Use the following code snippet to register the listener:

DeviceEventEmitter.addListener("CBListener",(event)=>{
     
})

Step 6: Check the response

This is what a sample response from the Custom Browser SDK looks like:

{
  "eveneType": <String>, (onPaymentFailure | onPaymentTerminate | onPaymentTerminate | onCBErrorReceived | onBackButton | onBackApprove | onBackDismiss)
  "payuResult": <String>, //conditional
  "merchantResponse": <String>, //conditional
  "errorMessage":<String>,
  errorCode: <String>, //conditional
}

Updated 4 months ago