Cordova Integration Guide

Importing DyScan

After getting your access token, navigate to your Cordova project directory and install DyScan with the following terminal command:

cordova plugin add https://dyscan@github.com/Dyneti/dyscan-cordova.git

When asked for a password for user "dyscan", paste the access token that we provided.

danger

You may encounter this error: Failed to fetch plugin https://dyscan@github.com/Dyneti/dyscan-cordova.git via registry. Probably this is either a connection problem, or plugin spec is incorrect. Check your connection and plugin name/version/URL. CordovaError: Error: command failed

If you do, first clone the repo manually into a directory:

git clone https://dyscan@github.com/Dyneti/dyscan-cordova.git

and then add the plugin to your Cordova project:

cordova plugin add ./dyscan-cordova

Interfacing DyScan

Initializing DyScan

In your main JS file, e.g., index.js, add the following line to configure DyScan.

document.addEventListener('deviceready', onDeviceReady, false);

function onDeviceReady() {
    DyScan.init({
        apiKey:'YOUR_API_KEY'
    });
}

Camera features support

The DyScan.isDeviceSupported function should be called to verify if the device is supported before calling DyScan functions to avoid a bad user experience.

DyScan.isDeviceSupported(function(supported) {
    if (supported) {
        // open DyScan card scan
        DyScan.scanCard({showDynetiLogo: true}, onScanSuccess, onScanFailure);
    } else {
        // alternate flow if device is not supported
    }
})

Card Scan

The DyScan.scanCard function uses the DyScanViewController on iOS and the DyScanActivity on Android. It will open a separate screen where the user will scan their card. The card data will be available via success callback, error info via failure callback.

function scanButtonClick() {
    DyScan.scanCard({showDynetiLogo: true}, onScanSuccess, onScanFailure);
}

function onScanSuccess(result) {
    // the scanned card
    // Access the fields cardNumber, expiryMonth, or expiryYear
}

function onScanFailure(error) {
    // the user cancelled
}

Customization

You can pass the customization parameters as JSONObject into the scanCard function first parameter.

Parameter	Description	Type
apiKey	The API key we provided for you to use.	string
showCorners	Whether to show the scan area outline.	boolean
cornerThickness	How thick to make the lines outlining the scan area, indicating to the user where to place their credit card.	number
cornerInactiveColor	The color to use in drawing the outline of the scan region when nothing of interest is detected.	color*
cornerCompletedColor	The color to use in drawing the outline of the scan region when we have successfully scanned a card.	color*
bgColor	The color to use to obscure everything outside the scan region in order to draw the user’s attention to the scan region.	color*
bgOpacity	The opacity to use when obscuring everything outside the scan region, as an integer ranging from 0.0 (transparent) to 1.0 (opaque).	number
lightTorchWhenDark	Whether the phone will turn on the flashlight if multiple frames have appeared to be too dark. If set to false, torch toggle button will appear.	boolean
vibrateOnCompletion	Whether the device will vibrate once it has successfully extracted the credit card data from the images provided by the camera.	boolean
showDynetiLogo	Whether to show the Dyneti logo above the scan region	boolean
showCardOverlay	Whether to show the overlay displaying a sample card number and expiration date hinting at the user to place their card in the scan region.	boolean

showHelperText	Whether to show the helper text on screen.	boolean
helperTextString	What to text to display to the user to guide them in scanning their card.	string
helperTextColor	The color to use to display the helper text.	color*
helperTextSize	The font size of the helper text.	number
helperTextFontFamily	The font family name of the helper text. The font needs to be placed in assets first.	string
showRotateButton	Whether to show the button which allows the user to rotate the scan region by 90 degrees, facilitating the scanning of vertical cards.	boolean
iosHelperTextPosition	The preset position of the helper text. Available values: top, center, bottom. Default: bottom	string

Color Representation

Colors are inputted as hex-encoded strings representing the RGB values with a '#' at the front, the so-called 'HTML Color Codes.' For example, #ff0000 is red. The representation must be exactly 7 characters long; otherwise we will ignore it when trying to convert the strings to the native representations.