This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

pesapal-pay

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]="'[e-mail]'" 
    [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]="'[e-mail]'" 
  >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

Name	Default Value	Required	Description
@Input() id: string	Date.now().toString(36) .Math.random() .toString(36) .substring(2)	true	Unique merchant reference
@Input() currency: string	`KES`	true	Transaction currency
@Input() amount: number	undefined	true	Amount to be processed.
@Input() description: string	undefined	true	Order description. `maximum - 100 characters`
@Input() callback_url: string	undefined	true	A valid URL which Pesapal will redirect your clients to processing the payment.
@Input() notification_id: string	`IPN ID`	true	An IPN URL which Pesapal will send notifications to after payments have been processed.
@Input() phone_number: number	undefined	true	Customer's phone number
@Input() email_address: string	undefined	true	Customer's email address
@Input() country_code: string	undefined	false	2 characters long country code in `[ISO 3166-1]`
@Input() first_name: string	undefined	false	Customer's first name
@Input() middle_name: string	undefined	false	Customer's middle name
@Input() last_name: string	undefined	false	Customer's last name
@Input() line_1: string	undefined	false	Customer's main address
@Input() line_2: string	undefined	false	Customer's alternative address
@Input() city: string	undefined	false	Customer's city
@Input() state: string	undefined	false	Customer's state Maximum - `3 characters`
@Input() postal_code: string	undefined	false	Customer's postal code
@Input() zip_code: string	undefined	false	Customer's zip code
@Input() cancellation_url: string	undefined	false	A valid URL which Pesapal will redirect your clients to incase they click on cancel request while on the Payment link.
@Input() disabled: boolean	`false`	false	Whether the component is disabled.
@Input() button_text: string	`Pay with Pesapal`	false	Button text button
@Input() class: string	undefined	false	Button class name
@Input() styles: object	{}	false	CSS stylings, eg {fontColor: 'red'} (not available for inline embed)
@Input() iframe_width: string	`600px`	false	iframe width
@Input() iframe_height: string	`600px`	false	iframe height
@Input() errorMessages: boolean	`false`	false	Show error messages

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>