Angular wrapper for integrating paystack transactions
npm install angular8-paystacksh
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
angular4-paystack
[key]="'pk_test_xxxxxxxxxxxxxxxxxxxxxxx'"
[email]="'mailexample@mail.com'"
[amount]="5000000"
[ref]="reference"
[class]="'btn btn-primary'"
(paymentInit)="paymentInit()"
(onClose)="paymentCancel()"
(callback)="paymentDone($event)"
>
Pay with Paystack
`
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
angular4-paystack
[paystackOptions]="options"
(paymentInit)="paymentInit()"
(onClose)="paymentCancel()"
(callback)="paymentDone($event)"
>
Pay with Paystack
`
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
angular4-paystack
[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 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