@netappsng/react-netappspaysdk

The @netappsng/react-netappspaysdk is a library that allows developers to integrate the NetApps payment gateway into their React applications. It provides a hook called useNetAppsPay that allows developers to initiate payments with the NetApps payment gateway.

Installation: The library can be installed using npm or yarn.

install

Installation: The library can be installed using npm or yarn.

npm install --save @netappsng/react-netappspaysdk

or

yarn add @netappsng/react-netappspaysdk

Usage

Note: The library requires that the payment amount should be passed in kobo for NGN (Nigerian Naira) and cents for USD (US Dollars). For instance, passing 1000 as the amount in the example below will give you 10 Naira, while passing 1000 as the amount for USD will give you 10 US Dollars. This is because kobo is the smallest unit of the Naira, while cents are the smallest unit of the US Dollar.

import React from "react";
import { useNetAppsPay } from "@netappsng/react-netappspaysdk";

const App = () => {
  const { initPayment, isReady } = useNetAppsPay({
    publicKey: "b1108bfb3e2542b287162ef27da838f9",
    onError: (res) => console.log(res),
    onSuccess: (res) => console.log(res)
  });

  const handlePay = () => {
    if(!isReady) return alert('Gateway not ready')
    initPayment({
      currency: "NGN",
      amount: 1000,
      phone: "080****",
      tx_ref: "knjhgjkllhgfhojihugfyhiguf",
      returnUrl: "https://www.netapps.ng",
      paymentChannels: "card,ussd,transfer,payatitude",
      email: "[e-mail]",
      fullname: "Nwoko Ndubueze",
      narration: "Testing"
    });
  };

  return (<button onClick={handlePay}>Test</button>);
};

export default App;

The useNetAppsPay hook takes an object with three properties:

• publicKey: This is the public key for the NetApps payment gateway.

• onError: A callback function that is called when there is an error during payment processing.

• onSuccess: A callback function that is called when the payment is successful.

• The initPayment function takes an object with the following properties:

• currency: The currency of the payment. Currently, only NGN is supported.

• amount: The amount to be paid.

• phone: The phone number of the customer initiating the payment.

• tx_ref: A unique transaction reference generated by the merchant.

• returnUrl: The URL to redirect the user to after payment processing.

• paymentChannels: A comma-separated list of payment channels to use.

• email: The email address of the customer initiating the payment.

• fullname: The name of the customer initiating the payment.

• narration: A description of the payment.

The isReady property is a boolean that indicates whether the gateway is ready for use. If the gateway is not ready, it means that there was an error during initialization, and the gateway cannot be used.

Conclusion: The @netappsng/react-netappspaysdk library is a simple and easy-to-use library for integrating the NetApps payment gateway into React applications. With just a few lines of code, developers can initiate payments and receive callbacks when payments are successful or fail.