<div class="card-input-wrapper">
<label>Card Number</label>
<div class="input-box">
<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect><line x1="1" y1="10" x2="23" y2="10"></line></svg>
<input type="text" id="ccInput" placeholder="0000 0000 0000 0000" maxlength="19">
</div>
</div>
Back to Snippets
Credit Card Number Formatter JS
Improve your checkout form with auto-formatting. This script automatically adds spaces after every four digits as the user types their card number, which makes it much easier to read and prevents errors.
349