-
Notifications
You must be signed in to change notification settings - Fork 39
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2 from ashinzekene/paystack-embed
Added paystack embed
- Loading branch information
Showing
20 changed files
with
478 additions
and
88 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
74 changes: 74 additions & 0 deletions
74
examples/src/app/angular4-paystack/angular-paystack.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| import { async, TestBed } from "@angular/core/testing"; | ||
| import { Angular4PaystackComponent } from "./angular4-paystack.component"; | ||
|
|
||
| let comp | ||
| describe("Angular4-Paystack Popup", ()=> { | ||
| beforeEach(async () => { | ||
| TestBed.configureTestingModule({ | ||
| declarations: [ Angular4PaystackComponent ], | ||
| }) | ||
| .compileComponents() | ||
| }) | ||
|
|
||
| beforeEach(() => { | ||
| let fixture = TestBed.createComponent(Angular4PaystackComponent); | ||
| comp = fixture.componentInstance | ||
| }) | ||
|
|
||
| it("Should fail validation if key is not supplied", () => { | ||
| comp.amount = 1235678 | ||
| comp.email = "ashinzekene@gmail.com" | ||
| comp.callback.subscribe((res) => {}) | ||
| expect(comp.checkInput()).toBeFalsy() | ||
| }) | ||
|
|
||
| it("Should fail validation if amount is not supplied", () => { | ||
| comp.key = "pk_test_*************" | ||
| comp.email = "ashinzekene@gmail.com" | ||
| comp.callback.subscribe((res) => {}) | ||
| expect(comp.checkInput()).toBeFalsy() | ||
| }) | ||
|
|
||
| it("Should fail validation if amount is not a number", () => { | ||
| comp.key = "pk_test_*************" | ||
| comp.email = "ashinzekene@gmail.com" | ||
| comp.ref = "jfdi9urrktkkgkd" | ||
| comp.callback.subscribe((res) => {}) | ||
| expect(comp.checkInput()).toBeFalsy() | ||
| }) | ||
|
|
||
| it("Should fail validation if ref is not supplied", () => { | ||
| comp.key = "pk_test_*************" | ||
| comp.email = "ashinzekene@gmail.com" | ||
| comp.amount = 5000000 | ||
| comp.callback.subscribe((res) => {}) | ||
| expect(comp.checkInput()).toBeFalsy() | ||
| }) | ||
|
|
||
| it("Should fail valiation if callback is not supplied", () => { | ||
| comp.key = "pk_test_*************" | ||
| comp.email = "ashinzekene@gmail.com" | ||
| comp.amount = 5000000 | ||
| comp.ref = "950gjvkjbk" | ||
| expect(comp.checkInput()).toBeFalsy() | ||
| }) | ||
|
|
||
| it("Should fail valiation if style is not an object", () => { | ||
| comp.key = "pk_test_*************" | ||
| comp.email = "ashinzekene@gmail.com" | ||
| comp.amount = 5000000 | ||
| comp.ref = "950gjvkjbk" | ||
| comp.style = "invalid style" | ||
| expect(comp.checkInput()).toBeFalsy() | ||
| }) | ||
|
|
||
| it("Should pass valiation if ref, amount, email and key and callback is supplied", () => { | ||
| comp.key = "pk_test_*************" | ||
| comp.email = "ashinzekene@gmail.com" | ||
| comp.amount = 5000000 | ||
| comp.ref = "950gjvkjbk" | ||
| comp.callback.subscribe((res) => {}) | ||
| expect(comp.checkInput()).toBeTruthy() | ||
| }) | ||
|
|
||
| }) |
72 changes: 72 additions & 0 deletions
72
examples/src/app/angular4-paystack/angular4-paystack-embed.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| import { Component, OnInit, Input, Output,EventEmitter } from '@angular/core'; | ||
| import { PaystackOptions } from "./paystack-options"; | ||
|
|
||
| interface myWindow extends Window { | ||
| PaystackPop: any | ||
| } | ||
| declare var window: Partial<myWindow> | ||
|
|
||
| @Component({ | ||
| selector: 'angular4-paystack-embed', | ||
| template: `<div id="paystackEmbedContainer"></div>` | ||
| }) | ||
|
|
||
| export class Angular4PaystackEmbed implements OnInit { | ||
| @Input() text: string | ||
| @Input() key: string | ||
| @Input() email: string | ||
| @Input() amount: number | ||
| @Input() metadata: {} | ||
| @Input() ref: string | ||
| @Input() currency: string | ||
| @Input() plan: string | ||
| @Input() quantity: string | ||
| @Input() subaccount: string | ||
| @Input() transaction_charge: number | ||
| @Input() bearer: string | ||
| @Output() close: EventEmitter<string> = new EventEmitter<string>() | ||
| @Output() callback: EventEmitter<string> = new EventEmitter<string>() | ||
| private paystackOptions: Partial<PaystackOptions>; | ||
| constructor() {} | ||
|
|
||
| pay() { | ||
| this.setUp() | ||
| console.log("OK payment will begin") | ||
| if(!this.checkInput()) return | ||
| window.PaystackPop.setup(this.paystackOptions) | ||
| } | ||
| checkInput(){ | ||
| if(!this.key) return console.error("Paystack key cannot be empty") | ||
| if(!this.email) return console.error("Paystack email cannot be empty") | ||
| if(!this.amount) return console.error("Paystack amount cannot be empty") | ||
| if(!this.ref) return console.error("Paystack ref cannot be empty") | ||
| if (!this.callback.observers.length) return console.error(`Insert a callback output like so (callback)='PaymentComplete($event)' to check payment status`) | ||
| return true | ||
| } | ||
|
|
||
| setUp() { | ||
| this.paystackOptions = { | ||
| container: "paystackEmbedContainer", | ||
| key: this.key , | ||
| email: this.email , | ||
| amount: this.amount , | ||
| ref: this.ref , | ||
| metadata: this.metadata || {}, | ||
| currency: this.currency || "NGN" , | ||
| plan: this.plan || "" , | ||
| quantity: this.quantity || "" , | ||
| subaccount: this.subaccount || "" , | ||
| transaction_charge: this.transaction_charge || 0 , | ||
| bearer: this.bearer || "" , | ||
| callback: (res) => this.callback.emit(res), | ||
| onClose: () => this.close.emit(), | ||
| } | ||
| } | ||
| ngOnInit() { | ||
| if(this.text) { | ||
| console.error("Paystack Text input is deprecated. Add text into textnode like so <angular4-paystack>Pay With Paystack</angular4-paystack>") | ||
| } | ||
| this.pay() | ||
| } | ||
|
|
||
| } |
73 changes: 73 additions & 0 deletions
73
examples/src/app/angular4-paystack/angular4-paystack-embed.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,73 @@ | ||
| import { async, TestBed } from "@angular/core/testing"; | ||
| import { Angular4PaystackEmbed } from "./angular4-paystack-embed.component"; | ||
|
|
||
| let comp | ||
| describe("Angular4-Paystack Embed", ()=> { | ||
| beforeEach(async () => { | ||
| TestBed.configureTestingModule({ | ||
| declarations: [ Angular4PaystackEmbed ], | ||
| }) | ||
| .compileComponents() | ||
| }) | ||
|
|
||
| beforeEach(() => { | ||
| let fixture = TestBed.createComponent(Angular4PaystackEmbed); | ||
| comp = fixture.componentInstance | ||
| }) | ||
|
|
||
| it("Should fail validation if key is not supplied", () => { | ||
| comp.amount = 1235678 | ||
| comp.email = "ashinzekene@gmail.com" | ||
| comp.callback.subscribe((res) => {}) | ||
| expect(comp.checkInput()).toBeFalsy() | ||
| }) | ||
|
|
||
| it("Should fail validation if amount is not supplied", () => { | ||
| comp.key = "pk_test_*************" | ||
| comp.email = "ashinzekene@gmail.com" | ||
| comp.callback.subscribe((res) => {}) | ||
| expect(comp.checkInput()).toBeFalsy() | ||
| }) | ||
|
|
||
| it("Should fail validation if amount is not a number", () => { | ||
| comp.key = "pk_test_*************" | ||
| comp.email = "ashinzekene@gmail.com" | ||
| comp.ref = "jfdi9urrktkkgkd" | ||
| comp.callback.subscribe((res) => {}) | ||
| expect(comp.checkInput()).toBeFalsy() | ||
| }) | ||
|
|
||
| it("Should fail validation if ref is not supplied", () => { | ||
| comp.key = "pk_test_*************" | ||
| comp.email = "ashinzekene@gmail.com" | ||
| comp.amount = 5000000 | ||
| comp.callback.subscribe((res) => {}) | ||
| expect(comp.checkInput()).toBeFalsy() | ||
| }) | ||
|
|
||
| it("Should fail valiation if callback is not supplied", () => { | ||
| comp.key = "pk_test_*************" | ||
| comp.email = "ashinzekene@gmail.com" | ||
| comp.amount = 5000000 | ||
| comp.ref = "950gjvkjbk" | ||
| expect(comp.checkInput()).toBeFalsy() | ||
| }) | ||
|
|
||
| it("Should fail valiation if style is supplied", () => { | ||
| comp.key = "pk_test_*************" | ||
| comp.email = "ashinzekene@gmail.com" | ||
| comp.amount = 5000000 | ||
| comp.style = { color: "rred" } | ||
| expect(comp.checkInput()).toBeFalsy() | ||
| }) | ||
|
|
||
| it("Should pass valiation if ref, amount, email and key and callback is supplied", () => { | ||
| comp.key = "pk_test_*************" | ||
| comp.email = "ashinzekene@gmail.com" | ||
| comp.amount = 5000000 | ||
| comp.ref = "950gjvkjbk" | ||
| comp.callback.subscribe((res) => {}) | ||
| expect(comp.checkInput()).toBeTruthy() | ||
| }) | ||
|
|
||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.