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
Feuille de paiement à double pression
Une feuille de paiement à double pression latérale qui scanne le visage avec des coins qui battent et finit par une coche.
Réglages
Code
<div class="uvq13-pay"><div class="pr"><i class="im" aria-hidden="true"></i><div><p class="nm">Casque Brisa</p><p class="pc">49,90 €</p></div><button type="button" class="fire" aria-haspopup="dialog">Acheter</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">Payer</b><button type="button" class="x" aria-label="Annuler"><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>Carte</dt><dd>Débit •••• 4242</dd></div><div><dt>Livraison</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">Appuie deux fois pour payer</span><span class="m1">Appuie encore</span><span class="m2">Vérification…</span><span class="m3">Terminé</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">Confirmer le paiement</button></div><p class="tst" aria-live="polite"><span>Commande confirmée</span></p></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Overlays
Voir tout : OverlaysOù l’utiliser
Les portefeuilles mobiles valident un paiement par double pression et reconnaissance faciale, et cette feuille reprend ce rythme sur le web. Elle monte avec la carte, la livraison et le total, un faux bouton latéral pulse au bord de l'écran, et deux pressions lancent un scan où les coins battent avant de devenir une coche dessinée. Pour une démo de paiement, une page fintech ou un prototype.
La couleur principale est le bouton sombre de la feuille, la seconde le vert de réussite. On déclenche avec le bouton latéral ou le bouton principal, deux fois Entrée au clavier, et Échap annule à chaque étape avant la fin du paiement.