.webp)
Adding payments to React Native apps
In this article, I’ll guide you through the process of adding payments to your React Native app. Let's narrow down payment options first.
There are three ways of paying in mobile applications: paid app, in-app payments, and paying in app for services not related to the app itself (e.g. ecommerce). Today we will focus on the third option, the one that gives us the most flexibility. In our case, we will implement paying via a card functionality using Stripe.
But before we dig into coding, let me answer a few questions that probably popped for some of you.
- Can I use Expo?
Yes, you can! And you will if you decide to join me today.
- Do I need any complicated setup on my machine?
No, we will be using Expo Snack and Glitch.io. So a browser is the only thing you need.
- Is any Stripe account needed, how can I test payments?
If you want to properly test your payments implementation, it’s worth having a Stripe account. You can easily create it for free here. For testing, we will be using test card numbers provided by Stripe.
Tools
For simplicity, let’s use Expo Snack to implement and test React Native mobile app and Glitch.io to create a simple backend.
For those who don’t know, Expo Snack is a React Native Playground in your browser. With it, you can play with React Native and test it even on your device without leaving the browser. It is based on Expo.
Glitch is an online playground but for the web with a possibility to create an instantly deployed backend service. No setup is required which means this is the perfect tool for us to create a test server for our payments.
Final examples can be found here:
React Native setup
First, let’s create an empty Expo project. For simplicity we will be using Snack, but if you prefer you can init a new expo project locally using expo init my-app command.
To create a new Snack project just start coding.
Expo has built-in support for the @stripe/stripe-react-native library. This means you can freely use it without ejecting or creating a custom EAS plugin. If these things aren’t familiar to you, don’t worry! You won’t need them for this tutorial.
To use @stripe/stripe-react-native in Snack, you need to add the line below to your dependencies in the package.json file:
After adding the dependency, let’s replace unnecessary code from App.js with our StripeProvider component:
StripeProvider is used to initialize Stripe in your app. It should be used in the root component of your application. The only required prop is publishableKey. You can find this key in your Stripe account settings.
For simplicity, we are passing hardcoded publishable key but if possible it is worth creating an API endpoint that will return it to use with StripeProvider
NOTE: If you’re like me and prefer using TS instead of JS you can just change the file extension in Snack to .tsx.
Now we are ready to go!
Backend setup
Ok, almost ready to go. Remember when I was writing about the backend? So it wasn’t a mistake or a typo. In order to implement payments in our React Native app, we need a server. By using a server weincrease the security of our app, which is quite important when dealing with payments of any kind.
But since this is a “React Native Payment with Stripe” tutorial, we can cheat a little and use pre-built backend. The only thing you have to know about its implementation is that we need:
- /create-payment-intent endpoint that creates a payment intent. Under the hood it uses stripe-node library to create paymentIntent to start payment flow.
- Webhooks setup - an endpoint that will be automatically called by Stripe after the payment is completed.
PaymentIntent - Stripe uses this to represent your intent to collect payment from a customer, tracking your charge attempts and payment state changes throughout the process.
To customize the backend to work with your Stripe account first open this project in Glitch.io. It is the working implementation you need. Then just press the “Remix” button, open the .env file, and modify the following key:
- STRIPE_SECRET_KEY - you can find your secret key on Stripe dashboard
From now on you will be using your own cloned Glitch server as your backend. To retrieve the URL of this service press “Preview” and copy the address of the opened page.
Webhooks: For your final backend, you would probably need a webhooks setup. It is a mechanism that allows Stripe to inform you backend that payment was proceeded successfully (or not). For simplicity, we won’t use it in our test app but you can find more details here.
Screen with CardInput
Now we are ready to create a screen with card input so we can collect card data. There is a CardInput component in @stripe/stripe-react-native for that. Some of the props you can pass include: placeholder, autofocus info, or styles to it (the list is longer, see the documentation for more details). We are only going to pass style, postalCodeEnabled, and cardStyle
Below the input, we can render a button that will start our payment process.
The lines below added to App.js file should render an autofocused card input, ready to interact together with a “Pay” button.
You probably already realized that there is no logic to keep our card details available in state. That’s not a mistake! To make the card payment even more secure and PCI compliant, it is up to the CardField component itself, and Stripe’s React Native library, to store card details natively behind the scenes, and share them with the other Stripe functions when needed.
Processing card payment
To process your payments after pressing “Pay” button, we need to follow four easy steps. All of those steps should be done in the onPress callback of our button.
You can write code required in those steps inside your main component function in App.js file. After following all the steps, this is what your code will look like.
Step 1 - create a payment intent
Create a payment intent in the backend and fetch its secret. Simply post to your endpoint, and save the returned payment intent client secret. We will use this secret in step 3.
Step 2 - customer data
Gather customer information. In our case let’s just mock it. In a real application you would have to collect these from a user via a form.
Step 3 - confirm payment
After gathering the required details, we are ready to finalize the payment. This is a step when we are confirming the payment intent created in step 1. Card information is needed in order to call this step but it will be passed automatically from the CardInput component.
To confirm the payment, you can use the useConfirmPayment hook from @stripe/stripe-react-native library. The hook returns an object with the confirmPayment method, and information about the loading state. In order to finalize the payment you need to call it with clientSecret retrieved in step 1 and payment configuration. Since we are paying with a card, the object we pass will contain the field type with the value 'Card' and the field billingDetails which contains the data we collected in step 2.
Step 4 - error handling
At this stage, our payment should have completed successfully. But, we cannot forget about error handling. The confirmPayment method used in the previous step returns an object with error and paymentIntent fields. The first one can be used in order to check for any error information (if one occurred). The second one is needed to check details about our succeeded payment intent.
Connecting and testing everything
That’s it. Our card payments implementation is complete. The last thing to do is test it. To do that, you can open the app you created and proceed with payment using one of the test cards provided by Stripe.
You can even test error scenarios just by using different card numbers.
Summary
React Native Expo, around 70 lines of code, one additional dependency, one simple backend, and one free Stripe account - this is everything you need to implement working card payments in a mobile application. Easy, right?What’s great is that after implementing this one simple payment method it is not that hard to add more. Setting up future payments, 3D Secure, drop-in UI Payment Element with support for >10 different payment methods, Google Pay, Apple Pay, and many more features are waiting for you to use from @stripe/stripe-react-native. Probably the best place to start will be the official Stripe documentation.
Need a hand with growing your mobile app? Contact us, and let’s discuss how we can use our React Native development skills to your advantage.
