angular-klasha v0.0.1

angular-klasha

This is an angular module that abstracts the complexity of making klasha payments.

Demo

USAGE

1. Install the module

npm install --save angular-klasha

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 { AngularKlashaModule } from 'angular-klasha';
...

@NgModule({
  imports: [
    AngularKlashaModule.forRoot('merchantKey','businessId',false),
  ]
})

export class AppModule {}

3. Implement in your project

There are two available options

• AngularKlashaComponent: Renders a button which when clicked loads klasha Inline in an iframe

  <angular-klasha
    [fullname]="'some-random-str'"
    [phone_number]="'some-random-str'"
    [paymentDescription]="'some-random-str'"
    [email]="'mailexample@mail.com'"
    [amount]="'1000000'"
    [merchantKey]="'some-random-str'"
    [businessId]="'some-random-str'"
    [tx_ref]="'some-random-str'"
    (paymentInit)="paymentInit()"
    (callBack)="paymentDone($event)"
  >
    Pay with Klasha
  </angular-klasha>

• AngularKlashaDirective: A directive that loads klasha inline in an iframe when clicked

<button
  angular-klasha
  [fullname]="'some-random-str'"
  [phone_number]="'some-random-str'"
  [paymentDescription]="'some-random-str'"
  [email]="'mailexample@mail.com'"
  [amount]="'1000000'"
  [merchantKey]="'some-random-str'"
  [businessId]="'some-random-str'"
  [tx_ref]="'some-random-str'"
  (paymentInit)="paymentInit()"
  [class]="'btn btn-primary'"
  (callBack)="paymentDone($event)"
>
  Pay with Klasha
</button>

And then in your component.ts

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent implements OnInit {
  tx_ref = '' + Math.floor((Math.random() * 1000000000) + 1);
  constructor() {}

  paymentInit() {
    console.log("Payment initialized");
  }

  paymentDone(info: any) {
    this.title = "Payment Done";
    console.log(this.title, info);
  }

  ngOnInit() {
     this.tx_ref ='' + Math.floor((Math.random() * 1000000000) + 1);
  }
}

Also you can use the klashaOptions object like so:

<button
  angular-klasha
  [klashaOptions]="options"
  (paymentInit)="paymentCancel()"
  (callBack)="paymentDone($event)"
>
  Pay with Klasha
</button>

And then in your component.ts

import { Component } from "@angular/core";
import { KlashaOptions } from "angular-klasha";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  options: KlashaOptions = {
    email: 'some-random-str',
    phone_number: 'some-random-str',
    merchantKey: 'some-random-str',
    amount: 1000,
    sourceCurrency: '',
    destinationCurrency: '',
    tx_ref: '' + Math.floor((Math.random() * 1000000000) + 1),
    businessId: '1',
    fullname: 'some-random-str',
    paymentDescription: '',
    kit: {
      currency: '',
      phone_number: 'some-random-str',
      email: 'some-random-str',
      fullname: 'some-random-str',
      tx_ref: '',
      paymentType: '',
    }
  ;
  constructor() {}

  paymentInit() {
    console.log("Payment initialized");
  }

  paymentDone(info: any) {
    this.title = "Payment Done";
    console.log(this.title, info);
  }

}

Also, you can pass in a merchantKey and businessId in the component and the directive, in such situation, this merchantKey and businessId is given a higher ptx_ref over the global forRoot merchantKey and businessId. For example, if you have this is your file

@NgModule({
  imports: [
    AngularKlashaModule.forRoot('merchantKey','businessId',false),
  ]
})

and this in your component

<button
  angular-klasha
  [fullname]="'some-random-str'"
  [phone_number]="'some-random-str'"
  [paymentDescription]="'some-random-str'"
  [email]="'mailexample@mail.com'"
  [amount]="'1000000'"
  [merchantKey]="'merchantKey2'"
  [businessId]="'businessId2'"
  [tx_ref]="'some-random-str'"
  (callBack)="paymentDone($event)"
>
  Pay with Klasha
</button>

Then merchantKey2 and businessId2 would be used instead

OPTIONS

The function accepts some parameters necessary for processing payment, and they include the following:

Kit can further be broken down into:

For more information checkout klasha's documentation

Contributing

Please feel free to fork this package and contribute by submitting a pull request to enhance the functionalities.

How can I thank you?

Why not star the github repo? I'd love the attention! Why not share the link for this repository on Twitter or anywhere? Spread the word!

Don't forget to follow me on twitter!

Thanks! Dansteve Adekanbi.

License

The MIT License (MIT). Please see License File for more information.