npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

bani-react

v1.0.8

Published

The Bani react Widget provides a simple and convenient payment flow for the web. It can be integrated with five easy steps, making it the easiest way to start accepting mobile money, crypto, bank transfer and third-party wallet services from your customer

Downloads

33

Readme

Bani React Payment Widget

The Bani react Payment Widget is a convenient and user-friendly payment solution for web applications. It enables businesses to easily accept payments through various channels such as mobile money, cryptocurrency, bank transfers, and third-party wallets. With just a few simple steps, you can integrate this widget into your application and start accepting payments securely.

Usage

  1. Install the Bani react Payment Widget package using npm or yarn.
  2. Import the useCheckout function from the bani-react package.
  3. Use the useCheckout function to get access to the BaniPopUp function.
  4. Implement a form or UI component to collect payment details from the user.
  5. On form submission, call the BaniPopUp function with the required parameters to initiate the payment flow.

Please refer to the documentation or code comments for more information on available options and customization.

Demo

demo image

Demo link: https://play-pay.bani.africa/link?donate-vera-wangg

Requirements

To use the Bani react Payment Widget, you need the following:

  • React and React-dom version 16 and above

Installation

You can install the Bani react Payment Widget using npm or yarn. Use the following command to install the package:

npm install bani-react

or

yarn add bani-react

Code Snippet

To integrate the Bani react Payment Widget into your application, you can use the following code snippet as an example:

For Javascript

import useCheckout from 'bani-react'

const ReactComponent = () => {

const { BaniPopUp } = useCheckout();

  const handleOnClose = (response) => {
    console.log('On close: ', response)
  }

  const handleOnSuccess = (response) => {
    console.log('On Success: ', response)
  }

const handleSubmit = () => {
  
      BaniPopUp({
        amount: "3000",
        phoneNumber: "0802 123 4567",
        email: "[email protected]",
        firstName: "Star",
        lastName: "Lord",
        merchantKey: "pub_test_EGB9QD8TQPV0ZD", //The merchant Bani public key
        metadata: { custom_ref: 'custom_ref' },
        onClose: handleOnClose,
        callback: handleOnSuccess,
      });
 };

   return (
    <div> 
    {
      // Your JSX here.
    }
    </div>
   )

}

export default ReactComponent;

For Typescript

import useCheckout, { BaniPopUpType, EventResponse} from 'bani-react'

const ReactComponent = () => {

const { BaniPopUp } = useCheckout();

const App = () => {
  const handleOnClose = (response: EventResponse) => {
    console.log('On close: ', response)
  }

  const handleOnSuccess = (response: EventResponse) => {
    console.log('On Success: ', response)
  }

const handleSubmit = () => {

     const data:BaniPopUpType = {
        amount: "3000",
        phoneNumber: "0802 123 4567",
        email: "[email protected]",
        firstName: "Star",
        lastName: "Lord",
        merchantKey: "pub_test_EGB9QD8TQPV0ZD", //The merchant Bani public key
        metadata: { custom_ref: 'custom_ref' },
        onClose: handleOnClose,
        callback: handleOnSuccess,
      }

      BaniPopUp(data);
 };

   return (
    <div> 
    {
      // Your TSX here.
    }
    </div>
   )

}

export default ReactComponent;

Make sure to replace the placeholder variables with the actual values from your application.

License

This project is licensed under the MIT License.