LoovPay React SDK

The LoovPay React SDK allows you to integrate the LoovPay system into your React applications. With this SDK, you can easily initiate and manage payments using mobile money or card payment methods.

Installation

You can install the LoovPay React SDK using npm:

npm install react-loovpay

Requirements

To use the LoovPay React SDK, make sure you have the following required fields:

• amount : The payment amount in the specified currency.
• currency : The currency code of the payment amount.
• description : Description of the payment purpose.
• name : Customer name.
• email : Customer email.
• operator : The mobile operator code used for the payment (e.g., "orange-money-cm").
• phoneNumber : Customer phone number.
• return_url : URL to redirect after successful payment.
• cancel_url : URL to redirect if payment is canceled.
• callback_url : URL for payment notifications (webhook).
• payment_mode : The chosen payment mode. Values: ALL, CARD, MOBILE_MONEY.

Usage

Pay In

import { LoovPay } from 'react-loovpay';

const loovPay = new LoovPay(AppKey, MerchantKey);

const data = {
  amount: 50000,
  currency: 'XAF',
  payment_mode: 'CARD',
  return_url: 'https://google.com?state=return_url',
  cancel_url: 'https://google.com?state=cancel',
  callback_url: 'https://webhook.site/9c647add-6b43-4832-bd5d-db529c7c9b79',
  description: 'test payment de service en ligne',
  name: 'Leonardo Dada',
  email: '[email protected]',
  phoneNumber: '237699009999',
};

loovPay.payIn(data)
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.error(error);
  });

Success Response

Upon successful payment initiation, the API will respond with a status code of 200 along with the following response body:

{
    "status": 200,
    "message": "Payment initiated",
    "payment_url": "https://api.secure.payment.loov-solutions.com/payinit/oa7DZzEd8gwJ5PYQ",
    "reference": "LOC8SXoZuDVEvu1ODxs"
}

Mobile SoftPay

import { LoovPay } from 'react-loovpay';

const loovPay = new LoovPay(AppKey, MerchantKey);

const data = {
  amount: 50000,
  operator: 'orange-money-cm',
  callback_url: 'https://webhook.site/9c647add-6b43-4832-bd5d-db529c7c9b79',
  name: 'Leonardo Dada',
  email: '[email protected]',
  phoneNumber: '237699009999',
};

loovPay.mobileSoftPay(data)
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.error(error);
  });

Success Response

Upon successfully initiating the mobile payment, the API will respond with a JSON object containing payment information.

{
    "error": false,
    "status": "success",
    "amount": "500",
    "fees": 10,
    "message": "Confirm the payment by entering your PIN code and you will receive an SMS. Thank you for using Orange Money services.",
    "reference": "LOMoac3hqZXuBHUHKy8"
}

Supported Operators

| country | operator | operator_code | | ------- | -------- | ------------- | | Benin | Mtn | mtn-benin | | Benin | Moov | moov-benin | | Cameroon | Orange | orange-money-cm | | Cameroon | Mtn | mtn-cm | | Ivory Coast | Mtn | mtn-ci | | Ivory Coast | Moov | moov-ci | | Mali | Moov | moov-ml | | Mali | Orange | orange-money-ml | | Senegal | Orange | orange-money-senegal | | Senegal | Expresso | expresso-senegal | | Senegal | Free | free-money-senegal | | Senegal | Wave Senegal | wave-senegal | | Togo | T-money | t-money-togo |

Pay Out

import { LoovPay } from 'react-loovpay';

const loovPay = new LoovPay(AppKey, MerchantKey);

const data = {
  amount: 50000,
  operator: 'orange-money-cm',
  phoneNumber: '237699009999',
  currency: 'XAF',
};

loovPay.payOut(data)
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.error(error);
  });

Success Response

Upon successfully initiating the mobile payment, the API will respond with a JSON object containing payment information.

{
    "error": false,
    "status": "success",
    "amount": "50000",
    "reference": "MOMAVzvTY7DLyiRCR38",
    "message": "Transfer of 500 XAF transferred to 237699009999"
}

Check Status

import { LoovPay } from 'react-loovpay';

const loovPay = new LoovPay(AppKey, MerchantKey);

loovPay.checkStatus('your_reference')
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.error(error);
  });

Success Response

Upon successfully retrieving the payment status, the API will respond with a JSON object containing the payment status information.

Check Status

{
    "error": false,
    "reference": "your_reference",
    "amount": "500",
    "currency": "XAF",
    "status": "initiated",
    "date": "2023-08-08 09:08:17",
    "customer": null
}

SetUp Loader and SDK

import React, { useState } from 'react';
import './App.css';
import { LoovPay, LoovPayLoadComponent } from 'react-loovpay';

// component where you make your request
function App() {
  const [loading, setLoading] = useState(false);
  const loovPay = new LoovPay('YourAppKey', 'YourMerchantKey');
  loovPay.setLoadingCallback(setLoading);

  const handleSdkMethod = async () => {
    loovPay.startLoading();
    try {
      await loovPay.checkStatus('reference');
      loovPay.stopLoading();
    } catch (error) {
      loovPay.stopLoading();
    }
  };

  return (
    <div className="App">
      {loading && <LoovPayLoadComponent />}
      <button onClick={handleSdkMethod}>Execute SDK Method</button>
    </div>
  );
}

export default App;

Security Vulnerabilities

If you discover a security vulnerability within the LoovPay React SDK, please report it to Leonardo Dada via [email protected]. We take security seriously and appreciate your help in disclosing any vulnerabilities responsibly.

License

The LoovPay React SDK is open-source software licensed under the MIT license. You can find the license details in the LICENSE file.

Credits

This SDK was developed by Leonardo Dada with contributions from Loov-Solutions.

Special thanks to the LoovPay team for providing the necessary resources and support to create this React SDK.

We hope this SDK simplifies the integration of LoovPay Payment into your React applications and enables you to provide a seamless payment experience for your users. If you have any questions, issues, or suggestions, please feel free to open an issue on our GitHub repository. We appreciate your feedback and contributions to help make this SDK even better.