WWooshPayment docs
Checkout

CSS custom del checkout

Estendi il checkout con CSS custom. Sanitization automatica per bloccare XSS, MITM e bypass del flow di pagamento.

2 min di lettura

TLDR: dalla dashboard puoi iniettare CSS custom nel checkout per allinearlo al pixel-perfect al tuo brand. Sotto la lista di selettori comuni, cosa il nostro sanitizer blocca, e snippet pronti.

Dove

Dashboard → Checkout → CSS custom (editor in fondo alla pagina). Disponibile a tutti i merchant, nessun gating piano.

Cosa puoi fare

Lavora sui selettori standard delle classi che esponiamo nel markup del checkout. Esempi:

Cambiare font

body {
  font-family: 'Helvetica Neue', -apple-system, sans-serif;
}

Le @font-face esterne sono bloccate dal sanitizer (vedi sotto). Usa font di sistema oppure carica il font sul tuo store e dichiaralo via @import su un dominio che gestisci tu — verrà comunque strippato. Per ora: limitati ai system font.

Bottone Pay arrotondato

button[type="submit"] {
  border-radius: 999px;
  font-weight: 700;
}

Card flat

.card, .section {
  border: none;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  background-color: #FAFAFA;
}

Input stile Apple

input {
  border: 1px solid #D1D5DB;
  border-radius: 12px;
}
input:focus {
  border-color: #000;
  box-shadow: 0 0 0 4px rgba(0,0,0,0.04);
}

Hide elementi su mobile

@media (max-width: 640px) {
  .trust-badges { display: none; }
}

Cosa il sanitizer blocca

Il nostro sanitizeCustomCss strippa al runtime questi pattern (per sicurezza, niente errori al save):

PatternComportamento
url(...) di qualsiasi tipoSostituito con url("about:blank") — chiude vector data:/file:/extension/font-face
@import, @charset, @font-face, @namespace, @document, @supports url()Rimossi completamente
expression(...)Bloccato (XSS legacy IE)
Selettori [attr=...]Bloccati (anche aria-/data-* set da autofill)
:has(), :is(), :where()Bloccati (possono sintetizzare match indiretti su attributi)
Variabili CSS che cascade url() (--x: url(...))Bloccate
javascript: schemeStrippato

Questo è una blacklist runtime: il CSS viene salvato così com'è ma il client lo sanitizza prima di iniettarlo nello <style> del checkout.

Best practice

  • Mai override del bottone di submit o dell'iframe Whop: rischi di rompere il flow di pagamento
  • !important ovunque rende difficile mantenere il CSS. Usa specificità adeguata
  • Test su mobile 375px (iPhone SE) sempre: il checkout è mobile-first
  • Animazioni infinite drainano batteria mobile

Test

  1. Modifica il CSS in Dashboard → Checkout → CSS custom → Salva
  2. Apri il tuo checkout di prova in incognito (es. via "Anteprima" dell'onboarding o cliccando un product nel tuo store)
  3. DevTools → Toggle device toolbar → iPhone SE per validare mobile
  4. Verifica che:
    • Bottone pagamento ≥ 44px altezza (touch target)
    • Input non spinti fuori dalla viewport
    • Order summary leggibile

Rollback

Se rompi il checkout (es. CSS che nasconde il bottone Pay):

  • Dashboard → Checkout → svuota il campo CSS custom → Salva