Credit Card Scanner

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

• Installation
• Usage
• Run example project
• Available props
• 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

React Native 0.60 and above

CLI autolink feature links the module while building the app.

Note For iOS using cocoapods, run:

$ cd ios/ && pod install

React Native 0.59 and below

Run react-native link rn-card-scanner to link the rn-card-scanner library. After following the instructions for your platform to link rn-card-scanner into your project:

Manual Linking

iOS installation

Using CocoaPods

Add the following to your Podfile and run pod install:

 pod 'RNCardScanner', :path => '../node_modules/rn-card-scanner'

Android installation

Run react-native link rn-card-scanner to link the rn-card-scanner library.

android/settings.gradle

include ':reactnativecardscanner'
project(':reactnativecardscanner').projectDir = new File(rootProject.projectDir, '../node_modules/rn-card-scanner/android')

android/app/build.gradle

From version >= 5.0.0, you have to apply these changes:

dependencies {
   ...
+    implementation project(':reactnativecardscanner')
}

android/gradle.properties

Migrating to AndroidX (needs version >= 5.0.0):

android.useAndroidX=true
android.enableJetifier=true

Then, in android/app/src/main/java/your/package/MainApplication.java:

On top, where imports are:

import com.reactnativecardscanner.CardScannerPackage;

@Override
protected List<ReactPackage> getPackages() {
    return Arrays.asList(
            new MainReactPackage(),
            new CardScannerPackage()
    );
}

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

• Includes all React Native View props.

CreditCard

An object with the following keys:

• cardNumber – Card number.
• expiryMonth – Expiry month.
• expiryYear – Expiry year.
• holderName – Card holder name.

Contributing

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

License

MIT

Original SDK

Android – iOS

GitHub

View Github