Comment on page
Cordova Integration Guide
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
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'
});
}
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
}
})
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
}
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. | |
cornerCompletedColor | The color to use in drawing the outline of the scan region when we have successfully scanned a card. | |
bgColor | The color to use to obscure everything outside the scan region in order to draw the user’s attention to the scan region. | |
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. | |
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 |
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 1mo ago