@mauricedf94/react-native-awesome-card-io

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