Many well-crafted iOS apps – Postmates, Uber, StubHub – use Stripe’s UI Kit for accepting credit card information. The widget appears as a single input field that collects the credit card number, expiration date, and security code. It also provides basic validation feedback as the user enters information:

-checksum validation on the card number
-verifies expiration date is in the future
-verifies card type based on number and displays image
-verifies appropriate security code length (eg 4 digits for American Express vs 3 for VISA).

While the Stripe UI payment widget is elegant and simple, it did take some time to recreate for Android. After our Native Checkout release I went back and turned our Android widget into an Android Library Project with the hope of saving other developers that time.

The library project and a sample implementation is available on GitHub. A sample app is available on the Google Play Store.

The project could not have happened without the works of two other individuals. The checksum validation in the UI Kit comes from another open source java project by Roedy Green. I modified his code slightly based on the credit card type matching code in Stripe’s iOS project. The refined credit card assets were created by Ashlee Wang.

I have plans to actively update this project over the next two months with more documentation and more user-friendly functions for changing the style and spacing of the widget.

I’d be really stoked to know if you use the code in your own project or borrow something from it. Feel free to send a tweet my way.

Leave a Reply

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