GitLocker: The Coding Marketplace

Description:

myfatoorah flutter

myfatoorah_flutter #

📘 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 #

Add the MyFatoorah plugin to your pubspec.yaml file.

dependencies:
myfatoorah_flutter: ^3.1.1
copied to clipboard

Install the plugin by running the following command.
$ flutter pub get

Import the plugin like this:

import 'package:myfatoorah_flutter/myfatoorah_flutter.dart';
copied to clipboard

Initiate the MyFatoorah Plugin with the following line:

MFSDK.init("Add Your API Key", MFCountry.KUWAIT, MFEnvironment.TEST);
copied to clipboard

(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);
}
copied to clipboard

📘 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)});
}
copied to clipboard
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)});
}
copied to clipboard
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)});
}
copied to clipboard
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;
...
}
copied to clipboard
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,
),
],
);
}
copied to clipboard
Step 2:
You need to call initSession() 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.
initSession() async {
/*
If you want to use saved card option with embedded payment, send the parameter
"customerIdentifier" with a unique value for each customer. This value cannot be used
for more than one Customer.
*/
// var request = MFInitiateSessionRequest("12332212");
/*
If not, then send null like this.
*/
MFInitiateSessionRequest initiateSessionRequest = MFInitiateSessionRequest();

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

loadEmbeddedPayment(MFInitiateSessionResponse session) {
loadCardView(session);
if (Platform.isIOS) applePayPayment(session);
}

loadCardView(MFInitiateSessionResponse session) {
mfCardView.load(session, (bin) {debugPrint(bin)});
}
copied to clipboard
Note: The initSession() 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) => {debugPrint(value.toString())})
.catchError((error) => {debugPrint(error.message)});
}
copied to clipboard
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,
)
],
);
}
copied to clipboard
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(MFInitiateSessionResponse session) async {
MFExecutePaymentRequest executePaymentRequest =
MFExecutePaymentRequest(invoiceValue: 10);
executePaymentRequest.displayCurrencyIso = MFCurrencyISO.KUWAIT_KWD;

await mfApplePayButton
.displayApplePayButton(session, executePaymentRequest, MFLanguage.ENGLISH)
.then((value) => {
mfApplePayButton
.executeApplePayButton(null, (invoiceId) => {debugPrint(invoiceId)})
.then((value) => {debugPrint(value.toString())})
.catchError((error) => {debugPrint(error.message)})
})
.catchError((error) => {debugPrint(error.message)});
}
copied to clipboard
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)});
}
copied to clipboard