@adsesugh/monnify-react-native/readme.md

A React Native component for integrating Monnify payment gateway using WebView for both React Native CLI and Expo.

# 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:

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

2. Install react-native-webview if you haven't already:
   ```bash
    npm install react-native-webview
    # or
    yarn add react-native-webview
   ```

### For Expo:
1. Install the package via npm or yarn:
    ```bash
    npx expo install @adsesugh/monnify-react-native
   ```

2. Install react-native-webview using Expo:
    ```bash
    npx expo install react-native-webview
   ```
   
## Basic Example

```typescript
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: 'admin@gmail.com',
    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
 ```typescript
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: 'admin@gmail.com',
    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',
    },
});
```