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