Caishen: Payment Card UI & Validation for iOS
At Prolific Interactive, we develop consumer-facing mobile apps and pride ourselves on aligning them perfectly with the style and brand of our partners. We aim to create an app that makes our partners say, “This is us!” without hesitation. In doing this, we are often confronted with the challenge of collecting payment information without ruining or crowding the UI.
For example, this is how we designed and built the payment screen for Lilly Pulitzer:
When we executed on these designs, we used to fork the Stripe iOS SDK and modify it directly. This approach worked well enough, but it always felt hacky. We knew there had to be a better way to build these interfaces. Using our past experiences, we ultimately wrote Caishen, a library written from scratch with Swift. Caishen addresses some of the major pain points we’ve had with payment card UIs – adding Swift-specific functionality, interoperability and extensibility, and a cleaner approach to customization.
Here is a quick preview of the functionality:
All Swift Approach
One of the major drivers to developing this framework from scratch was the opportunity to build it using only Swift. Swift allowed us to produce code that is not only cleaner than the current Objective C libraries available, but also took advantage of powerful Swift features, including protocol extensions and generics.
Interoperability and Extensibility
Caishen comes out of the box with a lot of default functionality. On top of the text field element itself, the framework provides validation for all of the most common card types, including Visa, Mastercard, Discover, American Express, and more. Because of this, Caishen is fully usable right from the start: simply add it to your project and start using it, utilizing all of the default benefits.
We also made it easy for developers to put their own custom spin on the library.
- Custom Card Types and Validations
What if you wanted to take less widely accepted card payments? We’ve got you covered. You can easily create your very own payment card types and choose the range of accepted card issuers for your payments yourself. This is extremely useful when accepting more uncommon card types such as UATP cards or reward cards specific to a vendor. Or, if your vendor does not accept Discover or American Express, simply remove them from the card validator, and any cards of that type will automatically stop being accepted by Caishen.
- Accessories (i.e. card.io)
In our previous projects, we saw major benefits in using card.io, which allows users take a picture of their card to prefill payment fields. We wanted to provide an easy way to integrate this into your payment UI without bundling, so Caishen provides a custom button within the text field that allows a user to easily add an action to start up card.io. It can also be used for any other accessory functions. You simply provide the button image and its functionality, and you’ll have full control!
Customizing Caishen’s Design
Last, but not least, it is incredibly easy for you to modify the look and feel of Caishen.
- Custom images: Looking at the screenshot of Lilly Pulitzer before, it becomes obvious that images for card issuers may have to match the design of the rest of the app. Caishen provides methods to replace the default images for already integrated card issuers, as well as those for newly defined custom card types.
- UITextField attributes: Caishen enables iOS engineers to customize the provided text field just like any other UITextField by changing font color, font size, and appearance. You can also change additional custom attributes, including the separator used in between groups of digits in the card number, the duration of animations in the text field, or the text color that lets users know about invalid input. All of this is accessible straight through the Interface Builder, requiring no additional code at all.
Every app’s style is different, and Caishen is prepared to handle most of the common use-cases and issues right out of the box. However, we won’t stop here. New versions will follow as we encounter new situations that need to be accommodated for. We hope that Caishen becomes the go-to library of choice for accepting payment input and validation.
- File an issue: File an issue on GitHub if you see a bug needs fixing or an enhancement worth implementing.
- Submit a Pull Request: Submit a Pull Request to the repo with any changes or enhancements. All contributions are welcome!
We are incredibly proud of the work we did in Caishen, and we can’t wait to see where it goes from here!