SMS one-time-code confirmation card

Six-box one-time-code input that auto-advances focus as digits are typed and steps back on backspace. Use for a real 3D Secure or SMS step, not as a fake trust signal, and connect it to an actual verification flow before shipping.

pattern · stripe.com confirmation form cardvanilla

Get a site with blocks like this

Live preview

open in new tab ↗

<div class="sw-otp-card">
  <h4>Confirm it's you</h4>
  <p>We sent a code to the number ending in <strong>&bull;&bull;80</strong>.</p>
  <div class="sw-otp-inputs">
    <input maxlength="1" class="sw-otp-box" />
    <input maxlength="1" class="sw-otp-box" />
    <input maxlength="1" class="sw-otp-box" />
    <input maxlength="1" class="sw-otp-box" />
    <input maxlength="1" class="sw-otp-box" />
    <input maxlength="1" class="sw-otp-box" />
  </div>
  <button class="sw-otp-confirm">Confirm payment</button>
  <button class="sw-otp-resend">Resend code</button>
</div>

Block id: stripe-otp-verification-cardvanilla · code-required

More confirmation blocks

Floating booking-confirmation mockup card

Want the whole site, not just the block?

We ship real client sites in 3 weeks — with blocks like this one, wired to your brand.

Get my free 15-min audit Book a Discovery Call