myfatoorah-reactnative

Introduction

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

# Prerequisites In order to use MyFatoorah SDK on live environment, you have to consider some points to be done 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 your as well

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));
  };