myfatoorah-javascript

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 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-javascrit

Usage

//Home.js
import React, { Component } from 'react'

import {
  MFSettings,
  MFPaymentRequest,
  MFCustomerAddress,
  MFExecutePaymentRequest,
  MFCardInfo,
  Response,
  MFSendPaymentRequest,
  MFLanguage,
  MFNotificationOption,
  MFPaymentype,
  MFMobileCountryCodeISO,
  MFCurrencyISO,
  MFPaymentStatusRequest,
  MFKeyType,
  MFInitiatePayment
} from 'myfatoorah-javascript';
export default class App extends Component {
  componentDidMount() {
    let baseURL = "https://apitest.myfatoorah.com";
    let 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";
    // let directPaymentToken = 'fVysyHHk25iQP4clu6_wb9qjV3kEq_DTc1LBVvIwL9kXo9ncZhB8iuAMqUHsw-vRyxr3_jcq5-bFy8IN-C1YlEVCe5TR2iCju75AeO-aSm1ymhs3NQPSQuh6gweBUlm0nhiACCBZT09XIXi1rX30No0T4eHWPMLo8gDfCwhwkbLlqxBHtS26Yb-9sx2WxHH-2imFsVHKXO0axxCNjTbo4xAHNyScC9GyroSnoz9Jm9iueC16ecWPjs4XrEoVROfk335mS33PJh7ZteJv9OXYvHnsGDL58NXM8lT7fqyGpQ8KKnfDIGx-R_t9Q9285_A4yL0J9lWKj_7x3NAhXvBvmrOclWvKaiI0_scPtISDuZLjLGls7x9WWtnpyQPNJSoN7lmQuouqa2uCrZRlveChQYTJmOr0OP4JNd58dtS8ar_8rSqEPChQtukEZGO3urUfMVughCd9kcwx5CtUg2EpeP878SWIUdXPEYDL1eaRDw-xF5yPUz-G0IaLH5oVCTpfC0HKxW-nGhp3XudBf3Tc7FFq4gOeiHDDfS_I8q2vUEqHI1NviZY_ts7M97tN2rdt1yhxwMSQiXRmSQterwZWiICuQ64PQjj3z40uQF-VHZC38QG0BVtl-bkn0P3IjPTsTsl7WBaaOSilp4Qhe12T0SRnv8abXcRwW3_HyVnuxQly_OsZzZry4ElxuXCSfFP2b4D2-Q';
    MFSettings.sharedInstance.configure(baseURL, token);
  }
  //region HANDLERS
  onExecutePaymentButtonClickHandler = () => {
      this.executePayment();
  };

  onExecuteDirectPaymentButtonClickHandler = () => {
    this.executeDirectPayment();
  };

  onExecuteRecurringPaymentButtonClickHandler = () => {
    this.executeRecurringPayment();
  };

  onCancelRecurringPaymentButtonClickHandler = () => {
    this.cancelRucrring();
  };

  onSendPaymentButtonClickHandler = () => {
    this.sendPayment();
  };
  //endregion

  render() {
    return (
      <div className="App">
        <button
          onClick={this.onSendPaymentButtonClickHandler}>
          Send Payment
      </button>

        <button
          onClick={this.onExecutePaymentButtonClickHandler}
        >
          Execute Payment
      </button>

        <button
          onClick={this.onExecuteDirectPaymentButtonClickHandler}
        >
          Execute Direct Payment
      </button>

        <button
          onClick={this.onExecuteRecurringPaymentButtonClickHandler}>
          Execute Recurring Payment
        </button>
        <button
          onClick={this.onCancelRecurringPaymentButtonClickHandler}>
          Cancel Recurring Payment
        </button>
      </div>
    );
  }
}

Execute Payment Service

  //Home.js
  .
  .
 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;
}
 executePayment() {
    let request = this.executeResquestJson();
    MFPaymentRequest.sharedInstance.executePayment(request, MFLanguage.ENGLISH, (response: Response) => {
      if (response.getError()) {
        alert('error: ' + response.getError().error);
      }
      else {
        var bodyString = response.getBodyString();
        alert('success' + bodyString);
      }
    });
}

Execute Direct Payment Service

  //Home.js
    .
    .
  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;
  }
    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
  }
  executeDirectPayment() {
    let request = this.executeResquestJson();
    let cardInfo = this.getCardInfo()
    MFPaymentRequest.sharedInstance.executeDirectPayment(request, cardInfo, MFLanguage.ENGLISH, (response: Response) => {
      if (response.getError()) {
        alert('error: ' + response.getError().error)
      }
      else {
        var bodyString = response.getBodyString();
        alert('success' + bodyString);
      }
    });
  }

Get payment status

  //Home.js
    .
    .
 getPaymentStatus() {
    var paymentStatusRequest = new MFPaymentStatusRequest('111111', MFKeyType.PAYMENTID);
    MFPaymentRequest.sharedInstance.getPaymentStatus(paymentStatusRequest, MFLanguage.ENGLISH, (response: Response) => {
      if (response.getError()) {
        alert('error: ' + response.getError().error)
      }
      else {
        var bodyString = response.getBodyString();
        alert('success' + bodyString);
      }
    });
 }

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