This checkout form displays security and trust indicators to reassure users during payment.
HTML
<form class="checkout-secure">
<h3>Secure Checkout</h3>
<p class="subtitle">Your payment information is protected</p>
<!-- Trust indicators -->
<div class="trust-bar">
<span>🔒 SSL Secured</span>
<span>✔ Trusted Payments</span>
<span>🛡️ Data Protected</span>
</div>
<!-- Customer -->
<div class="section">
<h4>Billing Details</h4>
<input type="text" placeholder="Full name" required>
<input type="email" placeholder="Email address" required>
</div>
<!-- Payment -->
<div class="section">
<h4>Payment Information</h4>
<input type="text" placeholder="Card number" required>
<div class="row">
<input type="text" placeholder="MM / YY" required>
<input type="text" placeholder="CVC" required>
</div>
</div>
<!-- Summary -->
<div class="summary">
<div><span>Subtotal</span><span>$49.00</span></div>
<div><span>Tax</span><span>$4.90</span></div>
<div class="total"><span>Total</span><span>$53.90</span></div>
</div>
<button type="button">Pay $53.90</button>
<p class="note">
🔐 Payments are processed securely. We never store your card details.
</p>
</form>Production tip: Change
type="button"→type="submit"and integrate Stripe, PayPal, etc.
CSS
:root{
--bg:#f8fafc;
--card:#ffffff;
--text:#0f172a;
--muted:#64748b;
--border:#e5e7eb;
--primary:#2563eb;
--primary-dark:#1d4ed8;
--success:#16a34a;
}
@media (prefers-color-scheme: dark){
:root{
--bg:#020617;
--card:#020617;
--text:#e5e7eb;
--muted:#94a3b8;
--border:#1f2937;
--primary:#3b82f6;
--primary-dark:#60a5fa;
--success:#22c55e;
}
}
body{
background:var(--bg);
font-family:system-ui, -apple-system, sans-serif;
}
.checkout-secure{
max-width:520px;
margin:60px auto;
padding:32px;
background:var(--card);
border-radius:20px;
border:1px solid var(--border);
box-shadow:0 20px 50px rgba(0,0,0,.12);
color:var(--text);
}
.checkout-secure h3{
font-size:24px;
margin-bottom:6px;
}
.checkout-secure .subtitle{
font-size:14px;
color:var(--muted);
margin-bottom:18px;
}
.trust-bar{
display:flex;
justify-content:space-between;
gap:10px;
padding:12px;
margin-bottom:26px;
border-radius:14px;
border:1px dashed var(--border);
background:linear-gradient(180deg,var(--bg),var(--card));
font-size:13px;
color:var(--success);
}
.section{
margin-bottom:26px;
}
.section h4{
font-size:16px;
margin-bottom:14px;
}
.checkout-secure input{
width:100%;
padding:14px 16px;
margin-bottom:14px;
border-radius:12px;
border:1px solid var(--border);
background:linear-gradient(180deg,var(--card),var(--bg));
color:var(--text);
font-size:15px;
outline:none;
transition:border .2s ease, box-shadow .2s ease;
}
.checkout-secure input::placeholder{
color:var(--muted);
}
.checkout-secure input:focus{
border-color:var(--primary);
box-shadow:0 0 0 4px rgba(37,99,235,.18);
}
.row{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}
.summary{
margin:26px 0;
padding:18px;
border-radius:14px;
border:1px solid var(--border);
background:linear-gradient(180deg,var(--bg),var(--card));
}
.summary div{
display:flex;
justify-content:space-between;
font-size:14px;
margin-bottom:8px;
}
.summary .total{
font-weight:700;
font-size:16px;
margin-top:10px;
}
.checkout-secure button{
width:100%;
padding:16px;
border:none;
border-radius:14px;
background:linear-gradient(135deg,var(--primary),var(--primary-dark));
color:#ffffff;
font-size:16px;
font-weight:600;
cursor:pointer;
transition:transform .15s ease, box-shadow .15s ease;
}
.checkout-secure button:hover{
transform:translateY(-1px);
box-shadow:0 14px 36px rgba(0,0,0,.22);
}
.checkout-secure button:active{
transform:translateY(0);
box-shadow:none;
}
.note{
margin-top:14px;
font-size:12px;
color:var(--muted);
text-align:center;
}
@media (max-width:520px){
.row{
grid-template-columns:1fr;
}
.trust-bar{
flex-direction:column;
text-align:center;
}
}Notes
- Builds user trust
- Reduces cart abandonment
- Enterprise & SaaS ready
Preview styles shown. Production customization recommended.
Browse More UI Components
Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.