a better implementation of myfatoorah_flutter

Last update: Nov 2, 2021

myfatoorah_flutter

In order to simplify the integration of your application with MyFatoorah payment platforms, we have developed a cutting-edge plugin that works smoothly with your application and provide you with a simple way to embed our payment functions within your application.

The plugin will save your efforts and time instead of integrating with our API using normal API calls, and will allow you to have the setup ready in a quick, modern and secured way.

Prerequisites

In order to have the plugin integration working on live environment, please refer to the section Prerequisites and read it for more details

Integration

Installation

1. Add MyFatoorah plugin to your pubspec.yaml file.
dependencies:
    myfatoorah_flutter: ^2.1.0	    
2. Install the plugin by running the following command.
$ flutter pub get

Usage

Inside your Dart code do the following:

1. To start using MyFatoorah plugin, import it into your Flutter app.
import 'package:myfatoorah_flutter/myfatoorah_flutter.dart';
2. Initiate MyFatoorah Plugin inside initState().
MFSDK.init(
   
    , 
    
     );

    
   
  • You can get the API URL and API Token Key for testing from here
  • Once your testing is finished, simply replace the testing API URL / API token key with the live information, click here for more information.
3. (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);
    

Initiate / Execute Payment

  • Initiate Payment: this step will simply return you all available Payment Methods for the account with the actual charge that the customer will pay on the gateway.

      var request = new MFInitiatePaymentRequest(0.100, MFCurrencyISO.KUWAIT_KWD);
    
      MFSDK.initiatePayment(request, MFAPILanguage.EN,
              (MFResult
         
           result) => {
    
            if(result.isSuccess()) {
              print(result.response.toJson().toString())
            }
            else {
              print(result.error.message)
            }
          });
    
         
  • Execute Payment: once the payment has been initiated, this step will do execute the actual transaction creation at MyFatoorah platform and will return to your application the URL to redirect your customer to make the payment.

    result) => { if(result.isSuccess()) { print(result.response.toJson().toString()) } else { print(result.error.message) } }); ">
      // 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,
              (String invoiceId, MFResult
         
           result) => {
    
            if(result.isSuccess()) {
              print(result.response.toJson().toString())
            }
            else {
              print(result.error.message)
            }
          });
    
         
  • 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

Direct Payment / Tokenization

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 2 is the paymentMethodId of Visa/Master payment method. // You should call the "initiatePayment" API to can get this id and the ids of all other payment methods String paymentMethod = 2;

    var request = new MFExecutePaymentRequest(paymentMethod, 0.100);

    // var mfCardInfo = new MFCardInfo(cardToken: "Put your token here");

    var mfCardInfo = new MFCardInfo("2223000000000007", "05", "21", "100", bypass3DS: false, saveToken: true);

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

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

Send Payment (Offline)

This will allow you to generate a payment link that can be sent by any channel we support and collect it once it's paid by your customer

result) => { if(result.isSuccess()) { print(result.response.toJson().toString()) } else { print(result.error.message) } }); ">
var request = MFSendPaymentRequest(invoiceValue: 0.100, customerName: "Customer name",
	notificationOption: MFNotificationOption.LINK);

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

   

Payment Enquiry

This will enable your application to get the full details about a certain invoice / payment

result) => { if(result.isSuccess()) { print(result.response.toJson().toString()) } else { print(result.error.message) } }); ">
var request = MFPaymentStatusRequest(invoiceId: "12345");

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

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

   

Embedded Payment (new)

Introduction

If you would like your customer to complete the payment on your checkout page without being redirected to another page (except for the 3D Secure page) and the PCI DSS compliance is a blocker, MyFatoorah embedded payment feature is your optimum solution.

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:

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

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

After that, 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
   
     result) =>
    {
      if (result.isSuccess())
        {
          setState(() {
            print("Response: " + result.response!.toJson().toString());
            _response = result.response!.toJson().toString();
          })
        }
      else
        {
          setState(() {
            print("Error: " + result.error!.toJson().toString());
            _response = result.error!.message!;
          })
        }
    });

   

GitHub

https://github.com/Bdaya-Dev/myfatoorah_flutter
You might also like...

Better video player for Flutter, with multiple configuration options. Solving typical use cases!

Better video player for Flutter, with multiple configuration options. Solving typical use cases!

Better video player for Flutter, with multiple configuration options. Solving typical use cases!

Aug 11, 2022

An app that could help doctors better consult their patients in every way possible.

doc_app A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this

Oct 15, 2021

Routinger is a task scheduler app that is made to make you a better person at no extra cost. The code is open-source. Dart language and Flutter framework are used extensively.

Routinger is a task scheduler app that is made to make you a better person at no extra cost. The code is open-source. Dart language and Flutter framework are used extensively.

Routinger This is a simple app that will allow you to schedule your tasks, create a simple to-do, and also make recurring tasks. The app ends you noti

Mar 3, 2022

A better/safer way to handle environment variables in Flutter.

Envify A better and probably safer way to handle environment variables in Flutter. To read why this is better/safer in details, skip to the motivation

Jul 14, 2022

A better way for new feature introduction and step-by-step users guide for your Flutter project.

A better way for new feature introduction and step-by-step users guide for your Flutter project.

A better way for new feature introduction and step-by-step users guide for your Flutter project.

May 16, 2022

Try to clone satria, with same feature but better ui

satria A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this i

Nov 8, 2021

Overlay/OverlayEntry, but better

Overlay/OverlayEntry, but better

Call for maintainer I (@rrousselGit) am sadly unable to maintain flutter_portal at the moment due to a lack of time, and would like to find a new main

Aug 3, 2022

A better Minecraft Launcher that supports multiple platforms and many functionalities for you to explore!

A better Minecraft Launcher that supports multiple platforms and many functionalities for you to explore!

A better Minecraft Launcher that supports multiple platforms and many functionalities for you to explore!

Aug 11, 2022

Better video player for Flutter, with multiple configuration options. Solving typical use cases!

Better video player for Flutter, with multiple configuration options. Solving typical use cases!

Better Player Advanced video player based on video_player and Chewie. It's solves many typical use cases and it's easy to run. Introduction This plugi

Aug 6, 2022

An experiment in building a better XMPP client. using Flutter

An experiment in building a better XMPP client. using Flutter

moxxy An experimental XMPP client that tries to be as easy, modern and beautiful

Aug 2, 2022

💗 Tinder_Clone Building this app with intention of learning flutter better .

💗 Tinder_Clone  Building this app with intention of learning flutter better .

Tinder Clone Mozilla 💗 Tinder_Clone Building this app with intention of learning flutter better . 📱 Screenshots Splash Screen Login Page Phone numbe

Aug 6, 2022

Serene is a white noise app developed with Flutter. It helps you meditate, sleep better, focus, relax and be calm.

Serene is a white noise app developed with Flutter. It helps you meditate, sleep better, focus, relax and be calm.

Serene - Relax, Meditate and Sleep A white noise app developed with Flutter. It helps you meditate, sleep better, focus, relax and be calm. Screenshot

Aug 15, 2022

An experiment in building a better XMPP client. This time using Flutter.

An experiment in building a better XMPP client. This time using Flutter.

Moxxy An experimental XMPP client that tries to be as easy, modern and beautiful as possible. The code is also available on codeberg. Screenshots Deve

Aug 2, 2022

A simple widget for getting better feedback.

A simple widget for getting better feedback.

💰 Using this library in a commercial product? Consider becoming a sponsor. A Flutter package for obtaining better feedback. It allows the user to pro

Jul 30, 2022

Pal-Widgets - A flutter package for better onboarding

Pal-Widgets - A flutter package for better onboarding

Pal widgets A flutter package for better onboarding. A set of amazing onboarding widgets for your flutter applications. Install package add in your pu

Jul 21, 2022

Get It - Simple direct Service Locator that allows to decouple the interface from a concrete implementation and to access the concrete implementation from everywhere in your App. Maintainer: @escamoteur

Get It - Simple direct Service Locator that allows to decouple the interface from a concrete implementation and to access the concrete implementation from everywhere in your App. Maintainer: @escamoteur

❤ī¸ Sponsor get_it This is a simple Service Locator for Dart and Flutter projects with some additional goodies highly inspired by Splat. It can be used

Aug 12, 2022

Dart GraphQL server implementation. Utilities, code generator, examples and reference implementation.

Leto - GraphQL Server A complete implementation of the official GraphQL specification in the Dart programming language. Inspired by graphql-js, async-

Aug 6, 2022

Flutter implementation of sticky headers for sliver

Flutter implementation of sticky headers for sliver

flutter_sticky_header A Flutter implementation of sticky headers with a sliver as a child. Features Accepts one sliver as content. Header can overlap

Aug 7, 2022

Related

Try to clone satria, with same feature but better ui

satria A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this i

Nov 8, 2021
A Flutter app with firebase libraries implementation
A Flutter app with firebase libraries implementation

FlutFire A Flutter project with implementation of all firebase libraries for Android and iOS both. Show some ❤ī¸ and star the repo to support the proje

Jul 24, 2022
An Login Page App in Flutter with MVP and SQFLITE ( SQLITE) Implementation.
An Login Page App in Flutter with MVP and SQFLITE ( SQLITE) Implementation.

Flutter SQFLITE MVP LOGIN APP A Login Page Flutter App with SQFLITE (SQLITE) and MVP implementation. Written in dart using Flutter SDK. Please don't f

Aug 7, 2022
A simple flutter app with demo implementation of redux.
A simple flutter app with demo implementation of redux.

Flutter Redux Tutorial Redux Project is just a quick guide for implementation of redux.dart and flutter_redux . Written in dart using Flutter SDK. Ple

Jun 16, 2022
Firebase + Flutter sample apps with code snippets, supported by comprehensive articles for each implementation.
Firebase + Flutter sample apps with code snippets, supported by comprehensive articles for each implementation.

FlutterFire Samples This repo is created to contain various sample apps demonstrating the integration of Firebase with Flutter. The final goal is to c

Aug 11, 2022
A pure dart SSH implementation based on dartssh, with bug fixes, up-to-date dependencies and sound null safety.

DartSSH 2 dartssh2 is a pure dart SSH implementation based on dartssh, with bug fixes, up-to-date dependencies and sound null safety. dartssh2 providi

Aug 12, 2022
A simple POC implementation of the project Real World Project
A simple POC implementation of the project Real World Project

Real World Project in Dart/Flutter This is a simple POC implementation of the project Real World Project.

Apr 12, 2022
đ‚đ¨đ¯ 𝐀𝐡𝐞𝐚𝐝 is a mobile application to track and create better Covid-19 route maps for both shop owners and customers
đ‚đ¨đ¯ 𝐀𝐡𝐞𝐚𝐝 is a mobile application to track and create better Covid-19 route maps for both shop owners and customers

Cov Ahead Cov Ahead is a mobile application where shopkeepers have an app that shows QR code and users can scan this QR code which will automatically

Jan 15, 2022
The FlexGrid control provides a powerful and quickly way to display data in a tabular format. It is including that frozened column/row,loading more, high performance and better experience in TabBarView/PageView.
The FlexGrid control provides a powerful and quickly way to display data in a tabular format. It is including that frozened column/row,loading more, high performance and better experience in TabBarView/PageView.

flex_grid Language: English| 中文įŽ€äŊ“ The FlexGrid control provides a powerful and quickly way to display data in a tabular format. It is including that f

May 29, 2022
Attempt to implement better scrolling for Flutter Web and Desktop. Includes keyboard, MButton and custom mouse wheel scrolling.
Attempt to implement better scrolling for Flutter Web and Desktop. Includes keyboard, MButton and custom mouse wheel scrolling.

An attempt to implement better scrolling for Flutter Web and Desktop. Includes keyboard, MButton and custom mouse wheel scrolling. Getting started Exa

Aug 3, 2022