angular4-paystack
Version:
[](https://github.com/ashinzekene/angular4-paystack/actions/workflows/nodejs.yml)
413 lines (403 loc) • 18.2 kB
JavaScript
import * as i0 from '@angular/core';
import { InjectionToken, Injectable, Inject, EventEmitter, Component, Input, Output, Directive, HostListener, ChangeDetectionStrategy, NgModule } from '@angular/core';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
const PUBLIC_KEY_TOKEN = new InjectionToken('paystack.publickey');
class Angular4PaystackService {
constructor(token) {
this.token = token;
}
loadScript() {
return new Promise(resolve => {
if (window.PaystackPop && typeof window.PaystackPop.setup === 'function') {
resolve();
return;
}
const script = window.document.createElement('script');
window.document.head.appendChild(script);
const onLoadFunc = () => {
script.removeEventListener('load', onLoadFunc);
resolve();
};
script.addEventListener('load', onLoadFunc);
script.setAttribute('src', 'https://js.paystack.co/v1/inline.js');
});
}
checkInput(obj) {
if (!obj.key && !this.token) {
return 'ANGULAR-PAYSTACK: Please insert a your public key';
}
if (!obj.email) {
return 'ANGULAR-PAYSTACK: Paystack email cannot be empty';
}
if (!obj.amount) {
return 'ANGULAR-PAYSTACK: Paystack amount cannot be empty';
}
if (!obj.ref) {
return 'ANGULAR-PAYSTACK: Paystack ref cannot be empty';
}
return '';
}
getPaystackOptions(obj) {
const paystackOptions = {
key: obj.key || this.token,
email: obj.email,
amount: obj.amount,
ref: obj.ref,
metadata: obj.metadata || {},
currency: obj.currency || 'NGN',
plan: obj.plan || '',
channels: obj.channels,
quantity: obj.quantity || '',
subaccount: obj.subaccount || '',
transaction_charge: obj.transaction_charge || 0, // tslint:disable-line
bearer: obj.bearer || '',
split_code: obj.split_code || '',
};
return paystackOptions;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: Angular4PaystackService, deps: [{ token: PUBLIC_KEY_TOKEN }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: Angular4PaystackService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: Angular4PaystackService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}], ctorParameters: () => [{ type: undefined, decorators: [{
type: Inject,
args: [PUBLIC_KEY_TOKEN]
}] }] });
class Angular4PaystackComponent {
constructor(paystackService) {
this.paystackService = paystackService;
this.paymentInit = new EventEmitter();
this.onClose = new EventEmitter(); // tslint:disable-line
this.callback = new EventEmitter();
this.isPaying = false;
}
async pay() {
let errorText = '';
if (this.paystackOptions && Object.keys(this.paystackOptions).length >= 2) {
errorText = this.valdateInput(this.paystackOptions);
this.generateOptions(this.paystackOptions);
}
else {
errorText = this.valdateInput(this);
this.generateOptions(this);
}
if (errorText) {
console.error(errorText);
return errorText;
}
await this.paystackService.loadScript();
if (this.isPaying) {
return;
}
if (this.paymentInit.observers.length) {
this.paymentInit.emit();
}
const payment = window.PaystackPop.setup(this._paystackOptions);
payment.openIframe();
this.isPaying = true;
return '';
}
valdateInput(obj) {
if (!this.callback.observers.length) {
return 'ANGULAR-PAYSTACK: Insert a callback output like so (callback)=\'PaymentComplete($event)\' to check payment status';
}
return this.paystackService.checkInput(obj);
}
generateOptions(obj) {
this._paystackOptions = this.paystackService.getPaystackOptions(obj);
this._paystackOptions.onClose = () => {
if (this.onClose.observers.length) {
this.isPaying = false;
this.onClose.emit();
}
};
this._paystackOptions.callback = (...response) => {
this.isPaying = false;
this.callback.emit(...response);
};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: Angular4PaystackComponent, deps: [{ token: Angular4PaystackService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: Angular4PaystackComponent, selector: "angular4-paystack", inputs: { key: "key", email: "email", amount: "amount", metadata: "metadata", ref: "ref", currency: "currency", plan: "plan", quantity: "quantity", channels: "channels", split_code: "split_code", subaccount: "subaccount", transaction_charge: "transaction_charge", bearer: "bearer", class: "class", style: "style", paystackOptions: "paystackOptions" }, outputs: { paymentInit: "paymentInit", onClose: "onClose", callback: "callback" }, ngImport: i0, template: `<button [ngClass]="class" [ngStyle]="style" (click)="pay()"><ng-content></ng-content></button>`, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: Angular4PaystackComponent, decorators: [{
type: Component,
args: [{
selector: 'angular4-paystack',
template: `<button [ngClass]="class" [ngStyle]="style" (click)="pay()"><ng-content></ng-content></button>`,
}]
}], ctorParameters: () => [{ type: Angular4PaystackService }], propDecorators: { key: [{
type: Input
}], email: [{
type: Input
}], amount: [{
type: Input
}], metadata: [{
type: Input
}], ref: [{
type: Input
}], currency: [{
type: Input
}], plan: [{
type: Input
}], quantity: [{
type: Input
}], channels: [{
type: Input
}], split_code: [{
type: Input
}], subaccount: [{
type: Input
}], transaction_charge: [{
type: Input
}], bearer: [{
type: Input
}], class: [{
type: Input
}], style: [{
type: Input
}], paystackOptions: [{
type: Input
}], paymentInit: [{
type: Output
}], onClose: [{
type: Output
}], callback: [{
type: Output
}] } });
class Angular4PaystackDirective {
constructor(paystackService) {
this.paystackService = paystackService;
this.paymentInit = new EventEmitter(); // tslint:disable-line
this.onClose = new EventEmitter(); // tslint:disable-line
this.callback = new EventEmitter();
this.isPaying = false;
}
async pay() {
let errorText = '';
if (this.paystackOptions && Object.keys(this.paystackOptions).length >= 2) {
errorText = this.valdateInput(this.paystackOptions);
this.generateOptions(this.paystackOptions);
}
else {
errorText = this.valdateInput(this);
this.generateOptions(this);
}
if (errorText) {
console.error(errorText);
return errorText;
}
await this.paystackService.loadScript();
if (this.isPaying) {
return;
}
if (this.paymentInit.observers.length) {
this.paymentInit.emit();
}
const payment = window.PaystackPop.setup(this._paystackOptions);
payment.openIframe();
this.isPaying = true;
return '';
}
valdateInput(obj) {
if (!this.callback.observers.length) {
return 'ANGULAR-PAYSTACK: Insert a callback output like so (callback)=\'PaymentComplete($event)\' to check payment status';
}
return this.paystackService.checkInput(obj);
}
generateOptions(obj) {
this._paystackOptions = this.paystackService.getPaystackOptions(obj);
this._paystackOptions.onClose = () => {
if (this.onClose.observers.length) {
this.isPaying = false;
this.onClose.emit();
}
};
this._paystackOptions.callback = (...response) => {
this.isPaying = false;
this.callback.emit(...response);
};
}
async buttonClick() {
this.pay();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: Angular4PaystackDirective, deps: [{ token: Angular4PaystackService }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.3", type: Angular4PaystackDirective, selector: "[angular4-paystack]", inputs: { key: "key", email: "email", amount: "amount", metadata: "metadata", ref: "ref", currency: "currency", plan: "plan", quantity: "quantity", subaccount: "subaccount", channels: "channels", split_code: "split_code", transaction_charge: "transaction_charge", bearer: "bearer", class: "class", style: "style", paystackOptions: "paystackOptions" }, outputs: { paymentInit: "paymentInit", onClose: "onClose", callback: "callback" }, host: { listeners: { "click": "buttonClick()" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: Angular4PaystackDirective, decorators: [{
type: Directive,
args: [{
selector: '[angular4-paystack]', // tslint:disable-line
}]
}], ctorParameters: () => [{ type: Angular4PaystackService }], propDecorators: { key: [{
type: Input
}], email: [{
type: Input
}], amount: [{
type: Input
}], metadata: [{
type: Input
}], ref: [{
type: Input
}], currency: [{
type: Input
}], plan: [{
type: Input
}], quantity: [{
type: Input
}], subaccount: [{
type: Input
}], channels: [{
type: Input
}], split_code: [{
type: Input
}], transaction_charge: [{
type: Input
}], bearer: [{
type: Input
}], class: [{
type: Input
}], style: [{
type: Input
}], paystackOptions: [{
type: Input
}], paymentInit: [{
type: Output
}], onClose: [{
type: Output
}], callback: [{
type: Output
}], buttonClick: [{
type: HostListener,
args: ['click']
}] } });
class Angular4PaystackEmbedComponent {
constructor(paystackService) {
this.paystackService = paystackService;
this.paymentInit = new EventEmitter();
this.onClose = new EventEmitter(); // tslint:disable-line
this.callback = new EventEmitter();
}
async pay() {
let errorText = '';
if (this.paystackOptions && Object.keys(this.paystackOptions).length >= 2) {
errorText = this.valdateInput(this.paystackOptions);
this.generateOptions(this.paystackOptions);
}
else {
errorText = this.valdateInput(this);
this.generateOptions(this);
}
if (errorText) {
console.error(errorText);
return errorText;
}
await this.paystackService.loadScript();
if (this.paymentInit.observers.length) {
this.paymentInit.emit();
}
const payment = window.PaystackPop.setup(this._paystackOptions);
payment.openIframe();
return '';
}
valdateInput(obj) {
if (!this.callback.observers.length) {
return 'ANGULAR-PAYSTACK: Insert a callback output like so (callback)=\'PaymentComplete($event)\' to check payment status';
}
return this.paystackService.checkInput(obj);
}
generateOptions(obj) {
this._paystackOptions = this.paystackService.getPaystackOptions(obj);
this._paystackOptions.onClose = () => {
if (this.onClose.observers.length) {
this.onClose.emit();
}
};
this._paystackOptions.callback = (...response) => {
this.callback.emit(...response);
};
}
async ngOnInit() {
console.error('ANGULAR-PAYSTACK: The paystack embed option is deprecated. Please use the paystack component or directive');
this.pay();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: Angular4PaystackEmbedComponent, deps: [{ token: Angular4PaystackService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: Angular4PaystackEmbedComponent, selector: "angular4-paystack-embed", inputs: { key: "key", email: "email", amount: "amount", metadata: "metadata", channels: "channels", ref: "ref", currency: "currency", plan: "plan", quantity: "quantity", subaccount: "subaccount", split_code: "split_code", transaction_charge: "transaction_charge", bearer: "bearer", paystackOptions: "paystackOptions" }, outputs: { paymentInit: "paymentInit", onClose: "onClose", callback: "callback" }, ngImport: i0, template: `<div id="paystackEmbedContainer"></div>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: Angular4PaystackEmbedComponent, decorators: [{
type: Component,
args: [{
selector: 'angular4-paystack-embed',
changeDetection: ChangeDetectionStrategy.OnPush,
template: `<div id="paystackEmbedContainer"></div>`
}]
}], ctorParameters: () => [{ type: Angular4PaystackService }], propDecorators: { key: [{
type: Input
}], email: [{
type: Input
}], amount: [{
type: Input
}], metadata: [{
type: Input
}], channels: [{
type: Input
}], ref: [{
type: Input
}], currency: [{
type: Input
}], plan: [{
type: Input
}], quantity: [{
type: Input
}], subaccount: [{
type: Input
}], split_code: [{
type: Input
}], transaction_charge: [{
type: Input
}], bearer: [{
type: Input
}], paystackOptions: [{
type: Input
}], paymentInit: [{
type: Output
}], onClose: [{
type: Output
}], callback: [{
type: Output
}] } });
class Angular4PaystackModule {
static forRoot(token) {
return {
ngModule: Angular4PaystackModule,
providers: [
Angular4PaystackService,
{ provide: PUBLIC_KEY_TOKEN, useValue: token }
]
};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: Angular4PaystackModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.2.3", ngImport: i0, type: Angular4PaystackModule, declarations: [Angular4PaystackComponent, Angular4PaystackDirective, Angular4PaystackEmbedComponent], imports: [CommonModule], exports: [Angular4PaystackComponent, Angular4PaystackDirective, Angular4PaystackEmbedComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: Angular4PaystackModule, imports: [CommonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: Angular4PaystackModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule],
exports: [Angular4PaystackComponent, Angular4PaystackDirective, Angular4PaystackEmbedComponent],
declarations: [Angular4PaystackComponent, Angular4PaystackDirective, Angular4PaystackEmbedComponent],
providers: [],
}]
}] });
/*
* Public API Surface of angular4-paystack
*/
/**
* Generated bundle index. Do not edit.
*/
export { Angular4PaystackComponent, Angular4PaystackDirective, Angular4PaystackEmbedComponent, Angular4PaystackModule };
//# sourceMappingURL=angular4-paystack.mjs.map