howljs / rn-card-scanner

This library provides payment card scanning functionality for your React Native app
MIT License
88 stars 10 forks source link
card-scanner react-native

Credit Card Scanner

Version PayPal_Me ko-fi

This library provides payment card scanning functionality for your react-native app

example.gif

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:

  1. Checkout this repository.
  2. Go to example directory and run yarn or npm i
  3. Go to example/ios and install Pods with pod install
  4. Run app

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

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:

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:

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Original SDK

Android - iOS