Links

React-native integration guide

CardScan React Native installation guide
Visit our website at https://www.getbouncer.com for examples. Native libraries for android and iOS are also available in github.
CardScan is open source, and available under a free-to-try license. See the license section for details.

Installation

1. Install the react-native-cardscan package from NPM

Add a dependency to react-native-cardscan in your package.json file. The latest version of react-native-cardscan can be added to your dependencies automatically by installing the SDK in the same directory as your package.json file.
$ npm install react-native-cardscan

2. Install the iOS dependencies into your ios directory

Add the CardScan and react-native-cardscan pods to the ~/ios/Podfile file in your app
target 'Your App' do
...
pod 'CardScan'
pod 'react-native-cardscan', :path => '../node_modules/react-native-cardscan'
end
More installation options for iOS can be found in the Installation section of the iOS integration guide.
For react-native version 0.59 and below, follow the linking native dependencies guide.

4. Install the android native library

Note: You will need a username and password to set up these repositories. Please contact [email protected] to request credentials.
Add the CardVerify repository to the android section of your react-native project. In your android/build.gradle file, append the following to repositories:
repositories {
// ...
mavenCentral()
}
Add the cardverify dependencies to the android section of your react-native project. In your android/app/build.gradle file, append the following to dependencies:
dependencies {
implementation "com.getbouncer:cardscan-ui:2.1.0004"
implementation "com.getbouncer:scan-payment-full:2.1.0004"
implementation "com.getbouncer:scan-camerax:2.1.0004"
implementation "com.getbouncer:tensorflow-lite:2.1.0004"
}
Please add the following to your android/app/build.gradle file in the android section:
aaptOptions {
noCompress "tflite"
}

Alternative camera implementations

By default, bouncer uses the Android Camera 1 API. To use Camera2 or CameraX, add one of the following imports:
implementation "com.getbouncer:scan-camerax:2.1.0004"
// OR
implementation "com.getbouncer:scan-camera2:2.1.0004"

Configuration

1. Create an API key

Go to the Bouncer API console and create an API key.

2. Configure Android

Open android/app/src/main/java/[...]/MainApplication.java and add the following lines to the end of the onCreate() method.
import com.getbouncer.RNCardscanModule;
// ...
public class MainApplication extends Application implements ReactApplication {
// ...
public void onCreate() {
// ...
// set your generated API key
RNCardscanModule.apiKey = "<your_api_key_here>";
// set to true for experimental name extraction
RNCardscanModule.enableNameExtraction = false;
// set to true for experimental expiry extraction
RNCardscanModule.enableExpiryExtraction = false;
// set to true to display an "Enter Card Manually" button
RNCardscanModule.enableEnterCardManually = false;
}
}

3. Configure iOS Permissions

CardScan uses the device camera to scan cards, so you'll need to add a description of camera usage to your Info.plist file:
XCode iOS camera permission
The string you add here will be what CardScan displays to your users when CardScan first prompts them for permission to use the camera.
Alternatively, you can add this permission directly to your Info.plist file:
<key>NSCameraUsageDescription</key>
<string>We need access to your camera to scan your card</string>

4. Configure iOS

Swift
Objective C
In your AppDelegate.swift file, Add an import for CardScan, and set your API key.
import UIKit
import CardScan
@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
Bouncer.configure(apiKey: "<your_api_key_here>")
// do any other necessary launch configuration
return true
}
}
In your AppDelegate.m file, Add an import for CardScan, and set your API key.
#import "AppDelegate.h"
...
@import CardScan;
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
// ...
[ScanViewController configureWithApiKey:@"<your_api_key_here>"];
return YES;
}

Using

react-native-cardscan exposes two static methods on the CardScan object, isSupportedAsync() and scan().
To determine if the device supports CardScan, use the isSupportedAsync() method. For example,
import Cardscan from 'react-native-cardscan';
Cardscan.isSupportedAsync()
.then(supported => {
if (supported) {
// YES, show scan button
} else {
// NO
}
})
To scan a card, use the scan() method. For example,
import Cardscan from 'react-native-cardscan';
Cardscan.scan()
.then(({action, payload, canceled_reason}) => {
if (action === 'scanned') {
const { number, expiryMonth, expiryYear, issuer, legalName } = payload;
// Display information
} else if (action === 'canceled') {
if (canceled_reason === 'enter_card_manually') {
// the user elected to enter a card manually
} else if (canceled_reason === 'camera_error') {
// there was an error with the camera
} else if (canceled_reason === 'fatal_error') {
// there was an error during the scan
} else if (canceled_reason === 'user_canceled') {
// the user canceled the scan
} else {
// the scan was canceled for an unknown reason
}
} else if (action === 'skipped') {
// User skipped
} else if (action === 'unknown') {
// Unknown reason for scan canceled
}
})

Example app

An example application is included in the react-native-cardscan github repository.
Inside the example directory, you can find an example React Native project that you can run.
To run the example app, do the following:
  • $ cd example
  • $ npm install
  • Add your API key to android/app/src/main/java/com/getbouncer/example/MainApplication.java and ios/example/AppDelegate.m.
  • Point the android app to the SDK: create a file example/android/local.properties with a line
    sdk.dir=<full_path_to_android_sdk>
  • To run Android app: react-native run-android
  • To run iOS app: react-native run-ios

Troubleshooting

See the troubleshooting documentation.

Authors

Adam Wushensky, Sam King, Zain ul Abi Din, Jaime Park, and Stefano Suryanto

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://getbouncer.com/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.