在一些涉及支付功能的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报错

ionic使用CardIO实现扫描银行卡功能(只能扫描16位以下,并且是浮雕数字)的更多相关文章

  1. ionic实现双击返回键退出功能

    实现这个功能需要四个步骤: 步骤一: 说明:因为需要和手机的硬件(返回按钮)打交道,而ionic本身是不具备该功能的,但是有一个东西可以:ng-cordova插件,这个插件是phoneGap为了能让i ...

  2. 使用ownCloud搭建你的个人云服务(ubuntu 14.04 server)(ownCloud对文件不切片,Seafile对文件切片),owncloud没有存储的功能 只能同步 本地删除了服务器也会删除

    ownCloud是什么 ownCloud是一个自由且开源的个人云存储解决方案(类似百度网盘或者Dropbox),包括两个部分:服务器和客户端. ownCloud在客户端可通过网页界面,或者安装专用的客 ...

  3. 如何Android中加入扫描名片功能

    要想实现android手机通过扫描名片,得到名片信息,可以使用脉可寻提供的第三方SDK,即Maketion ScanCard SDK,脉可寻云名片识别服务.他们的官方网站为http://www.mak ...

  4. ionic实现下载文件并打开功能(file-transfer和file-opener2插件)

    作为一款app,下载文件功能,和打开文件功能,在某些场景下还是十分有必要的.使用cordova-plugin-file-transfer和cordova-plugin-file-opener2这两个插 ...

  5. Android OCR文字识别 实时扫描手机号(极速扫描单行文本方案)

    身份证识别:https://github.com/wenchaosong/OCR_identify 遇到一个需求,要用手机扫描纸质面单,获取面单上的手机号,最后决定用tesseract这个开源OCR库 ...

  6. Android限定EditText的输入类型为数字或者英文(包括大小写),EditText,TextView只能输入两位小数

    Android限定EditText的输入类型为数字或者英文(包括大小写) // 监听密码输入框的输入内容类型,不可以输入中文    TextWatcher mTextWatcher = new Tex ...

  7. hadoop2.6.0汇总:新增功能最新编译 32位、64位安装、源码包、API下载及部署文档

    相关内容: hadoop2.5.2汇总:新增功能最新编译 32位.64位安装.源码包.API.eclipse插件下载Hadoop2.5 Eclipse插件制作.连接集群视频.及hadoop-eclip ...

  8. input和React-Native的TextInput的输入限制,只能输入两位小数(阻止0开头的输入),类似价格限制

    一.背景: 想要实现一功能: 1. 最多只能输入两位小数,类似的价格限制 2. 实时监听限制输入,禁止输入不符合规范的字符(当输入违禁字符,进行删除操作) 这样做的优点: 1. 在用户输入时直接进行限 ...

  9. HOLOLENS 扫描特效 及得出扫描结果(SurfacePlane)

    HOLOLENS 扫描特效 及得出扫描结果(SurfacePlane) 要求只扫出地板和墙, 由于地板和墙面积较大 扫描结果 HOLOTOOLKIT老版本点在参数调节PlaneFinding.Find ...

随机推荐

  1. 2019牛客暑期多校训练营(第六场)-D Move

    题目链接:https://ac.nowcoder.com/acm/contest/886/D 题意:给n个物品,每个物品有一个体积值,K个箱子,问箱子的最小体积为多少可将物品全部装下. 思路:比赛时一 ...

  2. [Comet OJ - Contest #6 C][48C 2279]一道树题_树

    一道树题 题目大意: 给定一棵树,边的编号为读入顺序.现在规定,区间$[L, R]$的贡献$S(L,R)$为把编号在该区间里的边都连上后,当前形成的森林中点数大于等于$2$的联通块个数. 求$\sum ...

  3. 【转帖】Linux和GNU系统

    Linux和GNU系统 Richard Stallman 著 http://www.gnu.org/gnu/linux-and-gnu.zh-cn.html 更多信息,请同时参看GNU/Linux常见 ...

  4. 记日杂-log4net组件使用

    下面我给大家介绍一下记日杂-log4net组件使用,当程序发布有服务器上,有时出现了错误, 都不知道出现在那,所以log4net组件很好解决这个问题. 1.添加开发包,并对log4net.dll的引用 ...

  5. 在Ubuntu上安装hadoop-2.7.7

    1.安装open-vm-tools sudo apt-get install open-vm-tools 2.安装openjdk sudo apt-get install openjdk-8-jdk ...

  6. Java 注解(原理及其使用)

    一.注解(annotation)介绍 Java在JDK5中引入源代码的注解机制. 1.什么是注解? 注解为代码添加了元数据,元数据是关于数据的组织.数据域及其关系的说明信息. 更通俗的说,注解为程序元 ...

  7. intelliJ idea安装go开发环境 并 搭建go项目 打包

    本人使用的是 idea 开发go项目  也是一个初学者  将自己遇到的问题记录分享 在晚上查找了很多资料  没有什么可以直接使用  本人再次整理一下 我使用的idea 时 2017.2.6 版本的 查 ...

  8. Bootstrap3基础教程 01 概述

    移动设备优先是 Bootstrap 3 的最显著的变化. 基础的页面: <!DOCTYPE html> <html> <head> <meta charset ...

  9. MVC4 日期格式化

    // MVC返回到View的日期一般都会带有0分0秒,比如2014/08/22 在前端显示为2014/08/22 00:00:00,比较不美观 // 如果是想展示数据 用label @Html.Lab ...

  10. luogu P5471 [NOI2019]弹跳

    luogu 因为是一个点向矩形区域连边,所以可以二维数据结构优化连边,但是会MLE.关于维护矩形的数据结构还有\(KD-Tree\),所以考虑\(KDT\)优化连边,空间复杂度\(m\sqrt n\) ...