{"id":9064,"date":"2019-01-21T06:00:48","date_gmt":"2019-01-21T04:00:48","guid":{"rendered":"https:\/\/www.tomislavstankovic.com\/blog\/?p=9064"},"modified":"2019-01-20T17:31:19","modified_gmt":"2019-01-20T15:31:19","slug":"ionic-card-io-bankovna-kartica","status":"publish","type":"post","link":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-card-io-bankovna-kartica\/","title":{"rendered":"Ionic Card IO – prikupljanje podataka s bankovne kartice"},"content":{"rendered":"

U ovom \u0107u blog postu pokazati kako napraviti jednostavnu Ionic<\/em> aplikaciju koja \u0107e imati mogu\u0107nost prikupljanja podataka s bankovne kartice kako bi se moglo provesti pla\u0107anje. <\/p>\n

Va\u017ena napomena! Ovdje navedeni primjer ti\u010de se samo klijentske strane i pla\u0107anje ne\u0107e biti provedeno. Za to je potreban i backend<\/em> koji je mogu\u0107e napraviti u npr. NodeJS<\/em>-u. <\/p>\n

\u0160to je Card IO?<\/h2>\n

https:\/\/www.card.io\/<\/a> omogu\u0107ava skeniranje bankovne kartice kako bi se olak\u0161alo i ubrzalo pla\u0107anje. <\/p>\n

Vi\u0161e o funkcionalnostima mogu\u0107e je prona\u0107i na poveznici https:\/\/github.com\/card-io\/card.io-Cordova-Plugin<\/a> ili unutar dokumentacije Ionic Native 3.x<\/a> Card IO plugina<\/a><\/em><\/p>\n

Nekoliko je opcionalnih parametara koji se mogu koristiti prilikom skeniranja bankovne kartice unutar CardIOOptions<\/span> objekta: <\/p>\n

\u2013 requireExpiry (boolean) \u2013 Set to true to require expiry date\r\n\u2013 requireCVV (boolean) \u2013 The user will be prompted for the card CVV\r\n\u2013 requirePostalCode (boolean) \u2013 The user will be prompted for the card billing postal code.\r\n\u2013 suppressManual (boolean) \u2013 Removes the keyboard button from the scan screen.\r\n\u2013 restrictPostalCodeToNumericOnly (boolean) \u2013 The postal code will only collect numeric input. Set this if you know the expected country\u2019s postal code has only numeric postal codes.\r\n\u2013 keepApplicationTheme (boolean) \u2013 The theme for the card.io Activity\u2019s will be set to the theme of the application.\r\n\u2013 requireCardholderName (boolean) \u2013 The user will be prompted for the cardholder name\r\n\u2013 scanInstructions (string) \u2013 Used to display instructions to the user while they are scanning their card.\r\n\u2013 noCamera (boolean) \u2013 If set, the card will not be scanned with the camera.\r\n\u2013 scanExpiry (boolean) \u2013 If scanExpiry is true, an attempt to extract the expiry from the card image will be made.\r\n\u2013 languageOrLocale (string) \u2013 The preferred language for all strings appearing in the user interface. If not set, or if set to null, defaults to the device\u2019s current language setting.\r\n\u2013 guideColor (string | number) \u2013 Changes the color of the guide overlay on the camera. The color is provided in hexadecimal format (e.g. #FFFFFF)\r\n\u2013 supressConfirmation (boolean) \u2013 The user will not be prompted to confirm their card number after processing.\r\n\u2013 hideCardIOLogo (boolean) \u2013 The card.io logo will not be shown overlaid on the camera.\r\n\u2013 useCardIOLogo (boolean) \u2013 The card.io logo will be shown instead of the PayPal logo.\r\n\u2013 supressScan (boolean) \u2013 Once a card image has been captured but before it has been processed, this value will determine whether to continue processing as usual.<\/pre>\n
S druge strane, tu je i CardIOResponse<\/span> objekt unutar kojega je mogu\u0107e odrediti koje informacije \u017eelimo dobiti nakon \u0161to se uspje\u0161no obavi skeniranje bankovne kartice.<\/p>\n
- cardType (string) - Card type\r\n- redactedCardNumber (string) - Masked card number, showing only last 4 digits\r\n- cardNumber (string) - Full card number\r\n- expiryMonth (number) - Expiry month\r\n- expiryYear (number) - Expiry year\r\n- cvv (string) - CVV\r\n- postalCode (string) - Postal code\r\n- cardholderName (string) - Cardholder name<\/pre>\n
Kreiranje aplikacije<\/h2>\n
Kreiram novi Ionic<\/em> projekt<\/a> i odmah dodajem Android<\/em> platformu<\/a>.<\/p>\n
$ ionic start IonicCardIO blank\r\n$ cd IonicCardIO\r\n$ ionic cordova platform add android<\/pre>\n
Card IO implementacija<\/h2>\n
Za po\u010detak, instaliram Ionic Native 3.x<\/a> plugin Card IO<\/a><\/em>.<\/p>\n
$ ionic cordova plugin add card.io.cordova.mobilesdk\r\n$ npm install --save @ionic-native\/card-io<\/pre>\n
Nakon toga ovaj plugin<\/em> deklariram unutar app.module.ts<\/strong> datoteke.<\/p>\n
import { BrowserModule } from '@angular\/platform-browser';\r\nimport { ErrorHandler, NgModule } from '@angular\/core';\r\nimport { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';\r\nimport { SplashScreen } from '@ionic-native\/splash-screen';\r\nimport { StatusBar } from '@ionic-native\/status-bar';\r\n\r\nimport { CardIO } from '@ionic-native\/card-io';\r\n\r\nimport { MyApp } from '.\/app.component';\r\nimport { HomePage } from '..\/pages\/home\/home';\r\n\r\n@NgModule({\r\n  declarations: [\r\n    MyApp,\r\n    HomePage\r\n  ],\r\n  imports: [\r\n    BrowserModule,\r\n    IonicModule.forRoot(MyApp)\r\n  ],\r\n  bootstrap: [IonicApp],\r\n  entryComponents: [\r\n    MyApp,\r\n    HomePage\r\n  ],\r\n  providers: [\r\n    StatusBar,\r\n    SplashScreen,\r\n    CardIO,\r\n    {provide: ErrorHandler, useClass: IonicErrorHandler}\r\n  ]\r\n})\r\nexport class AppModule {}<\/pre>\n
Sadr\u017eaj ekrana ne\u0107e sadr\u017eavati ni\u0161ta posebno. Glavna funkcionalnost krije se iza gumba tj. funkcije scanCard()<\/span>. <\/p>\n
Ipak, kako bi se kartica mogla uslikati potrebno je dati odobrenje koje \u0107e biti automatski zatra\u017eeno prilikom prvog pokretanja aplikacije.<\/p>\n
\"Ionic<\/a><\/p>\n
<ion-header>\r\n  <ion-navbar color=\"primary\">\r\n    <ion-title>\r\n      Ionic CardIO\r\n    <\/ion-title>\r\n  <\/ion-navbar>\r\n<\/ion-header>\r\n\r\n<ion-content padding>\r\n  <ion-fab bottom right>\r\n        <button ion-fab (click)=\"scanCard()\">\r\n          <ion-icon name=\"card\"><\/ion-icon>\r\n        <\/button>\r\n  <\/ion-fab>\r\n<\/ion-content><\/pre>\n
Funkcionalnost se nalazi unutar home.ts<\/strong> datoteke tj. unutar HomePage<\/span> klase.<\/p>\n
import { Component } from '@angular\/core';\r\nimport { NavController, Platform } from 'ionic-angular';\r\n\r\nimport { CardIO, CardIOOptions, CardIOResponse } from '@ionic-native\/card-io';\r\n\r\n@Component({\r\n  selector: 'page-home',\r\n  templateUrl: 'home.html'\r\n})\r\nexport class HomePage {\r\n\r\n  results: CardIOResponse;\r\n\r\n  constructor(public navCtrl: NavController,\r\n              private _platform: Platform,\r\n              private _cardIO: CardIO) {\r\n  }\r\n\r\n  async scanCard(){\r\n    try {\r\n      await this._platform.ready();\r\n      const canScan = await this._cardIO.canScan();\r\n      if(canScan){\r\n         const options: CardIOOptions = {\r\n          scanInstructions: \"Skenirajte bankovnu karticu!\",\r\n         };\r\n         this.results = await this._cardIO.scan(options);\r\n         console.log(this.results);\r\n      }\r\n    }\r\n    catch (e) {\r\n      console.error(e);\r\n    }\r\n  }\r\n\r\n}<\/pre>\n
Vezano uz ranije navedeni CardIOOptions<\/span> objekt, ako ga postavim na sljede\u0107i na\u010din<\/p>\n
const options: CardIOOptions = {\r\n          requireExpiry: true,\r\n          requireCVV: true,\r\n          requirePostalCode: true,\r\n          suppressManual: false,\r\n          restrictPostalCodeToNumericOnly: false,\r\n          keepApplicationTheme: true,\r\n          requireCardholderName: true,\r\n          scanInstructions: \"Skenirajte bankovnu karticu!\",\r\n          noCamera: false,\r\n          scanExpiry: true,\r\n          languageOrLocale: \"HR\",\r\n          guideColor: \"#488aff\",\r\n          supressConfirmation: false,\r\n          hideCardIOLogo: false,\r\n          useCardIOLogo: true,\r\n          supressScan: false\r\n};<\/pre>\n
Ekran za skeniranje tj. za ru\u010dni unos podataka s bankovne kartice izgleda ovako:<\/p>\n
\"Ionic<\/a><\/p>\n
Me\u0111utim, ako to malo druga\u010dije poslo\u017eim <\/p>\n
const options: CardIOOptions = {\r\n          requireExpiry: true,\r\n          requireCVV: true,\r\n          requirePostalCode: false,\r\n          suppressManual: false,\r\n          restrictPostalCodeToNumericOnly: false,\r\n          keepApplicationTheme: true,\r\n          requireCardholderName: true,\r\n          scanInstructions: \"Skenirajte bankovnu karticu!\",\r\n          noCamera: false,\r\n          scanExpiry: true,\r\n          languageOrLocale: \"HR\",\r\n          guideColor: \"#488aff\",\r\n          supressConfirmation: false,\r\n          hideCardIOLogo: false,\r\n          useCardIOLogo: false,\r\n          supressScan: false\r\n};<\/pre>\n
i ekrani \u0107e izgledati druga\u010dije<\/p>\n
\"Ionic<\/a><\/p>\n
S obzirom da u ovom primjeru ne \u017eelim koristiti svoju karticu iskoristit \u0107u dostupne demo podatke sa adrese https:\/\/www.datatrans.ch\/showcase\/test-cc-numbers<\/a><\/p>\n
\"Test<\/a><\/p>\n
Prikupit \u0107u podatke s dvije kartice.<\/p>\n
\"Ionic<\/a><\/p>\n
\u0160to unutar Chrome Developer<\/em> konzole<\/a> izgleda ovako:<\/p>\n
\"Ionic<\/a><\/p>\n
Zaklju\u010dak<\/h2>\n
Struktura aplikacije prema package.json<\/strong><\/p>\n
{\r\n  \"name\": \"IonicCardIO\",\r\n  \"version\": \"0.0.1\",\r\n  \"author\": \"Tomislav Stankovi\u0107\",\r\n  \"homepage\": \"https:\/\/www.tomislavstankovic.com\/\",\r\n  \"private\": true,\r\n  \"scripts\": {\r\n    \"start\": \"ionic-app-scripts serve\",\r\n    \"clean\": \"ionic-app-scripts clean\",\r\n    \"build\": \"ionic-app-scripts build\",\r\n    \"lint\": \"ionic-app-scripts lint\"\r\n  },\r\n  \"dependencies\": {\r\n    \"@angular\/animations\": \"5.2.11\",\r\n    \"@angular\/common\": \"5.2.11\",\r\n    \"@angular\/compiler\": \"5.2.11\",\r\n    \"@angular\/compiler-cli\": \"5.2.11\",\r\n    \"@angular\/core\": \"5.2.11\",\r\n    \"@angular\/forms\": \"5.2.11\",\r\n    \"@angular\/http\": \"5.2.11\",\r\n    \"@angular\/platform-browser\": \"5.2.11\",\r\n    \"@angular\/platform-browser-dynamic\": \"5.2.11\",\r\n    \"@ionic-native\/card-io\": \"^4.19.0\",\r\n    \"@ionic-native\/core\": \"~4.18.0\",\r\n    \"@ionic-native\/splash-screen\": \"~4.18.0\",\r\n    \"@ionic-native\/status-bar\": \"~4.18.0\",\r\n    \"@ionic\/storage\": \"2.2.0\",\r\n    \"card.io.cordova.mobilesdk\": \"2.1.0\",\r\n    \"cordova-android\": \"7.1.4\",\r\n    \"cordova-plugin-device\": \"^2.0.2\",\r\n    \"cordova-plugin-ionic-keyboard\": \"^2.1.3\",\r\n    \"cordova-plugin-ionic-webview\": \"^2.3.2\",\r\n    \"cordova-plugin-splashscreen\": \"^5.0.2\",\r\n    \"cordova-plugin-statusbar\": \"^2.4.2\",\r\n    \"cordova-plugin-whitelist\": \"^1.3.3\",\r\n    \"ionic-angular\": \"3.9.2\",\r\n    \"ionicons\": \"3.0.0\",\r\n    \"rxjs\": \"5.5.11\",\r\n    \"sw-toolbox\": \"3.6.0\",\r\n    \"zone.js\": \"0.8.26\"\r\n  },\r\n  \"devDependencies\": {\r\n    \"@ionic\/app-scripts\": \"3.2.1\",\r\n    \"typescript\": \"~2.6.2\"\r\n  },\r\n  \"description\": \"An Ionic project\",\r\n  \"cordova\": {\r\n    \"plugins\": {\r\n      \"card.io.cordova.mobilesdk\": {},\r\n      \"cordova-plugin-whitelist\": {},\r\n      \"cordova-plugin-statusbar\": {},\r\n      \"cordova-plugin-device\": {},\r\n      \"cordova-plugin-splashscreen\": {},\r\n      \"cordova-plugin-ionic-webview\": {\r\n        \"ANDROID_SUPPORT_ANNOTATIONS_VERSION\": \"27.+\"\r\n      },\r\n      \"cordova-plugin-ionic-keyboard\": {}\r\n    },\r\n    \"platforms\": [\r\n      \"android\"\r\n    ]\r\n  }\r\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"
U ovom \u0107u blog postu pokazati kako napraviti jednostavnu Ionic aplikaciju koja \u0107e imati mogu\u0107nost prikupljanja podataka s bankovne kartice kako bi se moglo provesti pla\u0107anje. Va\u017ena napomena! Ovdje navedeni primjer ti\u010de se samo klijentske strane i pla\u0107anje ne\u0107e biti provedeno. Za to je potreban i backend koji je mogu\u0107e napraviti u npr. NodeJS-u. \u0160to … Nastavi \u010ditati Ionic Card IO – prikupljanje podataka s bankovne kartice<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":9069,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[564,351],"tags":[569,400,348,401],"class_list":["post-9064","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobile","category-razvoj","tag-card-io","tag-ionic-3","tag-ionic-framework","tag-ionic-native-3-x"],"yoast_head":"\nIonic Card IO - prikupljanje podataka s bankovne kartice - Tomislav Stankovi\u0107<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.tomislavstankovic.com\/blog\/ionic-card-io-bankovna-kartica\/\" \/>\n<meta property=\"og:locale\" content=\"hr_HR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ionic Card IO - prikupljanje podataka s bankovne kartice - Tomislav Stankovi\u0107\" \/>\n<meta property=\"og:description\" content=\"U ovom \u0107u blog postu pokazati kako napraviti jednostavnu Ionic aplikaciju koja \u0107e imati mogu\u0107nost prikupljanja podataka s bankovne kartice kako bi se moglo provesti pla\u0107anje. Va\u017ena napomena! Ovdje navedeni primjer ti\u010de se samo klijentske strane i pla\u0107anje ne\u0107e biti provedeno. Za to je potreban i backend koji je mogu\u0107e napraviti u npr. NodeJS-u. \u0160to … Nastavi \u010ditati Ionic Card IO – prikupljanje podataka s bankovne kartice\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.tomislavstankovic.com\/blog\/ionic-card-io-bankovna-kartica\/\" \/>\n<meta property=\"og:site_name\" content=\"Tomislav Stankovi\u0107\" \/>\n<meta property=\"article:published_time\" content=\"2019-01-21T04:00:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/01\/ionic-card-io-bankovna-kartica-min.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"825\" \/>\n\t<meta property=\"og:image:height\" content=\"510\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Tomislav Stankovi\u0107\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Napisao\/la\" \/>\n\t<meta name=\"twitter:data1\" content=\"Tomislav Stankovi\u0107\" \/>\n\t<meta name=\"twitter:label2\" content=\"Procijenjeno vrijeme \u010ditanja\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minuta\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic-card-io-bankovna-kartica\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic-card-io-bankovna-kartica\\\/\"},\"author\":{\"name\":\"Tomislav Stankovi\u0107\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#\\\/schema\\\/person\\\/0329c549c57700034ea77f5d3d78396d\"},\"headline\":\"Ionic Card IO – prikupljanje podataka s bankovne kartice\",\"datePublished\":\"2019-01-21T04:00:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic-card-io-bankovna-kartica\\\/\"},\"wordCount\":332,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#\\\/schema\\\/person\\\/0329c549c57700034ea77f5d3d78396d\"},\"image\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic-card-io-bankovna-kartica\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/01\\\/ionic-card-io-bankovna-kartica-min.jpg\",\"keywords\":[\"Card IO\",\"Ionic 3\",\"Ionic Framework\",\"Ionic Native 3.x\"],\"articleSection\":[\"Mobile\",\"Razvoj\"],\"inLanguage\":\"hr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic-card-io-bankovna-kartica\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic-card-io-bankovna-kartica\\\/\",\"url\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic-card-io-bankovna-kartica\\\/\",\"name\":\"Ionic Card IO - prikupljanje podataka s bankovne kartice - Tomislav Stankovi\u0107\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic-card-io-bankovna-kartica\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic-card-io-bankovna-kartica\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/01\\\/ionic-card-io-bankovna-kartica-min.jpg\",\"datePublished\":\"2019-01-21T04:00:48+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic-card-io-bankovna-kartica\\\/#breadcrumb\"},\"inLanguage\":\"hr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic-card-io-bankovna-kartica\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"hr\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic-card-io-bankovna-kartica\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/01\\\/ionic-card-io-bankovna-kartica-min.jpg\",\"contentUrl\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/01\\\/ionic-card-io-bankovna-kartica-min.jpg\",\"width\":825,\"height\":510,\"caption\":\"Ionic Card IO \u2013 prikupljanje podataka s bankovne kartice\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic-card-io-bankovna-kartica\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Po\u010detna stranica\",\"item\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Ionic Card IO – prikupljanje podataka s bankovne kartice\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/\",\"name\":\"Tomislav Stankovi\u0107\",\"description\":\"Sam svoj bloger\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#\\\/schema\\\/person\\\/0329c549c57700034ea77f5d3d78396d\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"hr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#\\\/schema\\\/person\\\/0329c549c57700034ea77f5d3d78396d\",\"name\":\"Tomislav Stankovi\u0107\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"hr\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/cropped-TomislavStankovic.jpg\",\"url\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/cropped-TomislavStankovic.jpg\",\"contentUrl\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/cropped-TomislavStankovic.jpg\",\"width\":248,\"height\":165,\"caption\":\"Tomislav Stankovi\u0107\"},\"logo\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/cropped-TomislavStankovic.jpg\"},\"description\":\"Bloger \u0161irokog raspona interesa od kojih dio voli objaviti na ovom blogu. U neslobodno vrijeme Angular developer mobilnih i web aplikacija.\",\"sameAs\":[\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/tomislavstankovic\\\/\"],\"url\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/author\\\/tomislavstankovic\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Ionic Card IO - prikupljanje podataka s bankovne kartice - Tomislav Stankovi\u0107","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-card-io-bankovna-kartica\/","og_locale":"hr_HR","og_type":"article","og_title":"Ionic Card IO - prikupljanje podataka s bankovne kartice - Tomislav Stankovi\u0107","og_description":"U ovom \u0107u blog postu pokazati kako napraviti jednostavnu Ionic aplikaciju koja \u0107e imati mogu\u0107nost prikupljanja podataka s bankovne kartice kako bi se moglo provesti pla\u0107anje. Va\u017ena napomena! Ovdje navedeni primjer ti\u010de se samo klijentske strane i pla\u0107anje ne\u0107e biti provedeno. Za to je potreban i backend koji je mogu\u0107e napraviti u npr. NodeJS-u. \u0160to … Nastavi \u010ditati Ionic Card IO – prikupljanje podataka s bankovne kartice","og_url":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-card-io-bankovna-kartica\/","og_site_name":"Tomislav Stankovi\u0107","article_published_time":"2019-01-21T04:00:48+00:00","og_image":[{"width":825,"height":510,"url":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/01\/ionic-card-io-bankovna-kartica-min.jpg","type":"image\/jpeg"}],"author":"Tomislav Stankovi\u0107","twitter_card":"summary_large_image","twitter_misc":{"Napisao\/la":"Tomislav Stankovi\u0107","Procijenjeno vrijeme \u010ditanja":"5 minuta"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-card-io-bankovna-kartica\/#article","isPartOf":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-card-io-bankovna-kartica\/"},"author":{"name":"Tomislav Stankovi\u0107","@id":"https:\/\/www.tomislavstankovic.com\/blog\/#\/schema\/person\/0329c549c57700034ea77f5d3d78396d"},"headline":"Ionic Card IO – prikupljanje podataka s bankovne kartice","datePublished":"2019-01-21T04:00:48+00:00","mainEntityOfPage":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-card-io-bankovna-kartica\/"},"wordCount":332,"commentCount":0,"publisher":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/#\/schema\/person\/0329c549c57700034ea77f5d3d78396d"},"image":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-card-io-bankovna-kartica\/#primaryimage"},"thumbnailUrl":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/01\/ionic-card-io-bankovna-kartica-min.jpg","keywords":["Card IO","Ionic 3","Ionic Framework","Ionic Native 3.x"],"articleSection":["Mobile","Razvoj"],"inLanguage":"hr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.tomislavstankovic.com\/blog\/ionic-card-io-bankovna-kartica\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-card-io-bankovna-kartica\/","url":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-card-io-bankovna-kartica\/","name":"Ionic Card IO - prikupljanje podataka s bankovne kartice - Tomislav Stankovi\u0107","isPartOf":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-card-io-bankovna-kartica\/#primaryimage"},"image":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-card-io-bankovna-kartica\/#primaryimage"},"thumbnailUrl":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/01\/ionic-card-io-bankovna-kartica-min.jpg","datePublished":"2019-01-21T04:00:48+00:00","breadcrumb":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-card-io-bankovna-kartica\/#breadcrumb"},"inLanguage":"hr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.tomislavstankovic.com\/blog\/ionic-card-io-bankovna-kartica\/"]}]},{"@type":"ImageObject","inLanguage":"hr","@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-card-io-bankovna-kartica\/#primaryimage","url":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/01\/ionic-card-io-bankovna-kartica-min.jpg","contentUrl":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/01\/ionic-card-io-bankovna-kartica-min.jpg","width":825,"height":510,"caption":"Ionic Card IO \u2013 prikupljanje podataka s bankovne kartice"},{"@type":"BreadcrumbList","@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-card-io-bankovna-kartica\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Po\u010detna stranica","item":"https:\/\/www.tomislavstankovic.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Ionic Card IO – prikupljanje podataka s bankovne kartice"}]},{"@type":"WebSite","@id":"https:\/\/www.tomislavstankovic.com\/blog\/#website","url":"https:\/\/www.tomislavstankovic.com\/blog\/","name":"Tomislav Stankovi\u0107","description":"Sam svoj bloger","publisher":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/#\/schema\/person\/0329c549c57700034ea77f5d3d78396d"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.tomislavstankovic.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"hr"},{"@type":["Person","Organization"],"@id":"https:\/\/www.tomislavstankovic.com\/blog\/#\/schema\/person\/0329c549c57700034ea77f5d3d78396d","name":"Tomislav Stankovi\u0107","image":{"@type":"ImageObject","inLanguage":"hr","@id":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/10\/cropped-TomislavStankovic.jpg","url":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/10\/cropped-TomislavStankovic.jpg","contentUrl":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/10\/cropped-TomislavStankovic.jpg","width":248,"height":165,"caption":"Tomislav Stankovi\u0107"},"logo":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/10\/cropped-TomislavStankovic.jpg"},"description":"Bloger \u0161irokog raspona interesa od kojih dio voli objaviti na ovom blogu. U neslobodno vrijeme Angular developer mobilnih i web aplikacija.","sameAs":["https:\/\/www.tomislavstankovic.com\/blog\/","https:\/\/www.linkedin.com\/in\/tomislavstankovic\/"],"url":"https:\/\/www.tomislavstankovic.com\/blog\/author\/tomislavstankovic\/"}]}},"_links":{"self":[{"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/posts\/9064","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/comments?post=9064"}],"version-history":[{"count":37,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/posts\/9064\/revisions"}],"predecessor-version":[{"id":9108,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/posts\/9064\/revisions\/9108"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/media\/9069"}],"wp:attachment":[{"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/media?parent=9064"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/categories?post=9064"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/tags?post=9064"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}