Cordova Card.IO plugin implementation

Question

I am having some trouble implementing the Card.io plugin for Cordova. There are instructions on the github page of how to install and implement the plugin: https://github.com/card-io/card.io-Cordova-Plugin

I added the plunging by doing

$ cordova plugin add https:///...

And added the button they tell you to add on the github page. Up to this point I'm pretty sure I'm doing everything the way I should. Here comes the issue now though, the actual implementation in the app. I use a ui framework in my app, and as such, I don't have the index.js file, nor does my code look like the code in the standard index.js with regards to the deviceReady handling. I just do...

.ready(function() {
    // Code to fire on device ready.
}):

I'm somewhat familiar with callbacks, but I have no clue what's going on in their example. the whole "example : function() {..." is completely new for me.

Can someone please rewrite that example so that it is a few functions that is well structured and makes a little more sense?

I tried doing this, with my code now looking like this:

   .ready(function() {
        CardIO.canScan(onCardIOCheck);
    });

    function onCardIOComplete() {
        var cardIOResponseFields = [
            "cardType",
            "redactedCardNumber",
            "cardNumber",
            "expiryMonth",
            "expiryYear",
            "cvv",
            "postalCode"
        ];

        var len = cardIOResponseFields.length;
        alert("card.io scan complete");
        for (var i = 0; i < len; i++) {
            var field = cardIOResponseFields[i];
            alert(field + ": " + response[field]);
        }
    }

    function onCardIOCancel() {
        alert("card.io scan cancelled");
    }

    function onCardIOCheck(canScan) {
        alert("card.io canScan? " + canScan);
        var scanBtn = document.getElementById("scanBtn");
        if (!canScan) {
          scanBtn.innerHTML = "Manual entry";
        }

        scanBtn.addEventListener("click", function(e) {
            var options = {
                "requireExpiry": true,
                "requireCVV": false,
                "requirePostalCode": false,
                "restrictPostalCodeToNumericOnly": true
            };
            CardIO.scan(options, onCardIOComplete, onCardIOCancel);
        });
      }

This does not work though. I added alert() on both sides of the call inside the .ready() function, to see if it fires. Both fire, but it's as if the Card.canScan() function does not fire at all. I added an alert() inside the onCardIOCheck function as well, to see if it is ever reached, but it's not.

Any help would be greatly appreciated.

(Please note: I don't use Angular.js, I only use pure Javascript with occasional jQuery)

Answer 1

You need to replace

.ready(function() {
    CardIO.canScan(onCardIOCheck);
});

With

document.addEventListener('deviceready', function() {
    CardIO.canScan(onCardIOCheck);
}, false);

The ready event you were using is the ready event of the DOM and not the cordova plugins. I believe that when you called CardIO.canScan(onCardIOCheck); the plugin was not loaded and that why it not working.