Hotwire Tech Blog

Scribes from Hotwire Engineering

The purchase path in any m-commerce app needs least resistance and must be devoid of errors. Credit card entry is a very important component of the purchase path, and in our initial versions of the app this particular component was powered by a third-party open source library. The decision to use that library was purely based on time-to-market.

Why write our own?

Throughout the months that the Hotwire android app was in the play store, there were a significant numbers of errors attributed to this library which exposed deficiencies, especially in the following areas.

  • The UX/UI wasn’t intuitive because the entry process automatically traversed two different screens and lost context.
  • It used over the top error treatments that did not gel well with our design paradigms.
  • The library did not use the right data structure and software design patterns to make it extensible and easily unit tested.
  • The library wasn’t updated in 2 years.

In lieu of all these errors we decided to evaluate on whether we must fix the credit card library vs. write a new one from scratch. The cc library we were using did not have any unit tests, did not have customizable views, did not support material design and had some inherent design problems. Since refactoring would have pretty much touched each and every file, we decided to write our own library.

Here are a couple of screenshots on how the old UI looked

ccblog1

How is ours better?

Here is a competitive analysis of the features we were looking to incorporate in our ideal version of the library.

Feature Third party Hotwire library
Works out of box YES YES
Customizable layout NO YES
Easily add new card types NO YES
Easily unit testable NO YES
Client-side error handling YES YES
Dynamic formatting based on card-type YES YES
Painless re-entry and re-editing NO YES
Support for maven and gradle NO YES

 

After integrating this library in our apps and measuring the data from our live app we found that the new library resulted in around 40% lesser errors for the Add Payment section.

Here is the new UI

ccblog2

Ours is yours

We wanted the broader tech community to reap the benefits of our efforts and hence we open sourced the library. You can find it here. https://github.com/HotwireDotCom/android-creditcard-lib

Please feel free to use it and contribute back.

Leave a Reply

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