How to integrate stripe payment gateway in react native

In this post, we are going to learn “How to integrate stripe payment gateway in react native” apps, you will implement this functionality using a Rest Api.

Why we use stripe payment gateway functionality :

• Stripe is the most widely used and fastest growing payment gateway.
• It supports a wide variety of payment options which includes Apple Pay and Google Pay or you can use your debit and credit card.
• Stripe’s ease of integration has made it a popular developer choice over PayPal and other payment gateways.
• These are the some popular payment gateways which you can integrate with your react native app — PayPal, Stripe, RazorPay, Braintree, in-app purchase etc.
• There is a stripe tipsy npm library for Credit card, Debit card, Apple pay, Goolge pay etc.

Steps Need To Integrate –

Step 1 —

Creating Stripe Developer account and getting API keys.

Step 2 —

Create a React Native app for Stripe integration.

Step 3 —

Integrate Third Party Stripe library tipsi-stripe for token generation.

Step 4 —

Sending the token to our backend using fetch() API.

So let’s start with step 1: Creating Stripe Developer Account –

Step 1 –

Go to the official stripe developer account Stripe.com and create an developer account by using your email id or you can follow signup process.

signup form is look like, fill all the field then click create account and your account is now ready to use.

Step 2 –

In this step we are going to get the API key, for getting API keys open your dashboard — click here

Step 3 –

And then click on side-menu => Developers => API Keys

here you get 2 important keys which are-

Publishable key — is what you use for connecting the Stripe Native SDK or tipsi stripe in front-end to generate token.

Secret key — is used in the back-end, where your server connects with Stripe’s server for actual payment.

So we completed the step 1 which is stripe developer account creation, which is a part of “How to integrate stripe payment gateway in react native“.

Step 2 — For Step 2 click here

Step 3 & Step 4 — For Step 3 & Step 4 click here

If you have any query/issue, please feel free to ask.

Happy Coding Guys.