React
Need help with react-native-awesome-card-io?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.
Kerumen

Description

A complete and cross-platform card.io component for React Native (iOS and Android).

434 Stars 129 Forks 101 Commits 13 Opened issues

Services available

Need anything else?

⚠️ 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 ( ) } }

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 ( Scan card! ) } }

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
      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)

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 (iOS only) - 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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.