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.
