This library provides payment card scanning functionality for your React Native...
source link: https://reactnativeexample.com/this-library-provides-payment-card-scanning-functionality-for-your-react-native-app/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Credit Card Scanner
This library provides payment card scanning functionality for your react-native app
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
iOS details
Using CocoaPods
Add the following to your Podfile
and run pod install
:
pod 'RNCardScanner', :path => '../node_modules/rn-card-scanner'
Android installation
Android details
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:
- Checkout this repository.
- Go to
example
directory and runyarn
ornpm i
- Go to
example/ios
and install Pods withpod 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. | false |
boolean |
- 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
Original SDK
GitHub
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK