CardIO plugin doesn't work in IONIC

I have try adding CardIO plugin into my IONIC2 app, but I could not manage to get it working.
I try to test on Ionic View in my device, and it doesn’t work.

The app is crash and this is the error message “caused by: No provider for CardIO!”.

Can anyone suggest what I do to test this cardIO?

Thanks,
Punleu

In your app.module.ts file, remember to add cardio to the top of the page and also in the NgModule section further down.

add this to top of page
import { CardIO } from ‘ionic-native’;

Then, further down in the array of providers after @NgModule annotation,
,providers: [CardIO,…etc]

Then put the import at the top of any page you want to useCardIO
import { CardIO } from ‘ionic-native’;

Hi Mark,

Thank you for your suggestion.
I have tried, and it still doesn’t work.

I have tried using other native plugin such as “Action sheet” and “Barcode Scanner”, and I manage to use it in my IONIC2 app. All I need to do is, follow the “Usage” in the plugin itself.

I’m not sure if this is a bug in CardIO.

Have you manage to use the “CardIO” somehow?

Thanks,
Punleu

Hi Mark,

Just an update.
The error message now is “plugin_not_install” when I try to call CardIO.canScan();

I’m not sure what’s wrong with it.

Thanks,
Punleu

Is the plugin actually installed?

ionic plugin list

If its there in this list then try

ionic platform remove android

ionic platform add android

The try ionic plugin list again

Do you have a project I can see to help you? github / codepen ?

Cheers

Mark

hi Mark,

Thank you, this would be a very big help to me.
This is the url to my project “https://github.com/CHOMNANP/ionic2-cardio”.

I am quite to Ionic. You may need this command after you clone the project “ionic plugin add https://github.com/card-io/card.io-Cordova-Plugin”.

I have tried to create lots of time already, but I didn’t manage to make it work.
Cheers.

Thank,
Punleu

The plugin did actually install.
I check both plugin and the plugin in the android platform.
It really install there.

Please refer /src/pages/home/home.ts

Hi Mark,

Any idea what did I do wrong?
I also try accessing cardio using “cordova.plugins.CardIO”, but I still didn’t manage to get it work.

Thanks,
Punleu

You said you were doing it in the browser, but native plugins, by definition, has to run on a device.

Hi Wilson,

Sorry for the confusion.
I tested it using Ionic View on my Nexus 5x device.
Any idea why it does not work?

Do you know working around of using CardIO?

Thanks,
Punleu

Please refer to bellow for my system information.

I tested my app on Ionic View.

Bellow is my system Information.
Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.12
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.45
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 8.1
Node Version: v5.10.1
Xcode version: Not installed

Hi,

I cloned your repo, added the cardio plugin and ran it on my nexus5 device.

It works fine and scanned my debit card without issue. (once i uncommented out the appropriate lines in your code).

I’m not sure if it will work ok with Ionic view, but can you get it to work on your device directly using ionic run android?

I take it you had accidentally commented the lines in the home.ts file that actually do the scanning? I uncommented these before running.

 CardIO.canScan()
  .then(
    (res: boolean) => {
 //     if(res){
   //     let options = {
     //     requireExpiry: true,
       //   requireCCV: false,
         // requirePostalCode: false
        //};
        //CardIO.scan(options);
      //}          
      alert('Can scan Cardio');
    })
  .catch(function(error) {
    alert(JSON.stringify(error));
  });

Please try uncommenting and give it a go on a device using ionic run android to bypass the possible issues with ionic creator. As i say though, it worked fine on my mac.

$ ionic info

Your system information:

Cordova CLI: 6.3.1 
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.12
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.45
ios-deploy version: 1.8.6 
ios-sim version: 5.0.8 
OS: OS X El Capitan
Node Version: v6.2.2
Xcode version: Xcode 8.1 Build version 8B62

Good luck
Mark

It should be the problem with Ionic View then.
The problem is, I don’t have cable to connect my nexus device to PC.

Poor me. I’ll try with another phone and let you know.
Thank Mark for your help :slight_smile

Punleu

Because they haven’t installed the CardIO plugin in Ionic View! Ionic View doesn’t have all the plugins available yet, which is why it won’t work :slight_smile: try just running directly onto the device.

EDIT: I saw @markysparky response, he’s right, too. You’ll need to test directly onto the device.

Hi Wilson,

I manage to use the CardIO now by Building the APK from the project.
Then install that APK to my Nexus 5X device using AirDroid.

Thanks,
Punleu

Ayyy!! Go ahead and add “(RESOLVED)” to the header so people know :slight_smile:

How to get response of card number which is scanned.actually i get the card number.but i don,t know how to get response

Could you please tell me how to use this method CardIOResponse

CardIO.canScan()
.then(
(res: boolean) => {
if(res){
let options = {
requireExpiry: true,
requireCCV: false,
requirePostalCode: false
};
CardIO.scan(options)
.then(
(res) => {
console.log(res);
this.cardNumber = res.cardNumber // exemplo
}
}
alert(‘Can scan Cardio’);
})
.catch(function(error) {
alert(JSON.stringify(error));
});