Flutter

Demo project

Flutter Plugin: https://pub.dev/packages/myfatoorah_flutter
Flutter Plugin Demo: https://dev.azure.com/myfatoorahsc/_git/MF-SDK-Cross-Platforms-Demos

Installation /Usage

Add the MyFatoorah plugin to your pubspec.yaml file.

dependencies:
  myfatoorah_flutter: ^2.1.17

Install the plugin by running the following command.

$ flutter pub get
Import the plugin like this:

import 'package:myfatoorah_flutter/myfatoorah_flutter.dart';

Initiate MyFatoorah Plugin with the following line:

MFSDK.init("Put API Key here", MFCountry.KUWAIT, MFEnvironment.TEST);

(Optional)

// Use the following lines if you want to set up the properties of AppBar.

MFSDK.setUpAppBar(
        title: "MyFatoorah Payment",
        titleColor: Colors.white,  // Color(0xFFFFFFFF)
        backgroundColor: Colors.black, // Color(0xFF000000)
        isShowAppBar: true); **// For Android platform only

// And use this line, if you want to hide the AppBar. Note, if the platform is iOS, this line will not affected

MFSDK.setUpAppBar(isShowAppBar: false);

📘
After testing
Once your testing is finished, simply replace environment from TEST to LIVE and the API URL with the 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

// Initiate Payment
  
    var request = new MFInitiatePaymentRequest(5.5, MFCurrencyISO.KUWAIT_KWD);

    MFSDK.initiatePayment(request, MFAPILanguage.EN,
            (MFResult<MFInitiatePaymentResponse> result) => {

          if(result.isSuccess()) {
            print(result.response.toJson().toString())
          }
          else {
            print(result.error.message)
          }
        });

  
  // executePayment 
  
    // The value "1" is the paymentMethodId of KNET payment method.
    // You should call the "initiatePayment" API to can get this id and the ids of all other payment methods
    String paymentMethod = 1;

    var request = new MFExecutePaymentRequest(paymentMethod, 0.100);

    MFSDK.executePayment(context, request, MFAPILanguage.EN,
        onInvoiceCreated: (String invoiceId) =>
        {
          print("invoiceId: " + invoiceId)
        },
        onPaymentResponse: (String invoiceId,
            MFResult<MFPaymentStatusResponse> result) =>
        {
          if(result.isSuccess()) {
            print(result.response.toJson().toString())
          }
          else {
            print(result.error.message)
          }
        });

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

// The value "20" is the paymentMethodId of Visa/Master payment method (for the direct payment).
    // You should call the "initiatePayment" API to can get this id and the ids of all other payment methods
    String paymentMethod = 20;

    var request = new MFExecutePaymentRequest(paymentMethod, 0.100);
    
    var mfCardInfo = new MFCardInfo("2223000000000007", "05", "21", "100",
        bypass3DS: true, saveToken: true);

    MFSDK.executeDirectPayment(context, request, mfCardInfo, MFAPILanguage.EN,
            (String invoiceId, MFResult<MFDirectPaymentResponse> result) => {

          if(result.isSuccess()) {
            print(result.response.toJson().toString())
          }
          else {
            print(result.error.message)
          }
        });

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

var request = MFSendPaymentRequest(invoiceValue: 0.100, customerName: "Customer name",
        notificationOption: MFNotificationOption.LINK);

    MFSDK.sendPayment(MFAPILanguage.EN, request, 
            (MFResult<MFSendPaymentResponse> result) => {
      
      if(result.isSuccess()) {
        print(result.response.toJson().toString())
      }
      else {
        print(result.error.message)
      }
    });

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.

var request = MFPaymentStatusRequest(invoiceId: "12345");

    MFSDK.getPaymentStatus(MFAPILanguage.EN, request,
            (MFResult<MFPaymentStatusResponse> result) => {

          if(result.isSuccess()) {
            print(result.response.toJson().toString())
          }
          else {
            print(result.error.message)
          }
        });

Embedded Payment Usage

Step 1:

Create instance of MFPaymentCardView and add it to your build() function like the following:

@override
  Widget build(BuildContext context) {
    return createPaymentCardView();
  }

  createPaymentCardView() {
    mfPaymentCardView = MFPaymentCardView();
    return mfPaymentCardView;
  }

Note: you could custom a lot of properties of the payment card view like the following:

mfPaymentCardView = MFPaymentCardView(
      inputColor: Colors.red,
      labelColor: Colors.yellow,
      errorColor: Colors.blue,
      borderColor: Colors.green,
      fontSize: 14,
      borderWidth: 1,
      borderRadius: 10,
      cardHeight: 220,
      cardHolderNameHint: "card holder name hint",
      cardNumberHint: "card number hint",
      expiryDateHint: "expiry date hint",
      cvvHint: "cvv hint",
      showLabels: true,
      cardHolderNameLabel: "card holder name label",
      cardNumberLabel: "card number label",
      expiryDateLabel: "expiry date label",
      cvvLabel: "securtity code label",
    );

Step 2:

You need to call initiateSession() function to create session. You need to do this for each payment separately. Session is valid for only one payment. and inside it's success state, call load() function and pass it the session response, to load the payment card view on the screen, like the following:

Note: If you want to use the saved card option with embedded payment, send the parameter customerIdentifier in the MFInitiateSessionRequest with a unique value for each customer. This value cannot be used for more than one Customer. Check commented lines in the following code.

void initiateSession() {
    // var request = MFInitiateSessionRequest("12332212");
    // MFSDK.initiateSession(request, (MFResult<MFInitiateSessionResponse> result) => {

    MFSDK.initiateSession(null, (MFResult<MFInitiateSessionResponse> result) => {
      if(result.isSuccess()) 
        mfPaymentCardView.load(result.response!,
            onCardBinChanged: (String bin) => {print("Bin: " + bin)})
     else
        print("Response: " + result.error!.toJson().toString().toString());
    });
  }

Note: The initiateSession() function should called after MFSDK.init() function (that we mentioned above).

Step 3:

Finally, you need to handle your Pay button to call the pay() function, copy the below code to your pay event handler section:

var request = MFExecutePaymentRequest.constructor(0.100);

mfPaymentCardView.pay(
    request,
    MFAPILanguage.EN,
    (String invoiceId, MFResult<MFPaymentStatusResponse> result) =>
    {
      if (result.isSuccess())
        {
          setState(() {
            print("Response: " + result.response!.toJson().toString());
          })
        }
      else
        {
          setState(() {
            print("Error: " + result.error!.toJson().toString());
          })
        }
    });

Apple Pay Embedded Payment (new for iOS only)

To provide a better user experience to your Apple Pay users, MyFatoorah is providing the Apple Pay embedded payment. Follow these steps:

Step 1:

Create instance of MFApplePayButton and add it to your build() function like the following:

@override
  Widget build(BuildContext context) {
    return createApplePayButton();
  }

  createApplePayButton() {
    mfApplePayButton = MFApplePayButton();
    return mfApplePayButton;
  }

Step 2:

You need to call initiateSession() function to create session. You need to do this for each payment separately. Session is valid for only one payment. and inside it's success state, call load() function and pass it the session response, like the following:

void initiateSession() {
    MFSDK.initiateSession((MFResult<MFInitiateSessionResponse> result) => {
      if(result.isSuccess()) 
        loadApplePay(result.response)
      else
        print("Response: " + result.error!.toJson().toString().toString());
    });
  }

void loadApplePay(MFInitiateSessionResponse mfInitiateSessionResponse) {
    var request = MFExecutePaymentRequest.constructorForApplyPay(
    0.100, MFCurrencyISO.KUWAIT_KWD);

    mfApplePayButton.load(
    mfInitiateSessionResponse,
    request,
    MFAPILanguage.EN,
        (String invoiceId, MFResult<MFPaymentStatusResponse> result) =>
    {
        if (result.isSuccess())
        {
            setState(() {
                print("invoiceId: " + invoiceId);
                print("Response: " + result.response.toJson().toString());
                _response = result.response.toJson().toString();
            })
        }
        else
        {
            setState(() {
                print("invoiceId: " + invoiceId);
                print("Error: " + result.error.toJson().toString());
                    _response = result.error.message;
                })
            }
        });
}

Note: The initiateSession() function should called after MFSDK.init() function (that we mentioned above).

Flutter

Installation /Usage

📘
After testing

Initiate / Execute Payment

🚧
Initiate Payment

Direct Payment / Tokenization

Send Payment

Payment Enquiry

Embedded Payment Usage

Apple Pay Embedded Payment (new for iOS only)

Installation /Usage

📘After testing

Initiate / Execute Payment

🚧Initiate Payment

Direct Payment / Tokenization

Send Payment

Payment Enquiry

Embedded Payment Usage

Apple Pay Embedded Payment (new for iOS only)

📘
After testing

🚧
Initiate Payment