React Native
Guide for React Native
ReactNative SDK New Version
Starting from version '1.0.0', MyFatoorah has uploaded a new plugin that depends directly on the native implementation.
Introduction
MyFatoorah SDK v2 is an enhanced and improved SDK version that will simplify the integration with the MyFatoorah payment platform through simple straightforward steps.
Prerequisites
In order to use MyFatoorah SDK in the live environment, you have to consider some points to be made 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 you as well
Demo project
React Native Plugin: myfatoorah-reactnative
Plugin Demo: react_native_demo
Demo Information
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
Installation
npm install --save myfatoorah-reactnative
- If you are using Cocoapod you should do that:
cd ios && pod install && ..
Setup your screen
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.
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.
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 = '[email protected]';
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));
};
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
const sendPayment = async () => {
var sendPaymentRequest = new MFSendPaymentRequest(10, MFNotificationOption.LINK, 'customerName');
sendPaymentRequest.customerEmail = '[email protected]';
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));
};
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 different platforms as well. Here we are explaining some samples of its usage through the SDK.
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.
Card View Payment
You can display MyFatoorah. [card view](doc: card-view-form) directly in your application. to. give the customers. a better user experience
1- First setup MFCardPaymentView and get a reference for it:
MFCardPaymentView and get a reference for it: 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
<MFCardPaymentView ref={(ref) => (this.cardPaymentView = ref)} paymentStyle={this.paymentCardStyle()} />
<View>
<TouchableOpacity onPress={this.pay}>
<Text>Pay</Text>
</TouchableOpacity>
</View>
2-Display the CardView and set the pay function
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));
};
In Apple Pay
You can use In Apple Pay and don't have to open in web view by using 'MFApplePayButtonView'
1- First setup MFApplePayButtonView and get a reference for it:
MFApplePayButtonView and get a reference for it: 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' && <MFApplePayButtonView ref={(ref) => (applePayView = ref)} style={styles.cardView} applePayButtonStyle={applePayStyle()} />}
2- Display Apple Pay Button
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));
};
Direct Payment
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 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));
};
Updated 5 months ago