Using a web-based POS with a mobile Terminal reader

Learn how to integrate web-based POS systems with mobile Terminal readers using a React Native wrapper app. Connect M2 readers and Tap to Pay seamlessly.

Stripe logo
Stripe
•
Benjamin Nuttin
•7 min read•advanced•
--
•View Original
Content Security PolicyHTTPSJSONReactRecoilWebSocket

Overview

The article discusses the integration of a web-based Point of Sale (POS) system with mobile Terminal readers, emphasizing the MACH approach for retailers. It outlines the challenges of using mobile devices for in-person payments and introduces a wrapper app concept that facilitates this integration using React Native and the Stripe Terminal SDK.

What You'll Learn

1

How to integrate a web-based POS with mobile Terminal readers using React Native

2

Why a wrapper app is essential for combining web-based and mobile payment systems

3

How to manage state and events between a WebView and a native app component

Prerequisites & Requirements

  • Understanding of React Native and mobile SDK integration
  • Familiarity with Stripe Terminal SDK

Key Questions Answered

How can retailers use a web-based POS for in-person payments?
Retailers can create a specific version of their ecommerce website for in-person payments, allowing salespeople to interact with customers using mobile devices. This integration can be achieved through a wrapper app that combines the web-based POS with mobile Terminal readers using the Stripe Terminal SDK.
What are the limitations of using WebView in a mobile app?
Using WebView can lead to performance issues, especially with complex web apps, and it may limit offline capabilities if the web app does not utilize caching effectively. Additionally, security risks such as script injection and weak session management must be carefully evaluated.
What components are involved in the wrapper app architecture?
The wrapper app consists of three main components: an App parent component for state management, a WebView component that loads the web-based POS, and a ReaderManager component that handles the connection to mobile readers. This architecture facilitates communication and payment processing.
How does the payment processing workflow operate in the wrapper app?
The payment processing workflow involves the salesperson adding items to a cart, signaling readiness to pay, and the ReaderManager querying the backend for payment details. It then uses the Stripe Terminal SDK to create and confirm payment intents, notifying the POS of the payment status.

Technologies & Tools

Some links below are affiliate links. We may earn a commission if you make a purchase.

Frontend
React Native
Used to build the wrapper app that integrates the web-based POS with mobile readers.
Backend
Stripe Terminal SDK
Facilitates payment processing and communication with mobile Terminal readers.
Frontend
Webview
Loads the web-based POS within the mobile app.

Key Actionable Insights

1
Implement a wrapper app to streamline the integration of web-based POS systems with mobile readers.
This approach allows retailers to leverage their existing ecommerce infrastructure for in-person payments, reducing the need for a complete native app rebuild and saving development costs.
2
Utilize the Stripe Terminal SDK to manage payment processing efficiently.
By using the SDK, developers can easily handle payment intents and ensure secure transactions, which is crucial for maintaining customer trust and satisfaction.
3
Adopt best practices for security when using WebView components in mobile applications.
Implementing strict HTTPS, Content Security Policy (CSP), and origin-checked bridge messages can mitigate risks associated with WebView vulnerabilities.

Common Pitfalls

1
Neglecting security measures when using WebView can lead to vulnerabilities.
Without proper security protocols, such as HTTPS and CSP, apps may be susceptible to attacks like script injection, which can compromise sensitive data and user trust.
2
Assuming performance will be the same as a native app when using WebView.
WebView may not deliver the same smooth performance as a native application, especially for complex web apps, leading to a subpar user experience.

Related Concepts

Mach Architecture
Mobile Payment Integration
State Management In React Native