FR 1.0.0
Intégration de KKiaPay dans une application Svelte
Installation
Veuillez exécuter la commande suivante :
1
npm install [email protected]
Copied!
Importation
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
function open() {
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
<button on: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 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 :
1
<script>
2
import { onMount, onDestroy } from "svelte";
3
import {
4
openKkiapayWidget,
5
removeKkiapayListener,
6
addKkiapayListener,
7
} from "kkiapay";
8
9
function successHandler() {
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 :
1
<script>
2
//... others options
3
onDestroy(() => {
4
removeKkiapayListener("success", successHandler);
5
});
6
</script>
Copied!
Copy link