Guides
Log In

React Native

Guide for React Native

Suggest Edits

Demo project

React Native Plugin: myfatoorah-reactnative
Plugin Demo: react_native_demo

Installation

npm install --save myfatoorah-reactnative

Usage

Requirments

To use myfatoorah-reactnative you should set your app in navigation container, so you need to install @react-navigation/native and @react-navigation/stack

1- Install required dependencies (if your app already in navigation skip this step):

npm install @react-navigation/native
  • This depndecies are required for @react-navigation/native
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
  • If you are using Cocoapod you should do that:
cd ios && pod install
cd ..
.
.
npm install @react-navigation/stack
  • myfatoorah-reactnative depends on react-native-web and react-native-webview dependencies so you should install them:
npm install --save-dev react-native-web
npm install --save-dev react-native-webview

2- Setup your screen

//App.js
import 'react-native-gesture-handler';
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Home from 'path to Home.js'
import { MFWebView, MFSettings, MFTheme } from 'myfatoorah-reactnative';

const Stack = createStackNavigator();

export default class App extends React.Component {
    componentDidMount() {
        let token = "your token here";
        let theme = new MFTheme('blue', 'gray', 'Payment', 'Cancel')
        MFSettings.sharedInstance.setTheme(theme)
        MFSettings.sharedInstance.configure(token, MFCountry.KUWAIT, MFEnvironment.TEST)
    }

    render() {
        return (
                <NavigationContainer>
                    <Stack.Navigator mode="modal" initialRouteName="Home">
                        <Stack.Screen name="Home"
                                      component={Home} />
                        <Stack.Screen name="MFWebView"
                                      component={MFWebView}
                                      options={MFWebView.navigationOptions}
                                      />
                    </Stack.Navigator>
                </NavigationContainer>
                );
    }
}

📘

After testing

Once your testing is finished, simply replace the demo URL / Token with the live information, click here for more information.

Initiate / Execute Payment

As described earlier for the Gateway Integration, we are going to have the SDK integrated with the same steps to make a successful integration with the SDK

🚧

Initiate Payment

As a good practice, you don't have to call the Initiate Payment function every time you need to execute payment, but you have to call it at least once to save the PaymentMethodId that you will need to call Execute Payment.

function initiatePayments() {
let initiateRequest = new MFInitiatePayment(50, MFCurrencyISO.KUWAIT_KWD)
        MFPaymentRequest.sharedInstance.initiatePayment(initiateRequest, MFLanguage.ENGLISH, (response: Response) => {
        if (response.getError()) {
        alert('error: ' + response.getError().error);
        }
        else {
        setPaymentMethods(response.getPaymentMethods())
        }
        });
}

function executeResquestJson() {
let request = new MFExecutePaymentRequest(parseFloat(invoiceValue), paymentMethods[selectedIndex].PaymentMethodId);
        request.customerEmail = "[email protected]"; // must be email
        request.customerMobile = "";
        request.customerCivilId = "";
        let address = new MFCustomerAddress("ddd", "sss", "sss", "sss", "sss");
        request.customerAddress = address;
        request.customerReference = "";
        request.language = "en";
        request.mobileCountryCode = MFMobileCountryCodeISO.KUWAIT;
        request.displayCurrencyIso = MFCurrencyISO.KUWAIT_KWD;
        // var productList = []
        // var product = new MFProduct("ABC", 1.887, 1)
        // productList.push(product)
        // request.invoiceItems = productList
        return request;
}

function executePayment() {
let request = executeResquestJson();
        showLoading()
        MFPaymentRequest.sharedInstance.executePayment(navigation, request, MFLanguage.ENGLISH, (response: Response) => {
        hideLoading()
                if (response.getError()) {
        alert('error: ' + response.getError().error);
        }
        else {
        var bodyString = response.getBodyString();
                var invoiceId = response.getInvoiceId();
                var paymentStatusResponse = response.getBodyJson().Data;
                alert('success with Invoice Id: ' + invoiceId + ', Invoice status: ' + paymentStatusResponse.InvoiceStatus);
        }
        });
}

Direct Payment / Tokenization

As we have explained earlier in the Direct Payment integration and how it works, it also has the same scenario for the SDK implementation, you have to know the following steps to understand how it works:

  • Get the payment method that allows Direct Payment by calling initiatePayment to get paymentMethodId
  • Collect card info from user MFCardInfo(cardNumber: "51234500000000081", cardExpiryMonth: "05", cardExpiryYear: "21", cardSecurityCode: "100", saveToken: false)
  • If you want to save your credit card info and get a token for next payment you have to set saveToken: true and you will get the token in the response read more in Tokenization
  • If you want to execute a payment through a saved token you have use MFCardInfo(cardToken: "put your token here")
  • Now you are ready to execute the payment, please check the following sample code 
function executeResquestJson() {
    let request = new MFExecutePaymentRequest(parseFloat(invoiceValue), paymentMethods[selectedIndex].PaymentMethodId);
    request.customerEmail = "[email protected]"; // must be email
    request.customerMobile = "";
    request.customerCivilId = "";
    let address = new MFCustomerAddress("ddd", "sss", "sss", "sss", "sss");
    request.customerAddress = address;
    request.customerReference = "";
    request.language = "en";
    request.mobileCountryCode = MFMobileCountryCodeISO.KUWAIT;
    request.displayCurrencyIso = MFCurrencyISO.KUWAIT_KWD;
    // var productList = []
    // var product = new MFProduct("ABC", 1.887, 1)
    // productList.push(product)
    // request.invoiceItems = productList
    return request;
}

function getCardInfo() {
    let cardExpiryMonth = '05'
    let cardExpiryYear = '21'
    let cardSecureCode = '100'
    let paymentType = MFPaymentype.CARD
    // let paymentType = MFPaymentype.TOKEN
    let saveToken = false
    let card = new MFCardInfo('5123450000000008', cardExpiryMonth, cardExpiryYear, cardSecureCode, paymentType, saveToken)
    card.bypass = true
    return card
}

function executeDirectPayment() {
    let request = executeResquestJson();
    let cardInfo = getCardInfo()
    showLoading()
            MFPaymentRequest.sharedInstance.executeDirectPayment(navigation, request, cardInfo, MFLanguage.ENGLISH, (response: Response) => {
            hideLoading()
            if (response.getError()) {
                alert('error: ' + response.getError().error)
            } else {
                // alert(response.getBodyString())
                var paymentStatusResponse = response.getBodyJson().getPaymentStatusResponse;
                var invoiceId = paymentStatusResponse.InvoiceId
                alert('success with Invoice Id: ' + invoiceId + ', Invoice status: ' + paymentStatusResponse.InvoiceStatus);
                }
            }
            );
}

Send Payment

We have explained in the Send Payment section earlier, the different usage cases for it and how it works, here we are going to embed some sample code for calling it through the SDK on the different platforms

function getSendPaymentRequest() {
    let request = new MFSendPaymentRequest(parseFloat(invoiceValue), MFNotificationOption.ALL, 'Test')

    // send invoice link as sms to specified number
    //let request = new MFSendPaymentRequest(parseFloat(invoiceValue), MFNotificationOption.SMS, 'Test')
    // request.customerMobile  = '' // required here

    // get invoice link
    //let request = new MFSendPaymentRequest(parseFloat(invoiceValue), MFNotificationOption.LINK, 'Test')

    //  send invoice link to email
    //let request = new MFSendPaymentRequest(parseFloat(invoiceValue), MFNotificationOption.EMAIL, 'Test')
    // request.customerEmail = '' required here



    //request.userDefinedField = ''
    request.customerEmail = '[email protected]'// must be email
    request.customerMobile = 'mobile no'//Required
    request.customerCivilId = ''
    request.mobileCountryIsoCode = MFMobileCountryCodeISO.KUWAIT
    request.customerReference = ''
    request.language = 'en'
    let address = new MFCustomerAddress("ddd", "sss", "sss", "sss", "sss");
    request.customerAddress = address
    request.customerReference = ''
    request.language = 'en'
    request.displayCurrencyIso = MFCurrencyISO.KUWAIT_KWD
    // var productList = []
    // var product = new MFProduct("ABC", 1.887, 1)
    // productList.push(product)
    // request.invoiceItems = productList
    return request
}

function sendPayment() {
    showLoading()
    let sendPaymentRequest = getSendPaymentRequest()
            MFPaymentRequest.sharedInstance.sendPayment(sendPaymentRequest, MFLanguage.ENGLISH, (response: Response) => {
            hideLoading()
            if (response.getError()) {
                alert('error: ' + response.getError().error)
            } else {
                alert(response.getBodyString())
                // var paymentStatusResponse = response.getBodyJson().getPaymentStatusResponse;
                // var invoiceId = paymentStatusResponse.InvoiceId
                // alert('success with Invoice Id: ' + invoiceId + ', Invoice status: ' + paymentStatusResponse.InvoiceStatus);
                }
            }
            );
}

Payment Enquiry

We have explain the main usage for the Payment Inquiry function, that will enable your application to get the full details about a certain invoice / payment. You can use this function within your application on the different platforms as well. Here we are explaining some samples of its usage through the SDK.

function getPaymentStatus() {
    var key = 'payment id or invoice id'
    var keyType = MFKeyType.PAYMENTID // if key is payment id
    // var keyType = MFKeyType.INVOICEID // if key is invoice id
    var paymentStatusRequest = new MFPaymentStatusRequest(key, keyType);
            MFPaymentRequest.sharedInstance.getPaymentStatus(paymentStatusRequest, MFLanguage.ENGLISH, (response: Response) => {
            if (response.getError()) {
                alert('error: ' + response.getError().error)
            } else {
                alert(response.getBodyString())
                // var paymentStatusResponse = response.getBodyJson().getPaymentStatusResponse;
                // var invoiceId = paymentStatusResponse.InvoiceId
                // alert('success with Invoice Id: ' + invoiceId + ', Invoice status: ' + paymentStatusResponse.InvoiceStatus);
                }
            }
            );
}

Apple Pay for iPhone devices.

🚧

Apple Pay is available from iOS 13.0.
Apple is like other payment getways but when creating execute payment request you should send payment id for Apply Pay.

In Apple Pay

You can use In Apple Pay in and don't have to open in web view by usinf MFInAppApplePayView

1- First setup MFInAppApplePayView and get refernce for it:

function inAppApplePayView() {
      return <View style={{ height:60, margin: 0, marginTop: 0, flexDirection: 'column', padding: 0, justifyContent: 'space-evenly', width: '100%' }}>
          <MFInAppApplePayView ref={ref => (this.inAppApplePayViewRef = ref)}/>
        </View>;
    }
 return (
    <View style={styles.container}>
    .
    .
      {inAppApplePayView()}
  )

2- Initiate session and get session id

useEffect(() => {
    initiateSessionForInAppApplePay()
  }, []);

  function initiateSessionForInAppApplePay() {
    MFPaymentRequest.sharedInstance.initiateSession(MFLanguage.ENGLISH, (response: Response) => {
      hideLoading()
      if (response.getError()) {
        alert('error: ' + response.getError().error);
      }
      else {
        executePaymentForInAppApplePay(response.getSessionId(), response.getCountryCode())
      }
    });
  }

3(1)- Then call load method by apple pay reference with session id and the request:

function executePaymentForInAppApplePay(sessionId, countryCode) {
    let request = executeInAppApplePayResquestJson()
    // alert(request.displayCurrencyIso)
    // showLoading()
    this.inAppApplePayViewRef.load(sessionId, countryCode, request, MFLanguage.ENGLISH, (response) => {
      // hideLoading()
      if (response.get
      Error()) {
        alert('error3: ' + response.getError())
      }
      else {
        var invoiceId = response.getInvoiceId();
        var paymentStatusResponse = response.getBodyJson().Data;
        alert('success with Invoice Id: ' + invoiceId + ', Invoice status: ' + paymentStatusResponse.InvoiceStatus);
      }
    });
  }

3(2)- Please note you can also call loadWithStartLoading method instead of load if you want to show any loading while paying by Apple Pay, it is same load method plus startLoading callback:

function executePaymentForInAppApplePay(sessionId, countryCode) {
    let request = executeInAppApplePayResquestJson()
     showLoading()
    this.inAppApplePayViewRef.loadWithStartLoading(sessionId, countryCode, request, MFLanguage.ENGLISH, () => {
      showLoading()
    }, (response) => {
      hideLoading()
      if (response.getError()) {
        alert('error3: ' + response.getError().error)
      }
      else {
        var invoiceId = response.getInvoiceId();
        var paymentStatusResponse = response.getBodyJson().Data;
        alert('success with Invoice Id: ' + invoiceId + ', Invoice status: ' + paymentStatusResponse.InvoiceStatus);
      }
    });
  }

📘

Here you should set screen MFWebView in navigation to handle payment, and pass options as options={MFWebView.navigationOptions} to custom navigation bar, also you should pass mode as mode="modal" to present payment screen modally.

The demo has full details about all myfatoorah-reactnative funtions and how to use them, please check it.

Updated 8 months ago