Rn-card-scanner NPM

Credit Card Scanner

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

Credit Card Scanner

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 run yarn or npm i
Go to example/ios and install Pods with pod 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