Stripe Interface Using React Native Framework
The increasing volume of digital transactions has paved the way for growing demands of payment-based applications; it has also brought the utility of different payment processing platforms to the forefront. Out of all the available online payment platforms and apps, Stripe has emerged as one of the most popular due to its well-documented and user-friendly APIs.
In this blog, we will learn each step of building a stripe payment interface with React Native framework.
Table of Contents
Starting With Prerequisites Parameters
There are only two prerequisite criteria that you need to have basic knowledge of. One is to understand the steps of getting the React Native environment in your system. Also, note that you have to use the React Native CLI tool to build the current project. So, you don’t need to learn about the Expo CLI tool.
Developers of react native app development companies cannot start any of the React Native-based projects if they don’t have this setup configured in their system.
The other parameter that you have to meet is learning the procedure of building a basic app with React Native framework. Getting a fair idea on this topic will allow you to get familiar with the core React Native components and the process to generate a codebase in the code editor.
Consideration of Third-Party RN Library
The codebase has been much lengthier if there was no provision for installing third-party plugins and libraries. In this context, you don’t have to test the components because you are taking the library and the component from an open-source repository where expert developers have already stored their work for public use. Doesn’t it sound interesting?
You will learn how installing the third-party library @stripe/stripe-react-native has helped in the current project.
For this library, you have to pass npm I @stripe/stripe-react-native on the terminal created from your app folder.
The main segment of this library is its SDKs, which will allow you to build a real payment interface.
Now, you have to consider the Client-side and get an RN-based SDK of Stripe.
Create a terminal from your app and pass npm install @stripe/stripe-react-native.
As we have covered the initial segments of the project, we will start working on framing the three distinct files namely PaymentScreen.js, Stripe.js, and App.js files.
Generating Codebase Paymentscreen.js File
This is the most important file in our project since the components that you will be creating in this file will be later used in the Stripe.js files to embed the screen of payment in your React native app.
You have to start with selecting the components and importing the same from particular third-party and core React native packages. Here, I have imported React from react; Button, Text, View, Stylesheet, Dimensions, Modal, and Image from react-native.
These are the basic components. Apart from these core components, the useful components that we need to take care CardField, use stripe, PaymentIntent, PaymentMethod, and CardField Input. This has to be from ‘@stripe/stripe-react-native’.
Code snippets for the above explanation are given below.
import {
CardField,
use stripe,
CardFieldInput,
PaymentMethod,
PaymentIntent,
} from ‘@stripe/stripe-react-native’;
import React from ‘react’;
import {
Button,
Text,
View,
StyleSheet,
TouchableOpacity,
Image,
Modal,
Dimensions,
} from ‘react-native’;
card file is basically a React UI element supported by its SDKs. Using the CardFiled component, you can collect the postal code, the credit card number, the CVC, and the date of expiration.
You have to build a payment method for the customer to access the checkout page and complete the money transaction. Here, the PaymentMethod will have all the data that is further taken by the component CardField. Also, you have to give the ID of the payment method to the server once the component is built successfully.
Using the PaymentIntent component, you can establish an endpoint on the server. Such endpoints can handle cards that may need some extra authentication steps.
Now, you have to specify a PaymentScreen() function using the export default statement. Also, the code will return a View and a Text element. For this, first, use a return() function and then the View and Text components with certain styling parameters. Let’s have a look at the code syntax.
export default function PaymentScreen() {
return (
<View style={{flex: 1, backgroundColor: ‘#ffffff’}}>
<View>
<View
style={{
flexDirection: ‘row’,
align-items: ‘center’,
marginHorizontal: 20,
marginTop: 10,
}}>
<Text
style={{
marginHorizontal: 20,
color: ‘black’,
font-size: 23,
font-family: ‘Poppins-Medium’,
font-weight: ‘500’,
}}>
Payment
</Text>
</View>
As you can see I have styled the main container wrapped under the first <View> component with white color and 1 as its flex value. For the next View element, flex-direction is ‘row’, the alignment of items is at the center, the horizontal margin is at 10 pixels and the top margin is at 10 pixels.
Lastly, the text ‘Payment’ is colored in black, has a font size of 23 pixels, a font-weight of 500 pixels, a horizontal margin is at 20 pixels and Poppins-Medium is the font style of the text.
Moving forward, I want to display a card image on the app screen. To do the same, you must create a new folder named assets in your app directory. Further, you need to make a file named card. Here, in the card file, you have to store the downloaded image of the card. Consider the image in the png format.
Later in the codebase in the PaymentScreen.js file, you have to specify the image with its source. Let’s understand how you can do this.
<Image
source={require(‘./assets/card/Card_both.png’)}
style={{
align-self: ‘center’,
width: ‘100%’,
height: 250,
marginTop: 20,
}}
/>
As you can find, the image source is mentioned as ./assets/card/Card_both.png. The image has a width of 100%, a height of 250 pixels, a center alignment, and a top margin of 20 pixels.
For the text ‘Payment Amount’ to be shown on the app screen on the stripe checkout page, you have to hold the text element under the Text component with styling objects like font size, specific color code, top margin, and horizontal margin. Consider the following syntax.
<Text
style={{
font-size: 18,
color: ‘#565656’,
marginHorizontal: 20,
marginTop: 20,
}}>
Payment Amount
</Text>
Add another text object. It will be in numerical value. The text element is ‘$123’, which will be shown as the value the user wants to transact. Similar to other text elements, you have to use styling objects. Refer to the following code lines.
<Text
style={{
font-size: 18,
color: ‘#000000’,
marginHorizontal: 20,
marginTop: 20,
}}>
$123
</Text>
Now, introduce a CardField component to get the placeholder of the user’s card details on the app screen. You have to set the CardField postalCodeEnabled as true. When the placeholder is empty with no user’s input, it will show the number ‘4242 4242 4242 4242′ in the placeholder. The card style has white as its background color with black as its text color. Refer to the below-shown syntax.
<CardField
postalCodeEnabled={true}
placeholders={{
number: ‘4242 4242 4242 4242’,
}}
cardStyle={{
backgroundColor: ‘#FFFFFF’,
textColor: ‘#000000’,
}}
style={{
width: ‘100%’,
height: 50,
marginTop:30
}}
Now, with the following codeline
onCardChange={(cardDetails) => {
console.log(‘cardDetails’, cardDetails);
}}
onFocus={(focusedField) => {
console.log(‘focusField’, focusedField);
}}
/>
It specifies that a function will be called whenever the details of the card change. It will also log the card details to the console.
Here, onCardChange and onFocus are a callback function and prop respectively.
onFocus takes in an argument, and focused field, and logs the same to the console.
Now, we will create a button using the TouchableOpacity component. The button has a label with the text: ‘Pay’ on it. The button has a particular background color, a width of 260 pixels, and a height of 48 pixels. The text is in white color. Consider the following snippet
<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, build a RedioBox element with specific styling parameters. Here, you have to use the StyleSheet component to achieve the same. Also, use the Dimensions component to make the lament responsive on different devices and orientations.
Here is how I have created the element and added styling objects to it.
const styles = StyleSheet.create({
RedioBox: {
width: Dimensions.get(“screen”).width – 65,
height:196,
backgroundColor: “#ffffff”,
marginHorizontal: 35,
border-radius: 15,
marginVertical:230,
shadowOpacity:0.25,
shadowRadius:3.5,
elevation:10,
},
})
We have successfully framed the .js file of PaymentScreen.
Code Syntax Stripe.js File
To make the file, you have to create a folder named ‘Payments’ and then create another file named Stripe.js in it.
Import the necessary components. Here is the syntax.
import { StripeProvider } from ‘@stripe/stripe-react-native’;
import React from ‘react’;
import PaymentScreen from ‘../PaymentScreen’;
You will import StripeProvider, React, and PaymentScreen components. The main components are PaymentScreen and StripeProvider.
Now, you have to include the API publishable key and get the Stripe interface in your app. Here is what you can include as the codebase.
export default function Stripe({route}) {
return (
<StripeProvider
publishableKey=”hide the key (get it from the Publishable type”
merchantIdentifier=”merchant.identifier”
urlScheme=”your-url-scheme”
>
<PaymentScreen />
</StripeProvider>
);
}
Note that I have hidden the key since it is case-sensitive. Since I am testing the app, I have considered the demo key. If you want to make a real app and a real transaction, you must use the live key. You can generate the key from the official site Stripe. And it is done. Now the last file remaining is the App.js file.
Creating Codebase in App.js File
Here, in this file, the operations that you will execute will be displayed on the app screen.
So let’s start framing the codebase of the file.
Similar to other files, you have to import the necessary components.
import { StyleSheet, Text, View } from ‘react-native’
import React from ‘react’
import Stripe from ‘./Payments/Stripe’
Other than the core components, you have to import the Stripe component from ./Payments/Stripe.
Now, wrap the Stripe component with <View></View> components. This is how you can do this.
const App = () => {
return (
<View>
<Stripe/>
</View>
)
}
It’s done. We have arrived at the last and final step, i.e., testing the app.
Test App
You can test the app on your emulator.
Go to your project and open the cmd. Run npm install and then next react-native run-android. This will start with the virtual device and the app.
Refer to 1 for the app screen.
Image 1
The steps of getting the Stripe interface in your React Native app are quite easy. However, you need to focus on generating the live key. Without this, you cannot make the money transaction. Apart from that, React Native framework is simple to handle and develop apps.
