example design ups

Author: ashinzekene

projects/angular4-paystack/src/lib/angular4-paystack-embed.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, Output,EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
 import { PaystackOptions } from "./paystack-options";
 
 interface myWindow extends Window {
@@ -8,7 +8,7 @@ declare var window: Partial<myWindow>
 
 @Component({
   selector: 'angular4-paystack-embed',
-  changeDetection: ChangeDetectionStrategy.OnPush, 
+  changeDetection: ChangeDetectionStrategy.OnPush,
   template: `<div id="paystackEmbedContainer"></div>`
 })
 
@@ -28,44 +28,44 @@ export class Angular4PaystackEmbed implements OnInit {
   @Output() close: EventEmitter<string> = new EventEmitter<string>()
   @Output() callback: EventEmitter<string> = new EventEmitter<string>()
   private paystackOptions: Partial<PaystackOptions>;
-  constructor() {}
+  constructor() { }
 
   pay() {
     this.setUp()
     console.log("OK payment will begin")
-    if(!this.checkInput()) return
+    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")
+  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 ,
+      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 || "" ,
+      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>")      
+    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()
   }

projects/angular4-paystack/src/lib/angular4-paystack.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { PaystackOptions } from "./paystack-options";
 
 interface MyWindow extends Window {
@@ -8,7 +8,6 @@ declare var window: MyWindow
 
 @Component({
   selector: 'angular4-paystack',
-  changeDetection: ChangeDetectionStrategy.OnPush,
   template: `<button [ngClass]="class" [ngStyle]="style" (click)="pay()">{{text}}<ng-content></ng-content></button>`,
 })
 export class Angular4PaystackComponent implements OnInit {

src/app/app.component.html

@@ -1,21 +1,25 @@
-<div class="container">
-  <div class="display-4 p-3">Title: {{ title }}</div>
-  <h5>Result name: {{ results.name }} </h5>
-  
-  <div>You have not paid yet</div>
-<!-- <app-test-comp (payment)="letMeKnow($event)"></app-test-comp> -->
+<div class="display-4 py-4 px-1 text-center bg-primary text-white">Angular4 Paystack</div>
+<div class="text-center lead">{{ title }}</div>
+<div class="paystack-buttons text-center d-md-flex d-lg-flex d-xl-flex justify-content-between">
   <angular4-paystack
-    class="m-3"
+    [class]="'btn btn-primary m-3'"
     [key]="'pk_test_c613fc7d428a64fd1e5daea22f8380551b28c78e'" [email]="'mailexample@mail.com'"
     [amount]="'5000000'" [ref]="tRef" (close)="paymentCancel()" (callback)="paymentDone($event)"
     [class]="'btn btn-primary'"
-  >Pay With Paystack</angular4-paystack>
+  >Pay With Paystack component</angular4-paystack>
 
   <button
     class="btn btn-danger m-3"
     angular4-paystack
     [key]="'pk_test_c613fc7d428a64fd1e5daea22f8380551b28c78e'" [email]="'mailexample@mail.com'"
     [amount]="'5000000'" [ref]="tRef" (close)="paymentCancel()" (callback)="paymentDone($event)"
     [class]="'btn btn-primary btn-lg'"
-  >Pay With Paystack</button>
-</div>
+    >Pay With Paystack Directive</button>
+</div>
+  <h3 class="text-center my-3">Paystack Embed</h3>
+  <angular4-paystack-embed
+    angular4-paystack
+    [key]="'pk_test_c613fc7d428a64fd1e5daea22f8380551b28c78e'" [email]="'mailexample@mail.com'"
+    [amount]="'5000000'" [ref]="tRef" (close)="paymentCancel()" (callback)="paymentDone($event)"
+    [class]="'btn btn-primary btn-lg'"
+  ></angular4-paystack-embed>

src/app/app.component.ts

@@ -6,7 +6,7 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./app.component.css']
 })
 export class AppComponent implements OnInit {
-  public title: string = 'app';
+  public title: string = 'My app';
   public results = {
     name: ''
   }