Credit Card Scanner
This library provides payment card scanning functionality for your react-native app
- Installation
- Usage
- Run example project
- Available props
- Available methods
- Contributing
- License
- Original SDK
Installation
1. Install the library
using either Yarn:
yarn add rn-card-scanner
or npm:
npm install --save rn-card-scanner
2. Link
React Native 0.60 and above
CLI autolink feature links the module while building the app.
Note For iOS
using cocoapods
, run:
$ cd ios/ && pod install
React Native 0.59 and below
Run react-native link rn-card-scanner
to link the rn-card-scanner library.
After following the instructions for your platform to link rn-card-scanner into your project:
Manual Linking
iOS installation
iOS details
CocoaPods
UsingAdd the following to your Podfile
and run pod install
:
pod 'RNCardScanner', :path => '../node_modules/rn-card-scanner'
Android installation
Android details
Run react-native link rn-card-scanner
to link the rn-card-scanner library.
android/settings.gradle
include ':reactnativecardscanner'
project(':reactnativecardscanner').projectDir = new File(rootProject.projectDir, '../node_modules/rn-card-scanner/android')
android/app/build.gradle
From version >= 5.0.0, you have to apply these changes:
dependencies {
...
+ implementation project(':reactnativecardscanner')
}
android/gradle.properties
Migrating to AndroidX (needs version >= 5.0.0):
android.useAndroidX=true
android.enableJetifier=true
Then, in android/app/src/main/java/your/package/MainApplication.java:
On top, where imports are:
import com.reactnativecardscanner.CardScannerPackage;
@Override
protected List<ReactPackage> getPackages() {
return Arrays.asList(
new MainReactPackage(),
new CardScannerPackage()
);
}
Usage
import CardScanner from 'rn-card-scanner';
<CardScanner
style={{ flex: 1 }}
didCardScan={(response) => {
console.log('Card info: ', response);
}}
/>
Run example project
Running the example project:
- Checkout this repository.
- Go to
example
directory and runyarn
ornpm i
- Go to
example/ios
and install Pods withpod install
- Run app
- To run Android app: npx react-native run-android
- To run iOS app: npx react-native run-ios
Available props
Prop | Description | Default | Type |
---|---|---|---|
didCardScan |
This function will be called when the scan is completed and returns the CreditCard information. | undefined |
Object |
frameColor |
Recognizer frame color. | undefined |
number or ColorValue |
PermissionCheckingComponent |
Show when permission is checking. | undefined |
ReactElement |
NotAuthorizedComponent |
Show when permission is not authorized. | undefined |
ReactElement |
disabled |
Disable scanner. | undefined |
boolean |
useAppleVision |
Use Apple's Vision Framework to scan credit card when iOS version >= 13 | undefined |
boolean |
- Includes all React Native View props.
Available methods
const cardScannerRef = useRef(null)
<CardScanner
//Other props
ref={cardScannerRef}
/>
//Ex: Toggle flash on and off
onPress={() => cardScannerRef.current.toggleFlash()}
Method | Description |
---|---|
toggleFlash |
Toggle flash on and off |
resetResult |
Reset recognizer result. |
startCamera |
Start recognizer |
stopCamera |
Stop recognizer. |
CreditCard
An object with the following keys:
cardNumber
- Card number.expiryMonth
- Expiry month.expiryYear
- Expiry year.holderName
- Card holder name.
Troubleshooting
Undefined symbols for architecture x86_64
on iOS
While building your iOS project, you may see a Undefined symbols for architecture x86_64
error. This is caused by react-native init
template configuration that is not fully compatible with Swift.
Undefined symbols for architecture x86_64:
"_swift_FORCE_LOAD...
ld: symbol(s) not found for architecture x86_64
Follow these steps to resolve this:
- Open your project via Xcode.
- Create a new Swift file to the project (File > New > File > Swift), give it any name (e.g.
File.swift
) and answer "yes" when Xcode asks you if you want to "Create Bridging Header" - Clean build and run app
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT