Tabby React Native SDK

Requirements

The requirements are react-native-svg, react-native-webview. So you can integrate Tabby checkout for both Expo and pure React Native apps.

Installation

npm install tabby-react-native-sdk react-native-webview react-native-svg

or

yarn add tabby-react-native-sdk react-native-webview react-native-svg

react-native-webview and react-native-svg are peer dependencies, required for Tabby SDK to work properly.

On iOS please make sure you've added in your Info.plist

Feel free to edit descriptions according to your App

<key>NSCameraUsageDescription</key>
<string>Tabby checkout requires access to camera.</string>
<key>NSMicrophoneUsageDescription</key>
<string>Tabby checkout requires access to microphone.</string>

On Android please make sure you've added in your AndroidManifest.xml

<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.VIDEO_CAPTURE" />
<uses-permission android:name="android.permission.AUDIO_CAPTURE" />

SDK usage

1. Init Tabby when your app starts (App.tsx or index.js)

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

Tabby.setApiKey(__API_KEY_HERE__);

2. Build payment data

import { Tabby, Payment as TabbyPaymentData, TabbyCheckoutPayload } from "tabby-react-native-sdk";

// Keep in mind that some fields are optional! Here's the full example
const customerPayment: TabbyPaymentData = {
  amount: "340.00",
  currency: "AED",
  buyer: {
    email: "[email protected]",
    phone: "+971500000001",
    name: "Yazan Khalid",
    dob: "2019-08-24",
  },
  buyer_history: {
    registered_since: "2019-08-24T14:15:22Z",
    loyalty_level: 0,
    wishlist_count: 0,
    is_social_networks_connected: true,
    is_phone_number_verified: true,
    is_email_verified: true,
  },
  order: {
    tax_amount: "0.00",
    shipping_amount: "0.00",
    discount_amount: "0.00",
    reference_id: "#x-abc123",
    items: [
      {
        title: "Jersey",
        description: "Jersey",
        quantity: 1,
        unit_price: "10.00",
        reference_id: "uuid",
        product_url: "http://example.com",
        category: "clothes",
      },
    ],
  },
  order_history: [
    {
      purchased_at: "2019-08-24T14:15:22Z",
      amount: "0.00",
      payment_method: "card",
      status: "new",
      buyer: {
        email: "[email protected]",
        phone: "+971500000001",
        name: "Yazan Khalid",
        dob: "2019-08-24",
      },
      shipping_address: {
        city: "string",
        address: "string",
        zip: "string",
      },
      items: [
        {
          title: "string",
          description: "string",
          quantity: 1,
          unit_price: "0.00",
          reference_id: "string",
          product_url: "http://example.com",
          category: "string",
        },
      ],
    },
  ],
};

const myTestPayment: TabbyCheckoutPayload = { merchant_code: 'ae', lang: 'en', payment: customerPayment }

...
in your <CartScreen /> etc in useEffect
...

const createSession = async () => {
  try {
    const {sessionId, paymentId, availableProducts} = await Tabby.createSession(myTestPayment);
    console.log({sessionId})
    console.log({paymentId})
    console.log({availableProducts})
  } catch (error) {
    // Do something when Tabby checkout session POST request failed
  }
};

3. Launch Tabby checkout

const MyScreen = () => {
  const parseMessage = (msg: WebViewResult) => {
    switch (msg) {
      case 'authorized':
        // Do something else when Tabby authorized customer
        // probably navigation back to Home screen, refetching, etc.
        break;
      case 'rejected':
        // Do something else when Tabby rejected customer
        break;
      case 'close':
        // Do something else when customer closed Tabby checkout
        break;
      case 'expired':
        // Do something else when session expired
        // We strongly recommend to create new session here by calling
        // await Tabby.createSession(myTestPayment)
        break;
      default:
        break;
    }
  };

  return (
    <TabbyPaymentWebView
      onBack={
        // Your navigation back function
      }
      url={
        // Url from Tabby available product
      }
      onResult={parseMessage}
    />
  );
};

Snippets usage

TabbyProductPageSnippet

import React from "react";
import { TabbyProductPageWidget } from "tabby-react-native-sdk";

<TabbyProductPageWidget
  price={"340.00"}
  currency={"AED"}
  lang={"ar"} // or "en"
  installmentsCount={4}
  // Ask your Tabby account manager for your merchant code
  merchantCode={"your_merchant_code"} 
  // Ask your Tabby account manager for your API key
  publicKey={apiKey}
/>

Please refer to example app for more details.

https://github.com/tabby-ai/react-native-example