Square Reader SDK for React Native

In the beginning of August, we announced the release of our Reader SDK for iOS and Android to allow developers to build their own custom in-person payment experiences.

Now, we’ve taken that ground-breaking SDK and wrapped it up in a React Native plugin that you can use in your own React Native project. So whether you’re a cross-platform guru looking to creating the ultimate in-person payment experience or just a React hacker looking to try out something new, you can now npm install react-native-square-reader-sdk in your project (just be sure to read our quick start guide on getting the native dependencies installed).

We released a React Native plugin for our Reader SDK to allow developers to more easily and rapidly create new in-person payment applications. We know that iOS and Android developers can just as easily use the native SDK, but here we can reach any JavaScript developer. We even have a quick-start application that can give you a starting place for creating your very own point of sale, kiosk, or custom in-person payment experience. It’s as easy as tweaking some JSX, or creating your own components, and then connecting them to the interfaces we’ve provided.

It’s possible to get an app up and running locally within five minutes. I was even able to get a custom keypad, entering arbitrary values, in an hour (granted, I was a little rusty on my React Native when I was trying it). I’m also very much not a mobile developer, and having the application running on an iPhone and Android simulator simultaneously was so powerful for having a responsive feedback loop when developing. You can enable live reloading on each device and have all your changes reflected immediately upon saving.

Live reloading a React Native Square Reader app in iOS and Android simultaneously!

Let’s say you take our quick-start app out for a spin and are looking to just get your feet wet in making your own point of sale app.

You can open up [reader-sdk-react-native-quickstart/app/screens/CheckoutScreen.js](https://github.com/square/react-native-square-reader-sdk/blob/master/reader-sdk-react-native-quickstart/app/screens/CheckoutScreen.js) and start modifying some of the buttons to adjust the amounts that you’re charging.

Then add some additional buttons that look like this:

<KeyPadButton
  title="1"
  onPress={() => this.addValue(1)}
  primary
/>

The above is just a modified version of the provided CustomButton component to look a little different. We then add in our own function for adding a value:

addValue(value) {
  this.setState((prevState) => {
    return {
      currentValue: [...prevState.currentValue, value],
    };
  });
}

and add a currentValue array to the state of our CheckoutScreen component:

class CheckoutScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentValue: [0, 0],
    };
  }

You now have your own keypad to enter amounts to charge.

Here you can see what a final custom keypad looks like. We have buttons for every number, we can clear values, and we’re just storing the current value we want to charge in the main CheckoutScreen component. The state even persists if we back out of the charge.

It’s so easy to modify these interfaces! You can change the text, add in some additional state, or create custom functions to tailor the application to do whatever you need. The key benefit here is that you can then deploy this to iOS and Android using the same core components.

This is really just scratching the surface, since these are only simple modifications to the quick-start application. We are looking forward to seeing what the React Native community creates with this new plugin. Whether you want to make the next self-ordering kiosk, create a whole new point of sale for your favorite industry, or just be the first to build a React Native application with it — we want to hear about it!

Tweet us at @SquareDev or join us in our slack community over at https://squ.re/slack.

Also, if you just want to contribute to the open-source project on GitHub, feel free to give it a fork and submit a PR to us!