Credit Card Scanning in React Native

— 2 minute read

I'm happy to announce my first react-native package; react-native-card.io. You can view the project on GitHub, there is also an Example iOS Project to get you started. Android support is planned, if you'd like to help me implement it, shoot me an email on ollie@relph.me or create a PR.

react-native-card.io adds javascript bindings for card.io an open-source project created by PayPal and used by Uber, TaskRabbit and GrubHub amongst others.

Using the Card Scanner permalink

Install the cli tool for initialising react-native projects

npm i react-native-cli -g

Run the react-native setup

react-native init CardWallet && cd CardWallet

Once this is complete we can remove the android code folder as we're not going to be using it.

rm -rf android index.android.js

At this point you should open the project in XCode and test that it builds ok

From within the project folder you should run:

npm i react-native-card.io --save

Because react-native-card.io contains native code, we need to add it to our XCode project.

Right click on the project and "Add files to ..." Add Files to Project

Navigate to your node_modules folder and select the Card.io project. Select the Card.io XCode Project

Add the binary to the Link build step Select the Card.io Binary

Add the -lc++ flag to "Other Linker Flags" Add linker flags

Require the component in your view

import CardIO from "react-native-card.io";

Add it to your render method, don't forget to handle the onSuccess and onFailure callbacks.

<CardIO
style=
onSuccess={(cardInfo) => console.log(cardInfo)}
onFailure={(err) => console.error(err)}
/>

Thats it!