Floating checkout form with plan toggle
Self-contained checkout card with a monthly/annual pill toggle that updates the displayed price, and a card/bank payment method tab switch. Static mockup only, wire the buttons to a real payment processor before shipping to a client.
Live preview
open in new tab ↗<div class="sw-checkout-card">
<div class="sw-plan-toggle">
<button class="sw-plan-btn sw-plan-active" data-plan="monthly">Monthly</button>
<button class="sw-plan-btn" data-plan="annual">Annual <span class="sw-save-badge">Save 20%</span></button>
</div>
<div class="sw-pay-tabs">
<button class="sw-pay-tab sw-pay-tab-active" data-pay="card">Card</button>
<button class="sw-pay-tab" data-pay="bank">Bank account</button>
</div>
<label class="sw-field-label">Card number</label>
<input class="sw-input" placeholder="1234 1234 1234 1234" />
<div class="sw-input-row">
<div>
<label class="sw-field-label">Expiry</label>
<input class="sw-input" placeholder="MM / YY" />
</div>
<div>
<label class="sw-field-label">CVC</label>
<input class="sw-input" placeholder="123" />
</div>
</div>
<div class="sw-plan-summary">
<span>Professional plan</span>
<strong id="swPlanPrice">$149.00 / mo</strong>
</div>
<button class="sw-confirm-btn">Confirm and subscribe</button>
</div>Block id: stripe-payment-form-cardvanilla · code-required
More form blocks
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.