React Native Wrapper for Monnify Mobile SDKs

for Android & iOS

Index

1. Description
2. Installation
3. Usage

1. Description

This module provides a wrapper to add Monnify Payments to your React Native application.

2. Installation

npm i @monnify/react-native-sdk --save

OR

yarn add @monnify/react-native-sdk

Configuration

Configurations required for iOS

1. Go to the Podfile under the ios directory and update the iOS version to 11 or higher.
2. In the Podfile add install! 'cocoapods', :disable_input_output_paths => true under platform :ios
3. In the Podfile add pod 'SocketRocket', :modular_headers => true under target 'ProjectName' do section
4. Run pod install in the ios directory.
5. Open the file with the .xcworkspace extension from your Finder app.
6. Click on Project in the left panel then under the Target section click on the first option(which should be the ios target).
7. Under the Deployment info select a target version that is at least ios 11.0 or greater.

Configurations required for Android

Add this maven repository to the android/build.gradle

allprojects {
    repositories {
        ...
        maven {
            url 'http://dl.bintray.com/teamapt/MonnifyAndroidSdk'
        }
    }
}

Manual Config (Android)

• The following steps are optional, should be taken if you have not run react-native link @monnify/react-native-sdk already.
• Add the following in your android/settings.gradle file:

include ':@monnify/react-native-sdk'
project(':@monnify/react-native-sdk').projectDir = new File(rootProject.projectDir, '../node_modules/@monnify/react-native-sdk/android')

• Add the following in your android/app/build.grade file:

defaultConfig {
    ...
    multiDexEnabled true
}

dependencies {
    ...
    implementation 'com.android.support:multidex:1.0.3'
    implementation project(':@monnify/react-native-sdk')
}

• Add the following in your ...MainApplication.java file:

import com.mnfyrnsdk.rnmonnifymodule.RNMonnifyPackage;

@Override
protected List<ReactPackage> getPackages() {
    @SuppressWarnings("UnnecessaryLocalVariable")
    List<ReactPackage> packages = new PackageList(this).getPackages();
    packages.add(new RNMonnifyPackage());
    return packages;
}

3. Usage

Initialize Library

Somewhere high up in your project and way before calling any other method exposed by this library, your index file or equivalent is a good spot, ensure you initialize the library with your api key, contractCode and applicationMode as follows:

import RNMonnify from '@monnify/react-native-sdk';

RNMonnify.initialize({
  apiKey: 'MK_TEST_VR7J3UAACH',
  contractCode: '4876165459',
  applicationMode: 'TEST'
});

Initialize Payment (iOS & Android)

Using the @monnify/react-native-sdk module, you can start and complete a transaction with the Monnify Android and iOS SDKs. With this option, you pass both your payment properties to the SDK - with this worklow, you initiate and complete a transaction on your mobile app.

RNMonnify.initializePayment(paymentParams);

paymentParams is a Javascript Object representing the parameters of the charge to be initiated and RNMonnify.initializePayment() returns a Javascript Promise like:

import RNMonnify from '@monnify/react-native-sdk';

chargeCard() {

	RNMonnify.initializePayment({
        amount: 1200.5,
        customerName: 'Tobi Adeyemi',
        customerEmail: '[email protected]',
        paymentReference: '222',
        paymentDescription: 'Foodies',
        currencyCode: 'NGN',
        incomeSplitConfig: [],
    })
	.then(response => {
	  console.log(response); // card charged successfully, get reference here
	})
	.catch(error => {
	  console.log(error); // error is a javascript Error object
	  console.log(error.message);
	  console.log(error.code);
	})

}

Request Signature

| Argument | Type | Description | | ---------------------------- | :-----: | :----------------------------------------------------------------------------- | | amount | float | the transaction amount | | customerEmail | string | email of the user to be charged | | currencyCode | string | sets the currency for the transaction e.g. NGN | | paymentDescription | string | description of payment | | customerName | string | sets the name of customer | | paymentReference | string | sets the transaction reference which must be unique per transaction |

Response Object

An object of the form is returned from a successful charge

{
    paymentDate: '',
    amountPayable: 1200,
    amountPaid: 0,
    paymentMethod: 'CARD',
    transactionStatus: 'PENDING',
    transactionReference: 'trx_1k2o600w';
}