Step 1 – Setup and activate the integration method

PayTabs Mobile SDKs streamline the integration process with the PayTabs payment gateway by offering a pre-configured payment interface. This interface efficiently manages card data entry, billing and shipping information, and automatically supplements any missing details required to complete the transaction flow.

System Requirements

To start integrating your system through this SDK, kindly make sure of the following system requirements first to avoid any environmental issues according to the operating system/application type:

• First of all, you need to have a PayTabs merchant account relative to your business country.


• For the React Native environment:
No external dependencies needed


• For the IOS Applications:
No external dependencies needed


• For the Android Applications:
No external dependencies needed

---

Setup, Activate and Upgrade the integration method

React native PayTabs library is a wrapper for the native PayTabs Android and iOS SDKs. It helps you integrate with PayTabs seamlessly.

We will walk you through how to manage the setup of our React Native SDK from scratch. You will be introduced to how to install the SDK, activate it, and upgrade it as well if needed. You will be also introduced to how to uninstall it as well if needed. Kindly take your time in reading and simulate the following guidelines:

• How to install and activate this SDK?
• How to upgrade the SDK?
• How to uninstall the SDK?

Be Aware Of

That for the version number, please use the latest version according to our latest update on our repository.

How to install and activate this SDK?

Details

• How to install the SDK?
• How to activate the SDK?

---

How to install the SDK?

To install the PayTabs SDK into your project from the terminal: Run any of below according to your needs:

• NPM:

  npm install @paytabs/react-native-paytabs@latest --save 

• Expo:

  expo install @payTabs/react-native-paytabs

Then follow the below steps to complete the installation:

• Android:

  
  

  Add packagingOptions to module build.gradle file:

  
  
  <project-root>/build.gradle

  android {
    ...
    packagingOptions {
        pickFirst '**/*.so'
    }
  }
  
  

• iOS

  
  

  • Add libswiftWebKit.tbd to your Link Binary With Libraries.

  
  

  • Navigate to the iOS folder and run the following command:

    
    
    Terminal

    pod install

---

How to activate the SDK?

Nothing you have to do from your side in this step as our SDKs don't need activation, once you installed it properly, it will be considered activated automatically and ready for use.

How to upgrade the SDK?

Details

To upgrade the PayTabs SDK that has been built in your project, specify it in your dependencies file located in your project root directory under the name of package.json - with the new SDK version you want to upgrade to:

<project-root>/package.json

"dependencies": {
  "@paytabs/react-native-paytabs": "^X.X.X"
}

After that, you will need to run the below command line:

<project-root>/package.json

npm update --save

Or, just run the below command line to upgrade to the latest version:

npm install @paytabs/react-native-paytabs@latest --save  --force

How to uninstall the SDK?

Details

we will walk you through how to uninstall this SDK. To uninstall the PayTabs SDK that has been built into your project using, just run the below command line:

• For NPM:

  dnpm uninstall @paytabs/react-native-paytabs

• For Expo:

  expo uninstall @PayTabs/react-native-PayTabs

Supported Payment Methods

This SDK is supporting various types of payment methods as shown below:

• CreditCard
• American Express
• mada
• UnionPay
• OmanNet Debit
• UrPay
• StcPay
• Valu
• Aman
• Meeza (QR)
• KnetPay (Debit)
• KnetPay (Credit)
• ApplePay
• SamsungPay
• Forsa
• Halan
• Tamara
• Souhoola
• Tabby
• Tru (Shahry)

You should know that all the main payment methods which are (Credit Cards, SamsungPay, and ApplePay) are managed (displayed and handled) in the SDK form itself. However, the rest of the payment methods mentioned above which are considered APMs (Alternative Payment Methods) will be displayed in a WebView using the Hosted Payment Page methodology instead to be managed on our side instead.

To know more about this, please check our Step 4 - Accepting the payment solution article.