This library provides payment card scanning functionality for your react-native app
using either Yarn:
yarn add rn-card-scanner
or npm:
npm install --save rn-card-scanner
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
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>
import CardScanner from 'rn-card-scanner';
<CardScanner
style={{ flex: 1 }}
didCardScan={(response) => {
console.log('Card info: ', response);
}}
/>
Running the example project:
example
directory and run yarn
or npm i
example/ios
and install Pods with pod install
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 |
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. |
An object with the following keys:
cardNumber
- Card number.expiryMonth
- Expiry month.expiryYear
- Expiry year.holderName
- Card holder name.Undefined symbols for architecture x86_64
on iOSWhile 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:
File.swift
) and answer "yes" when Xcode asks you if you want to "Create Bridging Header"See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT