Angular обертка для Apache Cordova плагина для работы с серсивисом Card.IO

    Всем доброго времени суток


    Последние несколько месяцев занимаюсь разработкой гибридных мобильных приложений, с использованием Ionic фраемворка и Cordova плагинов. Поскольку сам Ionic использует AngularJs, то использование библиотеки ngCordova было очень удобным из-за Angular обертки.

    Но возникла необходимость внедрить в проект поддержку сервиса CardIO. CardIO предоставляет функционал для сканирования фронтальной части кредитной карты. Информация о cvv вводится вручную.

    Поискав на сайте Cordova плагин для этого сервиса, и выбрав среди нескольких существующих вариантов, остановился на этом — Plugin. Использовать его в чистом виде не хотелось, потому решил написать Angular обертку для этого плагина, для его дальнейшего использования.
    В итоге получилось следующее angular-cordova-cardio

    Данная Библиотека предоставляет Сервис и Провайдер для его настройки.

    Пример использования библиотеки:

    angular.module('habraExample', ['ngCardIO'])
    .config(['$cordovaNgCardIOProvider', function ($cordovaNgCardIOProvider) {
    
      $cordovaNgCardIOProvider.setScanerConfig(
        {
          "expiry": true,
          "cvv": true,
          "zip": false,
          "suppressManual": false,
          "suppressConfirm": false,
          "hideLogo": true
        }
      );
    
    
      $cordovaNgCardIOProvider.setCardIOResponseFields(
        [
          "card_type",
          "redacted_card_number",
          "card_number", 
          "expiry_month",
          "expiry_year",
          "cvv",
          "zip"
        ]
      );
    }]
    )
    .controller('TestCtrl', function ($scope, $cordovaNgCardIO) {
    
      $scope.scan = function () {
        $cordovaNgCardIO.scanCard().then(
          function (response) {
            //response is an object with scan data
          }
        );
      }
    }
    );
    


    Сервис Возвращает promise.
    В случае его resolve — возвращается данные карты.
    В случае reject, я все время возвращаю null. (из-за того что в самой библиотеке в errorСallback не возвращается ничего. Да и как таковой ошибки тут возникнуть не может. Объясню:
    Работа плагина заключается в следующем:
    — Мы нажимаем сканировать карту, открывается окно с поиском и сканирования
    — В случае первого запуска идет запрос на получения прав доступа приложения к камере. Если мы не разрешили, или камера сломана, или не доступна по любой причине, автоматически откроется диалог ручного ввода данных карты.
    — Так же есть кнопка переключения между ручным вводом и камерой(если она доступна).
    — Если данные не удалось распознать то не достающие данные вводятся вручную.
    — После чего кнопка Done и вызовет successCallback.
    — Только в случае отмены сканирования или ручного ввода — вызовет errorCallback — в который ничего не передается. И я просто возвращаю null.

    Что касается $cordovaNgCardIOProvider, то он имеет два метода.

    setScanerConfig — для установки параметров сканирования.

    "expiry": true, //Использовать expire date  в ручном вводе или при сканировании
    "cvv": true, //Использовать cvv в ручном вводе или при сканировании
    "zip": false, //Использовать zip в ручном вводе или при сканировании
    "suppressManual": false, // Это и 3 параметра ниже не уверен для чего они... судя по названию должны подавлять (запрещать) ручной ввод... но этого не происходит.
    "suppressConfirm": false,
    "hideLogo": true
    

    setCardIOResponseFields — После сканирования в successCallBack идет возврат всех полей которые были считаны. Используя этот параметр, мы можем отсечь часть данных перед возвратом пользователю.

    //список полей которые можно передать.
    "card_type", //Тип карты  Visa|MasterCard etc
    "redacted_card_number", // Номер карты в скрытом режиме **** **** **** 1234
    "card_number", //Полный номер карты 1234 5678 9000 1234
    "expiry_month", //Месяц  01 02 etc
    "expiry_year", //  Год 2015 2016
    "cvv", //  сvv
    "zip" // Если был запрошен в параметре выше
    

    В ближайшее время выложу в bower репозитории, и планирую сделать PR в ngCordova.
    Так же хочу расширить возвращаемые данные что бы год возвращался в формате 2 чисел, а не 4 как возвращает Сordova plugin.

    Similar posts

    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 4

      0
      Cделали pull request в github.com/driftyco/ng-cordova?
        0
        Еще нет. На выходных собираюсь это сделать.
        0
        Плагин ведь не спрашивает canScan(). Если мы камеру не разрешим, то вернется resolve с пустым объектом, а не reject?
          0
          Я так понял вы про canScan() узнали из документации, на сайте самого cordova поагина? Пу сути, эта функция и не нужна. Из примера видно, что они вызывают canScan() передавая туда callback, а сама эта функция (callback), принимает параметр — canScan (boolean) — и в зависимости от true\false меняет надпись на кнопке (Scan or Manually), Потом в итоге навешивает на клик одну и туже функцию. В том примере, что они представили, на кнопку нужно нажать дважды. А конкретно по вашему вопросу, если камеру мы не разрешим, то все отработает нормально, вызовется не камера, а ручной ввод данных. И после того как мы все введем и нажмем Done — сработает resolve, и вернуться данные которые мы получили в результате ручного ввода.

        Only users with full accounts can post comments. Log in, please.