ANGULAR-GLADEGPAY

This is an angular module that abstracts the complexity of making gladepay payments with Angular2+.

USAGE

1. Install the module

npm install --save angular-gladepay

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 { AngularGladepayModule } from 'angular-gladepay';
...

@NgModule({
  imports: [
    AngularGladepayModule.forRoot('MID'),
  ]
})

export class AppModule {}

3. Implement in your project

There are two available options

• AngularGladepayComponent: Renders a button which when clicked loads gladepay Inline in an iframe

    <angular-gladepay
      [email]="'[email protected]'"
      [amount]="5000000"
      [payment_method]="['bank']"
      [class]="'btn btn-primary'"
      (close)="paymentCancel()"
      (callback)="paymentDone($event)"
    >
      Pay with Gladepay
    </angular-gladepay>

• AngularGladepayDirective: A directive that loads gladepay inline in an iframe when clicked

  <button
    angular-gladepay
    [MID]="'MID'"
    [email]="'[email protected]'"
    [amount]="5000000"
    [class]="'btn btn-primary'"
    (paymentInit)="paymentInit()"
    (close)="paymentCancel()"
    (callback)="paymentDone($event)"
  >
    Pay with Gladepay
  </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 {
    constructor() {}

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

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

    paymentCancel() {
      console.log('payment failed');
    }

    ngOnInit() {

    }

  }

Also you can use the gladepayOptions object like so:

  <button
    angular-gladepay
    [gladepayOptions]="options"
    (paymentInit)="paymentCancel()"
    (close)="paymentCancel()"
    (callback)="paymentDone($event)"
  >
    Pay with Gladepay
  </button>

And then in your component.ts

  import { Component } from '@angular/core';
  import { GladepayOptions } from 'angular-gladepay';

  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    options: GladepayOptions = {
      amount: 50000,
      email: '[email protected]',
      MID: ''
    }
    constructor() {}

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

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

    paymentCancel() {
      console.log('payment failed');
    }
  }

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

@NgModule({
  imports: [
    AngularGladepayModule.forRoot('MID',false),
  ]
})

and this in your component

  <button
    angular-gladepay
    [MID]="'MID2'"
    [email]="'[email protected]'"
    [amount]="5000"
    [class]="'btn btn-primary'"
    (paymentInit)="paymentInit()"
    (close)="paymentCancel()"
    (callback)="paymentDone($event)"
  >
    Pay with Gladepay
  </button>

Then MID2 would be used instead

OPTIONS

|Name | Type | Required | Default Value | Description | |-----------------------|----------------|---------------------|---------------------|---------------------| | amount | number | true | undefined | Amount to withdraw | email | string | true | undefined | The customer's email address. | MID | string | true | undefined | Your MID from Gladepay. Use test MID for test mode and live MID for live mode | callback | function | true | undefined | A function called when transaction is successful. Returns an object containing unique reference | metadata | object | false | {} | custom details | currency | string | false | "NGN" | Transaction currency | gladepayOptions | object | false | undefined | An object containing the gladepay options above. NOTE: The function listeners eg callback, paymentInit should not be added here | paymentInit | function | false | undefined | A function called when the payment is about to begin | onClose | function | false | undefined | A function called if the customer closes the payment window

For more information checkout gladepay'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.