Web integration guide
**TEMPORARILY SHUT DOWN** Scan a payment card with CardScan for Web.

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.

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.
Last modified 4mo ago