loov-solutions-payment-react-sdk6 v1.0.3

Loov Solutions Payment React SDK

The Loov Solutions React SDK allows you to integrate the Loov Solutions payment 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 Loov Solutions React SDK using npm:

npm install loov-solutions-payment-react-sdk6

Requirements

To use the Loov Solutions 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 'loov-solutions-payment-react-sdk6';

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: 'Arolle Fona',
  email: 'arolle000@gmail.com',
  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 'loov-solutions-payment-react-sdk6';

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: 'Arolle Fona',
  email: 'arolle000@gmail.com',
  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

Pay Out

import LoovPay from 'loov-solutions-payment-react-sdk6';

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 'loov-solutions-payment-react-sdk6';

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 'loov-solutions-payment-react-sdk6';

// 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 Loov Solutions React SDK, please report it to Leonardo Dada via dadasimo@mounir-holding.com. We take security seriously and appreciate your help in disclosing any vulnerabilities responsibly.

License

The Loov Solutions 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 Loov Solutions team for providing the necessary resources and support to create this React SDK.

We hope this SDK simplifies the integration of Loov Solutions 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.