Payment method UX

The pattern

Why it works

• Three options max. Hick's Law — beyond three, decision time spikes. We collapse less-common methods behind a single overflow tile.
• Gradient glow on hover. The violet border + box-shadow signals affordance without a heavy outline. Feels premium, not checkbox-y.
• Icon-first layout. Users scan icons 10× faster than labels. Emoji or brand SVG — either works if consistent.

Tailwind snippet

<div className="grid gap-4 sm:grid-cols-3">
  <button className="rounded-2xl border
    border-gray-800 bg-[#0A0612] p-6
    hover:border-[#8B5CF6]
    hover:shadow-[0_0_30px_rgba(139,92,246,0.15)]
    transition-all">
    <span>💳</span>
    <p>Card</p>
  </button>
</div>