angular-monnify

Angular wrapper for integrating monnify transactions

Usage no npm install needed!

<script type="module">
  import angularMonnify from 'https://cdn.skypack.dev/angular-monnify';
</script>

README

angular-Monnify

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

Demo

Demo

USAGE

1. Install the module

npm install --save angular-Monnify

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 { AngularMonnifyModule } from 'angular-Monnify';
...

@NgModule({
  imports: [
    AngularMonnifyModule.forRoot('apiKey','contractCode',false),
  ]
})

export class AppModule {}

3. Implement in your project

There are two available options

  • AngularMonnifyComponent: Renders a button which when clicked loads monnify Inline in an iframe

    <angular-Monnify
      [customerFullName]="'some-random-str'"
      [customerMobileNumber]="'some-random-str'"
      [paymentDescription]="'some-random-str'"
      [customerEmail]="'mailexample@mail.com'"
      [amount]="'5000000'"
      [apiKey]="'some-random-str'"
      [contractCode]="'some-random-str'"
      [reference]="'some-random-str'"
      (paymentInit)="paymentInit()"
      (close)="paymentCancel()"
      (onComplete)="paymentDone($event)"
    >
      Pay with Monnify
    </angular-Monnify>
    
  • AngularMonnifyDirective: A directive that loads monnify inline in an iframe when clicked

<button
  angular-Monnify
  [customerFullName]="'some-random-str'"
  [customerMobileNumber]="'some-random-str'"
  [paymentDescription]="'some-random-str'"
  [customerEmail]="'mailexample@mail.com'"
  [amount]="'5000000'"
  [apiKey]="'some-random-str'"
  [contractCode]="'some-random-str'"
  [reference]="'some-random-str'"
  (paymentInit)="paymentInit()"
  [class]="'btn btn-primary'"
  (close)="paymentCancel()"
  (onComplete)="paymentDone($event)"
>
  Pay with Monnify
</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 {
  reference = '' + Math.floor((Math.random() * 1000000000) + 1);
  constructor() {}

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

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

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

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

Also you can use the monnifyOptions object like so:

<button
  angular-Monnify
  [monnifyOptions]="options"
  (paymentInit)="paymentCancel()"
  (close)="paymentCancel()"
  (onComplete)="paymentDone($event)"
>
  Pay with Monnify
</button>

And then in your component.ts

import { Component } from "@angular/core";
import { MonnifyOptions } from "angular-Monnify";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  options: MonnifyOptions = {
    amount: 5000,
    currency: 'NGN',
    reference: '' + Math.floor((Math.random() * 1000000000) + 1),
    customerFullName: 'John Doe',
    customerEmail: 'monnify@monnify.com',
    customerMobileNumber: '08121281921',
    apiKey: 'MK_TEST_SAF7HR5F3F',
    contractCode: '4934121693',
    paymentDescription: 'Test Pay',
    isTestMode: true,
    metadata: {
      name: 'Damilare',
      age: 45
    },
  };
  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 apiKey and contractCode in the component and the directive, in such situation, this apiKey and contractCode is given a higher preference over the global forRoot apiKey and contractCode. For example, if you have this is your file

@NgModule({
  imports: [
    AngularMonnifyModule.forRoot('apiKey','contractCode',false),
  ]
})

and this in your component

<button
  angular-Monnify
  [customerFullName]="'some-random-str'"
  [customerMobileNumber]="'some-random-str'"
  [paymentDescription]="'some-random-str'"
  [customerEmail]="'mailexample@mail.com'"
  [amount]="'5000000'"
  [apiKey]="'apiKey2'"
  [contractCode]="'contractCode2'"
  [reference]="'some-random-str'"
  (paymentInit)="paymentInit()"
  (close)="paymentCancel()"
  (onComplete)="paymentDone($event)"
>
  Pay with Monnify
</button>

Then apiKey2 and contractCode2 would be used instead

OPTIONS

Field Description
amount (M) The amount to be paid by the customer
currency (M) The currency of the transaction being initialized. "NGN"
reference (M) Merchant's Unique reference for every transaction. (The SDK already has a code snippet that generates this for you, but you can always replace it)
customerName (M) Full name of the customer
customerEmail (M) Email address of the customer
customerMobileNumber (M) Phone number of the customer
apiKey (M) Merchant's API Key (Can be found on the Monnify dashboard)
contractCode (M) Merchant's contract code (Can be found on the Monnify dashboard)
paymentDescription (M) Description for the transaction. Will be used as the account name for bank transfer payments
isTestMode (M) Should be set to true when using the sandbox and false when on production
transactionHash (M) Transaction Hash added to transaction response for security purposes. Click here for information on how to calculate the hash value
paymentStatus (M) Status of the transaction ("PAID", "PENDING" or "FAILED")
incomeSplitConfig Object containing specifications on how payments to this reserve account should be split.
subAccountCode (m) The unique reference for the sub account that should receive the split.
feeBearer Boolean to determine if the sub account should bear transaction fees or not
feePercentage The percentage of the transaction fee to be borne by the sub account
splitPercentage The percentage of the amount paid to be split into the sub account.

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