fanitepay-react-v2 v2.0.0

Introduction

The React SDK helps you create seamless payment experiences in your React mobile or web app. By connecting to our modal, you can start collecting payment in no time.

Available features include:

• Collections: Mobile money.

Table of Contents

1. Installation
2. Support
3. License

Requirements

1. Node version >= 6.9.x and npm >= 3.x.x
2. React version >= 14

Installation

Install the SDK

$ npm install fanitepay-react-v1

# or
$ yarn add fanitepay-react-v1

Initialization

Import useFanitepay to any component in your application and pass your config

// PaymentForm.js
import React, { useState } from 'react';
import UserData from 'fanite-convoy';

const PaymentForm = () => {
  const [formData, setFormData] = useState({
    name: '',
    mobile: '',
    email: '',
    address: '',
  });

  const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value,
    });
  };

  const handleSubmit = () => {
    // Handle form submission
    // You can use formData to perform any necessary actions before initiating payment
    // ...

    // Example: Initiate payment using fanite-convoy package
    UserData.handlePaymentClick();
  };

  return (
    <div>
      <label htmlFor="name">Full Name:</label>
      <input type="text" name="name" onChange={handleChange} value={formData.name} />

      <label htmlFor="mobile">Mobile Number:</label>
      <input type="number" name="mobile" onChange={handleChange} value={formData.mobile} />

      <label htmlFor="email">Email:</label>
      <input type="email" name="email" onChange={handleChange} value={formData.email} />

      <label htmlFor="address">Delivery Address:</label>
      <input type="text" name="address" onChange={handleChange} value={formData.address} />

      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
};

export default PaymentForm;

Usage

Add Fanitepay to your projects as a component or a react hook:

1. As a Component
2. Directly in your code
3. Making recurrent payments

Components

import React from 'react';
import { FanitePayButton } from 'fanitepay-react-v1';
import { useFanitepay } from 'fanitepay-react-v1/paymentHandler'; // Update with your actual package name

export default function App() {
  const config = {
        status: true,
        message: "Charge initated",
        payref: "fnt-p-********",
        data: {
            public_key: 'FNTPPUBK-**************************-X',
            type: "mobilemoney",
            amount: 1000,
            currency: "UGX",
            customer: {
                name: "john doe Isaac",
                email: "customer@gmail.com",
                phoneNumber: "2567******"
            },
            metadata: {
                marchantID: "********",
                marchantName: "mybusiness",
              marchantEmail: "example@gmail.com"
            },
            description: "my business",
            authorization: {
                redirect: "https://redirect.url.com"
            }
        }
    };

  const fwConfig = {
    ...config,
    text: 'Pay with FanitePay!',
    onClose: () => {
      // Handle close event if needed
    },
  };

  return (
    <div className="App">
      <h1>Click to Pay</h1>
     <FanitePayButton
  {...fwConfig}
  callback={(response) => {
    // Extract payment data from the response
    const paymentData = response.data;

    // Send payment data to the server
    useFanitepay(paymentData)
      .then((serverResponse) => {
        // Handle the server response
        console.log('Server response:', serverResponse);

        // Check the payment status in the server response
        if (serverResponse.status === 'success') {
          // Payment was successful
          // Additional logic here if needed
        } else {
          // Handle other server response statuses or errors
        }
      })
      .catch((error) => {
        console.error('Error sending payment data to server:', error);
      });
  }}
/>

    </div>
  );
}

// App.js import React from 'react'; import PaymentForm from './PaymentForm';

const App = () => { return (

<div>
  <h1>Payment Form</h1>
  <PaymentForm />
</div>

); };

export default App;

# Support

For additional assistance using this library, please create an issue on the Github repo or contact the developer experience (DX) team via [email](mailto:info@fanitepay.com).



<a id="license"></a>

## License

By contributing to this library, you agree that your contributions will be licensed under its [MIT license](/LICENSE.md).

Copyright (c) FanitePay.