How to Integrate Stripe Payment Gateway in React Native

WHAT IS THE PROCESS?

A charge is a record of a transaction for an amount to be deducted from a credit card.

A token is just a representation of your credit card that Stripe has encoded with your publishable key. It can only be used once before being disabled after money is received.

A customer is the owner of one or multiple means of payment e.g. sources.

A source is a different version of your card that may be used to make recurring payments. Your secret key or the Stripe dashboard are the only ways to produce it.

What exactly is Stripe?

Stripe is a financial and software provider that uses its API to allow software developers and e-commerce businesses to achieve seamless payment. Stripe is a corporation that provides software as a service (SaaS).

One out of every three paid services offered online now employs Stripe as a payment option, as fintech continues to gain traction among new and current SaaS firms across the world. The easiest method to lessen the headache of payment integration in your iOS and Android apps is to have a thorough understanding of how to integrate Stripe in your React Native app.

The Stripe Native SDK for React Native

After you’ve learned about Stripe, the easiest approach to get started using the Stripe API is to go through the official Stripe documentation.

Stripe documentation – https://stripe.com/docs

But guess what? The Stripe React Native SDK can reduce that process by about 60%.

• Security

Stripe’s React Native SDK allows you to collect sensitive data like credit card details and securely take payments by sending them to Stripe’s API rather than through your backend server.

• Apple Pay and alternative means of payment

Multiple payment methods are supported by the SDK, including bank transfers, debits, and redirection, credit cards, purchase now, pay later; vouchers, and digital wallets. Apple Pay is also available as an add-on. Stripe’s official guidance on how to integrate Apple Pay and other payment methods can be found here.

integrate Apple Pay – https://stripe.com/docs/apple-pay

other payment methods – https://stripe.com/docs/payments/payment-methods/overview

• Native UI Pay and alternative means of payment

Stripe React Native SDK includes native panels and widgets for accepting payments securely on Android and iOS.

• Pre-made payment interface (beta)

Stripe’s pre-built payment UIs are supported by the SDK. This functionality is currently in beta, with Apple Pay, Google Pay, and card payment UIs supported. However, support for more payment methods is planned for the future. Stripe payment UIs may be found here.

In these tutorials, we’ll develop and test a payment page in our React Native app to learn about some of the capabilities described above. In the following part, we’ll get started.

Creating a Stripe account

Stripe is no exception since every SDK requires personal access credentials. To continue with this React Native tutorial, we’ll need to register a Stripe account and get our personal keys so that we can collect payments.

To get started, go to https://dashboard.stripe.com/register and either establish an account or log in to an existing one.

Link – https://dashboard.stripe.com/register

Get your public key next. Keep your key safe it’s the key to your Stripe account.

React Native Stripe application

Now that you have set up your Stripe account and are using your public key, let’s start building a React Native app.

To install a new React Native app, go to your development directory and paste the following command:

npx react-native stripeReactNativeDemo

Once the installation is complete, open the StripeReactNative terminal and paste the following code to install the Stripe React Native SDK package in your app:

yarn add @stripe/stripe-react-native
or
npm install @stripe/stripe-react-native

For Android and iOS support, the Stripe React Native SDK has several needs. You may look them up here:

Android

• Android 5.0 (API level 21) and above
• Android Gradle plugin 4.x and above

iOS

• Compatible with apps targeting iOS 11 or above.

Building the payment page

As soon as we’ve installed the SDK, let’s build our first payment screen.

Building a card component

To begin, create a new folder called screens in your React Native app’s root directory.

Create a new file named paymentScreen.js in the folder, then put in the code below:

import React, {useState} from "react";
import {
CardField,
CardFieldInput,
useStripe,
} from '@stripe/stripe-react-native';

export default StripPaymentScreen = () => {
const [card, setCard] = useState(CardFieldInput.Details | null);
const {confirmPayment, handleCardAction} = useStripe()
return(
{
setCard(cardDetails);
}}
onFocus={(focusedField) => {
console.log('focusField', focusedField);
}}
/>
)
}

Next, import paymentScreen.js into the project's root directory.

Open App.js and make the following changes to the code:

import React from 'react';
import {
SafeAreaView,
StyleSheet,
} from 'react-native';
import { StripeProvider } from '@stripe/stripe-react-native';
import PaymentScreen from "./screens/paymentScreen";
const App = () => {
const publishableKey = "pk_test_AtN3VLAFhzbLNqf3Y9z50iNQ";
return (


);
};
const styles = StyleSheet.create({
});
export default App;

Let’s launch our app to see how far we’ve come.

Run IOS build

npx react-native run-ios.

Run Android build

npx react-native run-android.

Pre-built UI

This functionality combines all of the procedures necessary in taking payment using credit card information in Stripe. This integration requires a server-side interface that talks with the Stripe API.

Conclusion

Stripe’s Stripe React Native SDK is incredibly simple to use. It’s quickly becoming popular among developers thanks to supporting prebuilt UIs (with plans to add more in the future) and payment alternatives.

Reference

https://github.com/stripe/stripe-react-native
https://stripe.com/docs
https://dashboard.stripe.com/register