feat: make ccard images available (#116)

* Make credit card images accessible to the plugin.

* bump version

CHANGELOG.md

@@ -1,5 +1,9 @@
 Changelog
 
+## 6.6.0 (2020, May 5)
+### Updates
+- [(# 115)](https://github.com/triniwiz/nativescript-stripe/issues/115) Make Stripe's credit card images visible to clients
+
 ## 6.5.0 (2020, April 22)
 ### Updates
 - [(# 108)](https://github.com/triniwiz/nativescript-stripe/issues/108) Update to Stripe Android SDK v12. No new functionality. Should be backward compatible with v6.4.0.

demo-angular/app/app.module.ts

@@ -5,10 +5,11 @@ import { AppComponent } from "./app.component";
 import { AppRoutingModule } from "./app.routing";
 import { CreditCardViewComponent } from "./demo/creditcardview.component";
 import { HomeComponent } from "./demo/home.component";
-import { StandardComponent } from "./demo/standard.component";
+import { ImagesComponent } from "./demo/images.component";
+import { ItentModalComponent } from "./demo/intent-modal.component";
 import { IntentComponent } from "./demo/intent.component";
+import { StandardComponent } from "./demo/standard.component";
 import { StripeService } from "./demo/stripe.service";
-import { ItentModalComponent } from "./demo/intent-modal.component";
 
 // Uncomment and add to NgModule imports if you need to use two-way binding
 // import { NativeScriptFormsModule } from "nativescript-angular/forms";
@@ -30,6 +31,7 @@ import { ItentModalComponent } from "./demo/intent-modal.component";
     HomeComponent,
     StandardComponent,
     CreditCardViewComponent,
+    ImagesComponent,
     IntentComponent,
     ItentModalComponent
   ],

demo-angular/app/app.routing.ts

@@ -3,19 +3,21 @@ import { Routes } from "@angular/router";
 import { NativeScriptRouterModule } from "nativescript-angular/router";
 import { CreditCardViewComponent } from "./demo/creditcardview.component";
 import { HomeComponent } from "./demo/home.component";
-import { StandardComponent } from "./demo/standard.component";
+import { ImagesComponent } from "./demo/images.component";
 import { IntentComponent } from "./demo/intent.component";
+import { StandardComponent } from "./demo/standard.component";
 
 const routes: Routes = [
   { path: "", redirectTo: "/home", pathMatch: "full" },
   { path: "home", component: HomeComponent },
   { path: "std", component: StandardComponent },
   { path: "ccview", component: CreditCardViewComponent },
-  { path: "intent", component: IntentComponent }
+  { path: "intent", component: IntentComponent },
+  { path: "images", component: ImagesComponent }
 ];
 
 @NgModule({
   imports: [NativeScriptRouterModule.forRoot(routes)],
   exports: [NativeScriptRouterModule]
 })
-export class AppRoutingModule { }
+export class AppRoutingModule { }

demo-angular/app/demo/home.component.html

@@ -12,4 +12,8 @@
   <StackLayout class="hr-light m-10"></StackLayout>
   <Label text="Intent Integration" class="h2"></Label>
   <Button text="Intent" [nsRouterLink]="['/intent']" class="btn btn-primary btn-active"></Button>
-</StackLayout>
+
+  <StackLayout class="hr-light m-10"></StackLayout>
+  <Label text="Card Images" class="h2"></Label>
+  <Button text="Images" [nsRouterLink]="['/images']" class="btn btn-primary btn-active"></Button>
+</StackLayout>

demo-angular/app/demo/images.component.html

@@ -0,0 +1,17 @@
+<ActionBar title="Images" class="action-bar">
+  <NavigationButton text=""></NavigationButton>
+</ActionBar>
+<StackLayout class="page p-10">
+  <GridLayout rows="auto" columns="*,2*">
+    <Label col="0" text="Brand" class="h2 text-center"></Label>
+    <Label col="1" text="Image" class="h2 text-center"></Label>
+  </GridLayout>
+  <StackLayout class="hr-light m-10"></StackLayout>
+  <StackLayout *ngFor="let brand of brands">
+    <GridLayout rows="auto" columns="*,2*">
+      <Label col="0" [text]="brand"></Label>
+      <Image col="1" width="32" height="20" [src]="images[brand]"></Image>
+    </GridLayout>
+    <StackLayout class="hr-light m-10"></StackLayout>
+  </StackLayout>
+</StackLayout>

demo-angular/app/demo/images.component.ts

@@ -0,0 +1,24 @@
+import { Component } from "@angular/core";
+import { Card, CardBrand } from "nativescript-stripe";
+
+type ImageTable = {
+  [brand: string]: any;
+};
+
+@Component({
+  selector: "stp-images",
+  moduleId: module.id,
+  templateUrl: "images.component.html",
+})
+export class ImagesComponent {
+  images: ImageTable = {};
+
+  constructor() {
+    let brands: CardBrand[] = ["Visa", "Amex", "MasterCard", "Discover", "JCB", "DinersClub", "Unknown"];
+    brands.forEach(b => this.images[b] = Card.cardImage(b));
+  }
+
+  get brands(): string[] {
+    return Object.keys(this.images);
+  }
+}

src/index.d.ts

@@ -65,6 +65,7 @@ export declare class Card implements CardCommon {
   readonly fingerprint: string;
   readonly funding: string;
   readonly country: string;
+  static cardImage(brand: CardBrand): any;
 }
 export declare class CreditCardView extends CreditCardViewBase {
   readonly android: any /*com.stripe.android.view.CardInputWidget*/;
@@ -194,4 +195,4 @@ export declare const enum StripeRedirectState {
   InProgress = 1,
   Cancelled = 2,
   Completed = 3
-}
+}

src/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nativescript-stripe",
-  "version": "6.5.0",
+  "version": "6.6.0",
   "description": "NativeScript Stripe sdk",
   "main": "stripe",
   "typings": "index.d.ts",

src/stripe.android.ts

@@ -389,6 +389,51 @@ export class Card implements CardCommon {
   get country(): string {
     return this.native.getCountry();
   }
+
+  /**
+   * Returns an image for a card given its brand.
+   * The returned value can be used as [src] in an Image tag.
+   */
+  static cardImage(brand: CardBrand): any {
+    return getBitmapFromResource(com.stripe.android.model.Card.getBrandIcon(Card.fromCardBrand(brand)));
+  }
+
+  private static fromCardBrand(brand: CardBrand): string {
+    switch (brand.toLowerCase()) {
+      case 'visa':
+        return com.stripe.android.model.Card.CardBrand.VISA;
+      case 'amex':
+      case 'americanexpress':
+      case 'american_express':
+      case 'american express':
+        return com.stripe.android.model.Card.CardBrand.AMERICAN_EXPRESS;
+      case 'mastercard':
+        return com.stripe.android.model.Card.CardBrand.MASTERCARD;
+      case 'discover':
+        return com.stripe.android.model.Card.CardBrand.DISCOVER;
+      case 'jcb':
+        return com.stripe.android.model.Card.CardBrand.JCB;
+      case 'dinersclub':
+      case 'diners_club':
+      case 'diners club':
+        return com.stripe.android.model.Card.CardBrand.DINERS_CLUB;
+    }
+    return com.stripe.android.model.Card.CardBrand.UNKNOWN;
+  }
+
+}
+
+function getBitmapFromResource(resID: number): android.graphics.Bitmap {
+  let image = androidApp.foregroundActivity.getResources().getDrawable(resID, null);
+  if (image instanceof android.graphics.Bitmap) {
+    return image;
+  }
+  let bitmap = android.graphics.Bitmap.createBitmap(image.getIntrinsicWidth(),
+    image.getIntrinsicHeight(), android.graphics.Bitmap.Config.ARGB_8888);
+  let canvas = new android.graphics.Canvas(bitmap);
+  image.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
+  image.draw(canvas);
+  return bitmap;
 }
 
 export class CreditCardView extends CreditCardViewBase {

src/stripe.ios.ts

@@ -419,6 +419,29 @@ export class Card implements CardCommon {
     return 'Unknown';
   }
 
+  private static fromCardBrand(brand: CardBrand): STPCardBrand {
+    switch (brand.toLowerCase()) {
+      case 'visa':
+        return STPCardBrand.Visa;
+      case 'amex':
+      case 'americanexpress':
+      case 'american_express':
+      case 'american express':
+        return STPCardBrand.Amex;
+      case 'mastercard':
+        return STPCardBrand.MasterCard;
+      case 'discover':
+        return STPCardBrand.Discover;
+      case 'jcb':
+        return STPCardBrand.JCB;
+      case 'dinersclub':
+      case 'diners_club':
+      case 'diners club':
+        return STPCardBrand.DinersClub;
+    }
+    return STPCardBrand.Unknown;
+  }
+
   /**
    * Not available in IOS
    */
@@ -436,6 +459,14 @@ export class Card implements CardCommon {
   get country(): string {
     return this.native.addressCountry;
   }
+
+  /**
+   * Returns an image for a card given its brand.
+   * The returned value can be used as [src] in an Image tag.
+   */
+  static cardImage(brand: CardBrand): any {
+    return STPImageLibrary.brandImageForCardBrand(Card.fromCardBrand(brand));
+  }
 }
 
 export class CreditCardView extends CreditCardViewBase {