---
page_source: https://juspay.io/sea/docs/express-checkout-sdk-global/react-native/base-sdk-integration/getting-juspay-sdk
page_title: Getting Juspay SDK
---


## 1. Getting the SDK



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

1. [Installing React Plugin](https://docs.juspay.in/ec-headless/react-native/base-sdk-integration/getting-sdk#1.1.-Installing-React-Plugin)
2. [Installing Compile Dependency - Android](https://docs.juspay.in/ec-headless/react-native/base-sdk-integration/getting-sdk#1.2.-Installing-Compile-Dependency---Android)
3. [Installing Compile Dependency - iOS](https://docs.juspay.in/ec-headless/react-native/base-sdk-integration/getting-sdk#1.3.-Installing-Compile-Dependency---iOS)

Following sections describe how to complete above steps


### 1.1. Installing React Plugin




### Step 1.1.a. Add Plugin Dependency


Run command `npm install hyper-sdk-react`




### 1.2. Installing Compile Dependency - Android



Follow the below steps


### Step 1.2.a. 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



#### Code Snippets: -

#### Functional Code Snippet:

```functional
maven { url "https://maven.juspay.in/jp-build-packages/hyper-sdk/"}
```

#### Class Code Snippet:

```class
maven { url "https://maven.juspay.in/jp-build-packages/hyper-sdk/" }
```



### Step 1.2.b. Add Dependency


Add the following ext property in top `build.gradle`



#### Code Snippets: -

#### Functional Code Snippet:

```functional
clientId = "<CLIENT_ID>"
        hyperSDKVersion = "2.1.20"
```

#### Class Code Snippet:

```class
kotlin_version = '1.6.10'
        clientId = "<CLIENT_ID>"
        hyperSDKVersion = "2.1.20"
```



### 1.3. Installing Compile Dependency - iOS



Follow the below steps


### Step 1.3.a Add Dependency


Add this property in package.json of your project



#### Code Snippets: -

#### Functional Code Snippet:

```functional
"hyperSdkIOSVersion": "2.2.2.8",
```

#### Class Code Snippet:

```class
"hyperSdkIOSVersion": "2.2.2.8",
```



### Step 1.3.b Add Post Install Script to Podfile


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



#### Code Snippets: -

#### Functional Code Snippet:

```functional
require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

platform :ios, '11.0'
install! 'cocoapods', :deterministic_uuids => false

target 'juspayIntegrationExampleRN' do
  config = use_native_modules!

  # Flags change depending on the env values.
  flags = get_default_flags()

  use_react_native!(
    :path => config[:reactNativePath],
    # to enable hermes on iOS, change `false` to `true` and then install pods
    :hermes_enabled => flags[:hermes_enabled],
    :fabric_enabled => flags[:fabric_enabled],
    # An absolute path to your application root.
    :app_path => "#{Pod::Config.instance.installation_root}/.."
  )

  target 'juspayIntegrationExampleRNTests' do
    inherit! :complete
    # Pods for testing
  end

  # Enables Flipper.
  #
  # Note that if you have use_frameworks! enabled, Flipper will not work and
  # you should disable the next line.
  use_flipper!()

  post_install do |installer|
    react_native_post_install(installer)
    __apply_Xcode_12_5_M1_post_install_workaround(installer)
  end
  # block:start:add-ios-postinstall-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:add-ios-postinstall-script
end

```

#### Class Code Snippet:

```class
require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

platform :ios, '11.0'
install! 'cocoapods', :deterministic_uuids => false

target 'juspayIntegrationExampleRN' do
  config = use_native_modules!

  # Flags change depending on the env values.
  flags = get_default_flags()

  use_react_native!(
    :path => config[:reactNativePath],
    # to enable hermes on iOS, change `false` to `true` and then install pods
    :hermes_enabled => flags[:hermes_enabled],
    :fabric_enabled => flags[:fabric_enabled],
    # An absolute path to your application root.
    :app_path => "#{Pod::Config.instance.installation_root}/.."
  )

  target 'juspayIntegrationExampleRNTests' do
    inherit! :complete
    # Pods for testing
  end

  # Enables Flipper.
  #
  # Note that if you have use_frameworks! enabled, Flipper will not work and
  # you should disable the next line.
  use_flipper!()
  # block:start:add-ios-postinstall-script

  post_install do |installer|
    react_native_post_install(installer)
    __apply_Xcode_12_5_M1_post_install_workaround(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:add-ios-postinstall-script
end

```



### Step 1.3.c. 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: -

#### Functional Code Snippet:

```functional
clientId = <your_client_id>
```

#### Class Code Snippet:

```class
clientId = <CLIENT_ID>
```



### Step 1.3.d. Install Podfile


Post adding all dependencies of Podfile, In terminal, run the following commands: `pod repo update``pod install`

> **Note**
> **The Output of pod install should give below logs in addition to other logs.** [HyperSDK] Client ID - clientId shared by Juspay Team (It should not be internalPP)[HyperSDK] Downloading assets...[HyperSDK] XX file(s) downloaded/updated.[HyperSDK] Adding the required URL Schemes & Queries Schemes in plist files[HyperSDK] Plist file path: ./{Project Name}/Info.plist[HyperSDK] Done.





## Sample Code Snippets:
### 1.2. Installing Compile Dependecy - Android:

#### Step 1.2.a. Add SDK maven url
 Code Snippet:

```step 1.2.a. add sdk maven url

repositories {
    maven {
        // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
        url("$rootDir/../node_modules/react-native/android")
    }
    maven {
        // Android JSC is installed from npm
        url("$rootDir/../node_modules/jsc-android/dist")
    }
    mavenCentral {
        // We don't want to fetch react-native from Maven Central as there are
        // older versions over there.
        content {
            excludeGroup "com.facebook.react"
        }
    }
    google()
    maven { url 'https://www.jitpack.io' }
    // block:start:hyper-sdk-maven-url

    maven { url "https://maven.juspay.in/jp-build-packages/hyper-sdk/"}

    // block:end:hyper-sdk-maven-url
}
```

#### Step 1.2.b. Add Dependecy Code Snippet:

```step 1.2.b. add dependecy
ext {
    buildToolsVersion = "31.0.0"
    minSdkVersion = 21
    compileSdkVersion = 31
    targetSdkVersion = 31
    ndkVersion = "21.4.7075529"
    // block:start:add-ext-property

    clientId = "your_client_id"
    hyperSDKVersion = "2.1.13"

    // block:end:add-ext-property
}
```

### 1.3. Installing Compile Dependecy - iOS:

#### Step 1.3.a. Add Dependency:
```plaintext
//block:start:add-dependency-ios

"hyperSdkIOSVersion": "2.1.23",

//block:end:add-dependency-ios
```

#### Step 1.3.b. Add Post Install Script to Podfile:
```plaintext
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
```

#### Step 1.3.c. Add MerchantConfig.txt:
```plaintext
clientId = <clientId> shared by Juspay Team

```