<div class="checkout-layout">
<div class="payment-form">
<h3>Payment Details</h3>
<div class="input-block">
<label>Cardholder Name</label>
<input type="text" class="input-field" placeholder="John Doe">
</div>
<div class="input-block">
<label>Card Number</label>
<div class="card-input-wrapper">
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="#9ca3af" stroke-width="2">
<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="cc-number" class="input-field card-field" placeholder="0000 0000 0000 0000" maxlength="19">
</div>
</div>
<div class="flex-row">
<div class="input-block">
<label>Expiry Date</label>
<input type="text" id="cc-exp" class="input-field" placeholder="MM/YY" maxlength="5">
</div>
<div class="input-block">
<label>CVV</label>
<input type="password" class="input-field" placeholder="123" maxlength="4">
</div>
</div>
<button class="pay-btn">Pay $149.00</button>
</div>
</div>
Back to Snippets
Modern Credit Card Checkout JS
Upgrade your payment page with this clean checkout form. We formatted the card inputs automatically with JavaScript, which gives your buyers complete confidence.
91