ZOLOZ provides an SDK and APIs for you to implement integration with your native mobile application. This article provides you an overview of the App SDK-mode integration by React Native.

For more information about the ZOLOZ SDK, see: App SDK-mode integration

Environment Setup

Follow the steps below to install JDK 17 and verify

1. Use Homebrew to install JDK 17.

brew install openjdk@17

2. Run the following command to confirm JDK installed correctly.

java -version

3. If the JDK is installed correctly, it should print like below.

openjdk version "17.0.12" 2024-07-16
OpenJDK Runtime Environment Homebrew (build 17.0.12+0)
OpenJDK 64-Bit Server VM Homebrew (build 17.0.12+0, mixed mode, sharing)

Steps

Step 1: Create Project

Create a project following the React Native official guide Get Started Without a Framework, the latest React Native version used in this document is 0.76.

npm uninstall -g react-native-cli @react-native-community/cli
npx @react-native-community/cli@latest init AwesomeProject 
cd AwesomeProject

Step 2: Install Node Package

Install zolozkit plugin for React Native.

npm install react-native-zolozkit
npm install react-native-fs

Step 3: Native Configurations

Android

1. Run command at the project root dir to install Android Gradle plugin.

npm install react-native-gradle-plugin

2. Modify Android Gradle.

   1. Add the following configuration to the android/build.gradle file.

buildscript {
    ext {
        // ...        // add bellow three new lines        Zolozkit_compileSdkVersion = compileSdkVersion
        Zolozkit_minSdkVersion = minSdkVersion
        Zolozkit_targetSdkVersion = targetSdkVersion
    }
    // ...}

b. Add the following configuration to the android/gradle.properties file.

# add this new lineandroid.enableJetifier=true

3. Add other dependencies for android.

For older version of React Native(less than 0.76), if your project support for AndroidX, you need add the localbroadcastmanager dependencies to android/app/build.gradle file.

implementation 'androidx.localbroadcastmanager:localbroadcastmanager:1.0.0'

iOS

1. Config Podfile.

You should add the pod 'zolozkit' in your podfile (usually ios/Podfile).

pod 'zolozkit', :source => 'https://github.com/zoloz-pte-ltd/zoloz-demo-ios'

2. Install Pods.

cd ios
bundle install
bundle exec pod install

3. Config Xcode.

If you are using Xcode 15 or later and encounter linking issues (e.g., duplicate symbols), you need to manually add linker flags to resolve this issue.

1. Open the XX.xcworkspace in Xcode.

2. Add the following linker flags in Target > Build Settings > Other Linker Flags.

-ld64

Step 4: Build App

It takes minutes to install android dependencies at the first time.

npm start
npm run [android/ios]

Introduction for SDK

1. Import ZolozKit in React Native.

import { NativeModules} from "react-native";
const { ZolozKit } = NativeModules;

2. Get meta information.

Use the ZolozKit and its method getMetaInfo to get the meta information about the ZOLOZ SDK and the user's device. The meta information is used to initialize a transaction later.

ZolozKit.getMetaInfo((metainfo) => {
    console.log(metainfo)
});

3. Initialize a transaction.

The (merchant) application send a request that contains the meta information to your (merchant) server to initialize a transaction. Then your (merchant) server needs to call the initialize API to obtain the client configuration and return it to your (merchant) application.

4. Start the transaction flow.

Start the transaction flow by calling the start method with the clientcfg that is from Step 3. You also need to override the callback functions to handle the transaction result.

const {  ZLZ_LOCAL_KEY, ZLZ_CHAMELEON_KEY, ZLZ_PUB_KEY } = ZolozKit.getConstants();
clientCfg = "the clientcfg from the third step"ZolozKit.start(clientCfg, {
    // add some biz params for zoloz sdk , like local.    // [ZLZ_LOCAL_KEY]: "zh-CN"}, (result) => {
    alert(result, [{text: 'OK', onPress: () => console.log('OK Pressed!')},])
    console.log(result);
})

The transaction result contains a result code that indicates the transaction flow status. If the end user has completed the flow, the result value is true.