Proper way to implement card.io SDK with Phonegap iOS?

Question

I want to implement the card scanner from card.io SDK into Phonegap for iOS. I'm using Phonegap v2.9.0 and had went through this https://github.com/card-io/card.io-iOS-SDK-PhoneGap

I understand that it is a plugin, but I haven't created or implemented a plugin in Phonegap before. The code provided in the above link does not work for me. I don't know why, may be I am doing something wrong in the set up steps.

I want a clarification. Below are the steps given in gitHub

1) Add CardIOPGPlugin.[h|m] to your project (Plugins group).

2) Copy CardIOPGPlugin.js to your project's www folder. (If you don't have a www folder yet, run in the Simulator and follow the instructions in the build warnings.)

3) Add e.g. to your html. See CardIOPGPlugin.js for detailed usage information.

4) Add the following to config.xml, for PhoneGap version 3.0+:

<feature name="CardIOPGPlugin"><param name="ios-package" value="CardIOPGPlugin" /></feature>

My doubts:

Which folder are they talking about in(1)? Plugins folder in Xcode? Or the Plugins folder in Project directory (directory that has config.xml). I have tried both but the sample code does not call the onCardIOCheck.

The gitHub for card.io SDK provides initial setup steps. (https://github.com/card-io/card.io-iOS-SDK)

There, in Step 2, they say "Add the CardIO directory (containing several .h files and libCardIO.a) to your Xcode project." How do I do this? Where do I copy the folder to?

And I have also done step 3 and 4 which are

3) In your project's Build Settings, add -lc++ to Other Linker Flags.

4) Add these frameworks to your project. Weak linking for iOS versions back to 5.0 is supported. (list of frameworks..)

I have done all, my onDeviceReady works, but window.plugins.card_io.canScan(onCardIOCheck); is not calling.

Please.. anyone who has done this before in PhoneGap and iOS, please provide a detailed explanation and steps to implement this in Phonegap iOS.

Providing my code: (app id is changed for question sake)

document.addEventListener("deviceready",onDeviceReady, false);
 function onDeviceReady() {
  alert('device ready');
   var cardIOResponseFields = [
                                        "card_type",
                                        "redacted_card_number",
                                        "card_number",
                                        "expiry_month",
                                        "expiry_year",
                                        "cvv",
                                        "zip"
                                        ];

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

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

            var onCardIOCheck = function (canScan) {
                alert("card.io canScan? " + canScan);
                var scanBtn = document.getElementById("scanBtn");
                if (!canScan) {
                    scanBtn.innerHTML = "Manual entry";
                }
                scanBtn.onclick = function (e) {
                    window.plugins.card_io.scan(
                                                "MYAPPIDCHANGEDFORQUESTION",
                                                {
                                                "collect_expiry": true,
                                                "collect_cvv": false,
                                                "collect_zip": false,
                                                "shows_first_use_alert": true,
                                                "disable_manual_entry_buttons": false
                                                },
                                                onCardIOComplete,
                                                onCardIOCancel
                                                );
                }
            };

            window.plugins.card_io.canScan(onCardIOCheck);
        }

Answer 1

Which folder are they talking about in(1)? Plugins folder in Xcode? Or the Plugins folder in Project directory (directory that has config.xml). I have tried both but the sample code does not call the onCardIOCheck.

the Plugins folder is the same, Xcode project just references the folder, when you copy files (depending on how you like to organize them) you would usually select copy and hence they will be places in the plugins folder, as long as the files compiled into the project it doesn't really matter.

There, in Step 2, they say "Add the CardIO directory (containing several .h files and libCardIO.a) to your Xcode project." How do I do this? Where do I copy the folder to?

It doesn't matter where you will copy the files as long as they are included in the Xcode project and compiled.

I have done all, my onDeviceReady works, but window.plugins.card_io.canScan(onCardIOCheck); is not calling.

Make sure the CardIOPGPlugin.js is loaded before the javascript files using it, it maybe undefined and hence fails.

Hope it helps.