📜 ⬆️ ⬇️

Angular wrapper for Apache Cordova plugin for use with Card.IO Card service

Good day to all


For the past few months I have been developing hybrid mobile apps using the Ionic framework and Cordova plug-ins. Since Ionic itself uses AngularJs, using the ngCordova library was very convenient because of the Angular wrapper.

But it became necessary to introduce CardIO support into the project . CardIO provides functionality for scanning the front of a credit card. Information about cvv is entered manually.

Searching on the Cordova website for the plugin for this service, and selecting among several existing options, I stopped at this - Plugin . I did not want to use it in its pure form, so I decided to write an Angular wrapper for this plugin, for its further use.
The result was the following angular-cordova-cardio

This Library provides the Service and the Provider to configure it.
')
Example of using the library:

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 } ); } } ); 


Service Returns promise.
In case of its resolve, the given cards are returned.
In the case of reject, I always return null. (due to the fact that nothing is returned in errorCallback in the library itself. And as such, an error cannot arise here. I will explain:
The work of the plugin is as follows:
- We click scan the map, a window opens with search and scan
- In the case of the first launch, there is a request for obtaining application access rights to the camera. If we did not allow it, or the camera is broken, or not accessible for any reason, the dialog for manually entering card data will automatically open.
- There is also a button to switch between manual input and the camera (if available).
- If the data could not be recognized then the missing data is entered manually.
- After which the Done button and call successCallback.
- Only in case of cancellation of scanning or manual input - will call errorCallback - to which nothing is transmitted. And I just return null.

As for $ cordovaNgCardIOProvider, it has two methods.

setScanerConfig - for setting scan parameters.

 "expiry": true, // expire date       "cvv": true, // cvv       "zip": false, // zip       "suppressManual": false, //   3       ...      ()  ...    . "suppressConfirm": false, "hideLogo": true 

setCardIOResponseFields - After scanning in successCallBack, all fields that have been read are returned. Using this parameter, we can cut off part of the data before returning to the user.

 //    . "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" //       

In the near future I will lay out in the bower repositories, and plan to make a PR in ngCordova.
I also want to expand the returned data so that the year would be returned in the format of 2 numbers, and not 4 as returned by the Cordova plugin.

Source: https://habr.com/ru/post/260437/


All Articles