React native SDK

📘

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 follows platform :ios, '11.0'
  • Open the .xcworkspacefile inside the following directory your-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 });
    }
};

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 });
    }
};

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

FeatureAndroid supportiOS support
initiateCardPayment:white-check-mark::white-check-mark:
initiateSamsungPay:white-check-mark::no-entry-sign:
initiateApplePay:no-entry-sign::white-check-mark:
configureSDK - shouldShowOrderAmount:white-check-mark::no-entry-sign:
configureSDK - language:no-entry-sign::white-check-mark:

Using the executeThreeDSTwo SDK method

The 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.