Migration to the new Flutter SDK

Guide for Flutter Migration to the new SDK

Installation /Usage

  1. Initiate the MyFatoorah Plugin with the following line:
MFSDK.init("Add Your API Key", MFCountry.KUWAIT, MFEnvironment.TEST);
MFSDK.init("Put API Key here", 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);
  }
// Use the following lines if you want to set up the properties of AppBar.

  setUpActionBar() async {
    await mfSDK
        .setUpActionBar('Company Payment', '', '', true)
        .then((value) => log(value))
        .catchError((error) => {log(error.message)});
  }

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

Send Payment

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

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

class _MyAppState extends State<MyApp> {
  ...
  late MFCardPaymentView mfCardView;
  ...
}
@override
  Widget build(BuildContext context) {
    return createPaymentCardView();
  }

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

View Customization

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,
      ),
    ],
  );
}
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:

Call initiateSession()

 initiateSession() async {
    MFInitiateSessionRequest initiateSessionRequest =
        MFInitiateSessionRequest();
    await MFSDK
        .initiateSession(initiateSessionRequest, (bin) {
          debugPrint(bin);
        })
        .then((value) => {
              debugPrint(value.toString()),
            })
        .catchError((error) => {debugPrint(error.message)});
  }
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());
    });
  }

Step 3:

Handle your Pay button

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

Step 1:

Create an instance of MFApplePayButton

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,
      )
    ],
  );
}
@override
  Widget build(BuildContext context) {
    return createApplePayButton();
  }

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

Step 2:

Call initiateSession()

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

Direct Payment / Tokenization

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