Juspay - Seamless, secure & error resilient mobile payment systems

Played a major role in building a dynamic UI framework on Android, used by National Payments Corporation of India(NPCI) and Axis Bank.

Overview

Background

Juspay is a FinTech startup that offers mobile payment solutions. Juspay is not a Payment Gateway (like Citrus, CCAvenue, PayU) but it works with any gateway or aggregator with zero interference in the Merchant-PG relations. Juspay processes payments for most top merchants like Amazon, BookMyShow, MakeMyTrip, Snapdeal, Freecharge, Mobikwik, Swiggy, Yatra, etc. The company processes more than 4 million transactions per month.

My Role

I joined Juspay as a software engineering intern in the infrastructure team. My major contributions were around building a framework on Android that allows developers to build applications on the fly. The framework translates JavaScript(with the UI elements based on the JSX syntax) into native Android components. I was one of the two core members involved in writing the framework and had done seven iterations for supporting multiple features. The framework was later used by BHarat Interface for Money(BHIM) app, the official payments solution by the government of India, with the project undertaken by National Payments Corporation of India(NPCI).

Designation

Software Engineering Intern

Timeline

May 2016 - June 2016

Platform

Android, JavaScript

Getting into Juspay

I had worked on the basics of Android and had already shipped an app to the play store. I was looking out for opportunities for a summer internship after the third year of my bachelor’s degree. I wanted to pursue my career in software development, with my primary interest being Android. Juspay wanted people who had worked on both Android and web, as they were working on bridging both ends for building a dynamic framework. Since I had basic experience on web and Android, I was hired for contributing to Juspay’s codebase.

Dynamic UI Framework

Juspay was planning to develop an Android framework that would be completely configurable so that multiple apps could be built on top of the framework with minimal effort. The apps spun out of the framework would be entirely dynamic and all the changes would be synced automatically by the app at regular intervals.

Since Juspay had just initiated the project when I joined as an intern, I got the opportunity to work on the framework from scratch. The key constraint on the project was the performance. The problem boiled down to a trade-off between the amount of configurability needed and the responsiveness of the app. Sufficient time was invested in carefully analyzing the problem and coming up with all the possible solutions. We went for the dynamism and we decided to optimize code later for better performance.

Architecture - proposal and implementation

There would be a simple rendering engine in the app that gets in input as a string from the server and then render it as a UI. This engine is capable of building different flows end to end, much like how you build flows in a native app. The app automatically syncs the data from the server at regular intervals to give a better experience to the users. However, the sync can also be manual, as there can be cases where the UI needs a refresh. For example, on making a payment, the up to date balance in the user’s account had to be shown. Thus, the overall architecture was the following:

Optimizations

There was an additional overhead in converting the response from the server into components that render natively on Android. On investigation, I found that a lot of time was consumed in parsing the response from the server. Instead of using a regex-based solution to identify patterns, I wrote a custom string parser that optimizes the time to render the UI.

Existing TTR

Optimized TTR

%diff

264 ms

112 ms

-57.57%

*TTR - Time to render

Advantages

  • Ship any app with a dynamic UI. An app release is required only when some of the libraries or SDK versions need an update.

  • In case of bugs, deploy the hotfixes and get the issue resolved instantly.

  • Capability to uniquely respond with varied data for different users, as the app simply renders the UI based on the server response.

Impact

  • The framework was used by NPCI for building the BHIM app, the official app by the Indian government for peer to peer/peer to business payments, independent of banks involved. The app has 10,000,000+ installs from Google Play Store. A huge volume of transactions goes through BHIM for transferring money to others and to pay merchants through BharatQR.

  • The framework was also put into good use by Axis Bank in developing the Axis Pay, an app that supports peer to peer payments through Unified Payments Interface(UPI), DTH and mobile bill payments and credit card transactions. Axis Pay app has 1,000,000+ downloads on the Google Play Store.

Conclusion

Learnings and takeaways

How to approach a real-life problem that doesn’t have a solution

Dynamically rendering views natively was something that’s unheard of in early 2016, with no frameworks grabbing that much of attention. Building a framework from scratch gave me the opportunity to think with a free mind on how to solve the same problem in multiple ways. Having multiple possible solutions in hand, picking the best approach is important, which in turn requires to think about the future of the solution. Will the solution scale? Will the solution adapt to change in features? Will it affect performance?

How to debug and optimize applications

It was the first time when I encountered a performance problem, as I had previously worked only on small scale problems. Identifying the performance bottlenecks was a challenge. On the other hand, optimizing a resource-consuming task would boost your confidence significantly. The only rudimentary requirements in debugging/optimizing applications are patience and perseverance. The more you explore, the more you know about the problem and the probability of you fixing the issue only increases over time.

How to keep up the team performance when your teammates aren't available

Finishing up the work within deadlines is crucial, especially if a stakeholder external to the company is involved. During the project, my peer had fallen sick and I had to take up the pending tasks to wrap up the work within the timeline. Of course, there will be pressure on you. When there is an impending deadline, efficient planning and smart execution are the keys to success.

PREVIOUS

Zeta

Contributing to Android, backend, and core infrastructure. Masterminded cost savings of over $250,000 annually.

NEXT

GitHub

Built "Card Printer" library, once rated as top trending libraries by GitHub