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.
