Have ideas to improve npm?Join in the discussion! »

    angular-gladepay
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.7 • Public • Published

    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]="'mailexample@mail.com'"
          [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]="'mailexample@mail.com'"
        [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: 'user@mail.com',
          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]="'mailexample@mail.com'"
        [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.

    Install

    npm i angular-gladepay

    DownloadsWeekly Downloads

    7

    Version

    1.0.7

    License

    MIT

    Unpacked Size

    310 kB

    Total Files

    36

    Last publish

    Collaborators

    • avatar