React Native SDK Setup

Fusion is equipped with a custom SDK to support react native applications and their operations at full scale. The SDK takes care of all the compliance related to card issuance, its lifecycle, operations, and provides a seamless user experience for your customers.

Prerequisites

Before beginning with the SDK setup, we’d highly recommend you take a note of the following checklists:

You must take care of the prerequisites for the respective Android and iOS SDKs
The SDK supports v 10.0.1 for react and v 0.64.0 for react-native frameworks
Follow the linked guidelines to set up a react-native project

SDK Setup

This section will explain how you can integrate the SDK into your reach native project.

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:

Sample Code

1

@zeta-apollo:registry=https://npm-repo.zetaapps.in/

Code Copied

Step 2

Use the following command to install the SDK.

Sample Code

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 get access to all the native code for Cards SDK. Add the following code under the allProjects section of project-level build.gradle. You can get your username and password from App Center’s SDK details page.

Sample Code

 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.

Sample Code

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.

Sample Code

1
2
3


packagingOptions {
    exclude("META-INF/*.kotlin_module")
}

Code Copied

Step 4

Add the following permissions to the AndroidManifest.xml file.

Sample Code

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.

Sample Code

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 necessary for react native 0.64.0 version.

Sample Code

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 the following line to gradle.properties file.

Sample Code

1

org.gradle.jvmargs=-Xmx4608m

Code Copied

iOS

Step 1

In the podfile, add the following snippet

Sample Code

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

Sample Code

 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

Sample Code

 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

Choose your product

Choose your product

React Native SDK Setup

SDK Setup

Step 1

Step 2

Platform Specific Setup

Android

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

Step 7

Step 8(Optional troubleshooting step)

iOS

Step 1

Step 2

Step 3

SDK initialisation

SDK Authentication & Setup

Was this article helpful?