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 react-native-webview react-native-svg html-parse-stringify

yarn add tabby-react-native-sdk react-native-webview react-native-svg html-parse-stringify

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

npm install react-native-webview react-native-svg html-parse-stringify

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: "id.success@tabby.ai",
    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: "successful.payment@tabby.ai",
        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

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


### Please refer to example app for more details.
```bash
cd example
code .
make demo
npm start

Snippets usage

TabbyLimitSnippet

```typescript jsx 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

![Snippet EN](./docs/TabbyLimitSnippet_EN.gif)
![Snippet AR](./docs/TabbyLimitSnippet_AR.gif)

### TabbyCheckoutSnippet

```typescript jsx
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

Snippet EN Snippet AR

TabbyProductPageSnippet

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

```typescript jsx 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

Snippet EN Snippet AR

How to run the example app?

npm i
cd ios && pod install
npm run start:rc
Open XCode, let project to be indexed, run with "Play" button
set android/local.properties sdk path like sdk.dir=/Users/your_username/Library/Android/sdk
Open Android Studio, let project to sync, run with "Play" button
Define your tabbyApiKey as a constant and follow Impelemtation steps above

パッケージの詳細