Tabby React Native SDK

Requirements

The requirements is 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
or
yarn add tabby-react-native-sdk

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>This allows Tabby to take a photo</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>This allows Tabby to select a photo</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.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

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

Useful types

type WebViewResult = 'close' | 'authorized' | 'rejected' | 'expired';

interface Payment {
  amount: string;
  currency: string;
  buyer: {
    email: string;
    phone: string;
    name?: string;
  };
}

type TabbyPurchaseType = 'installments';

export type Currency = 'AED' | 'SAR' | 'KWD' | 'BDH' | 'QAR';

interface TabbyCheckoutPayload {
  merchant_code: string; // 'ae',
  lang: string; // 'en' | 'ar,
  payment: Payment;
}

type ProductWebURL = {web_url: string};

interface CheckoutSession {
  id: string;
  configuration: {
    available_products: {
      installments?: ProductWebURL[];
    };
  };
  payment: {
    id: string;
  };
}

Snippets usage

TabbyLimitSnippet

import React from 'react';
import {TabbyLimitSnippet} from 'tabby-react-native-sdk';
<TabbyLimitSnippet
  lang={'en'}
  price={'5000'} // TabbyLimitSnippet will only be shown if the price is over 5000
  priceTextStyle={{
    fontSize: 12,
    fontFamily: 'Cairo',
    // ...your other TextStyle
  }}
  currencyTextStyle={{
    fontSize: 12,
    fontFamily: 'Cairo',
    // ...your other TextStyle
  }}
  textStyle={{
    fontSize: 12,
    fontFamily: 'Cairo',
    // ...your other TextStyle
  }}
  containerStyle={{
    flex: 1,
    // ...your other ViewStyle
  }}
  url={
    // Your promo wiget url
  }
  withCurrencyInArabic={
    // Optional props. Set true if you need to display currency in Arabic.
  }
/>;

Result

TabbyCheckoutSnippet

import React from 'react';
import {TabbyCheckoutSnippet} from 'tabby-react-native-sdk';
<TabbyCheckoutSnippet
  lang={'en'}
  circleFillColor={['#3EEDBF', null, '#3EEDBF', null]}
  lineFillColor={['#3EEDBF', null, '#3EEDBF']}
  currency="AED"
  dateTextStyle={{
    fontSize: 12,
    fontFamily: 'Cairo',
    // ...your other TextStyle
  }}
  price="340.00"
  priceTextStyle={{
    fontSize: 12,
    fontFamily: 'Cairo',
    // ...your other TextStyle
  }}
  textStyle={{
    fontSize: 16,
    fontFamily: 'Courier',
    // ...your other TextStyle
  }}
  containerStyle={{
    elevation: 3,
    shadowColor: '#000000',
    // ...your other ViewStyle
  }}
  withCurrencyInArabic={
    // Optional props. Set true if you need to display currency in Arabic.
  }
/>;

Result

TabbyProductPageSnippet

This snippet will only be shown if the price is greater than or equal to 10.

import React from 'react';
import {TabbyProductPageSnippet} from 'tabby-react-native-sdk';
<TabbyProductPageSnippet
  lang={'ar'}
  currency="AED"
  price="340.00"
  maxLimit={'5000.00'} // Optional props. TabbyProductPageSnippet will be hidden if the maxLimit is less than price.
  priceTextStyle={{
    fontSize: 12,
    fontFamily: 'Cairo',
    // ...your other TextStyle
  }}
  currencyTextStyle={{
    fontSize: 14,
    fontFamily: 'Inter',
    // ...your other TextStyle
  }}
  textStyle={{
    fontSize: 16,
    fontFamily: 'Courier',
    // ...your other TextStyle
  }}
  containerStyle={{
    elevation: 3,
    shadowColor: '#000000',
    // ...your other ViewStyle
  }}
  url={
    // Your promo wiget url
  }
  withCurrencyInArabic={
    // Optional props. Set true if you need to display currency in Arabic.
  }
/>;

Result

TabbyPaymentWebView

import React from 'react';
import {TabbyPaymentWebView} from 'tabby-react-native-sdk';
<TabbyPaymentWebView
  onBack={
    // Your navigation back function
  }
  url={
    // Url from Tabby available product
  }
  onResult={
    // Your onResult function
  }
/>;

We have example app. Check this out.