rn-card-scanner
rn-card-scanner copied to clipboard
This library provides payment card scanning functionality for your React Native app
Credit Card Scanner
This library provides payment card scanning functionality for your react-native app
-
Credit Card Scanner
-
Installation
- 1. Install the library
- 2. Link (iOS only)
- 3. Permissions (iOS only)
- Usage
- Run example project
- Available props
-
Available methods
- CreditCard
-
Troubleshooting
-
Undefined symbols for architecture x86_64
on iOS
-
- Contributing
- License
- Original SDK
-
Installation
Installation
1. Install the library
using either Yarn:
yarn add rn-card-scanner
or npm:
npm install --save rn-card-scanner
2. Link (iOS only)
If you're on a Mac and developing for iOS, you need to install the pods (via Cocoapods) to complete the linking.
$ npx pod-install ios
3. Permissions (iOS only)
Add the following keys to your Info.plist
file, located in <project-root>/ios/YourAppName/Info.plist
:
<key>NSCameraUsageDescription</key>
<string>Allow access to your camera to scan credit card</string>
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