Bouncer Scan
Bouncer Insight
Bouncer labs
Web integration guide
Scan a payment card with CardScan for Android.
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
SDK Size
We try to keep our SDK as small as possible while maintaining good performance.
Component
Size
Base SDK
0.93 MB
TensorFlow JS
0.26 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!
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
function launchCardScan() {
20
bouncerCardScan.scanCard("<your_api_key_here>", onCardScanComplete, onCardScanCanceled, onScanError);
21
}
Copied!
The
verificationResult parameter can be used to determine the legitimacy of the card scanned. See Verifying High Risk Cards for more information.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 CardinstructionsReading
Reading card...instructionsCapturing
Almost done...instructionsProcessing
Processing...instructionsWrongCard
Wrong card!instructionsTroubleScanning
We're having trouble scanning this cardsecurityNotification
Your card info is securenetworkError
Network ErrorcardDetails
{issuer} {iin} **** {lastFour}cannotScan
I can't scan this cardFor 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).
- 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 11mo ago