The latest articles on DEV Community by Emon Hosen (@emon_hosen_376f3bcb3a8a54). https://dev.to/emon_hosen_376f3bcb3a8a54 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3543682%2F9e1f8252-b6f3-407c-abcf-821efeb152ab.png https://dev.to/emon_hosen_376f3bcb3a8a54 en Emon Hosen Tue, 06 Jan 2026 10:58:13 +0000 https://dev.to/emon_hosen_376f3bcb3a8a54/credit-card-payment-form-2f8g https://dev.to/emon_hosen_376f3bcb3a8a54/credit-card-payment-form-2f8g <p><a href="https://codepen.io/Emon-Hosen-the-flexboxer/pen/Wbropme" rel="noopener noreferrer"></a>Wanted to work with some masking so made a payment form so, using vanilla JS and the imask.js library, made a fairly simply payment form that uses regex patterns to detect the credit card type as the user is inputting values and properly applies the relevant spacing associated with that brand. Also wanted to do a smidge of style flair so made a simple SVG card that changes as the user fills out the form.</p> <p> <iframe height="600" src="https://codepen.io/Emon-Hosen-the-flexboxer/embed/Wbropme?height=600&amp;default-tab=result&amp;embed-version=2"> </iframe> <a href="https://codepen.io/Emon-Hosen-the-flexboxer/pen/Wbropme" rel="noopener noreferrer">https://codepen.io/Emon-Hosen-the-flexboxer/pen/Wbropme</a></p> codepen