• Credit

    US flag
  • Credit

    US flag

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:

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

Step 2

Use the following command to install the SDK.

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 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.

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

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 the following line 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