Vous pouvez maintenant importer la dépendance KKiaPay dans votre page :
1
import{
2
openKkiapayWidget,
3
addKkiapayListener,
4
removeKkiapayListener,
5
}from"kkiapay";
Copied!
Usage
Définissez une fonction qui vous permettra d'afficher la fenêtre de paiement KKiaPay :
1
<script>
2
import{
3
openKkiapayWidget,
4
removeKkiapayListener,
5
addKkiapayListener,
6
}from"kkiapay";
7
8
functionopen(){
9
openKkiapayWidget({
10
amount:1000,
11
api_key:"xxxxxxxxxxxxxxxx",
12
sandbox:true,
13
phone:"97000000",
14
});
15
}
16
</script>
Copied!
Vous pouvez maintenant utiliser cette fonction au sein de votre template afin d'ouvrir la fenêtre de paiement :
1
<main>
2
<buttonon:click={open}> click me </button>
3
</main>
Copied!
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 :
1
<script>
2
import{ onMount, onDestroy }from"svelte";
3
import{
4
openKkiapayWidget,
5
removeKkiapayListener,
6
addKkiapayListener,
7
}from"kkiapay";
8
9
functionsuccessHandler(){
10
console.log("payment success...");
11
}
12
13
onMount(()=>{
14
addKkiapayListener("success", successHandler);
15
console.log("the component has mounted");
16
});
17
</script>
Copied!
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 :