About this snippet

Upgrade your payment page with this clean checkout form. We formatted the card inputs automatically with JavaScript, which gives your buyers complete confidence.

Size
3.5 KB
Uses
HTML, CSS, JavaScript
Loads
Nothing external
Views
155

Collections

Related snippets

<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>
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: #f3f4f6;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  padding: 20px;
}

.checkout-layout {
  background: #ffffff;
  padding: 40px;
  border-radius: 16px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 450px;
}

.payment-form h3 {
  margin-top: 0;
  margin-bottom: 24px;
  color: #111827;
  font-size: 1.25rem;
}

.input-block {
  margin-bottom: 20px;
  width: 100%;
}

.input-block label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 8px;
}

.input-field {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s;
  font-family: inherit;
}

.input-field:focus {
  border-color: #3b82f6;
}

.card-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.card-input-wrapper svg {
  position: absolute;
  left: 16px;
}

.card-field {
  padding-left: 48px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
}

.flex-row {
  display: flex;
  gap: 16px;
}

.pay-btn {
  width: 100%;
  background: #111827;
  color: #ffffff;
  border: none;
  padding: 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1.125rem;
  cursor: pointer;
  margin-top: 10px;
  transition: background 0.2s;
}

.pay-btn:hover {
  background: #374151;
}
const ccNumber = document.getElementById("cc-number");
const ccExp = document.getElementById("cc-exp");

// Format Credit Card Number with spaces (no regular expressions used)
ccNumber.addEventListener("input", function(e) {
  const val = e.target.value.split(" ").join("");
  
  let formatted = "";
  for (let i = 0; i < val.length; i++) {
    if (i > 0 && i % 4 === 0) {
      formatted += " ";
    }
    formatted += val.charAt(i);
  }
  
  e.target.value = formatted;
});

// Format Expiry Date with slash (no regular expressions used)
ccExp.addEventListener("input", function(e) {
  const val = e.target.value.split("/").join("");
  
  let formatted = "";
  for (let i = 0; i < val.length; i++) {
    if (i === 2) {
      formatted += "/";
    }
    formatted += val.charAt(i);
  }
  
  e.target.value = formatted;
});
Esc
↑↓ moveEnter select

Start from a template

Open an .html file, or HTML, CSS, JS, Markdown, Less or TypeScript files. You can also drop them here. Styles and scripts go into their panes.

Share

Source





  
Keyboard shortcuts

  




  

    
Save