rn-card-scanner

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

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

• 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

Original SDK

Android - iOS