How I Turned My Phone into a Card Reader with React Native

 A few days ago, I found myself thinking about the magic of contactless payments. You know the drill: a quick tap of your card or phone, a satisfying beep, and boom — transaction done. It’s so seamless that it almost feels like wizardry. As a developer, I couldn’t help but wonder: How hard would it be to build something like that myself using React Native? Spoiler alert: it’s totally doable, and I’m here to walk you through how I made it happen.

In this article, I’ll share my journey of building a simple “Tap to Pay” screen that reads raw card details from a any of popular credit card using the react-native-nfc-manager library. We’ll cover the setup, the code, and a few gotchas I stumbled into along the way. Whether you’re a curious tinkerer or a dev looking to add NFC magic to your app, let’s dive in!

Why NFC and React Native?

First off, why NFC? Near Field Communication (NFC) is the tech behind contactless payments, key cards, and even those cool “tap to share” features. It’s short-range, secure, and widely supported on modern smartphones. And React Native? Well, it’s my go-to for building cross-platform apps fast. Pairing the two seemed like a perfect match for a weekend project.

My goal was simple: create a screen where a user taps their Visa card to an NFC-enabled phone, extracts raw card details (like the card number and expiry), and simulates a payment process(you can do actual payment processing by integrating it with any payment processor’s APIs). Nothing fancy — just the bare bones to get started.

Setup

Before writing the single line of code, here’ what you’ll need if you want to follow along;

1. An NFC enabled device: I used an Android phone because it’s what I had on hand. iOS works too, but Apple’s NFC restrictions mean you’re limited to NDEF tags unless you’re enrolled in their NFC developer program. Android gives you more raw access, which is what I needed.
2. React Native Setup: I assume you’ve got a basic React native project up and running. If not, the official docs will surely help you out regarding this.
3. Libraries: I preferred react-native-nfc-manager for handling and node-emv to parse the raw EMV data from the card. [Optional You’ll also need some UI helper as per your requirement. I used react-native-toast-message and lottie-react-native for polish].

install libraries using following command.

npm install react-native-nfc-manager node-emv

For android, you’ll need to modify your AndroidManifest.xml to request NFC permissions. Add below lines.

<uses-permission android:name="android.permission.NFC" />
<uses-feature android:name="android.hardware.nfc" android:required="true" />

Actual Code: Tap-to-Pay

The heart of my project is a TapAndPayScreen component. It’s a React native screen that:

1. checks if NFC is supported and enabled.
2. Listens for a card tap.
3. extracts raw visa card details. ( I limited this example for just visa cards)
4. Simulates a payment process with animations.

Here’s how it came together.

Step 1: Initializing NFC

I kicked things off by starting the NFC manager and checking device support

import NfcManager, { NfcTech } from 'react-native-nfc-manager';

NfcManager.start();

function TapAndPayScreen() {
  const [isNfcSupported, setIsNfcSupported] = useState(null);
  const [isReading, setIsReading] = useState(false);

  useEffect(() => {
    const checkNfcSupport = async () => {
      try {
        const supported = await NfcManager.isSupported();
        setIsNfcSupported(supported);
        if (supported && !(await NfcManager.isEnabled())) {
          Alert.alert('NFC is disabled', 'Please enable NFC in settings.');
        }
      } catch (error) {
        console.error('NFC check failed:', error);
        setIsNfcSupported(false);
      }
    };
    checkNfcSupport();
    return () => NfcManager.cancelTechnologyRequest();
  }, []);
}

Above snippet ensures the device can handle NFC and prompts the user if it’s turned off. Just a tip, always clean up with cancelTechnologyRequest in useEffect’s written function to avoid dangling NFC requests.