# ngx-pesapal

An Angular library that abstracts the complexity of [Pesapal's API 3 payment gateway](https://developer.pesapal.com/).


[DEMO:](https://stackblitz.com/edit/ngx-pesapal?file=src%2Fmain.ts) 


## Installation

It is recommended to install ```ngx-pesapal``` using Angular schematics
```bash
  # installing Pesapal Angular in Angular CLI
  ng add ngx-pesapal
```
That’s it! You may now use Pesapal Angular in any of your Angular environments.




    
## Usage/Example

#### Directive: `ngx-pesapal`
This module encapsulates `submitOrderRequest` to a directive. Simply add `ngx-pesapal` to an element of your choice. \
Required inputs `currency`, `amount`, `description`, `callback_url`, `phone_number` from directive NgxPesapalDirective must be specified.
See example below.
```html
<button ngx-pesapal 
  [currency]="'KES'"
  [amount]="10" 
  [description]="'coffee'"
  [phone_number]="'0712345678'"
  [callback_url]="'https://www.ngx.pesapal'"
  (click)="click()"
>hii</button>
```
#### Usage


| BehaviourSubject            | Description                                           |
| --------------------------- | ----------------------------------------------------- |
| authenticationResponseBs    | Stores the authentication token response              |
| submitOrderResponseBs       | Stores the response after submitting an order request |
| transactionStatusResponseBs | Stores the response related to the transaction status |
| refundsResponseBs           | Stores the response related to the recurring request  |

##

| Observable               | Args                               | Description              |
| ------------------------ | ---------------------------------- | ------------------------ |
| submitOrderRequest()     | ISubmitOrderRequest                | Payment Request          |
| getTransactionStatus()   | string                             | Get transaction status   |
| submitRecurringPayment() | IRecurringPaymentsRequest          | Submit recurring payment |
| requestRefund()          | IRefundRequest                     | Request refund           |


#### Example

```typescript
import { Component, Injector, Input, OnInit, Signal, inject, signal } from '@angular/core';
import { ApiService } from 'ngx-pesapal'
@Component({
  selector: 'app-ngx-pesapal',
  template: '
    <form>...</form>
    <button (click)="submitOrderRequest()">Make purchase</button>

    <span>{{y().redirect_url}}</span>
  '
})
export class PaymentComponent {

  x: ApiService = inject(ApiService)
  y: Signal<ISubmitOrderResponse|undefined> = signal<ISubmitOrderResponse|undefined(undefined)

  ...

  submitOrderRequest(): void {
    const orderRequest$: Observable<ISubmitOrderResponse> = this.x.submitOrderRequest(formData as ISubmitOrderRequest)

    this.y = toSignal(orderRequest$, { manualCleanup: true })
  }
}

```


## Note
Endpoint `/api/Auth/RequestToken` will always return a response of `200` regardless. This has not been captured in this package. To check actual HTTP response status, inspect network tab on dev tools.