--- page_source: https://juspay.io/sea/docs/hyper-checkout-sea/react-native/base-sdk-integration/getting-sdk page_title: 1. Getting SDK --- # 1. Getting the SDK In order to use Hypercheckout, the very first step is to install the Hypercheckout SDK into your application and add proper configurations. This has three steps to it: 1. [Installing React Plugin](https://docs.juspay.in/hyper-checkout/react-native/base-sdk-integration/getting-sdk#1.1.-Installing-React-Plugin) 2. [Installing Compile Dependency - Android](https://docs.juspay.in/hyper-checkout/react-native/base-sdk-integration/getting-sdk#1.2.-Installing-Compile-Dependency---Android) 3. [Installing Compile Dependency - iOS](https://docs.juspay.in/hyper-checkout/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 the clientId ext property Add the clientId ext property in root(top) `build.gradle` #### Code Snippets: - #### Functional Code Snippet: ```functional clientId = "" hyperSDKVersion = "2.1.20" ``` #### Class Code Snippet: ```class kotlin_version = '1.6.10' clientId = "" 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 Hypercheckout 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 = ``` #### Class Code Snippet: ```class clientId = ``` ### 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.