16 June 2015

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

JavaScriptDevelopment of mobile applicationsAngular

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


Последние несколько месяцев занимаюсь разработкой гибридных мобильных приложений, с использованием 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.
Tags:Cordovaangularjshybrid mobile разработкаionic framework
Hubs: JavaScript Development of mobile applications Angular
+9
4.4k 41
Comments 4
Top of the last 24 hours