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
$ react-native link react-native-awesome-card-io

Note: this project is using the camera, and the camera is not supported by iOS simulator.

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