5

A fully featured implementation of card.io for React Native

 3 years ago
source link: https://reactnativeexample.com/a-fully-featured-implementation-of-card-io-for-react-native/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

card.io component for React Native

A fully featured implementation of card.io for iOS and Android.

Installation iOS

  1. Run npm install react-native-card-io --save in your project directory.
  2. Open your project in XCode (make sure to open .xcworkspace NOT .xcproject), right click on Libraries and click Add Files to "Your Project Name".
  3. Within node_modules, find react-native-card-io/ios and add RCTCardIO.xcodeproj to your project.
  4. Add libRCTCardIO.a to Build Phases -> Link Binary With Libraries.
  5. Add the -lc++ flag to Build Settings -> Other Linker Flags.

Installation Android

TODO: Currently building a react-native app for iOS and Android, so this will be done soon :)

Usage

import {CardIOView, CardIOUtilities} from 'react-native-card-io'

...

componentDidMount() {
  // The preload method prepares card.io to launch faster. Calling preload is optional but suggested.
  // On an iPhone 5S, for example, preloading makes card.io launch ~400ms faster.
  // The best time to call preload is when displaying a view from which card.io might be launched;
  // e.g., inside your view controller's componentDidMount method.
  // preload works in the background; the call to preload returns immediately.
  CardIOUtilities.preload();
},

render() {
  if (CardIOUtilities.canReadCardWithCamera) {
    return (
      <View>
        <CardIOView
          languageOrLocale="en_AU"
          guideColor="#FF0000"
          useCardIOLogo={true}
          hideCardIOLogo={false}
          allowFreelyRotatingCardGuide={true}
          scanInstructions={'Hold card here. It will scan automatically.'}
          scanExpiry={true}
          scannedImageDuration={2}
          detectionMode={CardIOView.cardImageAndNumber}
          didScanCard={result => console.log(result)} />      
      </View>
    );
  }
  return (
    <View style={styles.noCamera}>
      <Text>card.io requires a camera</Text>
    </View>
  );
}
JavaScript

CardIOView

props

See card_io_view.js for all React.PropTypes.
All props are optional and the view can be used with simply:

<CardIOView style={{flex: 1}} />
JavaScript

didScanCard

The didScanCard function returns the following object:

{
  cardNumber: string,
  redactedCardNumber: string,
  expiryMonth: number, // January == 1
  expiryYear: number,
  cvv: string,
  postalCode: string,
  scanned: boolean,
  cardImage: string, // base64
  cardType: string,
  logoForCardType: string, // base64
}
JavaScript

To display the images returned by didScanCard use the following:

<Image source={{uri: 'data:image/png;base64,'+ cardImage, isStatic: true}} />
JavaScript
  • [ ] Android implementation
  • [ ] implement CardIOPaymentViewController
  • [ ] add rotation notifications

GitHub

https://github.com/kayla-tech/react-native-card-io


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK