[](https://github.com/ashinzekene/angular4-paystack/actions/workflows/nodejs.yml)
npm install angular4-paystack
https://ashinzekene.github.io/angular4-paystack/
> This is an angular module that abstracts the complexity of making paystack payments with Angular2+.
sh
npm install --save angular4-paystack
`$3
In your or any module where the component or directive would be used like so:`ts
import { NgModule } from '@angular/core';import { Angular4PaystackModule } from 'angular4-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
[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
[key]="'pk_test_xxxxxxxxxxxxxxxxxxxxxxx'"
[email]="'mailexample@mail.com'"
[amount]="5000000"
[ref]="reference"
[class]="'btn btn-primary'"
[split_code]="'SPL_A7t5J02390Fmm'"
(paymentInit)="paymentInit()"
(onClose)="paymentCancel()"
(callback)="paymentDone($event)"
>
Pay with Paystack
`And then in your
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 object like so:
`html
[paystackOptions]="options"
(paymentInit)="paymentInit()"
(onClose)="paymentCancel()"
(callback)="paymentDone($event)"
>
Pay with Paystack
`And then in your
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 key. For example, if you have this is your file
`ts
@NgModule({
imports: [
Angular4PaystackModule.forRoot('pk_test_1'),
]
})
`
and this in your component
html
[key]="'pk_test_2'"
[email]="'mailexample@mail.com'"
[amount]="5000000"
[ref]="reference"
[class]="'btn btn-primary'"
(paymentInit)="paymentInit()"
(onClose)="paymentCancel()"
(callback)="paymentDone($event)"
>
Pay with Paystack
`
Then 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: $3
- Found at .
- 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 projectThanks!
Ashinze Ekene.
The MIT License (MIT). Please see License File for more information.