Web integration guide

Web integration guide
**TEMPORARILY SHUT DOWN**
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.
Requirements
TensorFlowJS script tag
Bouncer SDK script tag
Demo
A demo checkout page is available at https://cardscan-web.s3.us-east-2.amazonaws.com/demo.html​
SDK Size
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
Installation
Bouncer CardScan can be included in your web app either by script imports or as an NPM package.
Script imports
In your HTML, add the following script tags
1
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js"></script>
2
<script src="https://cardscan-web.s3.us-east-2.amazonaws.com/bouncer_cardscan.bundle.js"></script>
Copied!
Importing these scripts expose a global JavaScript variable bouncerCardScan.
NPM Package
Bouncer CardScan is available at https://www.npmjs.com/package/web-cardscan. To add this to your project, run the following in your terminal:
1
$ npm i --save web-cardscan
Copied!
To access bouncer cardscan, use the following import:
1
import * as bouncerCardScan from "web-cardscan";
Copied!
Using
First, add the Bouncer modal to your page's DOM by calling the setUpScan method once your page's DOM has completed loading:
1
window.addEventListener('DOMContentLoaded', bouncerCardScan.setUpScan);
Copied!
If you're using Bouncer CardScan for card verification, set the Bouncer modal to use the verification pipeline:
1
bouncerCardScan.getConfig().setRunVerifyPipeline(true);
Copied!
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.
Example
First, check to make sure that CardScan is supported on the user's browser with the following call:
1
const isBouncerScanSupported = bouncerCardScan.isSupported();
Copied!
The following javascript will launch the Bouncer CardScan modal and collect the results.
1
const onCardScanComplete = function(
2
    number,
3
    cardholderName,
4
    expiryMonth,
5
    expiryYear,
6
    verificationResult
7
) {
8
    // The user scanned a card
9
}
10
​
11
const onCardScanCanceled = function() {
12
    // the user closed the scan modal without scanning a card
13
}
14
​
15
const onScanError = function(error) {
16
    // An error occurred during the scan. return true to stop the scan, false to attempt to continue scanning.
17
}
18
​
19
const onCannotScan = function() {
20
    // The user tapped the `I can't scan this card` button
21
}
22
​
23
function launchCardScan(requiredCardBin, requiredCardLastFour) {
24
    bouncerCardScan.scanCard(
25
        "<your_api_key_here>",
26
        onCardScanComplete,
27
        onCardScanCanceled,
28
        onScanError,
29
        onCannotScan,
30
        requiredCardBin, // optional
31
        requiredCardLastFour // optional
32
    );
33
}
Copied!
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.
Localization
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.
1
// localize the instructions to Spanish
2
bouncerCardScan.getConfig().localize({
3
    instructionsLoading: "Cargando...",
4
    instructionsScan: "Escanea tu tarjeta",
5
    cannotScan: "No puedo escanear esta tarjeta"
6
});
7
​
8
// At some point later, launch the CardScan modal
9
bouncerCardScan.scanCard(...)
Copied!
Strings which are not defined in the configuration are left at their previous value. For example, you could call localize multiple times:
1
// localize some strings
2
bouncerCardScan.getConfig().localize({
3
    instructionsLoading: "Cargando...",
4
    instructionsScan: "Escanea tu tarjeta"
5
});
6
​
7
// localize more strings
8
bouncerCardScan.getConfig().localize({
9
    cannotScan: "No puedo escanear esta tarjeta"
10
});
11
​
12
// At some point later, launch the CardScan modal
13
bouncerCardScan.scanCard(...)
Copied!
To disable a string (make it not appear in the scanner), set the value to null or "".
1
// localize some strings
2
bouncerCardScan.getConfig().localize({
3
    instructionsLoading: null,
4
    instructionsScan: ""
5
});
Copied!
Authors
Adam Wushensky, Sven Kuhne, and Steven Liu
License
This library is available under paid and free licenses. See the LICENSE file for the full license text.
Quick summary
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].
More detailed summary
What’s allowed under the license:
Free use for any app for 90 days (for demos, evaluations, hackathons, etc).
Contributions (contributors must agree to the Contributor License Agreement)
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
Questions? Concerns? Please email us at [email protected] or ask us on slack.
Release guide
Development guide
Last modified 4mo ago
Copy link
Contents
Web integration guide
**TEMPORARILY SHUT DOWN**