FormPayment Forms

---
// FormPayment, recovered from blurr-components.pages.dev
---

<div class="fpm-wrap"> <div class="fpm-order-summary"> <div class="fpm-order-label">Totaal te betalen</div> <div class="fpm-order-amount">€ 750 / maand</div> <div class="fpm-order-desc">BLURR Growth pakket, maand 1</div> </div> <h2 class="fpm-heading">Betalingsgegevens</h2> <form class="fpm-form" novalidate aria-label="Betalingsformulier (demo)"> <div class="fpm-methods" role="group" aria-label="Betaalmethode"> <label class="fpm-method"> <input class="fpm-method-input" type="radio" name="payment_method" value="ideal" checked> <span class="fpm-method-box"> <span class="fpm-method-icon" aria-hidden="true"></span> iDEAL </span> </label><label class="fpm-method"> <input class="fpm-method-input" type="radio" name="payment_method" value="card"> <span class="fpm-method-box"> <span class="fpm-method-icon" aria-hidden="true">→</span> Creditcard </span> </label><label class="fpm-method"> <input class="fpm-method-input" type="radio" name="payment_method" value="sepa"> <span class="fpm-method-box"> <span class="fpm-method-icon" aria-hidden="true"></span> SEPA Bankoverschrijving </span> </label> </div> <!-- Card fields (visual only) --> <div class="fpm-card-fields"> <div class="fpm-field"> <label class="fpm-label" for="fpm-holder">Naam kaarthouder</label> <input class="fpm-input" type="text" id="fpm-holder" name="card_holder" placeholder="Jan de Vries" autocomplete="cc-name"> </div> <div class="fpm-field"> <label class="fpm-label" for="fpm-number">Kaartnummer</label> <input class="fpm-input fpm-input--card" type="text" id="fpm-number" name="card_number" placeholder="1234 5678 9012 3456" maxlength="19" autocomplete="cc-number" inputmode="numeric"> </div> <div class="fpm-row"> <div class="fpm-field"> <label class="fpm-label" for="fpm-expiry">Vervaldatum</label> <input class="fpm-input" type="text" id="fpm-expiry" name="expiry" placeholder="MM / JJ" maxlength="7" autocomplete="cc-exp" inputmode="numeric"> </div> <div class="fpm-field"> <label class="fpm-label" for="fpm-cvv">
CVV
<span class="fpm-tooltip" title="3-cijferige code op de achterkant van je kaart">?</span> </label> <input class="fpm-input" type="text" id="fpm-cvv" name="cvv" placeholder="•••" maxlength="4" autocomplete="cc-csc" inputmode="numeric"> </div> </div> </div> <div class="fpm-security"> <span class="fpm-security-icon" aria-hidden="true">→</span> <span>Betalingen worden verwerkt via een beveiligde SSL-verbinding</span> </div> <button class="fpm-submit" type="submit">Betaling bevestigen</button> </form> </div>

<style>
.fpm-wrap{max-width:500px;padding:2rem 0}
.fpm-order-summary{background:var(--color-primary, #0a0a0a);color:#fff;padding:1.5rem;border-radius:12px;margin-bottom:2rem;text-align:center}
.fpm-order-label{font-size:.75rem;opacity:.6;text-transform:uppercase;letter-spacing:.1em;margin-bottom:.25rem}
.fpm-order-amount{font-size:2rem;font-weight:800;margin-bottom:.25rem}
.fpm-order-desc{font-size:.875rem;opacity:.7}
.fpm-heading{font-size:1.4rem;font-weight:800;color:var(--color-primary, #0a0a0a);margin:0 0 1.5rem}
.fpm-form{display:flex;flex-direction:column;gap:1.25rem}
.fpm-methods{display:flex;gap:.75rem;flex-wrap:wrap}
.fpm-method{cursor:pointer;flex:1;min-width:120px}
.fpm-method-input{display:none}
.fpm-method-box{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem;background:#f5f5f5;border:1.5px solid transparent;border-radius:8px;font-size:.875rem;font-weight:500;color: #e8e8e8;transition: opacity, transform, background-color, color, border-color, box-shadow, filter .15s}
.fpm-method-input:checked+.fpm-method-box{border-color:var(--color-accent, #6366f1);background:#eef2ff;color:var(--color-accent, #6366f1);font-weight:600}
.fpm-method-icon{font-size:1.1rem}
.fpm-card-fields{display:flex;flex-direction:column;gap:1rem;background:#f9f9f9;padding:1.25rem;border-radius:10px}
.fpm-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.fpm-field{display:flex;flex-direction:column;gap:.35rem}
.fpm-label{font-size:.82rem;font-weight:600;color:var(--color-primary, #0a0a0a);display:flex;align-items:center;gap:.35rem}
.fpm-tooltip{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:#ddd;color:#555;font-size:.65rem;font-weight:700;cursor:help}
.fpm-input{padding:.7rem .9rem;border:1.5px solid #ddd;border-radius:8px;font-size:.925rem;color:var(--color-primary, #0a0a0a);background:#fff;transition:border-color .2s;font-family:inherit;box-sizing:border-box;width:100%}
.fpm-input:focus{outline:none;border-color:var(--color-accent, #6366f1);box-shadow:0 0 0 3px #6366f11f}
.fpm-security{display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:#888}
.fpm-security-icon{font-size:1rem}
.fpm-submit{padding:.95rem;background:var(--color-accent, #6366f1);color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:opacity .2s}
.fpm-submit:hover{opacity:.88}
</style>