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:

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.

Kreiranje aplikacije

Kreiram novi Ionic projekt i odmah dodajem Android platformu.

Card IO implementacija

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

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

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

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

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

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

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

Objavio

Tomislav Stanković

Web Developer - JavaScript, TypeScript, Angular, ExpressJS, Ionic Framework

Odgovori

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