Monnify SDK for React Native CLI and Expo

@adsesugh/monnify-react-native is a React Native package that simplifies the integration of the Monnify payment gateway into React Native applications. This package is compatible with both React Native CLI and Expo projects.

Features

• Easy integration of the Monnify payment gateway.
• Supports payment in Nigerian Naira (NGN).
• Handles payment completion and closure callbacks.
• Compatible with both React Native CLI and Expo.

Installation

For React Native CLI:

1. Install the package via npm or yarn:

   npm install @adsesugh/monnify-react-native
   # or
   yarn add @adsesugh/monnify-react-native

2. Install react-native-webview if you haven't already:

    npm install react-native-webview
    # or
    yarn add react-native-webview

For Expo:

1. Install the package via npm or yarn:

   npx expo install @adsesugh/monnify-react-native

2. Install react-native-webview using Expo:

   npx expo install react-native-webview

Basic Example

import React, { useState } from 'react';
import { StyleSheet, View, Text, Modal, Pressable } from 'react-native';
import Monnify from '@adsesugh/monnify-react-native'

export default function App() {
  const [modalVisible, setModalVisible] = useState(false);

  const paymentParameters = {
    amount: 5000,
    currency: 'NGN',
    reference: `${new String(new Date().getTime())}`,
    customerFullName: 'John Doe',
    customerEmail: '[email protected]',
    customerMobileNumber: '08012345689',
    apiKey: 'MK_PROD_P2HCHYTYA4R',
    contractCode: "92822828827",
    paymentDescription: 'Payment for goods',
    mode: 'TEST'
  };

  const onSuccess = (response: any) => {
    console.log('Payment Successful:', response);
    // Handle success scenario
  };
  
  const onError = (response: any) => {
    console.log('Payment Failed:', response);
    // Handle error scenario
  };
  
  const onDismiss = () => {
    setModalVisible(!modalVisible)
  };
 
  return (
        <View style={styles.container}>
            <Monnify
                  paymentParams={paymentParameters}
                  onSuccess={onSuccess}
                  onError={onError}
                  onDismiss={onDismiss}
                  visible={modalVisible}
            />
            <Pressable
                style={[styles.button, styles.buttonOpen]}
                onPress={() => setModalVisible(true)}>
                <Text style={styles.textStyle}>Show Modal</Text>
            </Pressable>
        </View>
  );
}

const styles = StyleSheet.create({
  container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    button: {
        borderRadius: 20,
        padding: 10,
        elevation: 2,
    },
    buttonOpen: {
        backgroundColor: '#F194FF',
    },
    textStyle: {
        color: 'white',
        fontWeight: 'bold',
        textAlign: 'center',
    },
});

Props

| Prop | Type | Required | Description | |----------------------|---------------------------|----------|--------------------------------------------------------------------------------------------------------| | amount | number | Yes | The amount to be paid. | | currency | string | Yes | The currency in which payment will be made (e.g., "NGN"). | | reference | string | Yes | A unique reference for the payment transaction. | | customerFullName | string | Yes | The full name of the customer making the payment. | | customerEmail | string | Yes | The email address of the customer making the payment. | | apiKey | string | Yes | The API key provided by Monnify. | | contractCode | string | Yes | The contract code provided by Monnify. | | paymentDescription | string | Yes | A description of the payment. | | metadata | Record<string, any> | No | Additional metadata to be sent with the payment. | | incomeSplitConfig | Array<Object> | No | Configuration for splitting the payment into sub-accounts. | | onSuccess | (response: any) => void | No | Callback function that is invoked when the transaction is completed successfully. | | onError | (data: any) => void | No | Callback function that is invoked when the payment modal is closed without completing the transaction. | | onDismiss | () => void | No | Callback function that is invoked when the payment modal is closed. | | mode | string | Yes | This could be 'TEST' for development and 'LIVE' for production. E.g mode="TEST" | |

Example with Income Split Configuration

import Monnify from '@adsesugh/monnify-react-native';
import React, { useState } from 'react';
import { StyleSheet, View, Text, Modal, Pressable } from 'react-native';


export default function App() {
 const [modalVisible, setModalVisible] = useState(false);

 const paymentParameters = {
   amount: 5000,
   currency: 'NGN',
   reference: `${new String(new Date().getTime())}`,
   customerFullName: 'John Doe',
   customerEmail: '[email protected]',
   customerMobileNumber: '08012345678',
   apiKey: 'MK_TEST_P2HGJFA4',
   contractCode: "3520752572",
   paymentDescription: 'Payment for goods',
   mode: 'TEST',
   metadata: {name: "Damilare", age: 45},
   incomeSplitConfig: [
           {
           subAccountCode: "MFY_SUB_342113621921",
           feePercentage: 50,
           splitAmount: 1900,
           feeBearer: true,
           },
           {
           subAccountCode: "MFY_SUB_342113621922",
           feePercentage: 50,
           splitAmount: 2100,
           feeBearer: true,
           },
       ]
   };

 const onSuccess = (response: any) => {
   console.log('Payment Successful:', response);
   // Handle success scenario
 };
 
 const onError = (response: any) => {
   console.log('Payment Failed:', response);
   // Handle error scenario
 };
 
 const onDismiss = () => {
   setModalVisible(!modalVisible)
 };

 return (
       <View style={styles.container}>
           <Monnify
               paymentParams={paymentParameters}
               onSuccess={onSuccess}
               onError={onError}
               onDismiss={onDismiss}
               visible={modelVisible}
           />
           <Pressable
               style={[styles.button, styles.buttonOpen]}
               onPress={() => setModalVisible(true)}>
               <Text style={styles.textStyle}>Pay Now</Text>
           </Pressable>
       </View>
 );
}

const styles = StyleSheet.create({
 container: {
       flex: 1,
       justifyContent: 'center',
       alignItems: 'center',
   },
   button: {
       borderRadius: 20,
       padding: 10,
       elevation: 2,
   },
   buttonOpen: {
       backgroundColor: '#F194FF',
   },
   textStyle: {
       color: 'white',
       fontWeight: 'bold',
       textAlign: 'center',
   },
});