Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
angular4-paystack-lib
Advanced tools
[![Node CI](https://github.com/ashinzekene/angular4-paystack/actions/workflows/nodejs.yml/badge.svg)](https://github.com/ashinzekene/angular4-paystack/actions/workflows/nodejs.yml)
Readme
https://ashinzekene.github.io/angular4-paystack/
This is an angular module that abstracts the complexity of making paystack payments with Angular2+.
npm install --save angular4-paystack
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 {}
There are two available options
AngularPaystackComponent: Renders a button which when clicked loads paystack Inline in an iframe
<angular4-paystack
[email]="'mailexample@mail.com'"
[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]="'mailexample@mail.com'"
[amount]="5000000"
[ref]="reference"
[class]="'btn btn-primary'"
(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: '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
@NgModule({
imports: [
Angular4PaystackModule.forRoot('pk_test_1'),
]
})
and this in your component
<button
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
</button>
Then pk_test_2
would be used instead
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 | ||||
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
Please feel free to fork this package and contribute by submitting a pull request to enhance the functionalities.
Two projects exist in this repository
Angular4-Paystack
package: ./projects/angular4-paystack
./src
./projects/angular4-paystack/src/lib
../projects/angular4-paystack/
folder are overwritten on buildnpm run build
on the main folder builds this project by defaultnpm start
/ng serve
.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.
FAQs
[![Node CI](https://github.com/ashinzekene/angular4-paystack/actions/workflows/nodejs.yml/badge.svg)](https://github.com/ashinzekene/angular4-paystack/actions/workflows/nodejs.yml)
We found that angular4-paystack-lib demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.