Using KKiaPay with Next.js

Installation

Please run the following command :

npm install kkiapay-react

Import

You can now import the kkiapay dependency into your page :

'use client'

import { useKKiaPay } from 'kkiapay-react';
import { useEffect } from 'react';

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 and proceed as follows :

function Home() {
  const { openKkiapayWidget, addKkiapayListener } = useKKiaPay();

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

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

  // ..... 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() {
  const { 
    openKkiapayWidget,
    addKkiapayListener,
    removeKkiapayListener
  } = useKKiaPay();

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

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