---
page_title: Adding Plugins
product: UPI TPAP SDK
platform: Flutter
page_source: https://juspay.io/in/docs/upi-tpap-sdk/flutter/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
---


## Adding Plugins



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

1. [Installing Flutter Plugin](#installing-assets-plugin)
2. [Installing Asset Plugin - Android](#installing-assets-plugin-android)
3. [Installing Asset Plugin - iOS](#installing-assets-plugin-ios)

Following sections describe how to complete above steps


### 1. Installing Flutter Plugin




### Step 1.1 Add Plugin Dependency


Add flutter plugin dependency in `pubspec.yaml`



#### Code Snippets: -

#### Flutter Code Snippet:

```flutter
name: doc_app
description: A new Flutter project.

# The following line prevents the package from being accidentally published to
# pub.dev using `flutter pub publish`. This is preferred for private packages.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev

# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
version: 1.0.0+1

environment:
  sdk: ">=2.12.0 <3.0.0"

# Dependencies specify other packages that your package needs in order to work.
# To automatically upgrade your package dependencies to the latest versions
# consider running `flutter pub upgrade --major-versions`. Alternatively,
# dependencies can be manually updated by changing the version numbers below to
# the latest version available on pub.dev. To see which dependencies have newer
# versions available, run `flutter pub outdated`.
dependencies:
  flutter:
    sdk: flutter
  uuid: ^3.0.5
  dio: ^4.0.6
# Applying HyperAssets plugin
# block:start:add-dependency
  hypersdkflutter: ^4.0.35
# block:end:add-dependency
```



### 2. Installing Assets Plugin - Android



UPI In-app SDK depends on certain assets to function. These are available over the air and are supposed to be present while building the SDK. The Assets Plugin is a build time dependency that downloads all required assets and ensures the availability of the latest assets at build time.

To install Assets Plugin follow the below steps


### Step 2.1 Add the clientId ext property


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



#### Code Snippets: -

#### Flutter Code Snippet:

```flutter
ext {
            clientId = "<clientId shared by Juspay team>"
            hyperSDKVersion = "2.2.6"
        }
```



### Step 2.2 Add settings.gradle(optional)


This ensures that gradle can locate and configure modules to include in the build during the build process. Specify these plugin & dependency management configurations in `settings.gradle`



#### Code Snippets: -

#### Flutter Code Snippet:

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



### Step 2.3.1 Add secure component (Sandbox)


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



#### Code Snippets: -

#### Flutter Code Snippet:

```flutter
implementation'in.juspay:secure-component-uat:4.1.8'
```



### Step 2.3.2 Add secure component (Production)


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



#### Code Snippets: -

#### Flutter Code Snippet:

```flutter
implementation "in.juspay:secure-component-prod:4.1.8"
```



### 3. Installing Assets Plugin - iOS



To install Assets Plugin follow the below steps


### Step 3.1 Add Post Install Script to Podfile


This Ruby Script will download all the latest assets required for proper functioning of your SDK integration



#### Code Snippets: -

#### Flutter Code Snippet:

```flutter
use_frameworks!


target '<project_target>' do       # To be added by merchant
  # Adding Hyper SDK dependecy
  # block:start:adding-hyper-sdk-pod
  pod 'HyperQR', '2.2.4'         # Has to be removed for plugin and direct integration
  pod 'HyperSDK', '2.2.4'
  pod 'HyperUPI', '2.2.4'
  
  # block:end:adding-hyper-sdk-pod
end


# Adding Hyper SDK dependecy
# block:start:adding-plugin-installation-script
post_install do |installer|
 fuse_path = "./Pods/HyperSDK/Fuse.rb"
 clean_assets = false # Pass true to re-download all the assets
 if File.exist?(fuse_path)
   if system("ruby", fuse_path.to_s, clean_assets.to_s)
   end
 end
end
# block:end:adding-plugin-installation-script
```



### Step 3.2 Add MerchantConfig.txt


The MerchantConfig.txt contains a clientId which helps the Assets plugin to download assets specific to your application

Create a .txt file named `MerchantConfig.txt` inside the app directory of your project. Add `clientId = your_client_id`to this file. Please note that the file has to added in the top directory of your app



#### Code Snippets: -

#### Flutter Code Snippet:

```flutter
clientId = <clientId> shared by Juspay Team
```


---

## Complete Code Reference

The following code files are referenced in the steps above:

### pubspec.yaml

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

### build(root).gradle

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

### settings.gradle

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

### build(sbx).gradle

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

### Podfile

```
use_frameworks!


target '<project_target>' do       # To be added by merchant
  # Adding Hyper SDK dependecy
  # block:start:adding-hyper-sdk-pod
  pod 'HyperQR', '2.2.4'         # Has to be removed for plugin and direct integration
  pod 'HyperSDK', '2.2.4'
  pod 'HyperUPI', '2.2.4'
  
  # block:end:adding-hyper-sdk-pod
end


# Adding Hyper SDK dependecy
# block:start:adding-plugin-installation-script
post_install do |installer|
 fuse_path = "./Pods/HyperSDK/Fuse.rb"
 clean_assets = false # Pass true to re-download all the assets
 if File.exist?(fuse_path)
   if system("ruby", fuse_path.to_s, clean_assets.to_s)
   end
 end
end
# block:end:adding-plugin-installation-script
```

### MerchantConfig.txt

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


---

## See Also

- [Integration Checklist](https://juspay.io/in/docs/upi-tpap-sdk/flutter/overview/integration-checklist)
- [Adding Frameworks (iOS)](https://juspay.io/in/docs/upi-tpap-sdk/flutter/getting-the-sdk/adding-frameworks)