DyScan
Search…
Cordova Integration Guide

Importing DyScan

After getting your access token, navigate to your Cordova project directory and install DyScan with the following terminal command:
1
cordova plugin add https://[email protected]/Dyneti/dyscan-cordova.git
Copied!
When asked for a password for user "dyscan", paste the access token that we provided.

Interfacing DyScan

Initializing DyScan

In your main JS file, e.g., index.js, add the following line to configure DyScan.
1
document.addEventListener('deviceready', onDeviceReady, false);
2
3
function onDeviceReady() {
4
DyScan.init({
5
apiKey:'YOUR_API_KEY'
6
});
7
}
Copied!

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.
1
function scanButtonClick() {
2
DyScan.scanCard({showDynetiLogo: true}, onScanSuccess, onScanFailure);
3
}
4
5
function onScanSuccess(result) {
6
// the scanned card
7
// Access the fields cardNumber, expiryMonth, or expiryYear
8
}
9
10
function onScanFailure(error) {
11
// the user cancelled
12
}
Copied!

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.
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.
Last modified 17d ago