React Native Card Reader Support

Have a general question. Currently, I have a web app built using react and square for handling payments. As this is for one location, currently we just use the square point of sale app for handling in person payments with the square card reader and then online payments are done through the React SDK. This data is then roughly synced with square customers objects.

Getting to my question, though. I want to streamline the process of taking payments, as currently requires switching to the Square POS app to take payments with the card reader. I was wondering if this is possible to do with React Native with Expo. Furthermore, I saw there was the “Mobile Payments SDK” but this was for either iOS or android. I was wondering if there is something available for React Native, as I am familiar with react and do not want to make this application limited to one platform. I am hoping to expand this application to more locations, so any feedback or advice in general for solutions with this switch to React Native would be greatly appreciated, Thanks

:wave: I’m Square Dev AI, here to help answer your question!
Based on the information you’ve provided, the following documentation will help answer your question:

Additional Documentation

React Native Plugin
Reader SDK
Point of Sale API and POS Integration Tools

If this documentation helped you find a solution, please check the box indicating that this reply solves the problem.
Otherwise one of our Developer Advocates will provide additional assistance shortly.

At this time there isn’t any other options for a mobile web application with our SDKs. Currently the Point of Sale API is the only SDK that supports mobile web.

If your looking to build a native app then we definitely recommend the Mobile Payments SDK. As you pointe out there is just Android and iOS availability at this time. We currently don’t have a React Native wrapper available. With that said you can definitely build your own wrapper with the SDKs. :slightly_smiling_face:

I see that makes sense. Will look into the wrapper idea, might be a little too much work though haha. I do have some questions about what you mentioned, the Point of Sale API. So if I have a payment I want to take in my mobile web app, it will open the Square POS app, then after the payment return to the mobile web app. And this autofills the order information.

As this could be what I am looking for, as currently I am going from the webapp to the square POS app and adding a customer to the order by searching name or phone number. That step of adding them to the order is what causing problems. Can the Point of Sale API help with that by automatically filling out the order, or am I reading into this wrong

Unfortunately, Point of Sale API doesn’t support orders. It just takes a payment at this time. :slightly_smiling_face:

I’m surprised that this functionality isn’t there already. Expo is now the recommended framework to start with from meta for react native.

Has there been no effort already to provide a sample repo with this done?

The example using plain React Native is using RN 67. This came out in the beginning of 2022, and won’t even compile or work with modern Android versions.

Hello,

a wrapper around the Android and iOS libraries can be implemented fairly easily nowadays using the Expo Modules API. I actually have it implemented for a client already and it works perfectly. If you have any questions on how to implement specific functionality regarding the React Native wrapper, feel free to ask and I’ll do my best to provide pointers.

Continuing the discussion from React Native Card Reader Support:

I’d love some pointers as to how you developed your wrapper so you can use the Mobile Payments SDK with React Native. I’m not too sure how to even get started with it, so any help would go a long way. Thanks!

Yeah I would also be curious to hear any advice you have on react native wrappers with expo. I have yet to implement anything but in the coming months with be a challenge for me to overcome. Any advice would be great.

Hey Jake & Clouden,

so first of all I recommend using the built in UI provided by Square instead of developing your own, it will be much faster and easier to do.

Use the Mobile Payments SDK Mobile Payments SDK

instead of Reader SDK since the Mobile Payments SDK is a successor to the Reader SDK.

The initialization and configuration part: Build on Android

needs to be handled via config plugins, but pretty much everything else can be set up using the modules API: Module API Reference - Expo Documentation

If you’ve never developed native modules, I recommend going through this tutorial: Wrap third-party native libraries - Expo Documentation (there are also other tutorials in the same section), it gives you a taste of how it looks like to develop a native module. If you manage to finish this tutorial, integrating the Mobile Payments SDK will be much much easier. Therefore, I encourage you to try it out yourself, and if there are still questions, feel free to ask

2 Likes

Mobile Payments SDK isn’t even available in Australia yet.

Is this really the developer experience expected from Square?

We hope to have more for you soon on Mobile Payments SDK availability in other regions. :slightly_smiling_face: