Intégration de KKiaPay dans une application React.js

Installation

Veuillez exécuter la commande suivante :

npm install kkiapay-react

Importation

Vous pouvez maintenant importer la dépendance KKiaPay dans votre page :

import { useKKiaPay } from 'kkiapay-react';

Si vous êtes en NextJs, vous devrez ajouter la directive React "use client" au début du fichier, au-dessus de vos importations.

'use client'

import { useKKiaPay } from 'kkiapay-react';

Usage

Définissez une fonction qui vous permettra d'afficher la fenêtre de paiement KKiaPay :

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

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

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

Important !

Afin d'éviter toute fraude, procédez à la vérification côté serveur de l'opération de transaction. Pour cela, apprenez-en plus sur les SDKs Serveurs.

Vous pouvez souscrire aux événements liés à l'opération de paiement avec la fonction addKkiapayListener. Pour être notifié du statut réussi d'une opération de paiement, vous pouvez procéder comme suit :

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
}

Parce qu'elle est ajoutée dans le hook useEffect, la fonction addKkiapayListener sera appelée à chaque fois que votre composant sera rendu. Si le composant est rendu n fois, la fonction sera enrégistrée n fois.

Afin d’eviter les fuites de mémoire, nous aurons besoin de supprimer le callback lorsque le composant est détruit :

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
}