Extending Fraud Protection to React Native

To provide fraud protection on consumer purchases made through a mobile application, software developers constructed a bridge between React Native core code, and the anti-fraud vendor’s SDKs written in native iOS and Android.

Developing new software can be similar to constructing a puzzle. Open-source provides the pieces, and developers create the picture; choosing combinations of code that will create opportunities and limitations affecting the end product. But where do those puzzle pieces come from? The moments when there was nothing in existence that fit, and software development had to get creative.

This article is about one of those moments and the result: a custom third party module built to integrate web based fraud protection within a mobile application.

In Case You Haven’t Heard

React Native (RN) is an open-source framework created by Facebook, that uses React code and Javascript to build native apps for mobile iOS and Android. It’s a popular choice for devs building mobile apps because the code renders in both native iOS and Android without having to be written twice (in Swift and C++, respectively). By eliminating the need to write two sets of code, RN is ideal for collaboration amongst all developers on the project because everyone is writing in one language. However, even though RN has been on the scene for an eternity (by framework development standards, at least), there exists a comparatively low number of options for integrating necessary app components, for instance, fraud protection of purchases.

No Stranger to a Challenge

Operating in the world of custom software consulting, we’re familiar with being handed a challenge -- it’s usually at that point when a company brings in outside help. This particular challenge came in the form of a well established e-commerce client that was looking to expand their customer base through a mobile application. The service provided by this client is complex: multiple websites, customizable products, high sales volume.

The problem with using RN to build the mobile app, was that the client’s established website was operating Riskified for fraud protection on sales. While Riskified provides SDKs for native iOS and native Android, there exists no third party modules to support the integration of Riskified with RN.

So the only options are: (a) the client will use two different fraud protection services for web and mobile sales, or (b) build a module from scratch.

This is the difference between project based software development, and consulting work. It’s one thing to have free rein over every detail of a greenfield project, and entirely different to be given an expectation that is narrowed by a set of parameters. Often, it is the experience of the developers that determines the outcome of a project: will the clients expectations be met, will the app have high functionality, will it be easy to use, easy to maintain, and integrate with other tech?

Necessity of Fraud Protection

Fraud and Identity protection services mitigate the unauthorized use of payment information. With 14.2 million credit card numbers exposed in the market, it’s no surprise that credit card theft is the most common form of identity theft. In 2017, the FTC totaled $905 million in losses from consumer reports of fraud.

An app that allows consumer transactions must provide fraud protection (not by law) to ensure that both consumers and retailers are protected from potential losses.

The Science Part of Computer Science - Constructing a Custom Module

Since most vendors in the anti-fraud space deal separately with native iOS, Android, and web applications, there is no expectation of vendor support for RN. This was the case with Riskified, the client’s fraud protection vendor. And since requiring a client to manage two separate fraud protection services is not a viable option, the solution for protecting purchases made on mobile was to construct a bridge extending from Riskified’s SDKs to the RN code. The bridge can interface with the native iOS and Android modules provided by the vendor, while creating a path of accessibility to the RN core code. To achieve this, developers wrote a connection in Java and Obj-C (the native languages of Android and iOS) that exposed the existing Javascript code that is responsible for Riskified’s functionality. Since Javascript traverses iOS, Android, and React Native, developers could then orchestrate the seamless flow of information from one language to another.

Having the requisite experience to construct native modules (or bridges) is an invaluable skill that creates the opportunity to interface with existing software. By bridging the communication to native functionality through plain javascript, previously inaccessible tools become options and team integration becomes seamless. Developers need to possess the requisite knowledge of writing the native counterparts, and each unique project will require research of the RCT internal methods used to interface. Once the native packages are integrated (as specified by their documentation) the final step is to expose the methods that will integrate into the right API interface.

That's a Wrap

The greatest challenge experienced during this specific project was understanding the flow of information through both the bridge and the core functionality of the vendor’s SDK. To gain the necessary understanding, without previous exposure, could have added months to the development of the app but in this case, the team’s extensive previous experience with native platforms eliminated any delay in production. And by creating a custom solution, the client is able to use a single anti-fraud vendor to cover consumer transactions on both the web and their RN mobile app; additionally, whether the users are aware of it or not, mobile transactions are being protected at a level that is generally only achieved when making purchases from a website.

The resulting app provides a seamless and positive experience, evidenced through the user metrics. The app maintains 60% greater engagement compared to the client’s website, and six months after release, the app had reached 125,000 users with a 4.9 star rating from 1,200 reviews.

Related

Thoughts & Work

Start a new project?

Get in touch