Web integration guide
**TEMPORARILY SHUT DOWN** Scan a payment card with CardScan for Web.
Bouncer has been acquired by Stripe! As a result, this library will be non-functional while we transition our network endpoints to Stripe infrastructure. We expect to have the transition completed by the end of Q3 2021.
- TensorFlowJS script tag
- Bouncer SDK script tag
We try to keep our SDK as small as possible while maintaining good performance.
Component | Size |
Base SDK | 1.58 MB |
TensorFlow JS | 0.25 MB |
Bouncer CardScan can be included in your web app either by script imports or as an NPM package.
In your HTML, add the following script tags
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js"></script>
<script src="https://cardscan-web.s3.us-east-2.amazonaws.com/bouncer_cardscan.bundle.js"></script>
Importing these scripts expose a global JavaScript variable
bouncerCardScan.Bouncer CardScan is available at https://www.npmjs.com/package/web-cardscan. To add this to your project, run the following in your terminal:
$ npm i --save web-cardscan
To access bouncer cardscan, use the following import:
import * as bouncerCardScan from "web-cardscan";
First, add the Bouncer modal to your page's DOM by calling the
setUpScan method once your page's DOM has completed loading:window.addEventListener('DOMContentLoaded', bouncerCardScan.setUpScan);
If you're using Bouncer CardScan for card verification, set the Bouncer modal to use the verification pipeline:
bouncerCardScan.getConfig().setRunVerifyPipeline(true);
Once you're ready to scan, call the
BouncerCardScan.scanCard method and provide callback methods for the success and canceled cases. API keys can be created through the Bouncer API console.First, check to make sure that CardScan is supported on the user's browser with the following call:
const isBouncerScanSupported = bouncerCardScan.isSupported();
The following javascript will launch the Bouncer CardScan modal and collect the results.
const onCardScanComplete = function(
number,
cardholderName,
expiryMonth,
expiryYear,
verificationResult
) {
// The user scanned a card
}
const onCardScanCanceled = function() {
// the user closed the scan modal without scanning a card
}
const onScanError = function(error) {
// An error occurred during the scan. return true to stop the scan, false to attempt to continue scanning.
}
const onCannotScan = function() {
// The user tapped the `I can't scan this card` button
}
function launchCardScan(requiredCardBin, requiredCardLastFour) {
bouncerCardScan.scanCard(
"<your_api_key_here>",
onCardScanComplete,
onCardScanCanceled,
onScanError,
onCannotScan,
requiredCardBin, // optional
requiredCardLastFour // optional
);
}
If
requiredCardBin or requiredCardLastFour are specified, CardScan will only scan cards that match those fields.To determine the authenticity of the scanned card, pass the
verificationResult back to your server. Details about the network call are available in the Rest APIs documentation.This library supports full string localization. Strings are stored in the BouncerConfiguration object, accessible via
bouncerCardScan.getConfig().localize(). The following strings are available for localization:Variable | Default Value |
instructionsLoading | Loading... |
instructionsScan | Scan Your Card |
instructionsReading | Reading card... |
instructionsCapturing | Almost done... |
instructionsProcessing | Processing... |
instructionsWrongCard | Wrong card! |
instructionsTroubleScanning | We're having trouble scanning this card |
securityNotification | Your card info is secure |
networkError | Network Error |
cardDetails | {issuer} {iin} **** {lastFour} |
cannotScan | I can't scan this card |
For example, to change the text for the instructions, set the value of
instructionsScanString before starting the scan.// localize the instructions to Spanish
bouncerCardScan.getConfig().localize({
instructionsLoading: "Cargando...",
instructionsScan: "Escanea tu tarjeta",
cannotScan: "No puedo escanear esta tarjeta"
});
// At some point later, launch the CardScan modal
bouncerCardScan.scanCard(...)
Strings which are not defined in the configuration are left at their previous value. For example, you could call
localize multiple times:// localize some strings
bouncerCardScan.getConfig().localize({
instructionsLoading: "Cargando...",
instructionsScan: "Escanea tu tarjeta"
});
// localize more strings
bouncerCardScan.getConfig().localize({
cannotScan: "No puedo escanear esta tarjeta"
});
// At some point later, launch the CardScan modal
bouncerCardScan.scanCard(...)
To disable a string (make it not appear in the scanner), set the value to
null or "".// localize some strings
bouncerCardScan.getConfig().localize({
instructionsLoading: null,
instructionsScan: ""
});
Adam Wushensky, Sven Kuhne, and Steven Liu
This library is available under paid and free licenses. See the LICENSE file for the full license text.
In short, this library will remain free forever for non-commercial applications, but use by commercial applications is limited to 90 days, after which time a licensing agreement is required. We're also adding some legal liability protections.
After this period commercial applications need to convert to a licensing agreement to continue to use this library.
- Details of licensing (pricing, etc) are available at https://cardscan.io/pricing, or you can contact us at [email protected].
What’s allowed under the license:
- Free use for any app for 90 days (for demos, evaluations, hackathons, etc).
- Any modifications as needed to work in your app
What’s not allowed under the license:
- Commercial applications using the license for longer than 90 days without a license agreement.
- Using us now in a commercial app today? No worries! Just email [email protected] and we’ll get you set up.
- Redistribution under a different license
- Removing attribution
- Modifying logos
- Indemnification: using this free software is ‘at your own risk’, so you can’t sue Bouncer Technologies, Inc. for problems caused by this library
Last modified 2yr ago