Add angular demo of 'createSource'.

triniwiz · Apr 13, 2020 · 0019fb4 · 0019fb4
1 parent 6f18471
commit 0019fb4
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 4 deletions.
diff --git a/demo-angular/app/demo/creditcardview.component.html b/demo-angular/app/demo/creditcardview.component.html
@@ -5,7 +5,9 @@
 <StackLayout class="page">
   <CreditCardView #card></CreditCardView>
   <Button text="Create Token" (tap)="createToken(card)" class="btn btn-primary"></Button>
+  <Button text="Create Source" (tap)="createSource(card)" class="btn btn-primary"></Button>
   <Button text="Create Payment Method" (tap)="createPaymentMethod(card)" class="btn btn-primary"></Button>
   <Label [text]="token" textWrap="true"></Label>
+  <Label [text]="source" textWrap="true"></Label>
   <Label [text]="payment" textWrap="true"></Label>
 </StackLayout>
diff --git a/demo-angular/app/demo/creditcardview.component.ts b/demo-angular/app/demo/creditcardview.component.ts
@@ -1,6 +1,5 @@
 import { ChangeDetectorRef, Component } from "@angular/core";
-import { CreditCardView, PaymentMethod, Stripe, Token } from "nativescript-stripe";
-import { isAndroid } from "tns-core-modules/platform";
+import { CreditCardView, PaymentMethod, Source, Stripe, Token } from "nativescript-stripe";
 import { publishableKey } from "./stripe.service";
 
 @Component({
@@ -10,6 +9,7 @@ import { publishableKey } from "./stripe.service";
 })
 export class CreditCardViewComponent {
   token: string;
+  source: string;
   payment: string;
   private stripe: Stripe;
 
@@ -28,6 +28,14 @@ export class CreditCardViewComponent {
     });
   }
 
+  createSource(cardView: CreditCardView): void {
+    this.token = "Fetching sourcre...";
+    this.stripe.createSource(cardView.card, (error, source) => {
+      this.source = error ? error.message : this.formatSource(source);
+      this.changeDetectionRef.detectChanges();
+    });
+  }
+
   createPaymentMethod(cardView: CreditCardView): void {
     this.payment = "Fetching payment method...";
     this.stripe.createPaymentMethod(cardView.card, (error, pm) => {
@@ -40,6 +48,10 @@ export class CreditCardViewComponent {
     return `\n\nToken:\nID: ${token.id}\nCard: ${token.card.brand} (...${token.card.last4})`;
   }
 
+  private formatSource(source: Source): string {
+    return `ID: ${source.id}\nCard: ${source.card.brand} (...${source.card.last4})`;
+  }
+
   private formatPaymentMethod(pm: PaymentMethod): string {
     return `\n\nPayment Method:\nType: ${pm.type}\nID: ${pm.id}\nCard: ${pm.card.brand} (...${pm.card.last4})` +
       `\nCreated: ${new Date(pm.created).toTimeString()}`;

diff --git a/demo/app/demo/ccview-page.ts b/demo/app/demo/ccview-page.ts
@@ -1,4 +1,4 @@
-import { CreditCardView, Stripe, Token, Source } from "nativescript-stripe";
+import { CreditCardView, Source, Stripe, Token } from "nativescript-stripe";
 import { EventData, fromObject } from "tns-core-modules/data/observable";
 import { Button } from "tns-core-modules/ui/button";
 import { Page } from "tns-core-modules/ui/page";
@@ -35,7 +35,7 @@ export function createSource(args: EventData) {
   let page = (<Button>args.object).page;
   let ccView: CreditCardView = page.getViewById("card");
   stripe.createSource(ccView.card, (error, source) => {
-    let value = error ? error.message : formatSource(source)
+    let value = error ? error.message : formatSource(source);
     tokenSource.set("source", value);
   });
 }