如何在 React Native 中集成 Tabby：分步指南-js教程-PHP中文网

如何在 React Native 中集成 Tabby：分步指南

Barbara Streisand

发布： 2024-12-27 00:04:10

原创

378 人浏览过

How to Integrate Tabby in React Native: A Step-by-Step Guide

将 Tabby 集成到您的 React Native 应用程序中可以是一个无缝的过程，但网上没有提供分步方法的综合指南。本文整合了多个来源的信息，为您提供在 React Native 应用程序中实现 Tabby 的清晰路线图。

第 1 步：安装 Tabby SDK
首先，您需要安装适用于 React Native 的 Tabby SDK。在项目目录中运行以下命令：

npm 我 tabby-react-native-sdk

第 2 步：更新特定于平台的配置

iOS 配置对于 iOS，请确保使用以下权限更新您的 Info.plist 文件：

<key>NSCameraUsageDescription</key>
<string>This allows Tabby to take a photo</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>This allows Tabby to select a photo</string>

登录后复制

您可以自定义描述以适合您的应用。

安卓配置对于 Android，请将这些权限添加到您的 AndroidManifest.xml 文件中：

<uses-permission android:name=”android.permission.CAMERA” />
<uses-permission android:name=”android.permission.READ_EXTERNAL_STORAGE” />
<uses-permission android:name=”android.permission.WRITE_EXTERNAL_STORAGE” />

登录后复制

这些权限确保 Tabby 可以访问必要的资源。

第 3 步：在您的应用中初始化 Tabby
要初始化 Tabby，请将以下代码添加到应用程序的入口点（App.tsx 或 index.js）：

import {Tabby} from 'tabby-react-native-sdk';

Tabby.setApiKey('__API_KEY_HERE__');

登录后复制

Tabby.setApiKey() 方法设置您的 API 密钥，允许您的应用程序通过 Tabby 的后端服务进行身份验证。

将 API_KEY_HERE 替换为您的 Tabby API 密钥。

第 4 步：创建付款流程

定义支付数据在您的购物车屏幕中，设置 Tabby 所需的付款数据：

const customerPayment = {
  amount: 340.0,
  currency: 'SAR',
  buyer: {
    email: 'successful.payment@tabby.ai',
    phone: '+971500000001',
  },
};

const myTestPayment = {
  merchant_code: 'your merchant code',
  lang: 'en',
  payment: customerPayment,
};

登录后复制

customerPayment 对象定义买家的付款详细信息，例如金额、货币和联系信息。 myTestPayment 对象包括特定于商家的详细信息，例如商家代码和首选语言。

创建会话触发按钮
在您的 UI 中添加一个按钮来触发会话创建过程

<Button title="Proceed with Tabby" onPress={createCheckoutSession} />

登录后复制

按下此按钮会触发 createCheckoutSession 函数，启动付款流程。

实现会话创建逻辑
使用以下函数处理按钮按下：

const createCheckoutSession = async () => {
  try {
    const {sessionId, paymentId, availableProducts} =
      await Tabby.createSession(myTestPayment);
    navigation.navigate('TabbyWebViewScreen', {
      url: availableProducts[0].webUrl,
    });
  } catch (error) {
    if (error.response) {
      console.error('Response:', error.response);
      console.error('Status:', error.response.status);
      console.error('Data:', error.response.data);
    }
    console.error('Error creating Tabby checkout session', error);
  }
};

登录后复制

Tabby.createSession() 方法使用付款数据创建结账会话。如果成功，响应将包含会话详细信息，例如 sessionId 和结帐 URL。然后，用户将导航到新屏幕（TabbyWebViewScreen）以完成付款。

第 5 步：创建 Tabby WebView 屏幕
设置一个新屏幕来显示 Tabby 结账流程：

从'react'导入React；
从'react-native'导入{View，StyleSheet，Button}；
从'@react-navigation/native'导入{useNavigation，useRoute}；
从 'tabby-react-native-sdk' 导入 {TabbyPaymentWebView}；

const TabbyWebViewScreen = () =>; {
  const 导航 = useNavigation();
  const 路由 = useRoute();
  const {url} = 路由.params;

  const handlePaymentResult = 消息 => {
    开关（消息）{
      案例“授权”：
        console.log('支付已授权');
        导航.goBack();
        休息;
      案例“被拒绝”：
        console.log('付款被拒绝');
        导航.goBack();
        休息;
      案例“关闭”：
        console.log('结账已关闭');
        导航.goBack();
        休息;
      案例“已过期”：
        console.log('会话已过期');
        导航.goBack();
        休息;
      默认：
        休息;
    }
  };

  返回 （

登录后复制