React-native integration guide

Search…
CardVerify React Native installation guide
Visit our website at https://www.getbouncer.com for examples. Native libraries for android and iOS are also available through our private repositories. Contact [email protected] for access to these libraries.
CardVerify is closed source, and requires a license agreement. See the license section for details.
Installation
1. Install the react-native-cardverify package from NPM
Add a dependency to react-native-cardverify in your package.json file. The latest version of react-native-cardverify can be added to your dependencies automatically by installing the SDK in the same directory as your package.json file.
1
$ npm install react-native-cardverify
Copied!
2. Install the iOS dependencies into your ios directory
Add the CardVerify and react-native-cardverify pods to the ~/ios/Podfile file in your app
1
target 'Your App' do
2
  ...
3
  pod 'CardVerify', :http => 'https://api.getbouncer.com/v1/downloads/sdk/card_verify/<API_KEY>/cardverify-ios-2.0.15.tgz'
4
  pod 'react-native-cardverify', :path => '../node_modules/react-native-cardverify/react-native-cardverify.podspec'
5
end
Copied!
CardVerify uses xcframeworks for its native package. Add the following to your ~/ios/Podfile file in your app to enable this:
1
dynamic_frameworks = ['CardVerify']
2
​
3
pre_install do |installer|
4
  installer.pod_targets.each do |pod|
5
    if dynamic_frameworks.include?(pod.name)
6
      puts "Overriding the build_as_static_framework? method for #{pod.name}"
7
      def pod.build_as_static_framework?;
8
        false
9
      end
10
    end
11
  end
12
end
Copied!
More installation options for iOS can be found in the Installation section of the iOS integration guide.
3. 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:
1
repositories {
2
    // ...
3
    mavenCentral()
4
}
Copied!
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:
1
dependencies {
2
    implementation "com.getbouncer:cardverify-ui:2.1.0004"
3
    implementation "com.getbouncer:scan-payment-full:2.1.0004"
4
    implementation "com.getbouncer:scan-camerax:2.1.0004"
5
    implementation "com.getbouncer:tensorflow-lite:2.1.0004"
6
}
Copied!
Please add the following to your android/app/build.gradle file in the android section:
1
aaptOptions {
2
    noCompress "tflite"
3
}
Copied!
Alternative camera implementations
By default, bouncer uses the Android Camera 1 API. To use Camera2 or CameraX, add one of the following imports:
1
implementation "com.getbouncer:scan-camerax:2.1.0004"
2
​
3
// OR
4
​
5
implementation "com.getbouncer:scan-camera2:2.1.0004"
Copied!
4. Link native dependencies
For react-native version 0.59 and below, follow the linking native dependencies guide.
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.
1
import com.getbouncer.RNCardVerifyModule;
2
​
3
...
4
​
5
public class MainApplication
6
    extends Application
7
    implements ReactApplication {
8
​
9
    ...
10
​
11
    public void onCreate() {
12
​
13
        ...
14
​
15
        // set your generated API key
16
        RNCardVerifyModule.apiKey = "<YOUR_API_KEY_HERE>";
17
​
18
        // set to true for experimental expiry extraction
19
        RNCardVerifyModule.enableExpiryExtraction = false;
20
​
21
        // set to true for experimental name extraction
22
        RNCardVerifyModule.enableNameExtraction = false;
23
    }
24
}
Copied!
3. Configure iOS Permissions
CardVerify 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 CardVerify displays to your users when CardVerify first prompts them for permission to use the camera.
Alternatively, you can add this permission directly to your Info.plist file:
1
<key>NSCameraUsageDescription</key>
2
<string>We need access to your camera to scan your card</string>
Copied!
4. Configure iOS
Swift
Objective C
In your AppDelegate.swift file, Add an import for CardVerify, and set your API key.
1
import UIKit
2
import CardVerify
3
​
4
@UIApplicationMain
5
class AppDelegate: UIResponder, UIApplicationDelegate {
6
​
7
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
8
         Bouncer.configure(apiKey: "<your_api_key_here>") 
9
        // do any other necessary launch configuration
10
        return true
11
    }
12
}
Copied!
If your app is configured using objective-c, in your AppDelegate.m file, Add an import for CardVerify, and set your API key.
1
#import "AppDelegate.h"
2
...
3
@import CardVerify;
4
​
5
@implementation AppDelegate
6
​
7
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
8
{
9
  ...
10
  [Bouncer configureWithApiKey:@"<your_api_key_here>"];
11
​
12
  return YES;
13
}
Copied!
Using
react-native-cardverify exposes two static methods on the CardVerify object, isSupportedAsync() and scan(bin, last4).
To determine if the device supports CardVerify, use the isSupportedAsync() method. For example,
1
import CardVerify from 'react-native-cardverify';
2
​
3
CardVerify.isSupportedAsync()
4
  .then(supported => {
5
    if (supported) {
6
      // YES, show scan button
7
    } else {
8
      // NO
9
    }
10
  })
Copied!
To scan a card, use the scan(bin, last4) method.
bin is an optional string of the first 6 digits of the card to be scanned.
If non-null, the user will be required to scan a card starting with these
digits.
last4 is an optional string of the last 4 digits of the card to be scanned.
If non-null, the user will be required to scan a card ending with these digits.
For example,
1
import CardVerify from 'react-native-cardverify';
2
​
3
CardVerify.scan(bin, last4)
4
  .then(({action, scanId, payload, canceledReason}) => {
5
    if (action === 'scanned') {
6
      const {
7
        number,
8
        expiryMonth,
9
        expiryYear,
10
        issuer,
11
        legalName,
12
        payloadVersion,
13
        verificationPayload
14
      } = payload;
15
      // Display information, use the verificationPayload to check card validity
16
    } else if (action === 'canceled') {
17
      if (canceledReason === 'user_missing_card') {
18
        // user tapped the "I don't have this card" button
19
      }
20
      if (canceledReason === 'user_canceled') {
21
        // user closed the scan
22
      }
23
      if (canceledReason === 'camera_error') {
24
        // an error occurred with the camera during scan
25
      }
26
      if (canceledReason === 'fatal_error') {
27
        // an error occurred while processing scan results
28
      }
29
      if (canceledReason === 'unknown') {
30
        // the scan was canceled for an unknown reason
31
      }
32
    } else if (action === 'skipped') {
33
      // User skipped
34
    } else if (action === 'unknown') {
35
      // Unknown reason for scan canceled
36
    }
37
  })
Copied!
Example app
An example application is included in the react-native-cardverify github repository.
Inside the example directory, you can find an example React Native project that you can run.
Note: you will have to have a valid API key and repository access to run the demo app.
To run the example app, do the following:
Add your repository username and password to android/build.gradle.
Add your API key to the cocoapods configuration file ios/Podfile.
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
1
sdk.dir=<full_path_to_android_sdk>
Copied!
$ npm install
$ cd example
$ npm install
$ cd ios && pod install && cd ..
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.