# Intégration de KKiaPay dans une application Angular

### Installation

Veuillez exécuter la commande suivante :

```shell
npm install kkiapay@latest
```

### Importation 

Vous pouvez maintenant importer la dépendance KKiaPay dans votre page :

```javascript
import {
  openKkiapayWidget,
  addKkiapayListener,
  removeKkiapayListener,
} from "kkiapay";
```

### Usage

Définissez une fonction qui vous permettra d'afficher la fenêtre de paiement KKiaPay : 

```javascript
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 :

```html
<div>
    <button (click)="open()">
        Payer Maintenant
    </button>
</div>
```

{% hint style="danger" %}
**Important !**&#x20;

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](https://docs.kkiapay.me/v1/plugin-et-sdk/admin-sdks-server-side).
{% endhint %}

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 :

```javascript
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 :&#x20;

```javascript
​
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)
  }
}
```