An overview on development of Video Consultation Healthcare App in React Native Using Twilio

An overview on development of Video Consultation Healthcare App in React Native Using Twilio
Since the introduction of mHealth apps, healthcare organizations have witnessed a sea-change in the way patients relate to doctors. Now the patients have more control over their medical decisions and the overall system has become more patient-centric. Owing to this, a variety of mHealth apps have emerged in the market and a video consultation healthcare app is one such innovation. This app enables the patients and doctors to communicate instantly in case of an emergency or when it is not possible to visit the hospital. The doctors can send ePrescriptions online and provide medical assistance. So, having a video calling app can always be a lucrative decision for any medical body or even an individual practitioner.
So, today’s topic is about creating a video consultation healthcare app. We will consider the React Native framework for this purpose since React Native development services are a perfect pick for developing native-like cross-platform apps. Also, we will talk about Twilio as a cloud communications platform that is being widely used in video calling apps. Let’s get started with what Twilio is and then the process to create the app.

What is Twilio?

Twilio is an American cloud-based service or cloud communications platform as a service (CPaaS). It acts as a powerful communication tool and bridges the gap between various mobile devices, other systems, services, etc. and telephony. In React Native development, APIs offered by Twilio enables the developers to implement several communication services like making and receiving audio/video phone calls, sending and receiving text messages, etc. These services also include AI bots, emails, etc. In this process, in addition to audio/video calling, other features like account recovery, phone verification, in-app calls or in-app chats, etc. can also be worked upon.
To integrate Twilio in the app, React Native developer will need existing knowledge on Cocoapods, React Native Navigation, React, etc. Twilio

Here are a few top benefits of using Twilio

  • Twilio is quite easy to learn and so, there are a plethora of developers available.
  • It follows a standard method of communication: HTTP.
  • Switching between technologies is also much easier.
  • Owing to Platforms as a Service (PaaS), capital costs are somewhat lower. Even the deployment costs are lower and they increase gradually as the company grows.

Step for Creating a Video calling Healthcare React Native app using Twilio WebRTC

While using Twilio WebRTC for the healthcare video calling app, a React Native app development company should follow the step-by-step procedure as given below. This procedure is divided into two major parts where the first part is about generating a token using Twilio and the second part talks about installing dependencies using a React Native starter kit. Also, we will consider a React Native Android app for now. So let’s get started with the first part.

Part 1: Token Generation with Twilio

Twilio provides both IOS/Android SDKs and JavaScript. But for React Native, Twilio does not provide any direct support. So, the React Native developers can use the JavaScript SDK for a few services but this isn’t possible for other services, because to a great extent it depends on browser APIs. There is one more alternative and that would be by porting the native Android/IOS SDK to React Native. So here, we have used this combination: Twilio Video (WebRTC) for React Native.
Firstly, create an account on https://www.twilio.com/. Sign-up for a trial and verify your credentials such as phone number, email, etc. You will now be directed to the Dashboard.
You will need ACCOUNT SID along with an API key and a Secret key for generating a token. For generating an API key, navigate to API keys through the settings. The creation of API key here will give both the Secret key and the API key. It is now possible to generate a token by using npm install which uses npm package. The tokens can also be generated in multiple languages as well. The identity value should be changed for every token as the same token cannot be used at different places.
There is one more way to create a token by the use of Twilio tools. Click on Twilio tools and write an identity and a room name. This will generate the access token. Securely save these keys for the later part.
The Twilio part of the video consultation healthcare app ends here. Now let us start with the React Native development part.

Part 2: Installing Dependencies using a React Native Starter Kit

Here we will be using React Native starter kit that can be copied from the GitHub link- https://github.com/flatlogic/react-native-starter. You need to run the command- “npm install https://github.com/blackuy/react-native-twilio-video-webrtc –save” in the terminal project directory and then write the required code in App.js file.
Make sure that all the required dependencies are installed by the execution of the command- “npm install” in the project directory. Also, you need to make some configurations for utilizing Twilio and also use audio, camera, etc.
For making the goto Android folder, you should add the following code lines in settings.gradle file-
include ‘:react-native-twilio-video-webrtc’
project(‘:react-native-twilio-video-webrtc’).projectDir = new File(rootProject.projectDir, ‘../node_modules/react-native-twilio-video-webrtc/android’)
Now, go to Android > app > build.gradle file and search for dependencies. After that, add the below-mentioned code in the block.
compile project(‘:react-native-twilio-video-webrtc’)
Also, add the below-mentioned code in Android > app >SRC> main >JAVA> com > reactnativestarter > MainApplication.java
import com.twiliorn.library.TwilioPackage;
After this, replace the getPackages() method with the required code.
Now for requesting the permissions to the user, it is essential to modify AndroidManifest.xml by adding the required code in this file. Also ensure that in your Twilio account, the client-side room creation is enabled.

Running the Application

Finally, when all the steps are implemented and code is executed, run your React Native healthcare app by the execution of the command- “react-native run-android” from the terminal window.

Final Verdict:

Here we have developed a simple React Native app to demonstrate the video-calling capability of Twilio. But we just need to remember that few things like user connections, user access token generation, room creation, etc. must be very diligently handled on the backend.
In this way, you can develop a Video Consultation healthcare app in React Native with Twilio. We hope these steps will be helpful to React Native developers as well as a React Native development company thinking of creating such a video consultation healthcare app.
We hope the blog has enlightened you! Please feel free to share your inputs in the comment section below. Also, for expert advice on this topic, kindly send us a mail at sales.enquiry@biz4solutions.com!

An Overview of Stripe Payment Processing in React Native Apps!

An Overview of Stripe Payment Processing in React Native Apps!
One of the vital segments of the React Native development is the payment integration process and this blog is all about that.
Well, making online payments through the web or mobile apps is a common practice today. As a result, millions of apps have the payment processing feature embedded in them. Various payment gateways are used for this purpose, like PayPal, Braintree, Stripe, Expo, RazorPay, AWS Amplify, etc. to name a few. Out of these, Stripe is one of the most widely used and fastest-growing gateways. It is also being extensively used in a diverse range of React Native apps and is a preferred choice of several React Native app development services worldwide.
So let us have a glimpse at what is Stripe, its working mechanism, and the step-by-step method to integrate it in the React Native applications.

What is Stripe?

As discussed earlier, Stripe is a popular payment gateway or a payment processing platform founded in 2010. It is used by individuals or businesses- small or large, for accepting payments via credit and debit cards, recurring payments used for subscriptions, sending payouts, and also process automated clearing house (ACH) transactions. It also serves as a third-party payment processor and supports various payment methods such as Google Pay, Apple Pay, Masterpass by Mastercard, Wechat Pay, Microsoft Pay, etc.
Stripe is quite easy to integrate due to the availability of easy-to-use APIs. Also, it provides prevention from frauds, banking, and technical infrastructure, etc. that is needed for on-line payment systems operation. A large number of eCommerce solutions are using Stripe. Currently Stripe powers the payment processing for some of the well-known brands including Lyft, Pinterest, Blue Apron, Under Armour, etc.

Working Mechanism of Stripe in React Native Apps

Let us understand how Stripe works in React Native apps with a pictorial representation.
  • A payment is initiated in the frontend of a React Native app. Details like card number, expiry date, CVV, etc. are sent to Stripe.
  • In case of valid details, a token is sent by the Stripe server to the app.
  • After this token is received on the app, payment information along with token information has to be sent to your backend server. Your backend server will communicate with the server of Stripe along with the token and payment details.
  • After successful completion of payment, Stripe sends the transaction response to the backend server.
  • Then the backend server sends the payment success response to the app.

Stripe and React Native development

Stripe can be implemented in the frontend of the React Native apps in two ways as mentioned below:
  1. Integrating the Stripe SDK for Android or iOS
  2. Using a 3rd party library like Tipsi-stripe
Both of these methods have their share of pros and cons. The Tipsi-stripe library can be easily implemented and works smoothly. But as of now, Stripe has not ‘publicly’ approved the React Native library from Tipsi. But preferring Stripe’s SDK’s is considered a smarter choice when one is looking for maximum compliance in a production environment.

How to implement Stripe?

Note: Here we have considered the Tipsi-stripe library for integration of Stripe. Also, version 0.60 of React Native was used. Also, we considered a Firebase server for the backend part.

Step 1: Creation of Stripe Developer account and getting the API keys

For creating the account, visit Stripe.com. Note that the services provided by Stripe are limited to certain countries. After account creation and registration, you will land in the Stripe Dashboard. Then go to Developer Tab > API keys for accessing the keys. Ensure that for viewing the ‘Test Data,’ you ON the toggle. All the development tasks must be carried out with ‘Test Data’.
‘Publishable key’ is used to connect the react native app with the Strive Native SDK or Tipsi-stripe library. This key is used for generating a token. ‘Secret key’ is used in the backend for the actual payment processing, where your server makes a connection with the Stripe server using this secret key. After testing the process, you may toggle to ‘Live keys.’

Step 2: Development of a React Native app for integrating Stripe

For developing a basic app, ensure that you are equipped with all the pre-requisites pertaining to the React Native’s official documentation. Now create a blank app and run it in a simulator or device. The default start screen will appear on the simulator or device. You may use the user interface of the Tipsi-stripe library because it supports all kinds of payment options viz. Google Pay, Apple Pay, etc.

Step 3: Integration of the Tipsi-stripe library for the generation of token

Install Tipsi-stripe package for integrating Stripe functionality into your react native app. Now, set up your Podfile for the integration of appropriate pods in iOS apps and then run pod install. Then set up the Xcode project, link the Tipsi-stripe package against your Xcode project, this will install all dependencies related to CocoaPods. Import the library in your app for the generation of the token. Now initialize it with the Stripe credentials which you will get from Stripe Dashboard. The Publishable key is used for generating token only. Now replace the Publishable key with your own key.
To generate the token, the ‘paymentRequestWithCardForm’ method can be used from the library. This method will open the card details Stripe form. User will receive a token from the Stripe after entering the card details in the above form.

Step 4: Creation of Firebase function or any other backend server

For completing the payment, we can create a Firebase cloud function (or any other backend server) and execute it using REST calls from your app. This function will interact with the Stripe server and successfully complete the payment. The sub-steps involved in this process are as follows:
  • Create a Firebase project and cloud functions.
  • In the app Install Firebase tools.
  • Connect your React Native development environment to the Firebase console.
  • Developing a Firebase function for making payment requests. This function accepts request object from the app, then sends the request of payment to the Stripe server and returns the response from Stripe to the application.
  • Testing the Firebase Function internally using firebase serve, as external API calls are allowed by Firebase only for paid accounts.
  • Deploying Firebase Function to live server.

Step 5: Connection of the app with the deployed live Firebase server and completion of the payment

The final step involves making an HTTP call to the Firebase function and completing the payment request using the generated token. In this way, payment processing happens in the React Native apps using the Stripe gateway.

Concluding Lines:

In this blog, we learned that there are two important sections in the Stripe payments- frontend for the tokenization process and backend for the payment requesting and completion. The Tipsi-stripe package is used for the frontend part and any server can be used for the backend part. We have gone through the significant steps involved in this process which will be very helpful to React Native developers and every React Native app development company aiming to design top-notch apps with a sleek payment processing feature.
We hope this blog was useful to you! Please share your thoughts in the comments section. For any other details, you may mail us at sales.enquiry@biz4solutions.com!