A complete and cross-platform card.io component for React Native.
\n$ npm install react-native-awesome-card-io --save\n$ react-native link react-native-awesome-card-io
This component provides an abstraction of the card.io entry points for iOS and Android.
\n| Javascript | \niOS | \nAndroid | \nDescription | \n
|---|---|---|---|
CardIOModule | \nCardIOPaymentViewController | \nCardIOActivity | \nA module to launch the card.io view controller which handles everything. | \n
CardIOView | \nCardIOView | \nN / A | \nCreate a CardIOView to do card scanning only and manage everything else yourself. | \n
CardIOViewThis component is iOS-only as the card.io Android SDK does not offer this functionality.
\nimport React, { Component } from 'react';\nimport { View } from 'react-native';\nimport { CardIOView, CardIOUtilities } from 'react-native-awesome-card-io';\n\nclass CardIOExample extends Component {\n\n componentWillMount() {\n CardIOUtilities.preload();\n }\n\n didScanCard = (card) => {\n // the scanned card\n }\n\n render() {\n return (\n <View>\n <CardIOView\n didScanCard={this.didScanCard}\n style={{ flex: 1 }}\n />\n </View>\n );\n }\n}
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)
CardIOModuleThis module abstracts the CardIOPaymentViewController on iOS and the CardIOActivity on Android.
import React, { Component } from 'react';\nimport { View, TouchableOpacity, Text, Platform } from 'react-native';\nimport { CardIOModule, CardIOUtilities } from 'react-native-awesome-card-io';\n\nclass CardIOExample extends Component {\n\n componentWillMount() {\n if (Platform.OS === 'ios') {\n CardIOUtilities.preload();\n }\n }\n\n scanCard() {\n CardIOModule\n .scanCard()\n .then(card => {\n // the scanned card\n })\n .catch(() => {\n // the user cancelled\n })\n }\n\n render() {\n return (\n <View>\n <TouchableOpacity onPress={this.scanCard.bind(this)}>\n <Text>Scan card!</Text>\n </TouchableOpacity>\n </View>\n );\n }\n}
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 boolean false - Set to true to show the card.io logo over the camera view instead of the PayPal logo. (iOS / Android)hideCardIOLogo boolean false - 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 boolean false - Set to true to prevent card.io from showing its "Enter Manually" button. (iOS / Android)suppressConfirmation boolean false - If true, don't have the user confirm the scanned card, just return the results immediately. (iOS / Android)requireExpiry boolean true - Set to false if you don't need to collect the card expiration. (iOS / Android)requireCVV boolean true - Set to false if you don't need to collect the CVV from the user. (iOS / Android)requirePostalCode boolean false - Set to false if you need to collect the billing postal code. (iOS / Android)restrictPostalCodeToNumericOnly boolean false - Set to true if the postal code should only collect numeric input. (iOS / Android)requireCardholderName boolean false - Set to true if you need to collect the cardholder name. (iOS / Android)scanExpiry boolean true - Set to false if you don't want the camera to try to scan the card expiration. (iOS / Android)
disableBlurWhenBackgrounding boolean false (iOS only) - Disable the blur of the screen when the app is backgrounded. (iOS)
keepStatusBarStyle boolean false (iOS only) - If true, the status bar's style will be kept as whatever your app has set it to. (iOS)detectionMode CardIODetectionMode false (iOS only) - Set the detection mode. (iOS)suppressScannedCardImage boolean false (iOS only) - If true, instead of displaying the image of the scanned card, present the manual entry screen with the scanned card number prefilled. (iOS)scannedImageDuration number 0.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 boolean true (iOS only) - By default, in camera view the card guide and the buttons always rotate to match the device's orientation. (iOS)
noCamera boolean false (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 boolean false (Android only) - Use the PayPal icon in the ActionBar. (Android)An object with the following keys:
\ncardType 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 (iOS only) - Was the card number scanned (as opposed to entered manually)?cardholderName string - Card holder name.preload -> void (iOS only) - The preload method prepares card.io to launch faster. (iOS)
CAN_READ_CARD_WITH_CAMERA: Boolean
Determine whether this device supports camera-based card scanning. (iOS / Android)
\nDETECTION_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
\n" }, { "component": "footer", "links": [ { "href": "https://github.com/Kerumen/react-native-awesome-card-io", "text": "GitHub" }, { "href": "https://github.com/Kerumen", "text": "Kerumen" } ] } ] }