Integrating Stripe sdk with React Native - part I - Accept a payment

Since Stripe is a popular and trusted payment gateway across the world and since it is used among most mobile applications which process payments, I guess writing an article on integrating Stripe sdk with a react native application will be worth.Also I am not going to dig deep in to stripe and I’ll be implementing a basic payment using Stripe sdk here.

First you need to go this url and create a account in stripe.That is pretty straightforward and I am not going to guide it here.

Then create a react native project and add stripe sdk using following commands

npx react-native init StripeProject
npm install @stripe/stripe-react-native

Open your project from your favourite IDE and open App.js and add following code.Follow this guide also whenever needed.

Here the publishable key is a key that you should take from your stripe account that you created.(Storing this key also in backend and retrieving it from there is more secure than storing it with frontend code)Go to dashboard in your stripe account, turn on test mode from top right Test button and copy publishable key from there.

Now we need a backend also to do stripe integration because we do payment intent creation in backend.You will understand what is payment intent in a second. I will be using node express here to implement the backend.

Create a new folder named server, navigate into the folder, run npm init -y, and follow the instructions to create a new Node app. Then, run npm i express dotenvto install express framework and dotenv which is a lightweight npm package that automatically loads environment variables from a .env file into the process.env object (environment variables are a great way to securely and conveniently configure things that don’t change often, like URLs, authentication keys, and passwords).

Install stripe also in backend using,

npm install stripe --save

Now create a file with name .env and add following code. Get the secret key also from the stripe dashboard.

secret_key=<your secret key here>
PORT=8000

Now lets write a rest api to create payment intent and customer id from backend and return the clientSecret and customer id which is needed to confirm the payment from front end. A 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.

create file called server.js and add following code

Here ve have exposed an api /create-payment-intent which creates a payment with 1299$ (Note you have to multiplay the value by 100 ,otherwise it’s 12.99$) and sends that client secret and customer id to front end.The amount is hardcoded in backend side but you can send it to backend through the api.Now from front end we should use this client secret and customer id to open the payment sheet with 1299$. Then we can enter our card details and confirm the payment from react native app. When a customer id is created we can reuse it and in a situation like we want to save card details under one customer we can reuse the customer id.

Now run the server in your localhost using command

npm start

Now in App.js file update the code as follows.

In Above code ahen you run the app it will call initializePaymentSheet(); mehtod and it will call the backend api /create-payment-intent and initialize payment sheet with relavant parameters. once we click on Checkout button the app will open the payment sheet as follows

Here you can enter card details and click on pay to pay the amount.(you can use 4242 4242 4242 4242 test card number with any cvc and expiary date).After that go to payments tab in your stripe accout and verify the paymet is added there.

Similarly you can use card field and card form instead of payment sheet which is coming from the bottom.

Final output —

React native code
Backend code