Auriculares Brisa

49,90 €

Pedido confirmado

HTML + CSSOverlays

Hoja de pago con doble pulsación

Una hoja de pago que pide doble pulsación lateral, escanea la cara con esquinas que laten y termina en un check.

Ajustes

16px
1x

Código

<div class="uvq13-pay"><div class="pr"><i class="im" aria-hidden="true"></i><div><p class="nm">Auriculares Brisa</p><p class="pc">49,90 €</p></div><button type="button" class="fire" aria-haspopup="dialog">Comprar</button></div><div class="ln" aria-hidden="true"><i></i><i></i><i class="s"></i></div><i class="side" aria-hidden="true"></i><div class="scr"></div><div class="sh" role="dialog" aria-modal="true" aria-labelledby="uvq13-pay-t" data-st="idle"><header><b id="uvq13-pay-t">Pagar</b><button type="button" class="x" aria-label="Cancelar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 7l10 10M17 7L7 17"/></svg></button></header><div class="mid"><div class="cc" aria-hidden="true"><i class="chip"></i><span>•••• 4242</span></div><dl class="rows"><div><dt>Tarjeta</dt><dd>Débito •••• 4242</dd></div><div><dt>Envío</dt><dd>Calle Mayor 12, Madrid</dd></div><div class="tt"><dt>Total</dt><dd>49,90 €</dd></div></dl></div><div class="cf"><span class="bio" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path class="br" d="M4 8V6a2 2 0 0 1 2-2h2M16 4h2a2 2 0 0 1 2 2v2M20 16v2a2 2 0 0 1-2 2h-2M8 20H6a2 2 0 0 1-2-2v-2"/><path class="fc" d="M9 9.5v1.2M15 9.5v1.2M12 9.5v3.5h-1M9.5 15.5c1.4 1.1 3.6 1.1 5 0"/><circle class="ci" cx="12" cy="12" r="9" pathLength="1"/><path class="ck" d="M7.5 12.5l3 3 6-6.5" pathLength="1"/></svg></span><p class="msg" aria-live="polite"><span class="m0">Pulsa dos veces para pagar</span><span class="m1">Pulsa otra vez</span><span class="m2">Comprobando…</span><span class="m3">Hecho</span></p><i class="ar" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h13M13 6.5l5.5 5.5-5.5 5.5"/></svg></i></div><button type="button" class="go">Confirmar pago</button></div><p class="tst" aria-live="polite"><span>Pedido confirmado</span></p></div>

Prompt para IA

Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.

Versión Markdown con todo el código, para asistentes de IA

Más en Overlays

Ver todos: Overlays

Dónde usarlo

Las carteras del móvil confirman los pagos con una doble pulsación y un escaneo facial, y esta hoja copia ese ritmo en la web. Sube con la tarjeta, el envío y el total, un botón lateral late en el borde y dos pulsaciones lanzan un escaneo cuyas esquinas acaban en un check dibujado. Un aviso confirma el pedido. Encaja en demos de compra, webs fintech y prototipos.

El color principal es el del botón oscuro de la hoja, el secundario el verde de éxito. Se activa con el botón lateral o el principal, desde el teclado basta con pulsar Enter dos veces y Escape cancela en cualquier paso antes de completar el pago.