Getting started with stripe payments in React Native
To implement stripe in react native, you will need:
Server-side implementation (node js)
Client-side implementation with the official stripe react native module - @stripe/stripe-react-native
Fortunately for us, the good people at stripe has already written a great example app for us to follow. You can find this example here. We will just make a few adjustment to this code. We will include only the routes we will use in our react native project, and adjust how it is handled. The result is in the image below
payment-sheet: For This endpoint, 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 endpoint is implemented to retrieve the stripe publishable key.
create-setup-intent: This endpoint is implemented 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 implementation with 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, By just presenting 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 complete project with Shopify backend, Woocommerce backend and Firebase backend. All Projects can be found here at QuickComponent.