Using KKiaPay with React.js

Installation

Please run the following command :

npm install kkiapay@next

Import

You can now import the kkiapay dependency into your page :

import {
  openKkiapayWidget,
  addKkiapayListener,
  removeKkiapayListener,
} from "kkiapay";

Usage

Define a function that will display the KKiaPay Widget :

function Home() {
  function open() {
    openKkiapayWidget({
      amount: 4000,
      api_key: "xxxxxxxxxxxxxxxxxx",
      sandbox: true,
      email: "[email protected]",
      phone: "97000000",
    });
  }

  return (
    <div>
      <button onClick={open}>click me</button>
    </div>
  );
}

Important !

To avoid fraud, perform the server-side verification of the transaction operation. Learn more about the Admin SDKs (Server-Side).

You can subscribe to payment transaction events with the addKkiapayListener function. To be notified of the successful status of a payment transaction, you can proceed as follows :

function Home() {
  // ..... others components options
  function successHandler(response) {
    console.log(response);
  }

  useEffect(() => {
    addKkiapayListener('success',successHandler)
  }, []);

  // ..... others components options
}

Because it is added in the useEffect hook, the addKkiapayListener function will be called each time your component is rendered. If the component is returned n times, the function will be enrolled n times.

In order to avoid memory leaks, we will need to delete the callback when the component is destroyed :

function Home() {
  // ..... others components options
  function successHandler(response) {
    console.log(response);
  }

  useEffect(() => {
    addKkiapayListener('success',successHandler)
    return () => {
      removeKkiapayListener('success',successHandler)
    };
  }, []);
  // ..... others components options
}