Stripe being one of the most renowned payment-based platforms among global merchants provides hassle-free money transactions. Using this platform, you can design an invoice for your customers, plan a recurring payment, get online payment, and do other money-transaction-oriented operations. If you want to integrate the Stripe interface into your React Native app, you can do this through the services provided byreact native app development company. Here, in this blog, I will explain to you all the detailed steps.

Prior knowledge to be acquired

Here, you only need to learn the setup methods to get the React Native environment. Consider the linked article as a reference.
Also, you have to get a basic idea of how a React Native app is made from scratch. This learning will give you an idea of navigating through the VS code editor and importing components from the desired React Native libraries. You can take the attached blog article as a reliable reference.

Configuring third-party React Native library in the project

In this present project, you have to use the library: @stripe/stripe-react-native. Also, you have to select the version of these third-party RN packages based on the version of React Native that you are considering in your project. As per the compatibility, I have installed the 0.21.0 version of @stripe/stripe-react-native.
Using the SDK of this library, you can build the Stripe interface in your React Native app.
For its installation, you have to pass npm install stripe --save on the project’s terminal.
You have to pass another command npm install @stripe/stripe-react-native in your app or project terminal. This will get you the SDK of the Stripe specific to React Native.
As we are done with the plugin configuration, we will start creating the needed files in our code editor. Let's start this.

What’s in the Stripe.js file?

Start with getting the components from the relevant React Native packages. Here is the syntax.

import { StripeProvider } from '@stripe/stripe-react-native';
import React from 'react';
import PaymentScreen from '../PaymentScreen';

As per the syntax, you have to import StripeProvider and React from @stripe/stripe-react-native and react libraries respectively. You have to take PaymentScreen from another folder of the same project. It is the PaymentScreen.js folder.

Now, add the StripeProvider component for initializing the interface of the Stripe Payment gateway. Also, you have to include different parameters such as publishableKey, urlScheme and merchantIdentifier. Using this component will create a screen where users can give their credit card credentials for taking the payment process forward.

The link attached to the publishable type is where you can get the publishable key. For practice, use the test key. However, for the real transaction, you have to use the live key. You can generate the live key from the same site. The syntax for this context is:
return (
<StripeProvider
publishableKey= "hide the key (get it from the Publishable type"

merchantIdentifier="merchant.identifier"
urlScheme="your-url-scheme"
>
<PaymentScreen />
</StripeProvider>
);
}

What’s in the PaymentScreen.js file?

For this current project, this file cannot be overlooked since you will be creating the PaymentScreen component in this PaymentScreen.js file. Get started with importing the core components of React Native: Button, View, StyleSheet, Dimensions, Modal, Image, TouchableOpacity, and Text.

Besides, the major components that you need specifically for this project are the CardField, PaymentIntent, PaymentMethod, CardFieldInput, and useStripe. You can get these components from @stripe/stripe-react-native. These components will be useful to process the payments in the Stripe platform interface. Consider the code syntax as

import {
CardField,
useStripe,
CardFieldInput,
PaymentMethod,
PaymentIntent,
} from '@stripe/stripe-react-native';
import React from 'react';
import {
Button,
Text,
View,
StyleSheet,
TouchableOpacity,
Image,
Modal,
Dimensions,
} from 'react-native';
Now, specify a PaymentScreen() function and use a return() function under the PaymentScreen function to render the Text component and the View component. Here, the text is ‘Payment’. I will use different styling objects with both the View and Text elements. The code snippet is given below.
export default function PaymentScreen() {
return (
<View style={{flex: 1, backgroundColor: '#ffffff'}}>
<View>
<View
style={{
flexDirection: 'row',
alignItems: 'center',
marginHorizontal: 20,
marginTop: 10,
}}>
<Text
style={{
marginHorizontal: 20,
color: 'black',
fontSize: 23,
fontFamily: 'Poppins-Medium',
fontWeight: '500',
}}>
Payment
</Text>
</View>

To display an image of cards, you need to download a similar picture in the png format and store it in it in the assets folder. For this, make an asset folder and then create a card named file. Save the image in ./assets/card. You can call this image in the codebase. Let's see how you can do this.

<Image
source={require('./assets/card/Card_both.png')}
style={{
alignSelf: 'center',
width: '100%',
height: 250,
marginTop: 20,
}}
/>
Start with the <Image source= Also add styling objects to make it presentable on the screen.
I want to display another text ‘Payment amount’ on the Stripe payment interface. For this, you have to wrap the text and the styling objects under the Text component. Here is the code syntax.
<Text
style={{
fontSize: 18,
color: '#565656',
marginHorizontal: 20,
marginTop: 20,
}}>
Payment Amount
</Text>
As you can see, I have set the text with a font size of 18, colored with a code of #565656, and set 20 pixels as both top and horizontal margin.

For the payable amount, you may want to add some numerical value in dollars. Here, I have considered ‘$123’ as a text. So, you have to use the Text component with styling parameters. Consider the following syntax.

<Text
style={{
fontSize: 18,
color: '#000000',
marginHorizontal: 20,
marginTop: 20,
}}>
$123
</Text>
Next, you have to use the CardField component to enable the postalCode. Using this component, you can also create a placeholder where users can add their credit card numbers and initiate the payment.

When the placeholder section is empty, it will show a general number '4242 4242 4242 4242'. Further, onCardChange and onFocus props are used to render the cardDetails and focusedField respectively. Give some background color and text color to the cardStyle.
Refer to the following syntax.

<CardField
postalCodeEnabled={true}
placeholders={{
number: '4242 4242 4242 4242',
}}
cardStyle={{
backgroundColor: '#FFFFFF',
textColor: '#000000',
}}
style={{
width: '100%',
height: 50,
marginTop: 30,
}}
onCardChange={cardDetails => {
console.log('cardDetails', cardDetails);
}}
onFocus={focusedField => {
console.log('focusField', focusedField);
}}
/>

Without a clickable Pay button, the Stripe payment interface will be incomplete. Use the TouchableOpacity component with inline styling. Also, you have to hold the TouchableOpacity component under the View component. Find the below-provided codelines, and how I have designed the button. Also, it has the label ‘Pay’ on the button.

<TouchableOpacity
style={{
backgroundColor: '#233B08',
width: 260,
height: 48,
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'center',
borderRadius: 30,
marginTop: 20,
}}>
<Text style={{color: '#ffffff'}}>Pay</Text>
</TouchableOpacity>
</View>
</View>
);
}
Lastly, you have to build a RedioBox and use the StyleSheet component to design the element. It has specific values for width, height, backgroundColor, marginHorizontal, borderRadius, marginVertical, ShadowOpacity, shadowRadius, and elevation.

Here is the code snippet.

const styles = StyleSheet.create({
RedioBox: {
width: Dimensions.get('screen').width - 65,
height: 196,
backgroundColor: '#ffffff',
marginHorizontal: 35,
borderRadius: 15,
marginVertical: 230,
shadowOpacity: 0.25,
shadowRadius: 3.5,
elevation: 10,
},
});
And it is done building the PaymentScreen.js folder.

What’s in the App.js file?

App.js file is the prime file of every project. The operations that you undertake through the codebase are displayed on the main screen of the app.

Get the React Native components that might be useful for the project. Here, you need to import Text, View, StyleSheet, and React components. Other than this, import the Stripe component from one of the files of the recent project. The root directory for the Stripe component is ./Payments/Stripe. Let’s see the code snippet.

import { StyleSheet, Text, View } from 'react-native'
import React from 'react'
import Stripe from './Payments/Stripe'
To get the Stripe interface, you have to start by specifying an App component and return the Stripe component under it. Here is how you can present it in the form of a code line.
const App = () => {
return (
<View>
<Stripe/>
</View>
)
}
And you have successfully created the App.js folder.
Lets understand the process of running the Stripe platform on the emulator.

Steps to test the app and run the program built so far

Click on the command prompt option. Note that you have to open this from your app.

Pass npm install. After the packages are installed. Pass npx react-native run-android.

The emulator will start after it is 100% bundled.

You will see the app running on the virtual device or the emulator. Refer to image 1 for the emulator screen.