ngx-pesapal

An Angular library that abstracts the complexity of Pesapal's API 3 payment gateway.

DEMO:

Installation

It is recommended to install ngx-pesapal using Angular schematics

  # 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.

<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

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.