Auriculares Brisa
49,90 €
- Tarjeta
- Débito •••• 4242
- Envío
- Calle Mayor 12, Madrid
- Total
- 49,90 €
Pulsa dos veces para pagarPulsa otra vezComprobando…Hecho
Pedido confirmado
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
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.
Más en Overlays
Ver todos: OverlaysDó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.