> For the complete documentation index, see [llms.txt](https://docs.kkiapay.me/v1/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.kkiapay.me/v1/en-1.0.0/plugin-et-sdk/frameworks/using-kkiapay-with-angular.md).

# Using KKiaPay with Angular

### Installation

Please run the following command :

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

### Importation 

You can now import the kkiapay dependency into your page :

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

### Usage

Define a function that will display the KKiaPay Widget : 

```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",
    })
  }  
}
```

You can now use this function in your template to open the payment window :

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

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

To avoid fraud, perform the server-side verification of the transaction operation. Learn more about the [Admin SDKs (Server-Side)](/v1/en-1.0.0/plugin-et-sdk/admin-sdks-server-side.md).
{% endhint %}

You can subscribe to payment transaction events with the **addKkiapayListener** function. To be notified of the successful status of a payment transaction, you can proceed as follows :

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

Because it is added in the mounted hook, the addKkiapayListener function will be called each time your component is rendered. If the component is returned n times, the function will be enrolled n times.&#x20;

In order to avoid memory leaks, we will need to delete the callback when the component is destroyed :

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