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://[email protected]/Dyneti/dyscan-cordova.git
When asked for a password for user "dyscan", paste the access token that we provided.
You may encounter this error: Failed to fetch plugin https://[email protected]/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://[email protected]/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.

React Native Integration Guide

Integrity Verification

Last modified 1yr ago

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`