Guides

React Native

Guide for React Native

Suggest Edits

📘

ReactNative SDK New Version

Starting from version '1.0.0', MyFatoorah has uploaded a new plugin that depends directly on the native implementation.

Introduction

MyFatoorah SDK v2 is an enhanced and improved SDK version that will simplify the integration with the MyFatoorah payment platform through simple straightforward steps.

Prerequisites

In order to use MyFatoorah SDK in the live environment, you have to consider some points to be made before you proceed with your live integration. Here you are the list that should be done and completed before going live with your account:

  • You have to Create Live Account and get the account approved
  • You have to get the API feature activated, you have to communicate with your account manager to enable it
  • Get the API key that will be used within the integration
  • If you are in need to have a Direct Payment integration working within your app, please communicate with your account manager to enable this feature for you as well

NPM

Demo project

React Native Plugin: myfatoorah-reactnative
Plugin Demo: react_native_demo

Demo Information

Demo account information

baseURL: https://apitest.myfatoorah.com

APIKey(Token): 7Fs7eBv21F5xAocdPvvJ-sCqEyNHq4cygJrQUFvFiWEexBUPs4AkeLQxH4pzsUrY3Rays7GVA6SojFCz2DMLXSJVqk8NG-plK-cZJetwWjgwLPub_9tQQohWLgJ0q2invJ5C5Imt2ket_-JAlBYLLcnqp_WmOfZkBEWuURsBVirpNQecvpedgeCx4VaFae4qWDI_uKRV1829KCBEH84u6LYUxh8W_BYqkzXJYt99OlHTXHegd91PLT-tawBwuIly46nwbAs5Nt7HFOozxkyPp8BW9URlQW1fE4R_40BXzEuVkzK3WAOdpR92IkV94K_rDZCPltGSvWXtqJbnCpUB6iUIn1V-Ki15FAwh_nsfSmt_NQZ3rQuvyQ9B3yLCQ1ZO_MGSYDYVO26dyXbElspKxQwuNRot9hi3FIbXylV3iN40-nCPH4YQzKjo5p_fuaKhvRh7H8oFjRXtPtLQQUIDxk-jMbOp7gXIsdz02DrCfQIihT4evZuWA6YShl6g8fnAqCy8qRBf_eLDnA9w-nBh4Bq53b1kdhnExz0CMyUjQ43UO3uhMkBomJTXbmfAAHP8dZZao6W8a34OktNQmPTbOHXrtxf6DS-oKOu3l79uX_ihbL8ELT40VjIW3MJeZ_-auCPOjpE3Ax4dzUkSDLCljitmzMagH2X8jN8-AYLl46KcfkBV

API_Direct_Payment_Key(Token): TXLrkmSj-VlRTOOC2GCkpLbg2fWXIgcucpP6p0T94ZXcd3uqdg-YI7IUjCbaU1DsdsAGjIW3gnczqjv2CLFKfsiZ3GcD0H6zo5BxFCiAwK45lFGBDdmIw91QRPOtudpxuPJvdkjV_GVVyg5tfndVMc46CuSoNBqfLuzUWiSE51sy-EgboaIZHpFU8xl4fGRFzAwPprwFinftAq3cWTHDEb5dKcxrqIlVxpJM9gqdFo5S3-BsapiEBaVc69QEg2WXVSSf00giFXGiiCiXdD6LZQKn1iE3wQaJttbdDdNjPuLtH0KxNdqC24ONZEh6UKPDKWmOItbyDp-eA5lPJEsAo6BaLUQ5bcFQZXV7k0fk1Dnq4Wj0Rv9SmM7uyC58YFv6b2vxkcgbV1tu8D1bXPSgq7DlvpMn4mh-H1gBisp4xPjYzpfP91n3gvHuizUp4vd70VIuuGY1-cvOGeUs59RfrP4wk_X4UI_qjwNkVF0fS1Of02cIi4AFWNwGkT-ZZhz7Bg-9lyhrOQYrNiO1mIGgxv-OiG5Cc3y5arR7ZpSYl4K8A2TwQNCXZChoIdXwSDMYvHZTZHdmnNlTM2u7lXro9YDluR0vyE5rNacAI9ubEh-iCH7WeJF2xr32Pp_APn22BVyd-4gNpS5XUOIEK21xBxg2NAkuO2ukYC6CoyAAGeGRDBWOQjvm1gdzSjQ-AKrWNJiKwQ

# Test Cards

Installation

npm install --save myfatoorah-reactnative
  • If you are using Cocoapod you should do that:
cd ios && pod install && ..

Setup your screen

import { MFSDK } from 'myfatoorah-reactnative';

//Add the code in the App()

  const configure = async () => {
    await MFSDK.init(
      'rLtt6JWvbUHDDhsZnfpAhpYk4dxYDQkbcPTyGaKp2TYqQgG7FGZ5Th_WD53Oq8Ebz6A53njUoo1w3pjU1D4vs_ZMqFiz_j0urb_BH9Oq9VZoKFoJEDAbRZepGcQanImyYrry7Kt6MnMdgfG5jn4HngWoRdKduNNyP4kzcp3mRv7x00ahkm9LAK7ZRieg7k1PDAnBIOG3EyVSJ5kK4WLMvYr7sCwHbHcu4A5WwelxYK0GMJy37bNAarSJDFQsJ2ZvJjvMDmfWwDVFEVe_5tOomfVNt6bOg9mexbGjMrnHBnKnZR1vQbBtQieDlQepzTZMuQrSuKn-t5XZM7V6fCW7oP-uXGX-sMOajeX65JOf6XVpk29DP6ro8WTAflCDANC193yof8-f5_EYY-3hXhJj7RBXmizDpneEQDSaSz5sFk0sV5qPcARJ9zGG73vuGFyenjPPmtDtXtpx35A-BVcOSBYVIWe9kndG3nclfefjKEuZ3m4jL9Gg1h2JBvmXSMYiZtp9MR5I6pvbvylU_PP5xJFSjVTIz7IQSjcVGO41npnwIxRXNRxFOdIUHn0tjQ-7LwvEcTXyPsHXcMD8WtgBh-wxR8aKX7WPSsT1O8d8reb2aR7K3rkV3K82K_0OgawImEpwSvp9MNKynEAJQS6ZHe_J_l77652xwPNxMRTMASk1ZsJL',
      MFCountry.KUWAIT,
      MFEnvironment.TEST
    );
  };

  const setUpActionBar = async () => {
    await MFSDK.setUpActionBar('Company Payment', processColor('#FFFFFF'), processColor('#000000'), true);
  };

📘

After testing

Once your testing is finished, in. the "init" function, change the url. to the live url, select your live country, and set the environment. to live. 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.

  const initiatePayment = async () => {
    var initiatePaymentRequest: MFInitiatePaymentRequest = new MFInitiatePaymentRequest(10, MFCurrencyISO.KUWAIT_KWD);

    await MFSDK
      .initiatePayment(initiatePaymentRequest, MFLanguage.ARABIC)
      .then((success) => console.log(success))
      .catch((error) => console.log(error));
  };

  const executePayment = async () => {
    var executePaymentRequest = new MFExecutePaymentRequest(10);
    executePaymentRequest.paymentMethodId = 2;
    executePaymentRequest.customerEmail = '[email protected]';
    executePaymentRequest.customerMobile = '123456789';
    executePaymentRequest.customerReference = 'Test12345';
    executePaymentRequest.displayCurrencyIso = MFCurrencyISO.QATAR_QAR;
    executePaymentRequest.expiryDate = '2024-06-08T17:36:23.173';

    await MFSDK
      .executePayment(executePaymentRequest, MFLanguage.ARABIC, (invoiceId: string) => console.log('invoiceId: ' + invoiceId))
      .then((success) => console.log(success))
      .catch((error) => console.log(error));
  };

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


  const sendPayment = async () => {
    var sendPaymentRequest = new MFSendPaymentRequest(10, MFNotificationOption.LINK, 'customerName');
    sendPaymentRequest.customerEmail = '[email protected]';
    sendPaymentRequest.customerMobile = '123456789';
    sendPaymentRequest.customerReference = 'Test12345';
    sendPaymentRequest.displayCurrencyIso = MFCurrencyISO.UNITEDSTATES_USD;
    sendPaymentRequest.expiryDate = '2023-06-08T17:36:23.132Z';

    await MFSDK
      .sendPayment(sendPaymentRequest, MFLanguage.ARABIC)
      .then((success) => console.log(success))
      .catch((error) => console.log(error));
  };

Payment Enquiry

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

  const getPaymentStatus = async () => {
    var getPaymentStatusRequest = new MFGetPaymentStatusRequest('1515410', MFKeyType.INVOICEID);

    await MFSDK
      .getPaymentStatus(getPaymentStatusRequest, MFLanguage.ARABIC)
      .then((success) => console.log(success))
      .catch((error) => console.log(error));
  };

📘

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.

Card View Payment

You can display MyFatoorah. [card view](doc: card-view-form) directly in your application. to. give the customers. a better user experience

1- First setup MFCardPaymentView and get a reference for it:

  var cardPaymentView: MFCardPaymentView | null;

  const paymentCardStyle = () => {
    var cardViewInput = new MFCardViewInput(
      processColor('gray'),
      13,
      MFFontFamily.SansSerif,
      32,
      0,
      processColor('#c7c7c7'),
      2,
      8,
      new MFBoxShadow(10, 10, 5, 0, processColor('gray')),
      new MFCardViewPlaceHolder('Name On Card test', 'Number test', 'MM / YY', 'CVV test')
    );
    var cardViewLabel = new MFCardViewLabel(
      true,
      processColor('black'),
      13,
      MFFontFamily.CourierNew,
      MFFontWeight.Bold,
      new MFCardViewText('Card Holder Name test', 'Card Number test', 'Expiry Date test', 'Security Code test')
    );
    var cardViewError = new MFCardViewError(processColor('green'), 8, new MFBoxShadow(10, 10, 5, 0, processColor('yellow')));
    var cardViewStyle = new MFCardViewStyle(false, 'initial', 230, cardViewInput, cardViewLabel, cardViewError);

    return cardViewStyle;
   };

// Add card view and the pay button to your view
    <MFCardPaymentView ref={(ref) => (this.cardPaymentView = ref)} paymentStyle={this.paymentCardStyle()} />

    <View>
      <TouchableOpacity onPress={this.pay}>
        <Text>Pay</Text>
      </TouchableOpacity>
    </View>

2-Display the CardView and set the pay function


  initiateSession = async () => {
    var initiateSessionRequest = new MFInitiateSessionRequest('testCustomer');

    await MFSDK.initiateSession(initiateSessionRequest)
      .then((success: MFInitiateSessionResponse) => {
        console.log(success);
        this.loadCardView(success);
      })
      .catch((error) => console.log('error : ' + error));
  };

  loadCardView = async (initiateSessionResponse:MFInitiateSessionResponse) => {
    await this.cardPaymentView
      ?.load(initiateSessionResponse, (bin: string) => console.log('bin: ' + bin))
      .then((success) => {
        console.log(success);
      })
      .catch((error) => console.log('error : ' + error));
  };

  const pay = async () => {
    var executePaymentRequest = new MFExecutePaymentRequest(10);
    executePaymentRequest.sessionId = sessionId ?? '';

    await cardPaymentView
      ?.pay(executePaymentRequest, MFLanguage.ARABIC, (invoiceId: string) => onEventReturn('invoiceId: ' + invoiceId))
      .then((success) => onSuccess(success))
      .catch((error) => onError(error));
  };

In Apple Pay

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

1- First setup MFApplePayButtonView and get a reference for it:

  var applePayView: MFApplePayButtonView | null;

	const applePayStyle = () => {
    var applePayButton = new MFApplePayStyle(30, 30, 'Buy with', false);
    return applePayButton;
  };

// Add Apple Pay button to your view
  {Platform.OS === 'ios' && <MFApplePayButtonView ref={(ref) => (applePayView = ref)} style={styles.cardView} applePayButtonStyle={applePayStyle()} />}

2- Display Apple Pay Button

  const applePay = async () => {
    var executePaymentRequest = new MFExecutePaymentRequest(10);
    executePaymentRequest.displayCurrencyIso = MFCurrencyISO.KUWAIT_KWD;
    executePaymentRequest.sessionId = sessionId ?? '';

    await applePayView
      ?.applePayPayment(executePaymentRequest, MFLanguage.ARABIC, (invoiceId: string) => console.log('invoiceId: ' + invoiceId))
      .then((success) => console.log(success))
      .catch((error) => console.log(error));
  };

Direct Payment

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 your 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
  const executeDirectPayment = async () => {
    var executePaymentRequest = new MFExecutePaymentRequest(10);
    executePaymentRequest.paymentMethodId = 20; //9
    var mfCardRequest = new MFCardRequest('5454545454545454', '05', '23', '000', 'myFatoorah');

    var directPaymentRequest = new MFDirectPaymentRequest(executePaymentRequest, null, mfCardRequest);

    await MFSDK
      .executeDirectPayment(directPaymentRequest, MFLanguage.ARABIC, (invoiceId: string) => console.log('invoiceId: ' + invoiceId))
      .then((success) => console.log(success))
      .catch((error) => console.log(error));
  };

GooglePay

Step 1: Define Google Pay Button

Before using Google Pay, you need to define the MFGooglePayButton in your class:

googlePayButton: MFGooglePayButton | null = null;

Step 2: Initiate a Session for Google Pay

Use the MFInitiateSessionRequest class to create a session.

var initiateSessionRequest = new MFInitiateSessionRequest();

await MFSDK.initiateSession(initiateSessionRequest)
  .then((response: MFInitiateSessionResponse) => {
    console.log('result : ' + result);
    var sessionId = response.SessionId ?? '';
    this.setupGooglePayHelper(sessionId);
  })
  .catch((error) => console.log('error : ' + error));

Step 3: Setup Google Pay Helper

Once the session is initiated, use the session ID to configure Google Pay.

Configure Google Pay with necessary details such as the merchant ID, merchant name, country code, and currency.

The following method sets up the Google Pay request:

setupGooglePayHelper = async (sessionId: String) => {
  var request = new MFGooglePayRequest(
    '1', 
    'your_google_merchant_id',
    'Test Vendor', 
    MFCountry.KUWAIT, 
    MFCurrencyISO.UAE_AED
  );

  await this.googlePayButton
    ?.setupGooglePayHelper(sessionId, request, (invoiceId: string) => console.log('Invoice Id: ' + invoiceId))
    .then((success) => console.log('Google Pay Success: ' + success.InvoiceStatus))
    .catch((error) => console.log('Google Pay Error: ' + error));
};

Step 4: Integrating Google Pay Button in UI

render() {
  return (
    <View style={styles.container}>
      <MFGooglePayButton
        ref={(ref) => (this.googlePayButton = ref)}
        style={styles.googlePay}
        theme={GooglePayButtonConstants.Themes.Dark}
        type={GooglePayButtonConstants.Types.Checkout}
        radius={10}
      />
    </View>
  );
}

Step 5: Going Live with google pay:

Updated 2 months ago