Plugins & SDKs
SDKs
React

Loov Solutions Payment React SDK

The Loov Solutions Python 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

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);
  });

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);
  });

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);
  });

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);
  });

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;
PythonCode Snippets