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
Demo account information
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
npm install --save myfatoorah-reactnative
- If you are using Cocoapod you should do that:
cd ios && pod install && ..
import * as MF from 'myfatoorah-reactnative';
import { MFSDK, MFCardPaymentView, MFApplePayButtonView, MFError } from 'myfatoorah-reactnative';
//Add the code in the App()
var mFSDK: MFSDK = new MFSDK();
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',
MF.MFCountry.KUWAIT,
MF.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.
const initiatePayment = async () => {
var initiatePaymentRequest: MF.MFInitiatePaymentRequest = new MF.MFInitiatePaymentRequest(10, MF.MFCurrencyISO.KUWAIT_KWD);
await mFSDK
.initiatePayment(initiatePaymentRequest, MF.MFLanguage.ARABIC)
.then((success) => console.log(success))
.catch((error) => console.log(error));
};
const executePayment = async () => {
var executePaymentRequest = new MF.MFExecutePaymentRequest(10);
executePaymentRequest.paymentMethodId = 2;
executePaymentRequest.customerEmail = 'Test@test.com';
executePaymentRequest.customerMobile = '123456789';
executePaymentRequest.customerReference = 'Test12345';
executePaymentRequest.displayCurrencyIso = MF.MFCurrencyISO.QATAR_QAR;
executePaymentRequest.expiryDate = '2024-06-08T17:36:23.173';
await mFSDK
.executePayment(executePaymentRequest, MF.MFLanguage.ARABIC, (invoiceId: string) => console.log('invoiceId: ' + invoiceId))
.then((success) => console.log(success))
.catch((error) => console.log(error));
};
function executeResquestJson() {
let request = new MFExecutePaymentRequest(parseFloat(invoiceValue), paymentMethods[selectedIndex].PaymentMethodId);
request.customerEmail = "a@b.com"; // must be email
request.customerMobile = "";
request.customerCivilId = "";
let address = new MFCustomerAddress("ddd", "sss", "sss", "sss", "sss");
request.customerAddress = address;
request.customerReference = "";
request.language = "en";
request.mobileCountryCode = MFMobileCountryCodeISO.KUWAIT;
request.displayCurrencyIso = MFCurrencyISO.KUWAIT_KWD;
// var productList = []
// var product = new MFProduct("ABC", 1.887, 1)
// productList.push(product)
// request.invoiceItems = productList
return request;
}
function executePayment() {
let request = executeResquestJson();
showLoading()
MFPaymentRequest.sharedInstance.executePayment(navigation, request, MFLanguage.ENGLISH, (response: Response) => {
hideLoading()
if (response.getError()) {
alert('error: ' + response.getError().error);
}
else {
var bodyString = response.getBodyString();
var invoiceId = response.getInvoiceId();
var paymentStatusResponse = response.getBodyJson().Data;
alert('success with Invoice Id: ' + invoiceId + ', Invoice status: ' + paymentStatusResponse.InvoiceStatus);
}
});
}
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
const sendPayment = async () => {
var sendPaymentRequest = new MF.MFSendPaymentRequest(10, MF.MFNotificationOption.LINK, 'customerName');
sendPaymentRequest.customerEmail = 'Test@test.com';
sendPaymentRequest.customerMobile = '123456789';
sendPaymentRequest.customerReference = 'Test12345';
sendPaymentRequest.displayCurrencyIso = MF.MFCurrencyISO.UNITEDSTATES_USD;
sendPaymentRequest.expiryDate = '2023-06-08T17:36:23.132Z';
await mFSDK
.sendPayment(sendPaymentRequest, MF.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.
const getPaymentStatus = async () => {
var getPaymentStatusRequest = new MF.MFGetPaymentStatusRequest('1515410', MF.MFKeyType.INVOICEID);
await mFSDK
.getPaymentStatus(getPaymentStatusRequest, MF.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
var cardPaymentView: MFCardPaymentView | null;
const paymentCardStyle = () => {
var cardViewInput = new MF.MFCardViewInput(
processColor('gray'),
13,
MF.MFFontFamily.SansSerif,
32,
0,
processColor('#c7c7c7'),
2,
8,
new MF.MFBoxShadow(10, 10, 5, 0, processColor('gray')),
new MF.MFCardViewPlaceHolder('Name On Card test', 'Number test', 'MM / YY', 'CVV test')
);
var cardViewLabel = new MF.MFCardViewLabel(
true,
processColor('black'),
13,
MF.MFFontFamily.CourierNew,
MF.MFFontWeight.Bold,
new MF.MFCardViewText('Card Holder Name test', 'Card Number test', 'Expiry Date test', 'Security Code test')
);
var cardViewError = new MF.MFCardViewError(processColor('green'), 8, new MF.MFBoxShadow(10, 10, 5, 0, processColor('yellow')));
var cardViewStyle = new MF.MFCardViewStyle(false, 'initial', 230, cardViewInput, cardViewLabel, cardViewError);
return cardViewStyle;
};
// Add card view annd the pay button to your view
<MFCardPaymentView ref={(ref) => (cardPaymentView = ref)} style={styles.cardView} paymentStyle={paymentCardStyle()} />
<View style={styles.container_horizontal}>
<Pressable style={[styles.button, styles.btn_full]} onPress={pay}>
<Text style={styles.text}>Pay</Text>
</Pressable>
</View>
const loadCardView = async () => {
setIsCardViewVisible(true);
var initiateSessionRequest = new MF.MFInitiateSessionRequest('testCustomer1');
await mFSDK
.initiateSession(initiateSessionRequest, (bin: string) => onEventReturn('bin: ' + bin))
.then((success) => {
onSuccess(success);
setIsPayBtnVisible(true);
})
.catch((error) => onError(error));
};
const pay = async () => {
var executePaymentRequest = new MF.MFExecutePaymentRequest(10);
executePaymentRequest.sessionId = sessionId ?? '';
await cardPaymentView
?.pay(executePaymentRequest, MF.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'
var applePayView: MFApplePayButtonView | null;
const applePayStyle = () => {
var applePayButton = new MF.MFApplePayStyle(30, 30, 'Buy with', false);
return applePayButton;
};
// Add Apple Pay button to your view
{Platform.OS === 'ios' && <MFApplePayButtonView ref={(ref) => (applePayView = ref)} style={styles.cardView} applePayButtonStyle={applePayStyle()} />}
const applePay = async () => {
var executePaymentRequest = new MF.MFExecutePaymentRequest(10);
executePaymentRequest.displayCurrencyIso = MF.MFCurrencyISO.KUWAIT_KWD;
executePaymentRequest.sessionId = sessionId ?? '';
await applePayView
?.applePayPayment(executePaymentRequest, MF.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
const executeDirectPayment = async () => {
var executePaymentRequest = new MF.MFExecutePaymentRequest(10);
executePaymentRequest.paymentMethodId = 20; //9
var mfCardRequest = new MF.MFCardRequest('5454545454545454', '05', '23', '000', 'myFatoorah');
var directPaymentRequest = new MF.MFDirectPaymentRequest(executePaymentRequest, null, mfCardRequest);
await mFSDK
.executeDirectPayment(directPaymentRequest, MF.MFLanguage.ARABIC, (invoiceId: string) => console.log('invoiceId: ' + invoiceId))
.then((success) => console.log(success))
.catch((error) => console.log(error));
};