So integrieren Sie Tabby in React Native: Eine Schritt-für-Schritt-Anleitung

Die Integration von Tabby in Ihre React Native-App kann ein nahtloser Prozess sein, es ist jedoch online keine umfassende Anleitung verfügbar, die eine Schritt-für-Schritt-Anleitung bietet. In diesem Artikel werden Informationen aus mehreren Quellen zusammengefasst, um Ihnen eine klare Roadmap für die Implementierung von Tabby in Ihrer React Native-App zu geben.

Schritt 1: Tabby SDK installieren
Um zu beginnen, müssen Sie das Tabby SDK für React Native installieren. Führen Sie den folgenden Befehl in Ihrem Projektverzeichnis aus:

npm i tabby-react-native-sdk

Schritt 2: Plattformspezifische Konfigurationen aktualisieren

• iOS-Konfiguration Stellen Sie für iOS sicher, dass Sie Ihre Info.plist-Datei mit den folgenden Berechtigungen aktualisieren:

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

Sie können die Beschreibungen an Ihre App anpassen.

• Android-Konfiguration Fügen Sie für Android diese Berechtigungen zu Ihrer AndroidManifest.xml-Datei hinzu:

<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” />

Diese Berechtigungen stellen sicher, dass Tabby auf die erforderlichen Ressourcen zugreifen kann.

Schritt 3: Tabby in Ihrer App initialisieren
Um Tabby zu initialisieren, fügen Sie den folgenden Code zum Einstiegspunkt Ihrer App (App.tsx oder index.js) hinzu:

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

Tabby.setApiKey('__API_KEY_HERE__');

Die Tabby.setApiKey()-Methode legt Ihren API-Schlüssel fest und ermöglicht Ihrer App die Authentifizierung bei Tabbys Backend-Diensten.

Ersetzen Sie API_KEY_HERE durch Ihren Tabby-API-Schlüssel.

Schritt 4: Erstellen Sie den Zahlungsfluss

• Definieren Sie die Zahlungsdaten Richten Sie in Ihrem Warenkorbbildschirm die von Tabby benötigten Zahlungsdaten ein:

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,
};

Das customerPayment-Objekt definiert die Zahlungsdetails des Käufers, wie Betrag, Währung und Kontaktinformationen. Das myTestPayment-Objekt enthält händlerspezifische Details wie Merchant_Code und bevorzugte Sprache.

Schaltfläche „Sitzungsauslöser erstellen“
Fügen Sie Ihrer Benutzeroberfläche eine Schaltfläche hinzu, um den Sitzungserstellungsprozess auszulösen

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

Diese Schaltfläche löst beim Drücken die Funktion „createCheckoutSession“ aus und leitet den Zahlungsvorgang ein.

Implementieren Sie die Sitzungserstellungslogik
Behandeln Sie den Tastendruck mit der folgenden Funktion:

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);
  }
};

Die Methode Tabby.createSession() erstellt eine Checkout-Sitzung mit den Zahlungsdaten. Bei Erfolg enthält die Antwort Sitzungsdetails wie sessionId und die Checkout-URL. Der Benutzer wird dann zu einem neuen Bildschirm (TabbyWebViewScreen) navigiert, um die Zahlung abzuschließen.

Schritt 5: Erstellen Sie einen Tabby WebView-Bildschirm
Richten Sie einen neuen Bildschirm ein, um den Tabby-Checkout-Ablauf anzuzeigen:

Reagieren aus „Reagieren“ importieren;
importiere {View, StyleSheet, Button} aus 'react-native';
importiere {useNavigation, useRoute} aus '@react-navigation/native';
importiere {TabbyPaymentWebView} aus 'tabby-react-native-sdk';

const TabbyWebViewScreen = () => {
  const navigation = useNavigation();
  const route = useRoute();
  const {url} = route.params;

  const handlePaymentResult = message => {
    switch (Nachricht) {
      Fall 'autorisiert':
        console.log('Zahlung autorisiert');
        navigation.goBack();
        brechen;
      Fall 'abgelehnt':
        console.log('Zahlung abgelehnt');
        navigation.goBack();
        brechen;
      Fall 'schließen':
        console.log('Kasse geschlossen');
        navigation.goBack();
        brechen;
      Fall 'abgelaufen':
        console.log('Sitzung abgelaufen');
        navigation.goBack();
        brechen;
      Standard:
        brechen;
    }
  };

  zurückkehren (
    <Anzeigen>

• Die TabbyPaymentWebView-Komponente lädt die Checkout-URL und zeigt sie in einer Webansicht an.

• Die Funktion handlePaymentResult verarbeitet das Zahlungsergebnis (z. B. autorisiert, abgelehnt oder abgelaufen) und leitet den Benutzer entsprechend weiter.

• Mit der Schaltfläche „Zurück“ können Benutzer zum vorherigen Bildschirm zurückkehren.

Schritt 6: Zahlungsergebnisse bearbeiten
Die Funktion handlePaymentResult verwaltet die Benutzerumleitung basierend auf den Zahlungsergebnissen:

autorisiert:Die Zahlung war erfolgreich.
abgelehnt: Die Zahlung wurde abgelehnt.
Schließen: Der Benutzer hat den Bestellvorgang abgeschlossen.
abgelaufen: Sitzung abgelaufen.
Nutzen Sie diese Ergebnisse, um das Benutzererlebnis in Ihrer App zu steuern.

Zusätzliche Ressourcen

Tabby React Native SDK

Tabby-Dokumentation

Tabby React Native-Beispiel

Erkunden Sie diese Links, um tiefer in die Funktionen und erweiterten Anwendungsfälle von Tabby einzutauchen.

Das obige ist der detaillierte Inhalt vonSo integrieren Sie Tabby in React Native: Eine Schritt-für-Schritt-Anleitung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!