Card IO phonegap plugin is not working

Question

  .controller('paymentsController', function ($scope, $localStorage, $log, $state, $window, $ionicModal, Payment, ItemList, SweetAlert) {

$scope.scanCard = function(){

  var cardIOResponseFields = [
    "card_type",
    "redacted_card_number",
    "card_number",
    "expiry_month",
    "expiry_year",
    "cvv",
    "zip"
  ];

  var onCardIOComplete = function(response) {
    for (var i = 0, len = cardIOResponseFields.length; i < len; i++) {
      var field = cardIOResponseFields[i];
      console.log(field + ": " + response[field]);
    }
  };

  var onCardIOCancel = function() {
    console.log("card.io scan cancelled");
  };

  var onCardIOCheck = function (canScan) {
    console.log("card.io canScan? " + canScan);
    var scanBtn = angular.element($("#scanBtn")).scope();
    //var scanBtn = document.getElementById("scanBtn");
    if (!canScan) {
      scanBtn.innerHTML = "Manual entry";
    }
  };

  CardIO.scan({
      "collect_expiry": true,
      "collect_cvv": false,
      "collect_zip": false,
      "shows_first_use_alert": true,
      "disable_manual_entry_buttons": false
    },
    onCardIOComplete,
    onCardIOCancel
  );

  CardIO.canScan(onCardIOCheck);
};

} I installed a card reader plugin in my phonegap(i'm using ionic as a framework) the problem I'm having is that the plugin doesn't work. this is the plugin I'm using https://github.com/card-io/card.io-iOS-SDK-PhoneGap.

this is my view.

<button id="scanBtn" ng-click="scanCard()" class="button button-large button-block button-light">Scan Card</button>

when the user click on the #scanBtn it loads this script.

      var cardIOResponseFields = [
    "card_type",
    "redacted_card_number",
    "card_number",
    "expiry_month",
    "expiry_year",
    "cvv",
    "zip"
  ];

  var onCardIOComplete = function(response) {
    for (var i = 0, len = cardIOResponseFields.length; i < len; i++) {
      var field = cardIOResponseFields[i];
      console.log(field + ": " + response[field]);
    }
  };

  var onCardIOCancel = function() {
    console.log("card.io scan cancelled");
  };

  var onCardIOCheck = function (canScan) {
    console.log("card.io canScan? " + canScan);
    var scanBtn = angular.element($("#scanBtn")).scope();
    //var scanBtn = document.getElementById("scanBtn");
    if (!canScan) {
      scanBtn.innerHTML = "Manual entry";
    }
  };

  CardIO.scan({
      "collect_expiry": true,
      "collect_cvv": false,
      "collect_zip": false,
      "shows_first_use_alert": true,
      "disable_manual_entry_buttons": false
    },
    onCardIOComplete,
    onCardIOCancel
  );

  CardIO.canScan(onCardIOCheck);
};

my app doesn't work in my browser or using the phonegap app, but when i launch the ionic emulator only the entry to input the card form shows up and no camera loads to scan the card, which led me to believe the camera execution is failing.

When load the cardio on my browser i get the following console error: ReferenceError: CardIO is not defined.

Answer 1

Try the same on device.

I got the same error on browser and it works well on the device. You could think of this as the camera / or contacts picker plugin - which will work only on device - and not on sim or browser.