如何在 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();
        休息;
      預設:
        休息;
    }
  };

  返回 （

登入後複製