MyFatoorah SDK v2 , is an enhanced and improved SDK version that will simplify the integration with MyFatoorah payment platform through simple straight forward steps.
# Prerequisites
In order to use MyFatoorah SDK on live environment, you have to consider some points to be done before you proceed with your live integration. Here you are the list that should be done and completed before going live with your account:
- You have to Create Live Account and get the account approved
- You have to get the API feature activated, you have to communicate with your account manager to enable it
- Get the API key that will be used within the integration
- If you are in need to have a Direct Payment integration working within your app, please communicate with your account manager to enable this feature for your as well
 
React Native Plugin: myfatoorah-reactnative
Plugin Demo: react_native_demo
baseURL: https://apitest.myfatoorah.com
APIKey(Token): 7Fs7eBv21F5xAocdPvvJ-sCqEyNHq4cygJrQUFvFiWEexBUPs4AkeLQxH4pzsUrY3Rays7GVA6SojFCz2DMLXSJVqk8NG-plK-cZJetwWjgwLPub_9tQQohWLgJ0q2invJ5C5Imt2ket_-JAlBYLLcnqp_WmOfZkBEWuURsBVirpNQecvpedgeCx4VaFae4qWDI_uKRV1829KCBEH84u6LYUxh8W_BYqkzXJYt99OlHTXHegd91PLT-tawBwuIly46nwbAs5Nt7HFOozxkyPp8BW9URlQW1fE4R_40BXzEuVkzK3WAOdpR92IkV94K_rDZCPltGSvWXtqJbnCpUB6iUIn1V-Ki15FAwh_nsfSmt_NQZ3rQuvyQ9B3yLCQ1ZO_MGSYDYVO26dyXbElspKxQwuNRot9hi3FIbXylV3iN40-nCPH4YQzKjo5p_fuaKhvRh7H8oFjRXtPtLQQUIDxk-jMbOp7gXIsdz02DrCfQIihT4evZuWA6YShl6g8fnAqCy8qRBf_eLDnA9w-nBh4Bq53b1kdhnExz0CMyUjQ43UO3uhMkBomJTXbmfAAHP8dZZao6W8a34OktNQmPTbOHXrtxf6DS-oKOu3l79uX_ihbL8ELT40VjIW3MJeZ_-auCPOjpE3Ax4dzUkSDLCljitmzMagH2X8jN8-AYLl46KcfkBV
API_Direct_Payment_Key(Token): TXLrkmSj-VlRTOOC2GCkpLbg2fWXIgcucpP6p0T94ZXcd3uqdg-YI7IUjCbaU1DsdsAGjIW3gnczqjv2CLFKfsiZ3GcD0H6zo5BxFCiAwK45lFGBDdmIw91QRPOtudpxuPJvdkjV_GVVyg5tfndVMc46CuSoNBqfLuzUWiSE51sy-EgboaIZHpFU8xl4fGRFzAwPprwFinftAq3cWTHDEb5dKcxrqIlVxpJM9gqdFo5S3-BsapiEBaVc69QEg2WXVSSf00giFXGiiCiXdD6LZQKn1iE3wQaJttbdDdNjPuLtH0KxNdqC24ONZEh6UKPDKWmOItbyDp-eA5lPJEsAo6BaLUQ5bcFQZXV7k0fk1Dnq4Wj0Rv9SmM7uyC58YFv6b2vxkcgbV1tu8D1bXPSgq7DlvpMn4mh-H1gBisp4xPjYzpfP91n3gvHuizUp4vd70VIuuGY1-cvOGeUs59RfrP4wk_X4UI_qjwNkVF0fS1Of02cIi4AFWNwGkT-ZZhz7Bg-9lyhrOQYrNiO1mIGgxv-OiG5Cc3y5arR7ZpSYl4K8A2TwQNCXZChoIdXwSDMYvHZTZHdmnNlTM2u7lXro9YDluR0vyE5rNacAI9ubEh-iCH7WeJF2xr32Pp_APn22BVyd-4gNpS5XUOIEK21xBxg2NAkuO2ukYC6CoyAAGeGRDBWOQjvm1gdzSjQ-AKrWNJiKwQ
``text cmd`
npm install --save myfatoorah-reactnative
- If you are using Cocoapod you should do that:
`text cmd`
cd ios && pod install && ..
`typescript
import { MFSDK } from 'myfatoorah-reactnative';
//Add the code in the App()
const configure = async () => {
await MFSDK.init(
'rLtt6JWvbUHDDhsZnfpAhpYk4dxYDQkbcPTyGaKp2TYqQgG7FGZ5Th_WD53Oq8Ebz6A53njUoo1w3pjU1D4vs_ZMqFiz_j0urb_BH9Oq9VZoKFoJEDAbRZepGcQanImyYrry7Kt6MnMdgfG5jn4HngWoRdKduNNyP4kzcp3mRv7x00ahkm9LAK7ZRieg7k1PDAnBIOG3EyVSJ5kK4WLMvYr7sCwHbHcu4A5WwelxYK0GMJy37bNAarSJDFQsJ2ZvJjvMDmfWwDVFEVe_5tOomfVNt6bOg9mexbGjMrnHBnKnZR1vQbBtQieDlQepzTZMuQrSuKn-t5XZM7V6fCW7oP-uXGX-sMOajeX65JOf6XVpk29DP6ro8WTAflCDANC193yof8-f5_EYY-3hXhJj7RBXmizDpneEQDSaSz5sFk0sV5qPcARJ9zGG73vuGFyenjPPmtDtXtpx35A-BVcOSBYVIWe9kndG3nclfefjKEuZ3m4jL9Gg1h2JBvmXSMYiZtp9MR5I6pvbvylU_PP5xJFSjVTIz7IQSjcVGO41npnwIxRXNRxFOdIUHn0tjQ-7LwvEcTXyPsHXcMD8WtgBh-wxR8aKX7WPSsT1O8d8reb2aR7K3rkV3K82K_0OgawImEpwSvp9MNKynEAJQS6ZHe_J_l77652xwPNxMRTMASk1ZsJL',
MFCountry.KUWAIT,
MFEnvironment.TEST
);
};
const setUpActionBar = async () => {
await MFSDK.setUpActionBar('Company Payment', processColor('#FFFFFF'), processColor('#000000'), true);
};
`
> 📘 After testing
>
> Once your testing is finished, in. the "init" function, change the url. to the live url, select your live country, and set the environment. to live. Click here for more information.
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.
`typescript
const initiatePayment = async () => {
var initiatePaymentRequest: MFInitiatePaymentRequest = new MFInitiatePaymentRequest(10, MFCurrencyISO.KUWAIT_KWD);
await MFSDK
.initiatePayment(initiatePaymentRequest, MFLanguage.ARABIC)
.then((success) => console.log(success))
.catch((error) => console.log(error));
};
const executePayment = async () => {
var executePaymentRequest = new MFExecutePaymentRequest(10);
executePaymentRequest.paymentMethodId = 2;
executePaymentRequest.customerEmail = 'Test@test.com';
executePaymentRequest.customerMobile = '123456789';
executePaymentRequest.customerReference = 'Test12345';
executePaymentRequest.displayCurrencyIso = MFCurrencyISO.QATAR_QAR;
executePaymentRequest.expiryDate = '2024-06-08T17:36:23.173';
await MFSDK
.executePayment(executePaymentRequest, MFLanguage.ARABIC, (invoiceId: string) => console.log('invoiceId: ' + invoiceId))
.then((success) => console.log(success))
.catch((error) => console.log(error));
};
`
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
`typescript
const sendPayment = async () => {
var sendPaymentRequest = new MFSendPaymentRequest(10, MFNotificationOption.LINK, 'customerName');
sendPaymentRequest.customerEmail = 'Test@test.com';
sendPaymentRequest.customerMobile = '123456789';
sendPaymentRequest.customerReference = 'Test12345';
sendPaymentRequest.displayCurrencyIso = MFCurrencyISO.UNITEDSTATES_USD;
sendPaymentRequest.expiryDate = '2023-06-08T17:36:23.132Z';
await MFSDK
.sendPayment(sendPaymentRequest, MFLanguage.ARABIC)
.then((success) => console.log(success))
.catch((error) => console.log(error));
};
`
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 different platforms as well. Here we are explaining some samples of its usage through the SDK.
`typescript
const getPaymentStatus = async () => {
var getPaymentStatusRequest = new MFGetPaymentStatusRequest('1515410', MFKeyType.INVOICEID);
await MFSDK
.getPaymentStatus(getPaymentStatusRequest, MFLanguage.ARABIC)
.then((success) => console.log(success))
.catch((error) => console.log(error));
};
`
> 📘 Apple Pay for iPhone devices.
>
> Apple Pay is available from iOS 13.0. Apple is like other payment getways but when creating execute payment request you should send payment id for Apply Pay.
You can display MyFatoorah. [card view]\(doc: card-view-form) directly in your application. to. give the customers. a better user experience
`typescript
var cardPaymentView: MFCardPaymentView | null;
const paymentCardStyle = () => {
var cardViewInput = new MFCardViewInput(
processColor('gray'),
13,
MFFontFamily.SansSerif,
32,
0,
processColor('#c7c7c7'),
2,
8,
new MFBoxShadow(10, 10, 5, 0, processColor('gray')),
new MFCardViewPlaceHolder('Name On Card test', 'Number test', 'MM / YY', 'CVV test')
);
var cardViewLabel = new MFCardViewLabel(
true,
processColor('black'),
13,
MFFontFamily.CourierNew,
MFFontWeight.Bold,
new MFCardViewText('Card Holder Name test', 'Card Number test', 'Expiry Date test', 'Security Code test')
);
var cardViewError = new MFCardViewError(processColor('green'), 8, new MFBoxShadow(10, 10, 5, 0, processColor('yellow')));
var cardViewStyle = new MFCardViewStyle(false, 'initial', 230, cardViewInput, cardViewLabel, cardViewError);
return cardViewStyle;
};
// Add card view and the pay button to your view
`
`typescript
initiateSession = async () => {
var initiateSessionRequest = new MFInitiateSessionRequest('testCustomer');
await MFSDK.initiateSession(initiateSessionRequest)
.then((success: MFInitiateSessionResponse) => {
console.log(success);
this.loadCardView(success);
})
.catch((error) => console.log('error : ' + error));
};
loadCardView = async (initiateSessionResponse:MFInitiateSessionResponse) => {
await this.cardPaymentView
?.load(initiateSessionResponse, (bin: string) => console.log('bin: ' + bin))
.then((success) => {
console.log(success);
})
.catch((error) => console.log('error : ' + error));
};
const pay = async () => {
var executePaymentRequest = new MFExecutePaymentRequest(10);
executePaymentRequest.sessionId = sessionId ?? '';
await cardPaymentView
?.pay(executePaymentRequest, MFLanguage.ARABIC, (invoiceId: string) => onEventReturn('invoiceId: ' + invoiceId))
.then((success) => onSuccess(success))
.catch((error) => onError(error));
};
`
You can use In Apple Pay and don't have to open in web view by using 'MFApplePayButtonView'
`typescript
var applePayView: MFApplePayButtonView | null;
const applePayStyle = () => {
var applePayButton = new MFApplePayStyle(30, 30, 'Buy with', false);
return applePayButton;
};
// Add Apple Pay button to your view
{Platform.OS === 'ios' &&
`
`typescript
const applePay = async () => {
var executePaymentRequest = new MFExecutePaymentRequest(10);
executePaymentRequest.displayCurrencyIso = MFCurrencyISO.KUWAIT_KWD;
executePaymentRequest.sessionId = sessionId ?? '';
await applePayView
?.applePayPayment(executePaymentRequest, MFLanguage.ARABIC, (invoiceId: string) => console.log('invoiceId: ' + invoiceId))
.then((success) => console.log(success))
.catch((error) => console.log(error));
};
`
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 _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 your 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
`javascript JavaScript
const executeDirectPayment = async () => {
var executePaymentRequest = new MFExecutePaymentRequest(10);
executePaymentRequest.paymentMethodId = 20; //9
var mfCardRequest = new MFCardRequest('5454545454545454', '05', '23', '000', 'myFatoorah');
var directPaymentRequest = new MFDirectPaymentRequest(executePaymentRequest, null, mfCardRequest);
await MFSDK
.executeDirectPayment(directPaymentRequest, MFLanguage.ARABIC, (invoiceId: string) => console.log('invoiceId: ' + invoiceId))
.then((success) => console.log(success))
.catch((error) => console.log(error));
};
``