react-native-awesome-card-io v0.9.1
⚠️ Both iOS and Android SDKs have been archived
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!
react-native-awesome-card-io
A complete and cross-platform card.io component for React Native.
Getting started
$ npm install react-native-awesome-card-io --save
$ cd ios && pod install && cd ..
iOS
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.
Usage
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. |
CardIOView
(iOS only)
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>
)
}
}
Props
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)
CardIOModule
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>
)
}
}
Methods
scanCard([config])
-> Promise - Launch the card.io controller to manage the card scanning and get the CreditCard result in the resolved promise.
config
On object with the following available keys:languageOrLocale
string - The preferred language for all strings appearing in the user interface. (iOS / Android)guideColor
string - Alter the card guide (bracket) color. Opaque colors recommended. (iOS / Android)useCardIOLogo
booleanfalse
- Set totrue
to show the card.io logo over the camera view instead of the PayPal logo. (iOS / Android)hideCardIOLogo
booleanfalse
- Hide the PayPal or card.io logo in the scan view. (iOS / Android)scanInstructions
string - Set the scan instruction text. If nil, use the default text. (iOS / Android)suppressManualEntry
booleanfalse
- Set totrue
to prevent card.io from showing its "Enter Manually" button. (iOS / Android)suppressConfirmation
booleanfalse
- Iftrue
, don't have the user confirm the scanned card, just return the results immediately. (iOS / Android)requireExpiry
booleantrue
- Set tofalse
if you don't need to collect the card expiration. (iOS / Android)requireCVV
booleantrue
- Set tofalse
if you don't need to collect the CVV from the user. (iOS / Android)requirePostalCode
booleanfalse
- Set tofalse
if you need to collect the billing postal code. (iOS / Android)restrictPostalCodeToNumericOnly
booleanfalse
- Set totrue
if the postal code should only collect numeric input. (iOS / Android)requireCardholderName
booleanfalse
- Set totrue
if you need to collect the cardholder name. (iOS / Android)scanExpiry
booleantrue
- Set tofalse
if you don't want the camera to try to scan the card expiration. (iOS / Android)disableBlurWhenBackgrounding
booleanfalse
(iOS only) - Disable the blur of the screen when the app is backgrounded. (iOS)keepStatusBarStyle
booleanfalse
(iOS only) - Iftrue
, the status bar's style will be kept as whatever your app has set it to. (iOS)detectionMode
CardIODetectionModefalse
(iOS only) - Set the detection mode. (iOS)suppressScannedCardImage
booleanfalse
(iOS only) - Iftrue
, instead of displaying the image of the scanned card, present the manual entry screen with the scanned card number prefilled. (iOS)scannedImageDuration
number0.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)allowFreelyRotatingCardGuide
booleantrue
(iOS only) - By default, in camera view the card guide and the buttons always rotate to match the device's orientation. (iOS)noCamera
booleanfalse
(Android only) - If set, the card will not be scanned with the camera. (Android)unblurDigits
number-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)usePaypalActionbarIcon
booleanfalse
(Android only) - Use the PayPal icon in the ActionBar. (Android)
CreditCard
An object with the following keys:
cardType
string - Localized card type.cardNumber
string - Card number.redactedCardNumber
string - Card number with all but the last four digits obfuscated.expiryMonth
number - Expiry month with january as 1 (may be 0 if expiry information was not requested).expiryYear
number - Expiry year (may be 0 if expiry information was not requested).cvv
string - Security code.postalCode
string - Postal code. Format is country dependent.scanned
boolean - Was the card number scanned (as opposed to entered manually)?cardholderName
string - Card holder name.
CardIOUtilities
Methods
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)
Constants
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.
License
MIT
3 years ago
4 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
7 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago