One of our team members told us a story about when they left their Google account signed into their sibling's device, and that sibling went on to use the auto-fill credit card feature to make purchases with their card. We as a team agree that increasing efficiency and decreasing the amount of clicks when making purchases online is important and the way of the future, but we believe security shouldn't be jeopardized.

What it does

We use biometric technology for a browser extension tied to a mobile app that allows a user to use two step verification when making online purchases. Users store their credit card information in the native app by scanning their card with our built in credit card scanner, and can select which card to use with each purchase.

How we built it

Using Android Studio as well as other methodologies to build our app and our Chrome Extension, we managed to build a usable prototype version that we are all proud of. Moreover, we compiled different libraries and created our own algorithms to detect and autofill credit card fields in an intelligent way, achieve scanning the credit card details with the camera and we used Firebase and our own WebSocket server to communicate our Mobile App with the Browser Extension. Finally, we used Premiere Pro to produce a concluding video of our project, where under 30 seconds anyone can understand our mission.

Challenges we ran into

Connecting the web extension with an Android device proved pretty difficult for us to implement, we had to figure out how to make sure our devices communicated smoothly. Also, detecting credit card fields is a very challenging matter as different websites describe credit card fields in different ways. Some of them use only "cc" in the input's name to indicate the credit card number, some use "cardNumber" in the input's ID, some use the word "card" in all fields connected with credit cards (CVV, expiration date and number), and then we need to filter fields more "tightly," we didn't find any page which uses the proper "x-autocompletetype" input to clearly indicate the credit card field. Some websites describe credit card's fields only in input's placeholders. On the other hand, some websites use text input fields to input the expiration date and other websites use select dropdowns with options - our web extension has to be able to detect both types of fields and be able to autofill the information into both: text inputs, and select dropdowns. Some websites call CVV fields as CVV, other use a range of different names such as CSC, CID, CVNum, CSNum... Our web extension autofiller and fields detector had to be somehow intelligent to manage so many cases.

What we learned

Using Scrum agile methodologies, we learned that the cornerstone of any endeavor is dedication to individual tasks together with helping out other teammates. Many were the times where we focused on secondary objectives or did work on projects that were not assigned to us. We are coming out of this amazing hackathon having accumulated valuable collaboration skills and practical self-discipline competencies on project-management.

What's next for Card Buddy

We see Card Buddy as a way to provide added security to online purchases, while still allowing for quick and easy access to your personal information. We want to solve the problems associated with auto-filling data, and make sure that users can still benefit from increased speed without sacrificing on security. In the future, we may also consider adding more features such as secure bank transfers.

Share this project: