React Native
Guide for React Native
Demo project
React Native Plugin: myfatoorah-reactnative
Plugin Demo: react_native_demo
Installation
npm install --save myfatoorah-reactnative
Usage
Requirments
To use myfatoorah-reactnative
you should set your app in navigation container, so you need to install @react-navigation/native
and @react-navigation/stack
1- Install required dependencies (if your app already in navigation skip this step):
npm install @react-navigation/native
- This depndecies are required for
@react-navigation/native
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
- If you are using Cocoapod you should do that:
cd ios && pod install
cd ..
.
.
npm install @react-navigation/stack
myfatoorah-reactnative
depends onreact-native-web
andreact-native-webview
dependencies so you should install them:
npm install --save-dev react-native-web
npm install --save-dev react-native-webview
2- Setup your screen
//App.js
import 'react-native-gesture-handler';
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Home from 'path to Home.js'
import { MFWebView, MFSettings, MFTheme } from 'myfatoorah-reactnative';
const Stack = createStackNavigator();
export default class App extends React.Component {
componentDidMount() {
let token = "your token here";
let theme = new MFTheme('blue', 'gray', 'Payment', 'Cancel')
MFSettings.sharedInstance.setTheme(theme)
MFSettings.sharedInstance.configure(token, MFCountry.KUWAIT, MFEnvironment.TEST)
}
render() {
return (
<NavigationContainer>
<Stack.Navigator mode="modal" initialRouteName="Home">
<Stack.Screen name="Home"
component={Home} />
<Stack.Screen name="MFWebView"
component={MFWebView}
options={MFWebView.navigationOptions}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
}
After testing
Once your testing is finished, simply replace the demo URL / Token with the live information, 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.
function initiatePayments() {
let initiateRequest = new MFInitiatePayment(50, MFCurrencyISO.KUWAIT_KWD)
MFPaymentRequest.sharedInstance.initiatePayment(initiateRequest, MFLanguage.ENGLISH, (response: Response) => {
if (response.getError()) {
alert('error: ' + response.getError().error);
}
else {
setPaymentMethods(response.getPaymentMethods())
}
});
}
function executeResquestJson() {
let request = new MFExecutePaymentRequest(parseFloat(invoiceValue), paymentMethods[selectedIndex].PaymentMethodId);
request.customerEmail = "[email protected]"; // 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);
}
});
}
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 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 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
function executeResquestJson() {
let request = new MFExecutePaymentRequest(parseFloat(invoiceValue), paymentMethods[selectedIndex].PaymentMethodId);
request.customerEmail = "[email protected]"; // 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 getCardInfo() {
let cardExpiryMonth = '05'
let cardExpiryYear = '21'
let cardSecureCode = '100'
let paymentType = MFPaymentype.CARD
// let paymentType = MFPaymentype.TOKEN
let saveToken = false
let card = new MFCardInfo('5123450000000008', cardExpiryMonth, cardExpiryYear, cardSecureCode, paymentType, saveToken)
card.bypass = true
return card
}
function executeDirectPayment() {
let request = executeResquestJson();
let cardInfo = getCardInfo()
showLoading()
MFPaymentRequest.sharedInstance.executeDirectPayment(navigation, request, cardInfo, MFLanguage.ENGLISH, (response: Response) => {
hideLoading()
if (response.getError()) {
alert('error: ' + response.getError().error)
} else {
// alert(response.getBodyString())
var paymentStatusResponse = response.getBodyJson().getPaymentStatusResponse;
var invoiceId = paymentStatusResponse.InvoiceId
alert('success with Invoice Id: ' + invoiceId + ', Invoice status: ' + paymentStatusResponse.InvoiceStatus);
}
}
);
}
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
function getSendPaymentRequest() {
let request = new MFSendPaymentRequest(parseFloat(invoiceValue), MFNotificationOption.ALL, 'Test')
// send invoice link as sms to specified number
//let request = new MFSendPaymentRequest(parseFloat(invoiceValue), MFNotificationOption.SMS, 'Test')
// request.customerMobile = '' // required here
// get invoice link
//let request = new MFSendPaymentRequest(parseFloat(invoiceValue), MFNotificationOption.LINK, 'Test')
// send invoice link to email
//let request = new MFSendPaymentRequest(parseFloat(invoiceValue), MFNotificationOption.EMAIL, 'Test')
// request.customerEmail = '' required here
//request.userDefinedField = ''
request.customerEmail = '[email protected]'// must be email
request.customerMobile = 'mobile no'//Required
request.customerCivilId = ''
request.mobileCountryIsoCode = MFMobileCountryCodeISO.KUWAIT
request.customerReference = ''
request.language = 'en'
let address = new MFCustomerAddress("ddd", "sss", "sss", "sss", "sss");
request.customerAddress = address
request.customerReference = ''
request.language = 'en'
request.displayCurrencyIso = MFCurrencyISO.KUWAIT_KWD
// var productList = []
// var product = new MFProduct("ABC", 1.887, 1)
// productList.push(product)
// request.invoiceItems = productList
return request
}
function sendPayment() {
showLoading()
let sendPaymentRequest = getSendPaymentRequest()
MFPaymentRequest.sharedInstance.sendPayment(sendPaymentRequest, MFLanguage.ENGLISH, (response: Response) => {
hideLoading()
if (response.getError()) {
alert('error: ' + response.getError().error)
} else {
alert(response.getBodyString())
// var paymentStatusResponse = response.getBodyJson().getPaymentStatusResponse;
// var invoiceId = paymentStatusResponse.InvoiceId
// alert('success with Invoice Id: ' + invoiceId + ', Invoice status: ' + paymentStatusResponse.InvoiceStatus);
}
}
);
}
Payment Enquiry
We have explain the main usage for the Payment Inquiry function, that 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.
function getPaymentStatus() {
var key = 'payment id or invoice id'
var keyType = MFKeyType.PAYMENTID // if key is payment id
// var keyType = MFKeyType.INVOICEID // if key is invoice id
var paymentStatusRequest = new MFPaymentStatusRequest(key, keyType);
MFPaymentRequest.sharedInstance.getPaymentStatus(paymentStatusRequest, MFLanguage.ENGLISH, (response: Response) => {
if (response.getError()) {
alert('error: ' + response.getError().error)
} else {
alert(response.getBodyString())
// var paymentStatusResponse = response.getBodyJson().getPaymentStatusResponse;
// var invoiceId = paymentStatusResponse.InvoiceId
// alert('success with Invoice Id: ' + invoiceId + ', Invoice status: ' + paymentStatusResponse.InvoiceStatus);
}
}
);
}
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.
In Apple Pay
You can use In Apple Pay in and don't have to open in web view by usinf MFInAppApplePayView
1- First setup MFInAppApplePayView
and get refernce for it:
MFInAppApplePayView
and get refernce for it:function inAppApplePayView() {
return <View style={{ height:60, margin: 0, marginTop: 0, flexDirection: 'column', padding: 0, justifyContent: 'space-evenly', width: '100%' }}>
<MFInAppApplePayView ref={ref => (this.inAppApplePayViewRef = ref)}/>
</View>;
}
return (
<View style={styles.container}>
.
.
{inAppApplePayView()}
)
2- Initiate session and get session id
useEffect(() => {
initiateSessionForInAppApplePay()
}, []);
function initiateSessionForInAppApplePay() {
MFPaymentRequest.sharedInstance.initiateSession(MFLanguage.ENGLISH, (response: Response) => {
hideLoading()
if (response.getError()) {
alert('error: ' + response.getError().error);
}
else {
executePaymentForInAppApplePay(response.getSessionId(), response.getCountryCode())
}
});
}
3(1)- Then call load
method by apple pay reference with session id and the request:
load
method by apple pay reference with session id and the request:function executePaymentForInAppApplePay(sessionId, countryCode) {
let request = executeInAppApplePayResquestJson()
// alert(request.displayCurrencyIso)
// showLoading()
this.inAppApplePayViewRef.load(sessionId, countryCode, request, MFLanguage.ENGLISH, (response) => {
// hideLoading()
if (response.get
Error()) {
alert('error3: ' + response.getError())
}
else {
var invoiceId = response.getInvoiceId();
var paymentStatusResponse = response.getBodyJson().Data;
alert('success with Invoice Id: ' + invoiceId + ', Invoice status: ' + paymentStatusResponse.InvoiceStatus);
}
});
}
3(2)- Please note you can also call loadWithStartLoading
method instead of load
if you want to show any loading while paying by Apple Pay, it is same load
method plus startLoading
callback:
loadWithStartLoading
method instead of load
if you want to show any loading while paying by Apple Pay, it is same load
method plus startLoading
callback:function executePaymentForInAppApplePay(sessionId, countryCode) {
let request = executeInAppApplePayResquestJson()
showLoading()
this.inAppApplePayViewRef.loadWithStartLoading(sessionId, countryCode, request, MFLanguage.ENGLISH, () => {
showLoading()
}, (response) => {
hideLoading()
if (response.getError()) {
alert('error3: ' + response.getError().error)
}
else {
var invoiceId = response.getInvoiceId();
var paymentStatusResponse = response.getBodyJson().Data;
alert('success with Invoice Id: ' + invoiceId + ', Invoice status: ' + paymentStatusResponse.InvoiceStatus);
}
});
}
Here you should set screen
MFWebView
in navigation to handle payment, and pass options asoptions={MFWebView.navigationOptions}
to custom navigation bar, also you should passmode
asmode="modal"
to present payment screen modally.
The demo has full details about all myfatoorah-reactnative funtions and how to use them, please check it.
Updated 4 months ago