Tabby を React Native に統合する方法: ステップバイステップガイド-jsチュートリアル-php.cn

Tabby を React Native に統合する方法: ステップバイステップガイド

Barbara Streisand

リリース： 2024-12-27 00:04:10

オリジナル

377 人が閲覧しました

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 i 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 の設定 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 オブジェクトには、merchant_code や優先言語などのマーチャント固有の詳細が含まれます。

セッショントリガーボタンの作成
セッション作成プロセスをトリガーするボタンを 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 をインポートします。
{View、StyleSheet、Button} を「react-native」からインポートします。
import {useNavigation, useRoute} から '@react-navigation/native';
「tabby-react-native-sdk」から {TabbyPaymentWebView} をインポートします。

const TabbyWebViewScreen = () => {
  const ナビゲーション = useNavigation();
  const ルート = useRoute();
  const {url} = ルート.パラメータ;

  const handlePaymentResult = message => {
    スイッチ (メッセージ) {
      ケース「承認済み」:
        console.log('支払いが承認されました');
        ナビゲーション.goBack();
        壊す;
      ケースが「拒否されました」:
        console.log('支払いが拒否されました');
        ナビゲーション.goBack();
        壊す;
      ケース「クローズ」:
        console.log('チェックアウトは終了しました');
        ナビゲーション.goBack();
        壊す;
      ケースが「期限切れ」:
        console.log('セッションが期限切れになりました');
        ナビゲーション.goBack();
        壊す;
      デフォルト：
        壊す;
    }
  };

  戻る （

ログイン後にコピー