ANGULAR8-PAYSTACK

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

USAGE

$3

sh

npm install --save angular8-paystack





$3

In your

app.module.ts

 or any module where the component or directive would be used like so:

ts

import { NgModule } from '@angular/core';



import { Angular4PaystackModule } from 'angular8-paystack';

...



@NgModule({

  imports: [

    Angular4PaystackModule.forRoot('pk_test_xxxxxxxxxxxxxxxxxxxxxxxx'),

  ]

})



export class AppModule {}





$3

There are two available options



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

html

          [email]="'mailexample@mail.com'"

      [amount]="5000000"

      [ref]="reference"

      [channels]="['bank']"

      [class]="'btn btn-primary'"

      (onClose)="paymentCancel()"

      (callback)="paymentDone($event)"

    >

      Pay with Paystack





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

html





And then in your

component.ts

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:

html





And then in your

component.ts

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: 'user@mail.com',

      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

ts

@NgModule({

  imports: [

    Angular4PaystackModule.forRoot('pk_test_1'),

  ]

})



and this in your component

html



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

|

channels | array

         | false              | undefined  | Send 'card' or 'bank' or 'card','bank' as an array to specify what options to show the user paying

For Split Payments |

|

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



OPTIONS 

Multi-split Payments |

|Name                   | Type           | Required            | Default Value       | Description         |

|-----------------------|----------------|---------------------|---------------------|---------------------|

For Multi-split Payments |

|

split_code | string

       | false               |  ""                 | The code for the existing split payment setup.

|

split | object

       | false               |  {}                  | Dynamic split setup at runtime.

For Multi-split Payments - Split Object |

|

type | string | true | undefined | Value can be flat or percentage

bearer_type | string | true | undefined | Value can be all, all-proportional, account or subaccount

subaccounts | array | true | undefined | An array of subaccount object. e.g. {"subaccount": 'ACCT_', "share": 60}

bearer_subaccount array | false | undefined | Subaccount code of the bearer. It should be specified if bearer_type is subaccount





|Name                   | Description         |

|-----------------------|---------------------|

For Multi-split Payments - Fees on Multi-split |

|

all

            | Fees will be shared equally by the main account and all subaccounts.

|

all-proportional

  | Fees will be charged according to the share of the main account and subaccounts.

|

account

  | Fees will be charged to the main account only.

|

subaccount | Only the subaccount set in the bearer_subaccount

 will be charged





> 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





$3

- Found at

./projects/angular4-paystack/src/lib

.

- The artifacts (README.md, CHANGELOG.md and LICENSE.md) in the

./projects/angular4-paystack/

 folder are overwritten on build

- Running

npm run build

 on the main folder builds this project by default



$3

- To serve this project run

npm start/ng serve

.

- This project makes use of the built package from the

angular4-paystack library for quick testing and real-life debugging. So it's important to initially run npm run build/ng build` before serving this project
- This project is also served on github pages at https://ashinzekene.github.io/angular4-paystack/

Thanks!
Ashinze Ekene.

License

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

ANGULAR8-PAYSTACK

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

USAGE

$3

sh

npm install --save angular8-paystack





$3

In your

app.module.ts

 or any module where the component or directive would be used like so:

ts

import { NgModule } from '@angular/core';



import { Angular4PaystackModule } from 'angular8-paystack';

...



@NgModule({

  imports: [

    Angular4PaystackModule.forRoot('pk_test_xxxxxxxxxxxxxxxxxxxxxxxx'),

  ]

})



export class AppModule {}





$3

There are two available options



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

html

          [email]="'mailexample@mail.com'"

      [amount]="5000000"

      [ref]="reference"

      [channels]="['bank']"

      [class]="'btn btn-primary'"

      (onClose)="paymentCancel()"

      (callback)="paymentDone($event)"

    >

      Pay with Paystack





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

html





And then in your

component.ts

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:

html





And then in your

component.ts

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: 'user@mail.com',

      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

ts

@NgModule({

  imports: [

    Angular4PaystackModule.forRoot('pk_test_1'),

  ]

})



and this in your component

html



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

|

channels | array

         | false              | undefined  | Send 'card' or 'bank' or 'card','bank' as an array to specify what options to show the user paying

For Split Payments |

|

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



OPTIONS 

Multi-split Payments |

|Name                   | Type           | Required            | Default Value       | Description         |

|-----------------------|----------------|---------------------|---------------------|---------------------|

For Multi-split Payments |

|

split_code | string

       | false               |  ""                 | The code for the existing split payment setup.

|

split | object

       | false               |  {}                  | Dynamic split setup at runtime.

For Multi-split Payments - Split Object |

|

type | string | true | undefined | Value can be flat or percentage

bearer_type | string | true | undefined | Value can be all, all-proportional, account or subaccount

subaccounts | array | true | undefined | An array of subaccount object. e.g. {"subaccount": 'ACCT_', "share": 60}

bearer_subaccount array | false | undefined | Subaccount code of the bearer. It should be specified if bearer_type is subaccount





|Name                   | Description         |

|-----------------------|---------------------|

For Multi-split Payments - Fees on Multi-split |

|

all

            | Fees will be shared equally by the main account and all subaccounts.

|

all-proportional

  | Fees will be charged according to the share of the main account and subaccounts.

|

account

  | Fees will be charged to the main account only.

|

subaccount | Only the subaccount set in the bearer_subaccount

 will be charged





> 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





$3

- Found at

./projects/angular4-paystack/src/lib

.

- The artifacts (README.md, CHANGELOG.md and LICENSE.md) in the

./projects/angular4-paystack/

 folder are overwritten on build

- Running

npm run build

 on the main folder builds this project by default



$3

- To serve this project run

npm start/ng serve

.

- This project makes use of the built package from the

License

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