pesapal-pay v1.5.1

PesapalPayments

This is an angular module that abstracts the complexity of making Pesapal payments with Angular.

Demo

USAGE

1. Install the module

npm install pesapal-pay

Register your IPN URL here

2. Import the module

In your app.module.ts or any module where the component or directive would be used like so:

import { NgModule } from '@angular/core';

import { PesapalPayModule } from 'pesapal-pay';
...

@NgModule({
  imports: [
    PesapalPayModule.forRoot(
      "<your consumer key>",
      "<your consumer secret>",
      "<your IPN ID>"
    ),
  ]
})

export class AppModule {}

3. Implement in your application

There are three available options

*PesapalPayComponent: Renders a button which when clicked loads Pesapal in an iframe

  <pesapal-pay
    [amount]="100"  
    [currency]="'KES'" 
    [description]="'chapo'" 
    [callback_url]="'http://localhost:4200/'" 
    [phone_number]="0712345678" 
    [email_address]="'test@mail.com'" 
    [styles]="{'background-color': 'pink', 'font-size': '16px'}"
    [button_text]="'Buy me coffee'"
  ></pesapal-pay>

*PesapalPayDirective: A directive that loads Pesapal in an iframe when clicked

    <button
      pesapal-pay
      [amount]="100"  
      [currency]="'KES'" 
      [description]="'mandazi'" 
      [callback_url]="'http://localhost:4200/'" 
      [phone_number]="0712345678" 
      [email_address]="'test@mail.com'" 
  >Pay with Pesapal
  </button>

*PesapalPayTemplate: Renders a payment form on a dialog

    <pesapal-template></pesapal-template>

For more information check out Pesapal's documentation

PROPERTIES

4. Example using Angular Forms

In your .ts file,

  interface IFormGroup extends FormGroup {
  value: IForm
  controls: {
      currency: FormControl,
      amount: FormControl,
      description: FormControl
}
...
 this['Paymentform'] = this.formBuilder.group({
    currency: ['', [Validators.required]],
    amount: ['', [Validators.required]],
    description: ['', [Validators.required, Validators.maxLength(256)]]
  }) as IFormGroup
}

In your .html file,

  <form [formGroup]="Paymentform">
      <input [formControl]="form.controls.number" type="number" placeholder="amount">
      <input [formControl]="form.controls.currency" type="text" placeholder="currency">
      <input [formControl]="form.controls.description" type="text" placeholder="description">
        ...
      <pesapal-pay 
        [amount]="Paymentform.controls['amount'].value"  
        [currency]="Paymentform.controls['currency'].value" 
        [description]="Paymentform.controls['description'].value" 
      ...
      ></ppesapal-pay>
  </form>