Heads up, we’ve moved! If you’d like to continue keeping up with the latest technical content from Square please visit us at our new home https://developer.squareup.com/blog
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).
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.
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 and start modifying some of the buttons to adjust the amounts that you’re charging.
Then add some additional buttons that look like this:
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:
and add a
currentValue array to the state of our
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!
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!