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 scan with 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.

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.