Should you use the official Stripe package in your React Native app

Example of Stripe prebuilt UI

Managing payments in React Native has always been more difficult as it should have been. Your options were either to use Google Pay and/or Apple Pay, implement the payment process yourself through a web-view component or use a 3-party package that uses common payment services like Stripe. The latter (my arguments are based on my experience using tipsi-stripe) were easy to use once you figure out how it works but offered limited functionality and support. Above all, there is this nagging feeling of mistrust. At the end of the day, I admit they aren’t responsible to provide a 100% secure service and offer 24/7 support.

Given the fast-paced nature of working at a startup where decisions have to be made quickly, I reluctantly choose the path of least resistance (in my case this is using tipsi-stripe) and hoped that one-day Stripe will offer their own package. Well, that day has finally come. The project is of course still in beta (tested version v0.1.4) as in the moment of writing this article but having tested it extensively in development as well in production I can, without doubt, say it is good to use. Keep in mind that the package was first released a couple of months ago so not all functionalities are supported. The most noticeable of them is the absence of Android Pay. But other important functionalities like Apple Pay and 3D Secure authentication are supported and work great.

Things to keep in mind before switching to the official Stripe React Native package:

1. The project is still in beta so there might be some unresolved bugs. In my case after everything was setup, the payment process (we used the prebuilt single step UI) worked without any issues.
2. Setup might take longer than expected. I had to increase my minimum deployment target to 11 and update the platform version line Podfile file to 11. Other issues might occur.
3. The component that is going to display the payment UI must be implemented inside a functional component. There is no option to use a class component because Stripe uses hooks. For example:

const { confirmPayment } = useStripe();
or
const { initPaymentSheet, presentPaymentSheet } = useStripe();

4. If you are using tipsi-stripe and are thinking of switching to the new package, the code on the backend is essentially identical. On the front end, the code is very different although error handling is similar.

Useful links

1. Official docs from Stripe,
2. GitHub repository,
3. Add Stripe to a React Native application tutorial from Stripe.