Stripe Interface Using React Native Framework

In this digital world, every business is online and this increases Mobile Application Development like other platforms more than ever. The increasing volume of digital transactions has paved the way for a growing demand for payment-based applications; it has also brought to the forefront the benefits of various payment processing platforms. 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 the React Native framework.

 

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 the 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 of generating a codebase in the code editor.

 

Consideration of Third-Party RN Library

The codebase would have 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?

 

Learn how installing the third-party library @stripe/stripe-react-native helped with the current project. Since Jio 4G and 5G, the Indian network has become very fast, thanks to technology.

 

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. 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 of are 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 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 a 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 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 code line

   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. 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. 

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.

 

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, the React Native framework is simple to handle and develop apps.

Leave a Reply

Your email address will not be published. Required fields are marked *

GK Digital Festive Media Hookah Care Relation Status Ganesh Kulariya NatureQue