Comment intégrer Tabby dans React Native : un guide étape par étape

L'intégration de Tabby dans votre application React Native peut être un processus transparent, mais il n'existe pas de guide complet disponible en ligne proposant une approche étape par étape. Cet article consolide les informations provenant de plusieurs sources pour vous donner une feuille de route claire pour implémenter Tabby dans votre application React Native.

Étape 1 : Installer le SDK Tabby
Pour commencer, vous devez installer le SDK Tabby pour React Native. Exécutez la commande suivante dans le répertoire de votre projet :

npm i tabby-react-native-sdk

Étape 2 : Mettre à jour les configurations spécifiques à la plate-forme

• Configuration iOS Pour iOS, assurez-vous de mettre à jour votre fichier Info.plist avec les autorisations suivantes :

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

Vous pouvez personnaliser les descriptions en fonction de votre application.

• Configuration Android Pour Android, ajoutez ces autorisations à votre fichier 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” />

Ces autorisations garantissent que Tabby peut accéder aux ressources nécessaires.

Étape 3 : initialisez Tabby dans votre application
Pour initialiser Tabby, ajoutez le code suivant au point d'entrée de votre application (App.tsx ou index.js) :

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

Tabby.setApiKey('__API_KEY_HERE__');

La méthode Tabby.setApiKey() définit votre clé API, permettant à votre application de s'authentifier auprès des services backend de Tabby.

Remplacez API_KEY_HERE par votre clé API Tabby.

Étape 4 : Créer le flux de paiement

• Définir les données de paiement Dans l'écran de votre panier, configurez les données de paiement requises par 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,
};

L'objet customerPayment définit les détails de paiement de l'acheteur, tels que le montant, la devise et les informations de contact. L'objet myTestPayment inclut des détails spécifiques au commerçant tels que le code_marchand et la langue préférée.

Créer un bouton de déclenchement de session
Ajoutez un bouton à votre UI pour déclencher le processus de création de session

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

Ce bouton déclenche la fonction createCheckoutSession lorsqu'il est enfoncé, initiant le processus de paiement.

Implémenter la logique de création de session
Gérez la pression sur le bouton avec la fonction suivante :

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

La méthode Tabby.createSession() crée une session de paiement avec les données de paiement. En cas de succès, la réponse inclut les détails de la session tels que sessionId et l'URL de paiement. L'utilisateur est ensuite dirigé vers un nouvel écran (TabbyWebViewScreen) pour finaliser le paiement.

Étape 5 : Créer un écran Tabby WebView
Configurez un nouvel écran pour afficher le flux de paiement Tabby :

importer React depuis 'react' ;
importer {View, StyleSheet, Button} depuis 'react-native' ;
importer {useNavigation, useRoute} depuis '@react-navigation/native' ;
importer {TabbyPaymentWebView} depuis 'tabby-react-native-sdk' ;

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

  const handlePaymentResult = message => {
    commutateur (message) {
      cas 'autorisé' :
        console.log('Paiement autorisé');
        navigation.goBack();
        casser;
      cas 'rejeté' :
        console.log('Paiement rejeté');
        navigation.goBack();
        casser;
      cas 'fermer' :
        console.log('Checkout Closed');
        navigation.goBack();
        casser;
      cas « expiré » :
        console.log('Session expirée');
        navigation.goBack();
        casser;
      défaut:
        casser;
    }
  } ;

  retour (
    <Afficher>

• Le composant TabbyPaymentWebView charge l'URL de paiement et l'affiche dans une vue Web.

• La fonction handlePaymentResult gère le résultat du paiement (par exemple, autorisé, rejeté ou expiré) et redirige l'utilisateur en conséquence.

• Un bouton « Retour » permet aux utilisateurs de revenir à l'écran précédent.

Étape 6 : Gérer les résultats du paiement
La fonction handlePaymentResult gère la redirection des utilisateurs en fonction des résultats de paiement :

autorisé : le paiement a réussi.
rejeté : le paiement a été refusé.
fermer : l'utilisateur a clôturé le processus de paiement.
expiré : session expirée.
Utilisez ces résultats pour guider l’expérience utilisateur dans votre application.

Ressources supplémentaires

SDK natif Tabby React

Documentation Tabby

Exemple natif de Tabby React

Explorez ces liens pour approfondir les fonctionnalités de Tabby et les cas d'utilisation avancés.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!