Ionic Card IO – prikupljanje podataka s bankovne kartice

Ionic Card IO – prikupljanje podataka s bankovne kartice

U ovom ću blog postu pokazati kako napraviti jednostavnu Ionic aplikaciju koja će imati mogućnost prikupljanja podataka s bankovne kartice kako bi se moglo provesti plaćanje.

Važna napomena! Ovdje navedeni primjer tiče se samo klijentske strane i plaćanje neće biti provedeno. Za to je potreban i backend koji je moguće napraviti u npr. NodeJS-u.

Što je Card IO?

https://www.card.io/ omogućava skeniranje bankovne kartice kako bi se olakšalo i ubrzalo plaćanje.

Više o funkcionalnostima moguće je pronaći na poveznici https://github.com/card-io/card.io-Cordova-Plugin ili unutar dokumentacije Ionic Native 3.x Card IO plugina

Nekoliko je opcionalnih parametara koji se mogu koristiti prilikom skeniranja bankovne kartice unutar CardIOOptions objekta:

– requireExpiry (boolean) – Set to true to require expiry date
– requireCVV (boolean) – The user will be prompted for the card CVV
– requirePostalCode (boolean) – The user will be prompted for the card billing postal code.
– suppressManual (boolean) – Removes the keyboard button from the scan screen.
– restrictPostalCodeToNumericOnly (boolean) – The postal code will only collect numeric input. Set this if you know the expected country’s postal code has only numeric postal codes.
– keepApplicationTheme (boolean) – The theme for the card.io Activity’s will be set to the theme of the application.
– requireCardholderName (boolean) – The user will be prompted for the cardholder name
– scanInstructions (string) – Used to display instructions to the user while they are scanning their card.
– noCamera (boolean) – If set, the card will not be scanned with the camera.
– scanExpiry (boolean) – If scanExpiry is true, an attempt to extract the expiry from the card image will be made.
– languageOrLocale (string) – The preferred language for all strings appearing in the user interface. If not set, or if set to null, defaults to the device’s current language setting.
– guideColor (string | number) – Changes the color of the guide overlay on the camera. The color is provided in hexadecimal format (e.g. #FFFFFF)
– supressConfirmation (boolean) – The user will not be prompted to confirm their card number after processing.
– hideCardIOLogo (boolean) – The card.io logo will not be shown overlaid on the camera.
– useCardIOLogo (boolean) – The card.io logo will be shown instead of the PayPal logo.
– supressScan (boolean) – Once a card image has been captured but before it has been processed, this value will determine whether to continue processing as usual.

S druge strane, tu je i CardIOResponse objekt unutar kojega je moguće odrediti koje informacije želimo dobiti nakon što se uspješno obavi skeniranje bankovne kartice.

- cardType (string) - Card type
- redactedCardNumber (string) - Masked card number, showing only last 4 digits
- cardNumber (string) - Full card number
- expiryMonth (number) - Expiry month
- expiryYear (number) - Expiry year
- cvv (string) - CVV
- postalCode (string) - Postal code
- cardholderName (string) - Cardholder name

Kreiranje aplikacije

Kreiram novi Ionic projekt i odmah dodajem Android platformu.

$ ionic start IonicCardIO blank
$ cd IonicCardIO
$ ionic cordova platform add android

Card IO implementacija

Za početak, instaliram Ionic Native 3.x plugin Card IO.

$ ionic cordova plugin add card.io.cordova.mobilesdk
$ npm install --save @ionic-native/card-io

Nakon toga ovaj plugin deklariram unutar app.module.ts datoteke.

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { CardIO } from '@ionic-native/card-io';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    CardIO,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Sadržaj ekrana neće sadržavati ništa posebno. Glavna funkcionalnost krije se iza gumba tj. funkcije scanCard().

Ipak, kako bi se kartica mogla uslikati potrebno je dati odobrenje koje će biti automatski zatraženo prilikom prvog pokretanja aplikacije.

Ionic Card IO - početni ekran

<ion-header>
  <ion-navbar color="primary">
    <ion-title>
      Ionic CardIO
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-fab bottom right>
        <button ion-fab (click)="scanCard()">
          <ion-icon name="card"></ion-icon>
        </button>
  </ion-fab>
</ion-content>

Funkcionalnost se nalazi unutar home.ts datoteke tj. unutar HomePage klase.

import { Component } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';

import { CardIO, CardIOOptions, CardIOResponse } from '@ionic-native/card-io';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  results: CardIOResponse;

  constructor(public navCtrl: NavController,
              private _platform: Platform,
              private _cardIO: CardIO) {
  }

  async scanCard(){
    try {
      await this._platform.ready();
      const canScan = await this._cardIO.canScan();
      if(canScan){
         const options: CardIOOptions = {
          scanInstructions: "Skenirajte bankovnu karticu!",
         };
         this.results = await this._cardIO.scan(options);
         console.log(this.results);
      }
    }
    catch (e) {
      console.error(e);
    }
  }

}

Vezano uz ranije navedeni CardIOOptions objekt, ako ga postavim na sljedeći način

const options: CardIOOptions = {
          requireExpiry: true,
          requireCVV: true,
          requirePostalCode: true,
          suppressManual: false,
          restrictPostalCodeToNumericOnly: false,
          keepApplicationTheme: true,
          requireCardholderName: true,
          scanInstructions: "Skenirajte bankovnu karticu!",
          noCamera: false,
          scanExpiry: true,
          languageOrLocale: "HR",
          guideColor: "#488aff",
          supressConfirmation: false,
          hideCardIOLogo: false,
          useCardIOLogo: true,
          supressScan: false
};

Ekran za skeniranje tj. za ručni unos podataka s bankovne kartice izgleda ovako:

Ionic Card IO

Međutim, ako to malo drugačije posložim

const options: CardIOOptions = {
          requireExpiry: true,
          requireCVV: true,
          requirePostalCode: false,
          suppressManual: false,
          restrictPostalCodeToNumericOnly: false,
          keepApplicationTheme: true,
          requireCardholderName: true,
          scanInstructions: "Skenirajte bankovnu karticu!",
          noCamera: false,
          scanExpiry: true,
          languageOrLocale: "HR",
          guideColor: "#488aff",
          supressConfirmation: false,
          hideCardIOLogo: false,
          useCardIOLogo: false,
          supressScan: false
};

i ekrani će izgledati drugačije

Ionic Card IO

S obzirom da u ovom primjeru ne želim koristiti svoju karticu iskoristit ću dostupne demo podatke sa adrese https://www.datatrans.ch/showcase/test-cc-numbers

Test card numbers

Prikupit ću podatke s dvije kartice.

Ionic Card IO

Što unutar Chrome Developer konzole izgleda ovako:

Ionic Card IO

Zaključak

Struktura aplikacije prema package.json

{
  "name": "IonicCardIO",
  "version": "0.0.1",
  "author": "Tomislav Stanković",
  "homepage": "https://www.tomislavstankovic.com/",
  "private": true,
  "scripts": {
    "start": "ionic-app-scripts serve",
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint"
  },
  "dependencies": {
    "@angular/animations": "5.2.11",
    "@angular/common": "5.2.11",
    "@angular/compiler": "5.2.11",
    "@angular/compiler-cli": "5.2.11",
    "@angular/core": "5.2.11",
    "@angular/forms": "5.2.11",
    "@angular/http": "5.2.11",
    "@angular/platform-browser": "5.2.11",
    "@angular/platform-browser-dynamic": "5.2.11",
    "@ionic-native/card-io": "^4.19.0",
    "@ionic-native/core": "~4.18.0",
    "@ionic-native/splash-screen": "~4.18.0",
    "@ionic-native/status-bar": "~4.18.0",
    "@ionic/storage": "2.2.0",
    "card.io.cordova.mobilesdk": "2.1.0",
    "cordova-android": "7.1.4",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-ionic-keyboard": "^2.1.3",
    "cordova-plugin-ionic-webview": "^2.3.2",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "rxjs": "5.5.11",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.2.1",
    "typescript": "~2.6.2"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "card.io.cordova.mobilesdk": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-ionic-keyboard": {}
    },
    "platforms": [
      "android"
    ]
  }
}

Objavio

Tomislav Stanković

Bloger širokog raspona interesa od kojih dio voli objaviti na ovom blogu. U neslobodno vrijeme Angular developer mobilnih i web aplikacija.

Odgovori

Vaša adresa e-pošte neće biti objavljena. Obavezna polja su označena sa *