ANGULAR4-PAYSTACK

https://ashinzekene.github.io/angular4-paystack/

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

USAGE

1. Install the module

npm install --save angular4-paystack

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 { Angular4PaystackModule } from 'angular4-paystack';
...

@NgModule({
  imports: [
    Angular4PaystackModule.forRoot('pk_test_xxxxxxxxxxxxxxxxxxxxxxxx'),
  ]
})

export class AppModule {}

3. Implement in your project

There are two available options

AngularPaystackComponent: Renders a button which when clicked loads paystack Inline in an iframe

  <angular4-paystack
    [email]="'[email protected]'"
    [amount]="5000000"
    [ref]="reference"
    [channels]="['bank']"
    [class]="'btn btn-primary'"
    (onClose)="paymentCancel()"
    (callback)="paymentDone($event)"
  >
    Pay with Paystack
  </angular4-paystack>

AngularPaystackDirective: A directive that loads paystack inline in an iframe when clicked

  <button
    angular4-paystack
    [key]="'pk_test_xxxxxxxxxxxxxxxxxxxxxxx'"
    [email]="'[email protected]'"
    [amount]="5000000"
    [ref]="reference"
    [class]="'btn btn-primary'"
    [split_code]="'SPL_A7t5J02390Fmm'"
    (paymentInit)="paymentInit()"
    (onClose)="paymentCancel()"
    (callback)="paymentDone($event)"
  >
    Pay with Paystack
  </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 = '';
    constructor() {}

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

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

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

    ngOnInit() {
      this.reference = `ref-${Math.ceil(Math.random() * 10e13)}`;
    }

  }

Also you can use the paystackOptions object like so:

  <button
    angular4-paystack
    [paystackOptions]="options"
    (paymentInit)="paymentInit()"
    (onClose)="paymentCancel()"
    (callback)="paymentDone($event)"
  >
    Pay with Paystack
  </button>

And then in your component.ts

  import { Component } from '@angular/core';
  import { PaystackOptions } from 'angular4-paystack';

  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    options: PaystackOptions = {
      amount: 50000,
      email: '[email protected]',
      ref: `${Math.ceil(Math.random() * 10e10)}`
    }
    constructor() {}

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

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

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

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

@NgModule({
  imports: [
    Angular4PaystackModule.forRoot('pk_test_1'),
  ]
})

and this in your component

  <button
    angular4-paystack
    [key]="'pk_test_2'"
    [email]="'[email protected]'"
    [amount]="5000000"
    [ref]="reference"
    [class]="'btn btn-primary'"
    (paymentInit)="paymentInit()"
    (onClose)="paymentCancel()"
    (callback)="paymentDone($event)"
  >
    Pay with Paystack
  </button>

Then pk_test_2 would be used instead

OPTIONS

Name	Type	Required	Default Value	Description
`amount`	`number`	true	undefined	Amount to withdraw (in kobo for NGN)
`email`	`string`	true	undefined	The customer's email address.
`key`	`string`	true	undefined	Your pubic Key from Paystack. Use test key for test mode and live key for live mode
`ref`	`string`	true	undefined	Unique case sensitive transaction reference. Only -,., = and alphanumeric characters allowed.
`callback`	`function`	true	undefined	A function called when transaction is successful. Returns an object containing unique reference
`metadata`	`object`	false	{}	custom details
`class`	`string`	false	undefined	A string of classes to add to the component (not available for inline embed)
`style`	`object`	false	undefined	CSS stylings, eg `{fontColor: 'red'}` (not available for inline embed)
`text`	`object`	false	undefined	Text output of the component
`currency`	`string`	false	"NGN"	Transaction currency
`plan`	`string`	false	""	If transaction is to create a subscription to a predefined plan, provide plan code here.
`quantity`	`string`	false	""	Used to apply a multiple to the amount returned by the plan code above.
`paystackOptions`	`object`	false	undefined	An object containing the paystack 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 Split Payments
`split_code`	`string`	true (for split payment)	""	The split code of the transaction split. (e.g. `SPL_98WF13Eb3w`)
`subaccount`	`string`	false	""	The code for the subaccount that owns the payment.
`transaction_charge`	`number`	false	0	A flat fee to charge the subaccount for this transaction, in kobo.
`bearer`	`string`	false	""	Who bears Paystack charges? account or subaccount
`channels`	`array`	false	undefined	Send 'card' or 'bank' or 'card','bank' as an array to specify what options to show the user paying

For more information checkout paystack's documentation

CONTRIBUTING

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

Two projects exist in this repository

The Angular4-Paystack package: ./projects/angular4-paystack
The demo: ./src