Guides

Flutter

Guide for Flutter

Suggest Edits

📘

Flutter SDK New Version

Starting from version '3.0.0', MyFatoorah has uploaded a new plugin that depends directly on the native implementation. The following link is the migration guideline: Migration to the new Flutter SDK

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

  1. Add the MyFatoorah plugin to your pubspec.yaml file.
dependencies:
  myfatoorah_flutter: ^3.1.5

  1. Install the plugin by running the following command.

    $ flutter pub get

  2. Import the plugin like this: 

import 'package:myfatoorah_flutter/myfatoorah_flutter.dart';
  1. Initiate the MyFatoorah Plugin with the following line:
MFSDK.init("Add Your API Key", MFCountry.KUWAIT, MFEnvironment.TEST);
  1. (Optional) 
// Use the following lines if you want to set up the properties of AppBar.
  setUpActionBar() {
    MFSDK.setUpActionBar(
        toolBarTitle: 'Company Payment',
        toolBarTitleColor: '#FFEB3B',
        toolBarBackgroundColor: '#CA0404',
        isShowToolBar: true);
  }

📘

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](doc:execute-payment

// Initiate Payment
  initiatePayment() async {
    MFInitiatePaymentRequest request = MFInitiatePaymentRequest(
        invoiceAmount: 10, currencyIso: MFCurrencyISO.SAUDIARABIA_SAR);
    await MFSDK
        .initiatePayment(request, MFLanguage.ENGLISH)
        .then((value) => debugPrint(value.toString()))
        .catchError((error) => {debugPrint(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
  executePayment() async {
    MFExecutePaymentRequest request = MFExecutePaymentRequest(invoiceValue: 10);
    request.paymentMethodId = 1;

    await MFSDK
        .executePayment(request, MFLanguage.ENGLISH, (invoiceId) {
          debugPrint(invoiceId);
        })
        .then((value) => debugPrint(value.toString()))
        .catchError((error) => {debugPrint(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

  sendPayment() async {
    MFSendPaymentRequest request = MFSendPaymentRequest();
    request.customerName = "TEESST";
    request.invoiceValue = 10;
    request.notificationOption = MFNotificationOption.EMAIL;

    await MFSDK
        .sendPayment(request, MFLanguage.ENGLISH)
        .then((value) => debugPrint(value.toString()))
        .catchError((error) => {debugPrint(error.message)});
  }

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 the different platforms as well. Here we are explaining some samples of its usage through the SDK.

  getPaymentStatus() async {
    MFGetPaymentStatusRequest request = MFGetPaymentStatusRequest(
        key: '2593740', keyType: MFKeyType.INVOICEID.name);
    await mfSDK
        .getPaymentStatus(request, MFLanguage.ENGLISH.name)
        .then((value) => debugPrint(value.toString()))
        .catchError((error) => {debugPrint(error.message)});
  }

Embedded Payment Usage

Step 1:

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

class _MyAppState extends State<MyApp> {
  ...
  late MFCardPaymentView mfCardView;
  ...
}

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

  MFCardViewStyle cardViewStyle() {
    MFCardViewStyle cardViewStyle = MFCardViewStyle();
    cardViewStyle.cardHeight = 200;
    cardViewStyle.hideCardIcons = false;
    cardViewStyle.input?.inputMargin = 5;
    cardViewStyle.label?.display = true;
    cardViewStyle.input?.fontFamily = MFFontFamily.Monaco;
    cardViewStyle.label?.fontWeight = MFFontWeight.Heavy;
    return cardViewStyle;
  }

@override
Widget build(BuildContext context) {
  mfCardView = MFCardPaymentView(cardViewStyle: cardViewStyle());
 	...
}

Widget embeddedCardView() {
  return Column(
    children: [
      SizedBox(
        height: 200,
        child: mfCardView,
      ),
    ],
  );
}

Step 2:

You need to call initiateSession() function to create a session. You need to do this for each payment separately. The session is valid for only one payment. and inside its 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 the commented lines in the following code.

 initiateSession() async {
    MFInitiateSessionRequest initiateSessionRequest =
        MFInitiateSessionRequest();
    await MFSDK
        .initiateSession(initiateSessionRequest, (bin) {
          debugPrint(bin);
        })
        .then((value) => {
              debugPrint(value.toString()),
            })
        .catchError((error) => {debugPrint(error.message)});
  }

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:

  pay() async {
    var executePaymentRequest = MFExecutePaymentRequest(invoiceValue: 10);
    executePaymentRequest.sessionId = sessionId;

    await mfCardView
        .pay(executePaymentRequest, MFLanguage.ENGLISH, (invoiceId) {
          debugPrint(invoiceId);
        })
        .then((value) => log(value.toString()))
        .catchError((error) => {log(error.message)});
  }

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 an instance of MFApplePayButton and add it to your build() function like the following:

class _MyAppState extends State<MyApp> {
  ...
  late MFApplePayButton mfApplePayButton;
  ...
}

@override
Widget build(BuildContext context) {
  mfApplePayButton = MFApplePayButton(applePayStyle: MFApplePayStyle());
 	...
}

Widget applePayView() {
  return Column(
    children: [
      SizedBox(
        height: 50,
        child: mfApplePayButton,
      )
    ],
  );
}

Step 2:

You need to call applePayPayment() function to create a session. You need to do this for each payment separately. Session is valid for only one payment. and inside its success state.

  applePayPayment() async {
    MFExecutePaymentRequest executePaymentRequest =
        MFExecutePaymentRequest(invoiceValue: 10);
    executePaymentRequest.displayCurrencyIso = MFCurrencyISO.KUWAIT_KWD;
    await mfApplePayButton
        .applePayPayment(executePaymentRequest, MFLanguage.ENGLISH,
            (invoiceId) {
          debugPrint(invoiceId);
        })
        .then((value) => log(value.toString()))
        .catchError((error) => {log(error.message)});
  }

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

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 MFCard(cardHolderName: 'myFatoorah', number: '5454545454545454', expiryMonth: '10', expiryYear: '23', securityCode: '000')
  • 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
  • Now you are ready to execute the payment, please check the following sample code
  executeDirectPayment() async {
    var executePaymentRequest = MFExecutePaymentRequest(invoiceValue: 10);
    executePaymentRequest.paymentMethodId = 20;

    var mfCardRequest = MFCard(
            cardHolderName: 'myFatoorah',
            number: '5454545454545454',
            expiryMonth: '10',
            expiryYear: '23',
            securityCode: '000',
          );

    var directPaymentRequest = MFDirectPaymentRequest(
        executePaymentRequest: executePaymentRequest,
        token: null,
        card: mfCardRequest);

    await MFSDK
        .executeDirectPayment(directPaymentRequest, MFLanguage.ENGLISH,
            (invoiceId) {
          debugPrint(invoiceId);
        })
        .then((value) => debugPrint(value.toString()))
        .catchError((error) => {debugPrint(error.message)});
  }

GooglePay

Step 1: Define Google Pay Button

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

late MFGooglePayButton mfGooglePayButton;

Step 2: Initiate a Session for Google Pay

Use the MFInitiateSessionRequest class to create a session.

MFInitiateSessionRequest initiateSessionRequest = MFInitiateSessionRequest();

await MFSDK
    .initSession(initiateSessionRequest, MFLanguage.ENGLISH)
    .then((value) => {setupGooglePayHelper(value.sessionId)})
    .catchError((error) => {debugPrint(error.message)});

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(String sessionId) async {
  MFGooglePayRequest googlePayRequest = MFGooglePayRequest(
      totalPrice: "1",
      merchantId: "your_google_merchant_id",
      merchantName: "Test Vendor",
      countryCode: MFCountry.KUWAIT,
      currencyIso: MFCurrencyISO.UAE_AED);

  await mfGooglePayButton
      .setupGooglePayHelper(sessionId, googlePayRequest, (invoiceId) {
        debugPrint("-----------Invoice Id: $invoiceId------------");
      })
      .then((value) => debugPrint(value))
      .catchError((error) => {debugPrint(error.message)});
}

Step 4: Integrating Google Pay Button in UI

@override
Widget build(BuildContext context) {
  mfGooglePayButton = MFGooglePayButton();

  return MaterialApp(
    home: Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            SizedBox(
              height: 70,
              child: mfGooglePayButton,
            ),
          ],
        ),
      ),
    ),
  );
}

Step 5: Going Live with google pay:

Updated about 2 months ago