---
page_title: Installing the SDK
product: UPI TPAP SDK
platform: React Native
page_source: https://juspay.io/in/docs/upi-tpap-sdk/react-native/getting-the-sdk/getting-sdk
llms_txt: https://juspay.io/in/docs/llms.txt
product_llms_txt: https://juspay.io/in/docs/upi-tpap-sdk/llms.txt
---


## Installing the SDK



In order to use UPI In-app, the very first step is to install Payment Page SDK into your application and add proper configurations. This has three steps to it:

1. [Installing React Plugin](#installing-assets-plugin)
2. [Installing Compile Dependency - Android](#installing-hyper-sdk)
3. [Installing Compile Dependency - iOS](#installing-hyper-sdk)

Following sections describe how to complete above steps


### 1. Installing React Plugin




### Step 1.1 Add Plugin Dependency


Run command `npm install hyper-sdk-react`




### 2. Installing Compile Dependency - Android




### Step 2.1 Add SDK maven url


The maven url specifies from where the SDK dependency should be downloaded. It should be present inside the `allProjects/repositories` section of your project build.gradle.

> **Warning**
> Make sure it is added to project dependency section. **(eg: build.gradle (Project:ProjectName))** 





#### Code Snippets: -

#### Functional Code Snippet:

```functional
{"success":false,"message":"Failed to fetch snippet"}
```

#### Class Code Snippet:

```class
{"success":false,"message":"Failed to fetch snippet"}
```



### Step 2.2 Add the clientId ext property


Add the clientId ext property in root(top) `build.gradle`



#### Code Snippets: -

#### Functional Code Snippet:

```functional
{"success":false,"message":"Failed to fetch snippet"}
```

#### Class Code Snippet:

```class
{"success":false,"message":"Failed to fetch snippet"}
```



### Step 2.3 (Optional) Add Shimmer


This is required only if shimmer effect is to be used in your application.



#### Code Snippets: -

#### Functional Code Snippet:

```functional
{"success":false,"message":"Failed to fetch snippet"}
```

#### Class Code Snippet:

```class
{"success":false,"message":"Failed to fetch snippet"}
```



### Step 2.4.1 Add secure component (Sandbox)


Include the secure component dependency in your `application build.gradle` under dependencies section.



#### Code Snippets: -

#### Functional Code Snippet:

```functional
{"success":false,"message":"Failed to fetch snippet"}
```

#### Class Code Snippet:

```class
{"success":false,"message":"Failed to fetch snippet"}
```



### Step 2.4.2 Add secure component (Production)


Include the secure component dependency in your `application build.gradle` under dependencies section.



#### Code Snippets: -

#### Functional Code Snippet:

```functional
{"success":false,"message":"Failed to fetch snippet"}
```

#### Class Code Snippet:

```class
{"success":false,"message":"Failed to fetch snippet"}
```



###   Sync Project


> **Warning**
> **After adding Assets Plugin and Hyper SDK to your project, please ensure you do a gradle sync and clean build** 






### 3. Installing Compile Dependency - iOS



Follow the below steps


### Step 3.1 Add Dependency


Add this property in package.json of your project



#### Code Snippets: -

#### Functional Code Snippet:

```functional
{"success":false,"message":"Failed to fetch snippet"}
```

#### Class Code Snippet:

```class
{"success":false,"message":"Failed to fetch snippet"}
```



### Step 3.2 Add SDK dependency to Podfile


Hyper SDK is served via cocoa pods. In order to download and install the same to your application please add Hyper SDK pod to your pod file.



#### Code Snippets: -

#### Functional Code Snippet:

```functional
{"success":false,"message":"Failed to fetch snippet"}
```

#### Class Code Snippet:

```class
{"success":false,"message":"Failed to fetch snippet"}
```


---

## Complete Code Reference

The following code files are referenced in the steps above:

### build.gradle

```
{"success":false,"message":"Failed to fetch snippet"}
```

### build.gradle

```
{"success":false,"message":"Failed to fetch snippet"}
```

### build(sbx).gradle

```
{"success":false,"message":"Failed to fetch snippet"}
```

### package.json

```
{"success":false,"message":"Failed to fetch snippet"}
```

### Podfile

```
{"success":false,"message":"Failed to fetch snippet"}
```


---

## See Also

- [Integration Checklist](https://juspay.io/in/docs/upi-tpap-sdk/react-native/overview/integration-checklist)
- [Installing Assets Plugin](https://juspay.io/in/docs/upi-tpap-sdk/react-native/getting-the-sdk/adding-plugin)