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
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|
|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
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.