• Select

  • Select

React Native SDK Setup

Integrating the SDK in your mobile application

Follow the steps below to successfully integrate the SDK.

Step 1

Create an .npmrc file in the project repository to access the rn-cards-sdk. Copy the following content to the .npmrc file created

Switch Theme
Expand More
Copy
1
@zeta-apollo:registry=https://npm-repo.zetaapps.in/
Code Copied

Step 2

Install the SDK using following command:

Switch Theme
Expand More
Copy
1
$ npm install @zeta-apollo/rn-cards-sdk
Code Copied

Platform Specific Setup

Perform the following steps to complete the platform specific setup for your application

Android

Step 1

Add the dependency on the private Maven Repo. This will help you to get access to all the native code for Cards SDK. Add the following code under the allProjects section of project level build.gradle.

Switch Theme
Expand More
Copy
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
maven {
    credentials  {
        username "******"
        password "******"
    }
    url 'https://apollo-sdk.zetaapps.in/repository/maven-releases/'
    authentication {
        basic(BasicAuthentication)
    }
}
Code Copied

You can get your username and password from App Center’s SDK details page.

Step 2

Enable data binding by adding the following line under the android section of app level build.gradle file.

Switch Theme
Expand More
Copy
1
2
3
dataBinding {
    enabled = true
}
Code Copied
Step 3

Exclude the Kotlin modules from packaging options. This can be done by adding the following code snippet to the android settings in app level build.gradle.

Switch Theme
Expand More
Copy
1
2
3
packagingOptions {
    exclude("META-INF/*.kotlin_module")
}
Code Copied
Step 4

Add following permissions to the AndroidManifest.xml file.

Switch Theme
Expand More
Copy
1
2
3
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
Code Copied
Step 5

Enable multi-dex by adding the following line under defaultConfig in the app level build.gradle file.

Switch Theme
Expand More
Copy
1
multiDexEnabled true
Code Copied
Step 6

Add the assets, config, collections and fonts provided in the SDK integration doc or app-center in the android folder.

Step 7

Add ‘jcenter()’ to the repositories under project level build.gradle. This is needed by Facebook react native 0.64.0 itself.

Switch Theme
Expand More
Copy
1
2
3
4
5
6
7
allprojects {
    repositories {
    ……...
       jcenter()
    …….
    }
}
Code Copied
Step 8(Optional troubleshooting step)

In-case you face multi-dex issues, you may wish to tweak the memory settings a little. This can be done by adding following lines to gradle.properties file.

Switch Theme
Expand More
Copy
1
org.gradle.jvmargs=-Xmx4608m
Code Copied

iOS

Step 1

In the podfile, add the following snippet

Switch Theme
Expand More
Copy
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
 
source '[email protected]:zetaengg/iapollopubliccocoapodspecs.git'
source '[email protected]:CocoaPods/Specs.git'
 
platform :ios, '10.0'
 
target 'AppTarget' do
  config = use_native_modules!
  use_frameworks!
  pod 'Block-KVO', :git => 'https://github.com/Tricertops/Block-KVO', :branch => 'master'
 
  use_react_native!(:path => config["reactNativePath"])
  post_install do |installer|
   installer.pods_project.targets.each do |target|
     if target.name == "Mantle" || target.name == "ReactiveCocoa"
       puts "Switching off Assertions in Mantle & ReactiveCocoa"
       target.build_configurations.each do |config|
         config.build_settings['ENABLE_NS_ASSERTIONS'] = 'NO'
       end
     end
   end
 end
end
Code Copied
Step 2

Add the assets, config(supercardSdk.plist) and the local collection files for theme, templates & shopHook configs in the app target.

Step 3

run ‘pod install’ in ExampleApp/ios/ directory and then run ‘react-native run-ios’ in the root folder or build the project from xcode.

SDK initialisation

Initialise the cards SDK using the following code

Switch Theme
Expand More
Copy
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import {ApolloCardsSdk} from '@zeta-apollo/rn-cards-sdk';

var cardsService = ApolloCardsSdk;
function initialCardsSdkSetup() {
    const IBXPLEXSANS_REGULAR_FONT_PATH = "fonts/IBMPlexSans-Regular.otf";
    const IBXPLEXSANS_MEDIUM_FONT_PATH = "fonts/IBMPlexSans-Medium.otf";
    const IBXPLEXSANS_SEMI_BOLD_FONT_PATH = "fonts/IBMPlexSans-SemiBold.otf";
    const IBXPLEXSANS_BOLD_FONT_PATH = "fonts/IBMPlexSans-Bold.otf";
    const OCRA_STD_FONT_PATH = "fonts/OCRAStd.otf";

    const fontMap = {
        "IBMPlexSans-Regular": IBXPLEXSANS_REGULAR_FONT_PATH,
        "IBMPlexSans-Medium": IBXPLEXSANS_MEDIUM_FONT_PATH,
        "IBMPlexSans-SemiBold": IBXPLEXSANS_SEMI_BOLD_FONT_PATH,
        "IBMPlexSans-Bold": IBXPLEXSANS_BOLD_FONT_PATH,
        "OCRAStd": OCRA_STD_FONT_PATH
    };

    var options = {
        "loggingEnabled": true,
        "secureStoreTitle": "Device Lock",
        "secureStoreSubtitle": "Please authenticate using device lock",
        "fontMap": fontMap,
        "useDoor": true
    };

    cardsService.initialize(options);
}
Code Copied

SDK Authentication & Setup

Authenticate and setup the SDK using the following piece of code

Switch Theme
Expand More
Copy
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
import ApolloCardsSdk from '@zeta-apollo/rn-cards-sdk';

var cardsService = ApolloCardsSdk;
cardsService.authenticateSDK(JWT_TOKEN, ACCOUNT_HOLDER_ID);

try {
    var response = await cardsService.setupSDK();
} catch(e) {
    console.log(e);
}
Code Copied