@logisticinfotech/react-native-payfort-sdk v1.0.16

@logisticinfotech/react-native-payfort-sdk

Getting started

$ npm install @logisticinfotech/react-native-payfort-sdk --save

Mostly automatic installation

$ react-native link @logisticinfotech/react-native-payfort-sdk

Manual installation

iOS

1. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
2. Go to node_modules ➜ @logisticinfotech/react-native-payfort-sdk and add PayFort.xcodeproj
3. In XCode, in the project navigator, select your project. Add libPayFort.a to your project's Build Phases ➜ Link Binary With Libraries
4. Run your project (Cmd+R)<

Android

1. Open up android/app/src/main/java/[...]/MainActivity.java

• Add import com.RNPayfortSdk.RNPayfortSdkPackage; to the imports at the top of the file
• Add new RNPayfortSdkPackage() to the list returned by the getPackages() method

2. Append the following lines to android/settings.gradle:

   include ':@logisticinfotech/react-native-payfort-sdk'
   project(':@logisticinfotech/react-native-payfort-sdk').projectDir = new File(rootProject.projectDir,     '../node_modules/@logisticinfotech/react-native-payfort-sdk/android')

3. Insert the following lines inside the dependencies block in android/app/build.gradle:

     compile project(':@logisticinfotech/react-native-payfort-sdk')

Steps to follow before use

Android

1. Download PayFort module file from here.
2. Extract FORTSDKv1.5.zip.
3. Open directory of android of your react native project in Android Studio.
4. Click on File → New → New Module→ Select "Import .JAR/.AAR Packages" → Click on Next → Select FORTSDKv1.5.aar in File name → Click on Finish.

iOS

1. Download PayFort SDK Module file from here.
2. Extract PayFortSDK1.9.zip and open & copy PayFortSDK.bundle & PayFortSDK.framework to iOS directory of your project.
3. Replace #import <PayFortSDK/PayFortView.h> to #import "PayFortView.h" and replace #import <PayFortSDK/PayFortController.h> to #import "PayFortController.h" in PayFortSDK.framework → Headers → PayFortSDK.h
4. Copy path of PayFortSDK.h file from PayFortSDK.framework → Headers and add that path in Pods → Development Pods → react-native-payfort-sdk → PayFort.h as shown in screenshot
5. Add pod 'JVFloatLabeledTextField' in the pod file.
6. open iOS folder in terminal and run command "pod install" .

Usage

import { RNPayFort } from "@logisticinfotech/react-native-payfort-sdk/PayFortSDK/PayFortSDK";

onPay = async () => {
  await RNPayFort({
    command: "PURCHASE",
    access_code: "xxxxxxxxxxxxxxxxxx",
    merchant_identifier: "xxxxxxxxxx",
    sha_request_phrase: "xxxxxxxxxxxxxxxxxx",
    amount: 100,
    currencyType: "SAR",
    language: "en",
    email: "naishadh@logisticinfotech.co.in",
    testing: true,
  })
    .then((response) => {
      console.log(response);
    })
    .catch((error) => {
      console.log(error);
    });
};

Usage with sdk_token provided

import {
  getPayFortDeviceId,
  RNPayFort,
} from "@logisticinfotech/react-native-payfort-sdk/PayFortSDK/PayFortSDK";

getDeviceToken = async () => {
  getPayFortDeviceId().then(async (deviceId) => {
    await Axios.post("YOUR_WEB_URL_FOR_SDK_TOKEN_GENERATION", {
      deviceId: deviceId,
    })
      .then((response) => {
        this.setState({ sdk_token: response.data.sdk_token }, () => {
          this.onPay();
        });
      })
      .catch((error) => {
        console.log(error);
      });
  });
};

onPay = async () => {
  await RNPayFort({
    command: "PURCHASE",
    access_code: "xxxxxxxxxxxxxxxxxx",
    merchant_identifier: "xxxxxxxxxx",
    sha_request_phrase: "xxxxxxxxxxxxxxxxxx",
    amount: 100,
    currencyType: "SAR",
    language: "en",
    email: "naishadh@logisticinfotech.co.in",
    testing: true,
    sdk_token: this.state.sdk_token,
  })
    .then((response) => {
      console.log(response);
    })
    .catch((error) => {
      console.log(error);
    });
};

Note

There is no any difference between sdk_token provided and without provided.

1. In case if you are not providing sdk_token then it will call payfort sdk_token generation api automatically without any worries.

2. In case if you want to provide sdk_token manually then you have to first get deviceId from getPayFortDeviceId() method and pass deviceId as parameter to payfort sdk_token generation api, response of that api will give you sdk_token. Provide that sdk_token to parameters as above example.

Note

1. Before sending the amount value of any transaction, you have to multiply the value with the currency decimal code according to ISO code 3. For example: If the amount value was 500 AED; according to ISO code 3, you should multiply the value with 100 (2 decimal points); so it will be sent in the request as 50000. Another example: If the amount value was 100 JOD; according to ISO code 3, you should multiply the value with 1000 (3 decimal points); so it will be sent in the request as 100000.

2. If you have unique merchant_reference then you can add to parameter, else system will generate unique merchant_reference by its own.

Basic properties

Methods

getPayFortDeviceToken() : For generate deviceId to provide as parameter in sdk_token generation api.

RNPayFort(parameters) : For payment procedure.

Test Card Details

You want to test a transaction but you don’t have a credit card or user credentials for our other payments options? Well we’ve got your back, here you can find card numbers for any type of test you wish to do.

Credit Cards

3-D Secure Credit Cards

Local Payment Methods

Digital Wallets

for more details, visit references Payfort Documentation and Payfort Mobile SDK