Vous pouvez maintenant importer la dépendance KKiaPay dans votre page :
import{
openKkiapayWidget,
addKkiapayListener,
removeKkiapayListener,
}from"kkiapay";
Usage
Définissez une fonction qui vous permettra d'afficher la fenêtre de paiement KKiaPay :
<script>
import{
openKkiapayWidget,
removeKkiapayListener,
addKkiapayListener,
}from"kkiapay";
functionopen(){
openKkiapayWidget({
amount:1000,
api_key:"xxxxxxxxxxxxxxxx",
sandbox:true,
phone:"97000000",
});
}
</script>
Vous pouvez maintenant utiliser cette fonction au sein de votre template afin d'ouvrir la fenêtre de paiement :
<main>
<buttonon:click={open}> click me </button>
</main>
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 lesSDKs 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 :
<script>
import{ onMount, onDestroy }from"svelte";
import{
openKkiapayWidget,
removeKkiapayListener,
addKkiapayListener,
}from"kkiapay";
functionsuccessHandler(){
console.log("payment success...");
}
onMount(()=>{
addKkiapayListener("success", successHandler);
console.log("the component has mounted");
});
</script>
Parce qu'elle est ajoutée dans le hook mounted, 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 :