Payment Info: Mobile Friendly Credit Card Input Tool

Payment Info is a one-line, mobile friendly credit card input tool. The idea behind this plugin is to create a more streamlined credit card entry process.

The plugin was inspired by Luke Wroblewski’s thoughts on streamlining the collection of payment information by using input masks:

“Input masks constrain text entries to help people avoid mistakes. For example, a phone number input mask could only accept numeric entries and ignore any alphabetic characters or punctuation. Acceptable numbers could be limited to just a range, a specific pattern, or a combination. Input masks don’t just prevent errors, they can also guide people by presenting and maintaining input hints like specific formatting requirements. And last but not least, input masks can integrate multiple questions into logical sequences, keeping people from having to move between multiple input fields in a form.”

This is the concept employed by this simple plugin. The tool helps to seamlessly guide the user through the needed inputs to complete a transaction, but without having to navigate through multiple fields to accomplish this task.

Payment Info results in an easy tool that contributes to usability for your website.