Sign in
Log inSign up

How to capture credit card transactions in React Native

Connor Bode's photo
Connor Bode
ยทMay 13, 2019

Need to capture a credit card transaction in a React Native mobile application? In this post we'll go over the technology you need to swipe a card!

tldr; use Square to process the transactions, with the react-native-square-pos package to interact with Square POS

Square

Square is the most known provider of this functionality. They sell cheap (starting from $10 USD) dongles called Square Readers. Square Readers plug into the headphone jack of Android / iOS phones and allow users to swipe or tap credit cards.

These dongles can help you to create charges from your mobile app.

Square POS

In order to capture a Square charge from a credit card, you'll have to use the Square Point-of-Sale application (unless you're in the U.S. where you can use the In-App Payments SDK).

The Square Point-of-Sale application reads the swiped or tapped credit card from the Square Reader, then charges the card and deposits the amount into your Square account.

Your mobile app

In your React Native mobile app, if you want to make a charge you have to launch Square POS with the appropriate details. This can be done using react-native-square-pos.

The react-native-square-pos project details describe how to capture a credit card transaction in Square POS