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

Integrating Tabby into your React Native app can be a seamless process, but there’s no comprehensive guide available online that provides a step-by-step approach. This article consolidates information from multiple sources to give you a clear roadmap for implementing Tabby in your React Native app.

Step 1: Install Tabby SDK
To get started, you need to install the Tabby SDK for React Native. Run the following command in your project directory:

npm i tabby-react-native-sdk

Step 2: Update Platform-Specific Configurations

• iOS Configuration For iOS, make sure to update your Info.plist file with the following permissions:

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

You can customize the descriptions to suit your app.

• Android Configuration For Android, add these permissions to your AndroidManifest.xml file:

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

These permissions ensure Tabby can access the necessary resources.

Step 3: Initialize Tabby in Your App
To initialize Tabby, add the following code to your app’s entry point (App.tsx or index.js):

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

Tabby.setApiKey('__API_KEY_HERE__');

The Tabby.setApiKey() method sets your API key, allowing your app to authenticate with Tabby's backend services.

Replace API_KEY_HERE with your Tabby API key.

Step 4: Create the Payment Flow

• Define the Payment Data In your cart screen, set up the payment data required by Tabby:

const customerPayment = {
  amount: 340.0,
  currency: 'SAR',
  buyer: {
    email: '[e-mail]',
    phone: '[phone]',
  },
};

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

The customerPayment object defines the buyer's payment details, such as amount, currency, and contact information. The myTestPayment object includes merchant-specific details like merchant_code and preferred language.

Create a Session Trigger Button
Add a button to your UI to trigger the session creation process

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

This button triggers the createCheckoutSession function when pressed, initiating the payment process.

Implement the Session Creation Logic
Handle the button press with the following function:

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

The Tabby.createSession() method creates a checkout session with the payment data. If successful, the response includes session details like sessionId and the checkout URL. The user is then navigated to a new screen (TabbyWebViewScreen) to complete the payment.

Step 5: Create a Tabby WebView Screen
Set up a new screen to display the Tabby checkout flow:

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

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

  const handlePaymentResult = message => {
    switch (message) {
      case 'authorized':
        console.log('Payment Authorized');
        navigation.goBack();
        break;
      case 'rejected':
        console.log('Payment Rejected');
        navigation.goBack();
        break;
      case 'close':
        console.log('Checkout Closed');
        navigation.goBack();
        break;
      case 'expired':
        console.log('Session Expired');
        navigation.goBack();
        break;
      default:
        break;
    }
  };

  return (
    <View style={styles.container}>
      <View style={styles.webViewContainer}>
        <TabbyPaymentWebView
          url={url}
          onBack={() => navigation.goBack()}
          onResult={handlePaymentResult}
        />
      </View>
      <Button title="Go Back" onPress={() => navigation.goBack()} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
  },
  webViewContainer: {
    marginTop: 50,
    height: '95%',
    backgroundColor: 'blue',
  },
});

export default TabbyWebViewScreen;

• The TabbyPaymentWebView component loads the checkout URL and displays it in a web view.

• The handlePaymentResult function handles the payment outcome (e.g., authorized, rejected, or expired) and redirects the user accordingly.

• A “Go Back” button allows users to return to the previous screen.

Step 6: Handle Payment Results
The handlePaymentResult function manages user redirection based on payment outcomes:

authorized:Payment was successful.
rejected: Payment was declined.
close: User closed the checkout process.
expired: Session expired.
Use these outcomes to guide the user experience in your app.

Additional Resources

Tabby React Native SDK

Tabby Documentation

Tabby React Native Example

Explore these links to dive deeper into Tabby features and advanced use cases.