ngx-pesapal
TypeScript icon, indicating that this package has built-in type declarations

0.0.28 • Public • Published

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.

Package Sidebar

Install

npm i ngx-pesapal

Weekly Downloads

2

Version

0.0.28

License

none

Unpacked Size

121 kB

Total Files

30

Last publish

Collaborators

  • massiiiiiii