SDK Integration
  • Getting Started
  • Onboarding Requirements
  • Hash Generation
  • Test Merchant list
  • Android
    • Android SDK Offering
    • PayUCheckoutPro
      • Integration
      • Build the Payment Params
        • Additional Params
      • Hash Generation
      • Set up the payment hashes
      • Initiate the Payment
      • Customized Integration
        • Set Webview Properties
        • SDK Configuration
        • Additional Offerings
      • Offers Integration
      • Convenience Fee Integration
      • Custom Note Integration
      • MCP Integration
    • Core
      • Supported Payment Types
      • TPV Integration
      • Merchant Web Services
        • Getting Enabled Payment Options
        • GetCheckoutDetails API
        • Lookup API
    • Custom Browser
      • Integration
        • CustomBrowser Config
        • CustomBrowserCallback
        • Supporting below Lollipop Versions
        • Third-Party Payments Support
      • Sample App
      • Change Logs
    • Native OTP Assist
      • Integration
      • Customization
      • Change Logs
    • UPI
      • Integration
      • TPV Integration in UPI
      • Sample App
      • Change Logs
    • Google Pay™
      • Integration
      • Sample App
    • PhonePe
      • Integration
      • Sample App
      • Change Logs
    • OlaMoney
    • PayU OTP Parser
      • Integration
    • FAQ Android
  • iOS
    • PayUCheckoutPro
      • Integration
      • Advanced Integration
      • Set up the payment hashes
      • Convenience Fee Integration
      • MCP Integration
      • Custom Note Integration
    • Core
      • POD Integration
      • Seamless
      • Web Services
      • Objective C-Non-Seamless
      • Standing Instructions
      • TPV Integration
      • Sample App
    • Custom Browser
      • Sample App
    • OlaMoney
    • Native OTP Assist
      • Integration
      • Customization
    • UPI
      • Integration
      • Sample App
    • PayUParams
      • PayUSIParams
      • PayUBeneficiaryParams
  • Releasing to Apple
  • React-Native
    • PayUCheckoutPro
      • Integration
      • Set up the payment hashes
      • Advanced Integration
      • Change Logs
    • Core
    • Non-Seamless Wrapper
    • TPV (beta)
      • Integration
  • FAQ iOS
Powered by GitBook
On this page
  • Installation
  • For iOS
  • Usage
  • Creating Params
  • Creating Hash Object

Was this helpful?

  1. React-Native

Non-Seamless Wrapper

This is v1 react-native UI wrapper built upon PayU's Android and iOS sdk.

PreviousCoreNextTPV (beta)

Last updated 4 years ago

Was this helpful?

This SDK is no longer supported. Please refer to for the latest react native wrapper

Installation

For installing it to your project follow the below steps.

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

For iOS

Add following code also for integration.

pod 'react-native-biz-sdk', :path => '../node_modules/payu-non-seam-less-react/react-native-biz-sdk.podspec'

in podfile and run following command.

pod install

Usage

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

Creating Params

var params ={      
  amount:'<Transaction Amount>',
  key:'<Key provided by PayU>',      
  txnid:'<Transaction Id>',      
  productinfo:'<Product Information>',      
  surl:'<Success url for Android>',      
  furl:'<Failure url for Android >',      
  ios_surl:'<Success url for iOS>',      
  ios_furl:'<Failure url for iOS>',      
  udf1:'<Any user defined fields>',      
  udf2:'<Any user defined fields>',      
  udf3:'<Any user defined fields>',      
  udf4:'<Any user defined fields>',      
  udf5:'<Any user defined fields>',      
  email:'<Customer Email>',      
  phone:'<Customer Phone number>',
  env:'0/2', <0 for Production,2 for Testing Environment>      
  firstname:'<Customer First name>',  
  user_credentials:'<User Credentials',
  lastname:'<Customer Last name>',      
  hash:'<Payment Hash>',      
  address1:'Customer address 1',      
  address2:'Customer address 2',      
  custom_note:'Any extra note to be passed',      
  city:'Customer city',      
  offer_key:'Valid offer key if wish to enable offer', 
  enforce_paymethod:'PG code if wish to enforce particular PG',      
  cb_config:{   enableReviewOrder:'true/false',
              enableSurePay:0-3[For Surepay], 
              autoSelectOTP:'true/false'[To select OTP flow],
              autoApprove:'true/false'[To Auto approve OTP after auto read],
              disableBackButtonDialog:'true/false'[To Disable back button Dialog],
              merchantSMSPermission:'true/false'[To enable SMS permission for Android(OS version>=M),
              viewPortWideEnable:'true/false'[View Port setting for Netbanking],
              merchantResponseTimeout:[In milliseconds to set surl/furl loading timeout]
         },      
  review_order_data:{        
                    'Order':'Value',        
                    'Key Name':'Value1'      
                  }    
}

For information about Review Order refer here

Creating Hash Object

var hashes ={    
    'vas_for_mobile_sdk':vasHash,    
    'payment_related_details_for_mobile_sdk':paymentDetailsHash,    
    'payment_source':paymentHash,    
    'delete_user_card':deleteCardHash,    
    'check_offer_status':offerStatusHash
}

Command/Hash Type

  • vas_for_mobile_sdk

  • payment_related_details_for_mobile_sdk

  • delete_user_card

  • check_offer_status

Call makePayment method available in PayUBizSdk using params and hashes created above. It returns a promise object where on success /failure transaction response can be found using key merchant_response for response being sent by your Surl/Furl and payu_response for response being sent by PayU's Backend. For any other result catch the error[Payment being cancelled by user].

PayUBizSdk.makePayment(hashes,params).then(map =>{        
    Alert.alert("Response",'Merchant Response \n'+map.merchant_response+'\n Payu Response \n'+map.payu_response);     
 }).catch(error =>{         
    Alert.alert("response",error.message);      
 });

For information about CustomBrowser Config refer

For generating below hashes use method described as where command name is same as their type and var1 is userCredentials which uniquely identifies your Customer or default.

For generating Payment Hash(to be set under payment_source key visit .

PayUCheckoutPro
here
here
here