---
page_source: https://juspay.io/in/docs/upi-plugin-sdk/react-native/getting-the-sdk/getting-sdk
page_title: Installing the SDK
---


## 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":"No Data found for the given path"}
```

#### Class Code Snippet:

```class
{"success":false,"message":"No Data found for the given path"}
```



### 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":"No Data found for the given path"}
```

#### Class Code Snippet:

```class
{"success":false,"message":"No Data found for the given path"}
```



### 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":"No Data found for the given path"}
```

#### Class Code Snippet:

```class
{"success":false,"message":"No Data found for the given path"}
```



### For Sandbox environment



To run UPI in sandbox environment. Follow these additional steps:


### Step 2.4 Add secure component


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



#### Code Snippets: -

#### Functional Code Snippet:

```functional
{"success":false,"message":"No Data found for the given path"}
```

#### Class Code Snippet:

```class
{"success":false,"message":"No Data found for the given path"}
```



### Step 2.5 Add configurations block


Add following block below the dependencies section in `application build.gradle`.



#### Code Snippets: -

#### Functional Code Snippet:

```functional
{"success":false,"message":"No Data found for the given path"}
```

#### Class Code Snippet:

```class
{"success":false,"message":"No Data found for the given path"}
```



###   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":"No Data found for the given path"}
```

#### Class Code Snippet:

```class
{"success":false,"message":"No Data found for the given path"}
```



### 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":"No Data found for the given path"}
```

#### Class Code Snippet:

```class
{"success":false,"message":"No Data found for the given path"}
```