ionic运用CardIO完成扫描银行卡功用（只能扫描16位以下，并且是浮雕数字）

2024年3月1日 185次阅读 来源: 嘉恩Gavin

在一些触及付出功用的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报错

    原文作者：嘉恩Gavin
    原文地址: https://segmentfault.com/a/1190000013242072
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞