Card IO Plugin - Issues with Android


#1

Hello,
I have implemented the following CardIO plugin in my Ionic App:


This works fine on iOS. However, on Android, when I use the keyboard option in the Camera Screen to manually type in the card details, it first loads the correct screen momentarily, and then jumps back to the first screen (Sign Up screen in this case) of the app. While debugging the app flow, I saw that the callback for Card IO is working fine, but there seems to be an issue when Ionic handles the event.
Please help! Thanks!
Following is the code in my controller:
$scope.$on(’$ionicView.beforeEnter’, function()
{
$scope.creditCardScanning();
}

$scope.creditCardScanning = function(){

	var cardIOResponseFields = [
		"cardType",
		"redactedCardNumber",
		"cardNumber",
		"expiryMonth",
		"expiryYear",
		"cvv",
		"postalCode"
	];

        
	var onCardIOComplete = function(response) {
		
		for (var i = 0; i < cardIOResponseFields.length; i++) {
			var field = cardIOResponseFields[i];
		}
			
		
		var cardName = response[cardIOResponseFields[0]].toUpperCase();
		for (i = 0; i < $scope.cardtype.length; i++) {
			var cardTypeDict = $scope.cardtype[i];
			if(cardTypeDict.card_type_name === cardName){
				document.getElementById('cardtype').selectedIndex = i;
				$scope.params.card_type = cardName;
				break;
			}
		}
			
		document.getElementById('cardNumber').value = response[cardIOResponseFields[2]];
		$scope.params.card_number = response[cardIOResponseFields[2]];
		
		var expMonthVal = response[cardIOResponseFields[3]];
			
			for(i=0;i < $scope.expmonth.length; i++) {
				var expMonthDict = $scope.expmonth[i];
				if(expMonthDict.value === expMonthVal){
					document.getElementById('expmonth').selectedIndex = i;
					$scope.params.expiration_month = expMonthDict.value;
					break;
			   }
			}
	  
		for (i = 0; i < $scope.expyear.length; i++) {
			var expYearDict = $scope.expyear[i];
			if(expYearDict.value === response[cardIOResponseFields[4]]){
				document.getElementById('expyear').selectedIndex = i;
				$scope.params.expiration_year = response[cardIOResponseFields[4]];
				break;
			}
		}
		
		document.getElementById('cvv').value = response[cardIOResponseFields[5]];
		$scope.params.security_code = response[cardIOResponseFields[5]];
	};
        
	var onCardIOCancel = function() {
		console.log("card.io scan cancelled");
	};

	var onCardIOCheck = function (canScan) {
		console.log("card.io canScan? " + canScan);
		var scanBtn = document.getElementById("scanBtn");
		if (!canScan) {
			console.log("Cannot scan card");
		}
		scanBtn.onclick = function (e) {
			
					CardIO.scan({
						   "requireExpiry": true,
						   "requireCVV": true,
						   "requirePostalCode": false,
						   "shows_first_use_alert": true,
						   "disable_manual_entry_buttons": false
						   },
						   onCardIOComplete,
						   onCardIOCancel
						   );
			
		}
	};
    CardIO.canScan(onCardIOCheck);
}

And in my view, I am calling the function to load the next page, once the card details are successfully entered and the “Next” Button is tapped.


#2

Hi Neha ,
i cannot fully understand the problem you are having . Please be more precise.
Use this card reader plugin it is light and will work fine.Having both card scan and manually type in.


#3

Hi, have added my code now.


#4

ok from this cardio scan code you have given i cannot do nothing … At card io scan success you might be using $state.go or whatever … there can be the issue …
To narrow of the search first ensure you are getting the success callback in both android or ios ? if yes than no plugin problem .
After this check he code in your callback what are you doing for navigating to your desired page
$state.go : hrere you give the state you have define in config
or
$location.path : here you give the relative path of your html file…
try both and than see


#5

I have deployed the exact same code (both view & controller parts) in other screens of my android app and its working fine there too. The issue doesn’t seem to be with the plugin, but with the way ionic handles it. The $state.go part is bound to another button which cannot be tapped until the screen is loaded properly. Since the callback is always successful, it does return to the same screen momentarily and then ionic automatically loads the state of the 1st screen.


#6

Hi @neha_d,

Can you share the detail what did you include on the module?
I’m quite new, and I didn’t manage to get this to work.
Appreciate if you can guild me :slight_smile:

Thanks,
Punleu