Intégration de KKiaPay dans une application Angular

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
import { Component } from '@angular/core';
2
import { openKkiapayWidget, addKkiapayListener,removeKkiapayListener } from 'kkiapay'
3
4
@Component({
5
selector: 'app-root',
6
templateUrl: './app.component.html',
7
styleUrls: ['./app.component.css']
8
})
9
10
export class AppComponent {
11
title = 'kkiapay-sample-project';
12
13
open() {
14
openKkiapayWidget({
15
amount: 1000,
16
api_key: "xxxxxxxxxxxxxxx",
17
sandbox: true,
18
phone: "97000000",
19
})
20
}
21
}
Copied!
Vous pouvez maintenant utiliser cette fonction au sein de votre template afin d'ouvrir la fenêtre de paiement :
1
<div>
2
<button (click)="open()">
3
Payer Maintenant
4
</button>
5
</div>
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
import { Component } from '@angular/core';
2
import { openKkiapayWidget, addKkiapayListener,removeKkiapayListener } from 'kkiapay'
3
4
@Component({
5
selector: 'app-root',
6
templateUrl: './app.component.html',
7
styleUrls: ['./app.component.css']
8
})
9
10
export class AppComponent {
11
title = 'kkiapay-sample-project';
12
13
open() {
14
openKkiapayWidget({
15
amount: 1000,
16
api_key: "xxxxxxxxxxxxxxx",
17
sandbox: true,
18
phone: "97000000",
19
})
20
}
21
22
successHandler() {
23
console.log("payment success...");
24
}
25
26
ngOnInit() {
27
addKkiapayListener('success',this.successHandler)
28
}
29
}
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
2
import { Component } from '@angular/core';
3
import { openKkiapayWidget, addKkiapayListener,removeKkiapayListener } from 'kkiapay'
4
5
@Component({
6
selector: 'app-root',
7
templateUrl: './app.component.html',
8
styleUrls: ['./app.component.css']
9
})
10
11
export class AppComponent {
12
title = 'sample-project-angular';
13
14
open() {
15
openKkiapayWidget({
16
amount: 1000,
17
api_key: "xxxxxxxxxxxxxxx",
18
sandbox: true,
19
phone: "97000000",
20
})
21
}
22
23
successHandler() {
24
console.log("payment success...");
25
}
26
27
ngOnInit() {
28
addKkiapayListener('success',this.successHandler)
29
}
30
31
ngOnDestroy(){
32
removeKkiapayListener('success',this.successHandler)
33
}
34
}
Copied!
Last modified 11d ago