Tema e controlli condivisi

In questa pagina

Colori
Tipografia
Dimensioni dei controlli
Bordi dei campi per stato
Comportamento dei campi

Live CustomStyle example

Anteprima live

theme

YOURSTORE

Secure checkoutChoose a payment method

CardWallet

Card number

4242 4242 4242 4242

Expiry

12 / 30

CVV

•••

Editing

theme

Colors, typography, inputs, and buttons

Shared visual tokensPrimary action#1479A8Checkout background#FFFFFFTypefaceControl radius10px

Complete generated object

{
  "theme": {
    "colors": {
      "primaryTextColor": "#182238",
      "backgroundSecondary": "#ffffff",
      "backgroundPrimary": "#ffffff",
      "buttonPrimaryFill": "#1479a8",
      "buttonPrimaryHover": "#1479a8",
      "buttonPrimaryText": "#FFFFFF",
      "buttonPrimaryActive": "#1479a8",
      "inputBorder": "#D9D9DB",
      "inputBorderError": "#F1998E",
      "inputEnhancerFill": "#1479a8",
      "inputBorderPositive": "#66D19E"
    },
    "typography": {
      "primaryFontFamily": "Open Sans"
    },
    "buttons": {
      "borderRadius": "10px",
      "height": "48px"
    },
    "inputs": {
      "borderRadius": "10px",
      "height": "44px",
      "inputMode": "validated"
    }
  }
}

Usa il theme per le scelte visive che devono restare coerenti in tutto il checkout. Configura queste impostazioni predefinite prima di aggiungere sostituzioni per una singola schermata.

Colori#

Definisci gli sfondi principale e secondario, il testo principale e i colori del pulsante principale. Tutti i valori dei colori devono usare il formato HEX.

JSON

{
  "theme": {
    "colors": {
      "primaryTextColor": "#323237",
      "backgroundSecondary": "#FFFFFF",
      "backgroundPrimary": "#FFFFFF",
      "buttonPrimaryFill": "#17171A",
      "buttonPrimaryHover": "#69696E",
      "buttonPrimaryText": "#FFFFFF",
      "buttonPrimaryActive": "#116C8E"
    }
  }
}

Widget dopo l’applicazione di una tavolozza di colori personalizzata

Tipografia#

I caratteri supportati sono Heeb, Hind, Lato, Montserrat, Mukta, Nunito, Open Sans, Quicksand, Roboto, Raleway, San Franciscoe Ubuntu. Contatta il Technical Account Manager (TAM) DEUNA prima di usare un altro carattere.

JSON

{
  "theme": {
    "typography": {
      "primaryFontFamily": "Lato"
    }
  }
}

Dimensioni dei controlli#

Definisci borderRadius e height in pixel. L'altezza predefinita dei controlli è 40px; usa valori da 30px a 60px per mantenere l'usabilità.

JSON

{
  "theme": {
    "buttons": {
      "borderRadius": "20px",
      "height": "50px"
    },
    "inputs": {
      "borderRadius": "50px",
      "height": "50px"
    }
  }
}

Campi e pulsanti con raggi del bordo personalizzati

Campi e pulsanti con altezze personalizzate

Bordi dei campi per stato#

Stato	Significato	Colore predefinito
Disabili	Il cliente non può modificare il campo.	`#B4B4B7`
Abilitato	Il campo è disponibile ma non contiene ancora dati.	`#D9D9DB`
Attivo	Il cliente sta interagendo con il campo.	`#404046`
Compilato	Il campo contiene dati validi.	`#8E8E92`
Errore	Il campo non è valido o manca un valore obbligatorio.	`#E11900`

JSON

{
  "theme": {
    "colors": {
      "inputBorder": "#D9D9DB",
      "inputBorderError": "#F1998E",
      "inputEnhancerFill": "#1AE1D7",
      "inputBorderPositive": "#66D19E"
    }
  }
}

Colori del bordo del campo per gli stati predefinito, attivo, valido ed errore

Comportamento dei campi#

Imposta inputMode a clearable per mostrare un controllo di reimpostazione, validated per mostrare le icone di successo e di errore, oppure none per non mostrare nessuno dei due. I controlli di reimpostazione e convalida non possono essere abilitati insieme.

JSON

{
  "theme": {
    "inputs": {
      "inputMode": "clearable"
    }
  }
}

Campo di testo cancellabile con un controllo di ripristino

Campo di testo convalidato con un’icona di stato

Per tutti i campi e tipi supportati, usa il riferimento delle proprietà CustomStyle.