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
Double-press payment sheet
A payment sheet that asks for a double press of the side button, scans a face with pulsing corners and ends in a check.
Settings
Code
<div class="uvq13-pay"><div class="pr"><i class="im" aria-hidden="true"></i><div><p class="nm">Brisa headphones</p><p class="pc">49,90 €</p></div><button type="button" class="fire" aria-haspopup="dialog">Buy</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">Checkout</b><button type="button" class="x" aria-label="Cancel"><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>Card</dt><dd>Debit •••• 4242</dd></div><div><dt>Shipping</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">Press twice to pay</span><span class="m1">Press again</span><span class="m2">Checking…</span><span class="m3">Done</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">Confirm payment</button></div><p class="tst" aria-live="polite"><span>Order confirmed</span></p></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Overlays
See all OverlaysWhere to use it
Phone wallets confirm payments with a double press and a face scan, and this sheet copies that rhythm on the web. The sheet slides up with a card, shipping and total, a fake side button on the edge of the screen pulses, and pressing twice runs a scan where the corner brackets beat before morphing into a drawn check. It fits checkout demos, fintech landing pages and app prototypes.
The main color is the dark sheet button, the second one the success green. Trigger it from the side button or the main button, keyboard users press Enter twice, and Escape cancels at any step before the payment completes.