webdevpuneet.com

Related Snippets

221 in Forms category
1–6 of 60

Quill Rich Text Editor with Custom Toolbar and Character Limit

CodeMirror JSON Editor with Validation Gutter

CodeMirror Code Editor with Line Numbers, Folding and Themes

Marked + DOMPurify Live Markdown Preview

FilePond Image Upload with Preview and Reorder

Cropper.js Aspect-Ratio Presets for Social Posts

Checkout Payment Form — Card UI HTML CSS JS Snippet

Checkout Payment Form · Forms · Plain HTML, CSS & JS · Live preview

CategoryForms
TagsSVGCSS AnimationE-CommerceForms & ValidationCSS Grid

Copy & paste

Source Code

<div class="checkout-page">
  <div class="checkout-wrap">
    <!-- Left: Form -->
    <div class="checkout-form-col">
      <h1 class="checkout-title">Checkout</h1>

      <section class="form-section">
        <h2 class="section-label">Contact</h2>
        <div class="field-row">
          <div class="field">
            <label class="field-label" for="email">Email</label>
            <input class="field-input" type="email" id="email" placeholder="[email protected]" oninput="validate(this)">
            <span class="field-error" id="emailError"></span>
          </div>
        </div>
      </section>

      <section class="form-section">
        <h2 class="section-label">Delivery</h2>
        <div class="field-row two-col">
          <div class="field">
            <label class="field-label" for="fname">First name</label>
            <input class="field-input" type="text" id="fname" placeholder="Alex" oninput="validate(this)">
          </div>
          <div class="field">
            <label class="field-label" for="lname">Last name</label>
            <input class="field-input" type="text" id="lname" placeholder="Morgan" oninput="validate(this)">
          </div>
        </div>
        <div class="field-row">
          <div class="field">
            <label class="field-label" for="address">Street address</label>
            <input class="field-input" type="text" id="address" placeholder="123 Main St" oninput="validate(this)">
          </div>
        </div>
        <div class="field-row two-col">
          <div class="field">
            <label class="field-label" for="city">City</label>
            <input class="field-input" type="text" id="city" placeholder="San Francisco" oninput="validate(this)">
          </div>
          <div class="field">
            <label class="field-label" for="zip">ZIP / Postcode</label>
            <input class="field-input" type="text" id="zip" placeholder="94102" oninput="validate(this)">
          </div>
        </div>
      </section>

      <section class="form-section">
        <h2 class="section-label">Payment</h2>
        <div class="card-icons">
          <div class="card-icon visa">VISA</div>
          <div class="card-icon mc">MC</div>
          <div class="card-icon amex">AMEX</div>
          <div class="card-icon lock">🔒 Secure</div>
        </div>
        <div class="field-row">
          <div class="field">
            <label class="field-label" for="cardNum">Card number</label>
            <div class="card-input-wrap">
              <input class="field-input card-num-input" type="text" id="cardNum" placeholder="1234 5678 9012 3456" maxlength="19" oninput="formatCard(this)">
              <div class="card-type-indicator" id="cardTypeIndicator"></div>
            </div>
          </div>
        </div>
        <div class="field-row two-col">
          <div class="field">
            <label class="field-label" for="expiry">Expiry</label>
            <input class="field-input" type="text" id="expiry" placeholder="MM / YY" maxlength="7" oninput="formatExpiry(this)">
          </div>
          <div class="field">
            <label class="field-label" for="cvv">CVV</label>
            <input class="field-input" type="text" id="cvv" placeholder="•••" maxlength="4" oninput="this.value=this.value.replace(/\D/g,'')">
          </div>
        </div>
        <div class="field-row">
          <div class="field">
            <label class="field-label" for="cardName">Name on card</label>
            <input class="field-input" type="text" id="cardName" placeholder="ALEX MORGAN">
          </div>
        </div>
      </section>

      <button class="pay-btn" id="payBtn" onclick="submitOrder()">
        <span id="payBtnText">Pay $89.00</span>
        <svg id="payBtnSpinner" class="spinner hidden" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="10" stroke-opacity=".3"/><path d="M12 2a10 10 0 0 1 10 10"/></svg>
      </button>
      <p class="secure-note">🔒 Payments secured by 256-bit SSL encryption.</p>
    </div>

    <!-- Right: Order summary -->
    <div class="order-summary">
      <h2 class="summary-title">Order Summary</h2>
      <div class="summary-items">
        <div class="summary-item">
          <div class="item-thumb" style="background:linear-gradient(135deg,#6366f1,#8b5cf6)"></div>
          <div class="item-info">
            <div class="item-name">webdevpuneet.com Pro Plan</div>
            <div class="item-desc">12 months · Unlimited access</div>
          </div>
          <div class="item-price">$79.00</div>
        </div>
        <div class="summary-item">
          <div class="item-thumb" style="background:linear-gradient(135deg,#10b981,#059669)"></div>
          <div class="item-info">
            <div class="item-name">Component Export Add-on</div>
            <div class="item-desc">React + Vue + Angular</div>
          </div>
          <div class="item-price">$10.00</div>
        </div>
      </div>
      <div class="summary-divider"></div>
      <div class="summary-row"><span>Subtotal</span><span>$89.00</span></div>
      <div class="summary-row"><span>Discount (FIRST20)</span><span class="discount">−$0.00</span></div>
      <div class="summary-row"><span>Tax</span><span>$0.00</span></div>
      <div class="summary-row total"><span>Total</span><span>$89.00</span></div>

      <div class="promo-field">
        <input type="text" class="promo-input" id="promoInput" placeholder="Promo code">
        <button class="promo-btn" onclick="applyPromo()">Apply</button>
      </div>

      <div class="trust-row">
        <span class="trust-item">✓ 30-day money back</span>
        <span class="trust-item">✓ Instant access</span>
        <span class="trust-item">✓ Cancel anytime</span>
      </div>
    </div>
  </div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Card number auto-formatting
Regex /(\d{4})(?=\d)/g inserts spaces every 4 digits — turns raw input into the familiar "1234 5678" format in real-time.
Card type detection
First digit of card number → Visa (4), Mastercard (5), Amex (3) — shown inline in the card number field as the user types.
Expiry date mask
Digits-only input formatted to "MM / YY" by inserting " / " after position 2 — exactly matches the physical card format.
Inline field validation
Green border (.valid) on correct input, red border (.invalid) on partial/invalid — fires on oninput for immediate positive feedback.
Promo code with live total update
applyPromo() updates the discount row, total row, and pay button label simultaneously — ensures all three stay in sync.
Loading + success button states
Pay button disables, shows spinner, then transitions to "✓ Order confirmed!" green state — the three-state button pattern for async submission.
Sticky order summary
position: sticky; top: 20px on the summary panel — stays visible while the form scrolls on tall viewports.
Card type icon row
Visa (navy), Mastercard (red), Amex (blue) brand badges above the card fields — communicates accepted payment methods at a glance.

About this UI Snippet

Checkout Form — Card Number Formatting, Expiry Mask, Card Type Detection & Order Summary

Screenshot of the Checkout Payment Form snippet rendered live

The checkout form is the most conversion-critical UI component in e-commerce — every friction point costs revenue. A production-quality checkout must handle card number formatting (auto-spaces every 4 digits), expiry masking (MM / YY format), CVV restriction (digits only), card type detection (Visa/Mastercard/Amex from first digit), inline field validation, loading state, success state, and an order summary with promo code input. This snippet delivers all of these in a two-panel checkout layout.

Checkout UX is one of the most studied areas of e-commerce conversion optimisation. According to Baymard Institute, 18% of cart abandonment is caused by "too long / complicated checkout process." The techniques in this snippet directly address the most common friction points: card number spacing (reduces input errors), live field validation (catches errors before submit), and a visible order summary (confirms what the user is paying for).

Card number auto-formatting

The formatCard function strips non-digits from the input, slices to 16 characters, then applies a regex replacement /(\d{4})(?=\d)/g to insert a space after every 4th digit. The result is the 1234 5678 9012 3456 format users expect from physical card numbers. The function also detects the card type from the first digit: 4 → Visa, 5 → Mastercard, 3 → Amex. The type indicator updates inline in the card number field, providing immediate feedback on which network the card belongs to.

Expiry date masking

The formatExpiry function strips non-digits, takes the first 4, and inserts / after position 2. The user types "1226" and sees "12 / 26" — the format that exactly matches the physical card. The maxlength="7" attribute limits input to "MM / YY" (7 characters including spaces and slash).

Inline validation with visual state

Each field gets .valid (green border) or .invalid (red border) class toggled on input. Email validation uses a simple regex /^[^\s@]+@[^\s@]+\.[^\s@]+$/. Text fields validate as valid when length ≥ 2. The validation fires on oninput (not onblur) to give immediate positive feedback as the user types, which has been shown to reduce form abandonment compared to blur-only validation.

Promo code with order total update

The promo code input triggers an applyPromo function that checks for known codes and updates the discount row and total in the order summary. The pay button label also updates to reflect the new total — ensuring the amount shown on the button always matches the order summary. In production, promo validation would be a server-side API call. Pair with a modal for a promo code success confirmation overlay.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA two-column checkout appears: form on the left (contact, delivery, payment), order summary on the right with two line items and a total.
  2. 2
    Type a card numberNumbers auto-format into groups of 4 (1234 5678...). Starting with 4 shows "VISA" in the field; 5 shows "MC"; 3 shows "AMEX".
  3. 3
    Type the expiry dateType "1226" — it formats to "12 / 26" automatically. Try any MM YY combination.
  4. 4
    Enter the promo codeType FIRST20 in the promo field and click Apply — the discount updates to −$17.80 and the pay button changes to "Pay $71.20".
  5. 5
    Click PayThe button shows a spinning loader for 2.2 seconds, then changes to "✓ Order confirmed!" with a green gradient.
  6. 6
    Check inline validationType a partial email address — the field border turns red. Complete the email — it turns green. Same for all text fields with 2+ characters.

Real-world uses

Common Use Cases

E-commerce product checkout
The primary use case — full single-page checkout for digital or physical products with card payment and order summary.
SaaS plan purchase flow
Subscription upgrade or new plan purchase — the order summary shows plan name, billing period, and any add-ons.
Event ticket purchase
Ticket checkout with attendee details (delivery section) and ticket summary (order summary panel). Promo codes for early-bird discounts.
Course and digital product purchase
Online course platforms use this two-panel checkout — product thumbnail in the summary, instant access trust badge.
Donation checkout
Charities and non-profits use a simplified checkout with card payment — the delivery section becomes a "Personal details" section without address.
Freelancer invoice payment
Freelance client portals use checkout forms for invoice payment — the order summary shows invoice line items and the total due.
Related: Searchable Combobox with Keyboard Navigation
See the Searchable Combobox with Keyboard Navigation for a related forms pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

Replace the mock submitOrder with Stripe Elements or Stripe.js. Use stripe.createPaymentMethod({type: 'card', card: elements.getElement('card')}) to tokenise the card. Send the paymentMethod.id to your server, create a PaymentIntent via the Stripe API, and confirm it client-side. Never send raw card numbers to your server.

Add a checkbox "Same as delivery address" above the payment section. When checked, copy the delivery fields to hidden billing fields on submit. When unchecked, show the billing address fields below the payment section.

Add a validateAll() function that checks all required fields. Call it in submitOrder() before the loading state. Collect all invalid field IDs, focus the first one, and return early if any are invalid. Show a summary error message above the pay button listing what needs to be completed.

Use React Hook Form (useForm) for field management. Each input uses register('fieldName', {required: true, pattern: ...}). Card formatting uses onChange handlers calling the format functions. The pay button state is const [status, setStatus] = useState('idle') — 'idle', 'loading', 'success'. The order summary is a separate OrderSummary component accepting {items, discount, total} props.