Home

Awesome

⚠️ 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.

JavascriptiOSAndroidDescription
CardIOModuleCardIOPaymentViewControllerCardIOActivityA module to launch the card.io view controller which handles everything.
CardIOViewCardIOViewN / ACreate 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.

CreditCard

An object with the following keys:

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

License

MIT