Intégration de KKiaPay dans une application Angular
Veuillez exécuter la commande suivante :
npm install [email protected]
Vous pouvez maintenant importer la dépendance KKiaPay dans votre page :
import {
openKkiapayWidget,
addKkiapayListener,
removeKkiapayListener,
} from "kkiapay";
Définissez une fonction qui vous permettra d'afficher la fenêtre de paiement KKiaPay :
import { Component } from '@angular/core';
import { openKkiapayWidget, addKkiapayListener,removeKkiapayListener } from 'kkiapay'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'kkiapay-sample-project';
open() {
openKkiapayWidget({
amount: 1000,
api_key: "xxxxxxxxxxxxxxx",
sandbox: true,
phone: "97000000",
})
}
}
Vous pouvez maintenant utiliser cette fonction au sein de votre template afin d'ouvrir la fenêtre de paiement :
<div>
<button (click)="open()">
Payer Maintenant
</button>
</div>
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 :
import { Component } from '@angular/core';
import { openKkiapayWidget, addKkiapayListener,removeKkiapayListener } from 'kkiapay'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'kkiapay-sample-project';
open() {
openKkiapayWidget({
amount: 1000,
api_key: "xxxxxxxxxxxxxxx",
sandbox: true,
phone: "97000000",
})
}
successHandler() {
console.log("payment success...");
}
ngOnInit() {
addKkiapayListener('success',this.successHandler)
}
}
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 :
import { Component } from '@angular/core';
import { openKkiapayWidget, addKkiapayListener,removeKkiapayListener } from 'kkiapay'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'sample-project-angular';
open() {
openKkiapayWidget({
amount: 1000,
api_key: "xxxxxxxxxxxxxxx",
sandbox: true,
phone: "97000000",
})
}
successHandler() {
console.log("payment success...");
}
ngOnInit() {
addKkiapayListener('success',this.successHandler)
}
ngOnDestroy(){
removeKkiapayListener('success',this.successHandler)
}
}