庆华 2019-06-26
在一些涉及支付功能的app,一般需要绑定银行卡,除了靠用户手动输入银行卡号,用手机扫描银行卡也是一种常用的手段,查阅了写资料,发现ionic有CardIO插件可以实现这个功能,就兴致冲冲去尝试,结果有些失望。
下面介绍一下如何在ionic中使用CardIO实现扫描银行卡功能
相关CardIO插件的ngCordova说明
1、在入口文件main.js 中
const app = angular.module("app", ["ionic", "ngCordova", "ngAnimate", "ngCordova.plugins.cardIO"]); app.config(function ($ionicConfigProvider, $cordovaNgCardIOProvider) { "use strict"; $cordovaNgCardIOProvider.setScanerConfig( // 配置显示的参数 { "expiry": false, "cvv": false, "zip": false, "suppressManual": false, "suppressConfirm": false, "hideLogo": true } ); $cordovaNgCardIOProvider.setCardIOResponseFields( // 配置返回的参数 [ "card_type", "redacted_card_number", "card_number", "expiry_month", "expiry_year", "short_expiry_year", "cvv", "zip" ] ); });
2、在controller文件中使用
angular.module("app").controller("mineCtrl", ["$scope", "$cordovaNgCardIO", function ($scope $cordovaNgCardIO) { "use strict"; $scope.scanBankcard = () => { $cordovaNgCardIO.scanCard() .then(function (response) { // 扫描成功 //Success response - it`s an object with card data console.log("Success response"); console.log(response); }, function (response) { // 取消扫描 //We will go there only when user cancel a scanning. //response always null console.log("when cancel scanning"); console.log(response); }); }; }]);
3、在html中
<ion-view view-title="扫描银行卡"> <ion-content> <i ng-click="scanBankcard ()" class="icon ion-camera"></i> </ion-content> </ion-view>
尝试了以后效果不是很理想,CardIO插件只能扫描16位以下,并且是浮雕数字的银行卡,无法满足设计需求,只能暂时放弃。如有大家有什么解决办法,欢迎交流
参考文章:
ionic使用cardio报错