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

# Non-Seamless Wrapper

{% hint style="danger" %}
**This SDK is no longer supported. Please refer to** [**PayUCheckoutPro**](../android/payucheckoutpro) **for the latest react native wrapper**
{% endhint %}



## 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 CustomBrowser Config refer [here](../android/custom-browser/integration/custombrowser-config)&#x20;

For information about Review Order refer [here](broken-reference)

### 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
}
```

> For generating below hashes use method described as [here](../../hash-generation#webservice-hash) where command name is same as their type and var1 is userCredentials which uniquely identifies your Customer or **default.**
>
> #### Command/Hash Type
>
> * vas\_for\_mobile\_sdk
> * payment\_related\_details\_for\_mobile\_sdk
> * delete\_user\_card
> * check\_offer\_status
>
> For generating Payment Hash(to be set under **payment\_source** key visit [here](../../hash-generation#payment-hash).



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