Adding custom input masks with FireCheckout

How to add phone mask to checkout page?

FireCheckout module allows adding a phone mask to the checkout page in Magento 2. It is implemented via the Field mask component. To make the formatting user input string proper, the FireCheckout uses the Text Mask library. Bearing in mind the different markets, you have to meet the needs of clients from any world country. The following example is adapted to the Brazilian market.

Learn more about how to set the right mask for fields like telephone, fax on the checkout page for Brazilian customers.

How to add an input mask to any other checkout field?

FireCheckout script also enables the display of masks for the fields with credit cards, date, a percentage amount, etc. You have simply to generate field masks with function included in the module package. Follow the instructions.

How to add custom input mask for Postcode?

With the FireCheckout module, you may create complex masks like a Postcode mask & validator by using javascript functions. The process includes creating a dynamic field mask that will change the mask on the fly, depending on the customer’s input.

Once you get the mask applied, you provide your clients with a valid input value. It will prevent your site from input validation errors and bring a nice user experience.