As this wrapper depends on them, there is not much I can do to support new OS versions or fix bugs.. I tried to reach out people there to have an explanation on the deprecation but I'm yet to receive a response. In the meantime, please be comprehensive and do not open issues not related to the wrapper. Thanks!
A complete and cross-platform card.io component for React Native.
$ npm install react-native-awesome-card-io --save
$ cd ios && pod install && cd ..You should add the key NSCameraUsageDescription to your app's Info.plist and set the value to be a string describing why your app needs to use the camera (e.g. "To scan credit cards."). This string will be displayed when the app initially requests permission to access the camera.
This component provides an abstraction of the card.io entry points for iOS and Android.
| Javascript | iOS | Android | Description |
|---|---|---|---|
CardIOModule |
CardIOPaymentViewController |
CardIOActivity |
A module to launch the card.io view controller which handles everything. |
CardIOView |
CardIOView |
N / A | Create a CardIOView to do card scanning only and manage everything else yourself. |
This component is iOS-only as the card.io Android SDK does not offer this functionality.
import React, { Component } from 'react'
import { View } from 'react-native'
import { CardIOView, CardIOUtilities } from 'react-native-awesome-card-io'
export default class CardIOExample extends Component {
componentWillMount() {
CardIOUtilities.preload()
}
didScanCard = card => {
// the scanned card
}
render() {
return (
<View>
<CardIOView didScanCard={this.didScanCard} style={{ flex: 1 }} />
</View>
)
}
}didScanCard function Required - This function will be called when the CardIOView completes its work and returns a CreditCard. (Docs)
languageOrLocale string - The preferred language for all strings appearing in the user interface. (Docs)
guideColor string - Alter the card guide (bracket) color. Opaque colors recommended. (Docs)
useCardIOLogo boolean false - Set to true to show the card.io logo over the camera instead of the PayPal logo. (Docs)
hideCardIOLogo boolean false - Hide the PayPal or card.io logo in the scan view. (Docs)
allowFreelyRotatingCardGuide boolean true - By default, in camera view the card guide and the buttons always rotate to match the device's orientation. (Docs)
scanInstructions string - Set the scan instruction text. (Docs)
scanExpiry string true - Set to false if you don't want the camera to try to scan the card expiration. (Docs)
scannedImageDuration number 1.0 - How long the CardIOView will display an image of the card with the computed card number superimposed after a successful scan. (Docs)
detectionMode CardIODetectionMode CardIODetectionModeCardImageAndNumber - Set the detection mode. (Docs)
This module abstracts the CardIOPaymentViewController on iOS and the CardIOActivity on Android.
import React, { Component } from 'react'
import { View, TouchableOpacity, Text, Platform } from 'react-native'
import { CardIOModule, CardIOUtilities } from 'react-native-awesome-card-io'
export default class CardIOExample extends Component {
componentWillMount() {
if (Platform.OS === 'ios') {
CardIOUtilities.preload()
}
}
scanCard() {
CardIOModule.scanCard()
.then(card => {
// the scanned card
})
.catch(() => {
// the user cancelled
})
}
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<TouchableOpacity onPress={this.scanCard.bind(this)}>
<Text>Scan card!</Text>
</TouchableOpacity>
</View>
)
}
}scanCard([config]) -> Promise - Launch the card.io controller to manage the card scanning and get the CreditCard result in the resolved promise.
-
configOn object with the following available keys:-
languageOrLocalestring - The preferred language for all strings appearing in the user interface. (iOS / Android) -
guideColorstring - Alter the card guide (bracket) color. Opaque colors recommended. (iOS / Android) -
useCardIOLogobooleanfalse- Set totrueto show the card.io logo over the camera view instead of the PayPal logo. (iOS / Android) -
hideCardIOLogobooleanfalse- Hide the PayPal or card.io logo in the scan view. (iOS / Android) -
scanInstructionsstring - Set the scan instruction text. If nil, use the default text. (iOS / Android) -
suppressManualEntrybooleanfalse- Set totrueto prevent card.io from showing its "Enter Manually" button. (iOS / Android) -
suppressConfirmationbooleanfalse- Iftrue, don't have the user confirm the scanned card, just return the results immediately. (iOS / Android) -
requireExpirybooleantrue- Set tofalseif you don't need to collect the card expiration. (iOS / Android) -
requireCVVbooleantrue- Set tofalseif you don't need to collect the CVV from the user. (iOS / Android) -
requirePostalCodebooleanfalse- Set tofalseif you need to collect the billing postal code. (iOS / Android) -
restrictPostalCodeToNumericOnlybooleanfalse- Set totrueif the postal code should only collect numeric input. (iOS / Android) -
requireCardholderNamebooleanfalse- Set totrueif you need to collect the cardholder name. (iOS / Android) -
scanExpirybooleantrue- Set tofalseif you don't want the camera to try to scan the card expiration. (iOS / Android) -
disableBlurWhenBackgroundingbooleanfalse(iOS only) - Disable the blur of the screen when the app is backgrounded. (iOS) -
keepStatusBarStylebooleanfalse(iOS only) - Iftrue, the status bar's style will be kept as whatever your app has set it to. (iOS) -
detectionModeCardIODetectionModefalse(iOS only) - Set the detection mode. (iOS) -
suppressScannedCardImagebooleanfalse(iOS only) - Iftrue, instead of displaying the image of the scanned card, present the manual entry screen with the scanned card number prefilled. (iOS) -
scannedImageDurationnumber0.1(iOS only) - How long card.io will display an image of the card with the computed card number superimposed after a successful scan. (iOS) -
allowFreelyRotatingCardGuidebooleantrue(iOS only) - By default, in camera view the card guide and the buttons always rotate to match the device's orientation. (iOS) -
noCamerabooleanfalse(Android only) - If set, the card will not be scanned with the camera. (Android) -
unblurDigitsnumber-1(Android only) - Privacy feature. How many of the Card number digits NOT to blur on the resulting image. Setting it to 4 will blur all digits except the last four. (Android) -
usePaypalActionbarIconbooleanfalse(Android only) - Use the PayPal icon in the ActionBar. (Android)
-
An object with the following keys:
cardTypestring - Localized card type.cardNumberstring - Card number.redactedCardNumberstring - Card number with all but the last four digits obfuscated.expiryMonthnumber - Expiry month with january as 1 (may be 0 if expiry information was not requested).expiryYearnumber - Expiry year (may be 0 if expiry information was not requested).cvvstring - Security code.postalCodestring - Postal code. Format is country dependent.scannedboolean - Was the card number scanned (as opposed to entered manually)?cardholderNamestring - Card holder name.
canReadCardWithCamera() -> Boolean - Determine whether this device supports camera-based card scanning. (iOS / Android)
preload -> void (iOS only) - The preload method prepares card.io to launch faster. (iOS)
DETECTION_MODE: String
IMAGE_AND_NUMBER(CardIODetectionModeCardImageAndNumber) - the scanner must successfully identify the card number.IMAGE(CardIODetectionModeCardImageOnly) - don't scan the card, just detect a credit-card-shaped card.AUTOMATIC(CardIODetectionModeAutomatic) - start as CardIODetectionModeCardImageAndNumber, but fall back to CardIODetectionModeCardImageOnly if scanning has not succeeded within a reasonable time.
MIT
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent