Enhance User Experience With a Formatted Credit Card Input Field

In this article, I will guide you on how to create a credit card input by extending existing ZK components. Moreover, I'll apply a customized ZK JavaScript widget to format the card numbers in groups of four digits, improving readability and user experience. Additionally, we'll integrate a custom JavaScript widget to ensure that only numeric input is accepted.

This guide is ideal for web developers needing a dedicated input field for credit card information. Using the ZK UI Framework as an example, I’ll walk you through creating a well-structured, readable credit card input box.

Start With One Textbox

The ZK framework provides ready-to-use UI components including input controls, so the most straightforward approach is to use a single Textbox in a Zul page to accept a credit card number. It's as simple as:

<textbox type="tel" cols="16" maxlength="16"/>

Creating a Number Padding Box

To make the input more user-friendly, I can improve its readability by customizing the textbox to format the digits in groups of 4 digits. This is commonly seen in online payment forms where credit card numbers are displayed as 1234 5678 1234 5678. 

I start by analyzing how the framework and the default textbox work. Each ZK component has 2 entities:

• Java object: Allows you to control a UI component with Java API
• JavaScript widget: Determines the client-side behavior

To group the numbers, I need to add custom behavior to the textbox by extending its JavaScript widget. The widget will automatically insert a space after every four digits as the user types and will remove any non-numeric characters.

Here's the logic and where you would need to insert it in TypeScript:

@zk.WrapClass('business.input.NumberPaddingBox')
// @ts-ignore
class NumberPaddingBox extends zul.inp.Textbox {
 /** default onInput event listener **/
 doInput_(event: zk.Event) {
 super.doInput_(event);
 this.removeNonNumericCharacters();
 this.addPaddingEach4Digits();
 }

 removeNonNumericCharacters() {
 // @ts-ignore
 this.getInputNode().value = this.getInputNode().value.replace(/\D/g, '');
 }

 addPaddingEach4Digits() {
 // @ts-ignore
 let value = this.getInputNode().value;
 // avoid exceeding credit card number length when pasting texts
 value = value.substring(0, 16);
 // @ts-ignore
 this.getInputNode().value = value.replace(/(\d{4})(?=\d)/g, '$1 ');
 }

 getZclass() {
 return 'z-textbox';
 }
}

Now that we have the formatting logic, it is simple to apply this customized JavaScript widget to a textbox:

<zk xmlns:w="client">
 <textbox type="tel" cols="19" maxlength="19" w:use="business.input.NumberPaddingBox"/>
</zk>

Declare It as a ZK Component

This would apply the custom JavaScript widget to a specific <textbox>. For ease of use, it's beneficial to declare this setup as a ZK component. This way, developers can use it like a regular component without specifying a custom widget name. Additionally, you can set default attributes for the credit card input.

An example declaration in lang-addon.xml:

<language-addon>
 <addon-name>business-input</addon-name>
 <depends>zul</depends>
 <language-name>xul/html</language-name>
 <version>
 <zk-version>10.0.0</zk-version>
 </version>
 ...
 <component>
 <component-name>creditcardbox</component-name>
 <extends>textbox</extends>
 <widget-class>business.input.NumberPaddingBox</widget-class>
 <property>
 <property-name>type</property-name>
 <property-value>tel</property-value>
 </property>
 <property>
 <property-name>cols</property-name>
 <property-value>19</property-value>
 </property>
 <property>
 <property-name>maxlength</property-name>
 <property-value>19</property-value>
 </property>
 </component>

Check lang-addon.xml specification.

After adding this declaration, I can use it as a normal component in a zul like this:

<creditcardbox/>

Give It a Try

I’ve shown how small adjustments can significantly enhance the user experience of your web app. To give it a try, simply clone this ZK project from GitHub. Then, include the artifact in ZK Maven repository, specify <creditcardbox/> in a zul, follow the readme to start the server, and visit the zul with your browser.