Migration to the new Flutter SDK
Guide for Flutter Migration to the new SDK
Installation /Usage
- 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);
- (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)
}
});
Updated 5 months ago