Requirements
- React-native
v0.60+
- iOS version
11+
- Android minSDK version
19
Getting started
npm i @network-international/react-native-ngenius
Note for iOS projects
If your project is using iOS deployment target 10, you need to increase it to 11.
In order to upgrade the versions do the following changes
- Change the iOS deployment version in
your-project/ios/Podfile
as followsplatform :ios, '11.0'
- Open the
.xcworkspacefile
inside the following directoryyour-project/ios/yourproject.xcworkspace
and change the deployment target to 11.0.
Card payment example
import { initiateCardPayment } from '@network-international/react-native-ngenius';
// order is the order response received from NGenius create order API
const makeCardPayment = async () => {
try {
const resp = await initiateCardPayment(order);
} catch (err) {
console.log({ err });
}
};
Samsung Pay example
import { initiateSamsungPay } from '@network-international/react-native-ngenius';
// order is the order response received from NGenius create order API
// merchantName is the name of merchant's establishment
// serviceId is the serviceId that is generated in the Samsung Pay developer portal
const makeSamsungPayPayment = async () => {
try {
const resp = await initiateSamsungPay(order, merchantName, serviceId);
} catch (err) {
console.log({ err });
}
};
Detailed implementation guide can be found here
Apple Pay example
import { initiateApplePay } from '@network-international/react-native-ngenius';
// order is the order response received from NGenius create order API
// mid is the merchant ID that is generated in the Apple developer portal
// countryCode is the country code of the transaction country Eg: AE for UAE
const makeApplePayPayment = async () => {
try {
const resp = await initiateApplePay(order, {
merchantIdentifier: '', // Merchant ID created in Apple's portal
countryCode: '', // Country code of the order
merchantName: '', // name of the merchant to be shown in Apple Pay button
});
} catch (err) {
console.log({ err });
}
};
Detailed guide can be found here
Configure SDK language
import { configureSDK } from '@network-international/react-native-ngenius';
configureSDK({
language: isEnglish ? 'en' : 'ar'
});
Configure SDK to show order amount
import { configureSDK } from '@network-international/react-native-ngenius';
configureSDK({
shouldShowOrderAmount: true
});
Check if Samsung Pay is enabled
import { isSamsungPaySupported } from '@network-international/react-native-ngenius';
const isSamsungPayEnabled = await isSamsungPaySupported();
Check if Apple Pay is enabled
import { isApplePaySupported } from '@network-international/react-native-ngenius';
const isApplePayEnabled = await isApplePaySupported();
Features supported in the SDK
Feature | Android support | iOS support |
---|---|---|
initiateCardPayment | ✅ | ✅ |
initiateSamsungPay | ✅ | 🚫 |
initiateApplePay | 🚫 | ✅ |
configureSDK - shouldShowOrderAmount | ✅ | 🚫 |
configureSDK - language | 🚫 | ✅ |
Using the executeThreeDSTwo
SDK method
executeThreeDSTwo
SDK methodThe executeThreeDSTwo
method can be used by customers integrating with the React Native SDK to invoke the EMV 3-D Secure workflow on behalf of card-holders. It is typically used in conjunction with the savedCard
(tokenization) functionality to provide a simple way of combining tokenized payment experiences with the security of an EMV 3-D Secure cardholder authentication step.
executeThreeDSTwo(paymentResponse)
paymentResponse
(in this context) is the complete JSON response sent by N-Genius Online to the merchant server for the savedCard
payment request API.