ZOLOZZOLOZDOCS

通过React Native接入ZOLOZ SDK

ZOLOZ提供客户端SDK和服务端API，以便您将原生移动应用接入ZOLOZ服务。本文详细介绍通过React Native接入ZOLOZ SDK的完整流程。

有关ZOLOZ SDK的更多信息，详见使用原生App SDK模式接入。

环境准备

按照以下步骤安装JDK 17并检查：

  1. 使用Homebrew安装JDK 17。
copy
brew install openjdk@17
  1. 安装完成后运行以下命令，检查JDK安装是否正确。
copy
java -version
  1. 正确安装JDK后将显示如下信息。
copy
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)

接入步骤

步骤1：创建项目

根据React Native官方文档创建项目，详见Get Started Without a Framework。本文示例使用的是React Native 0.76版本。

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

步骤2：安装依赖包

安装React Native所需的ZOLOZ插件。

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

步骤3：Native配置

Android配置

  1. 在项目根目录运行以下命令，安装Android Gradle插件。
copy
npm install react-native-gradle-plugin
  1. 修改Gradle配置。
    1. 在android/build.gradle文件中添加以下配置。
copy
buildscript {
    ext {
        // ...
        // 添加以下配置
        Zolozkit_compileSdkVersion = compileSdkVersion
        Zolozkit_minSdkVersion = minSdkVersion
        Zolozkit_targetSdkVersion = targetSdkVersion
    }
    // ...
}
    1. 在android/gradle.properties文件中添加以下配置。
copy
android.enableJetifier=true
  1. 添加其他Android依赖项。
    如果使用React Native 0.76以下版本且项目启用了AndroidX，需要在android/app/build.gradle文件中添加localbroadcastmanager依赖项。
copy
implementation 'androidx.localbroadcastmanager:localbroadcastmanager:1.0.0'

iOS配置

  1. 配置Podfile。
    在Podfile文件中添加pod 'zolozkit'，文件路径通常为ios/Podfile。
copy
pod 'zolozkit', :source => 'https://github.com/zoloz-pte-ltd/zoloz-demo-ios'
  1. 安装Pods。
copy
cd ios
bundle install
bundle exec pod install
  1. 配置Xcode。
    当您使用Xcode 15及以上版本且遇到链接问题（例如重复符号）时，需要手动添加编译选项解决该问题。
    1. 在Xcode中打开XX.xcworkspace文件。
    2. 在Target > Build Settings > Other Linker Flags中添加以下链接器参数。
copy
-ld64

步骤4：构建应用

首次构建需要安装Android依赖项，耗时大约几分钟，请耐心等待。

copy
npm start
npm run [android/ios]

SDK使用说明

  1. 在React Native中导入ZolozKit。
copy
import { NativeModules} from "react-native";
const { ZolozKit } = NativeModules;
  1. 获取设备元信息。
    使用ZolozKit的getMetaInfo方法获取ZOLOZ SDK和用户设备的元信息，该元信息将用于后续初始化交易。
copy
ZolozKit.getMetaInfo((metainfo) => {
    console.log(metainfo)
});
  1. 初始化交易。
    商户移动App向商户服务器发送包含元信息的请求以初始化交易，商户服务器调用initialize API获取客户端配置，并将其返回给商户移动App。
  2. 启动交易流程。
    使用步骤3中的clientcfg调用start方法启动交易流程，并重写回调函数处理交易结果。
copy
const {  ZLZ_LOCAL_KEY, ZLZ_CHAMELEON_KEY, ZLZ_PUB_KEY } = ZolozKit.getConstants();
clientCfg = "the clientcfg from the third step"
ZolozKit.start(clientCfg, {
    // 为ZOLOZ SDK添加业务参数，例如local
    // [ZLZ_LOCAL_KEY]: "zh-CN"
}, (result) => {
    alert(result, [{text: 'OK', onPress: () => console.log('OK Pressed!')},])
    console.log(result);
})

交易结果中包含标识交易流状态的结果码。当result返回true时，表示终端用户已成功完成整个交互流程。