How to add Stripe payments in React Native

Using stripe in react native, you should implement:

• Server-side (node.js)
• Client-side using the official stripe react-native module.

— @stripe/stripe-react-native

Server-side

You can find a great example to guide you here. This was implemented by the good people at stripe. We will make a few adjustment to this code. Using the routes found in the example, we will adjust how it is handled. The result is in the image below.

payment-sheet: We receive a request body containing customerId, currency, amount, and we make the necessary checks to ensure this field is supplied. After that, we use the fields to create a paymentIntent and an ephemeralKey. We send a response of this object to the client side.

stripe-key: This was implemented to retrieve the stripe publishable key.

create-setup-intent: We implemented this to set up stripe. We pass an email in the body of the request, with the email received, we retrieve the existing or create a new stripe customerId. We also create a setupIntent, after which we will have the client_secret available.

We then respond with the publishableKey, clientSecret, and the customerId. And this is all in the server side. You should note that this is a minimum implementation and you should always ensure the amount ti charge is not passed in the body of the request but calculated on the server-side for security reasons.

Client-side using the official stripe react-native module

Again, the good people at stripe, has made it extremely easy for us to implement any stripe supported payment means such as Apple Pay, Card payment, Scan card to pay. We simply present a simple payment sheet.
This payment sheet also enable us manage customer cards(save and delete card) with ease. The work needed here is getting the keys needed to display this sheet hence the server-side implementation. Add the official react native module for stripe by running the command.

yarn add @stripe/stripe-react-native

install pods by running the command

cd iOS && pod install && cd ..

And that’s all for installation, you should rebuild ur app now. If you have any problem while building for iOS relating to linking problem for swift. Then you should Try this solution. It wasn’t included in the documentation and I had to figure it out.

• Open ur project in Xcode
• From your project directory, add a new file, file.swift and don’t link bridge header when asked.
• Also, click on your project and not the target file, then Remove $(TOOLCHAIN_DIR)/usr/lib/swift-5.0/$(PLATFORM_NAME) and the rest from LIBRARY_SEARCH_PATHS in build settings.

Now that our app is running successfully, We need to wrap our root App, most likely in the App.js file with a StripeProvider imported from @stripe/stripe-react-native, and set the publishableKey and merchantIds props like in the picture below.

We can now create a payment hook. Like in the image below

setupStripePayment and setupPaymentSheet: We assume you are on ur checkout screen and this hook is implemented. These methods are called once the checkout component is mounted. we need to connect with the server-side, fetch the keys required to set up the payment sheet and this method help us to achieve that. we alertOnlinePaymentFailed if an error occurred while setting up the keys. If it is all successful, we initPaymentSheet with the keys and setCanPayOnline to true.

openPaymentSheet: This method is called when the checkout button is pressed. We present a payment sheet and not worry about any other thing but the response from the presentPaymentSheet method. If we have an error filed from the response, we alert alertOnlinePaymentFailed and handle error, and if success, we handle success.

And That is all. We now have the client-side and server-side implemented and you will find that it is extremely easy to implement.
See here how we have included this amazing @stripe/stripe-react-native library in our templates at QuickComponent

Handling all user case error and success, using hooks.
We have also used it in a complete Shopify mobile app templates built with react native. Also available with Woocommerce and Firebase backend.
All Projects can be found here at QuickComponent.