Personalizzare l'aspetto

const appearance = {
  theme: 'stripe',
};
stripe.initCheckout({
  fetchClientSecret,
  elementsOptions: {
    appearance,
  },
});

1. Inizia scegliendo un tema.

Inizia subito scegliendo il tema predefinito che più si avvicina al tuo sito web.

1. Personalizza il tema utilizzando le variabili.

Imposta variabili come fontFamily e colorPrimary per personalizzare i componenti che appaiono in ogni Element.

1. Se necessario, ottimizza i singoli componenti e stati utilizzando le regole.

Per un controllo completo, specifica le proprietà CSS personalizzate per i singoli componenti presenti in Element.

Temi

Inizia a personalizzare Elements scegliendo uno dei seguenti temi:

• stripe
• night
• flat

const appearance = {
  theme: 'night'
};

Variabili

Imposta le variabili per modificare l’aspetto di molti componenti presenti in ogni Element.

L’opzione variables funziona come le variabili CSS. Puoi specificare valori CSS per ogni variabile e fare riferimento ad altre variabili con la sintassi var(--myVariable). Puoi anche controllare il DOM risultante utilizzando l’explorer DOM nel tuo browser.

const appearance = {
  theme: 'stripe',

  variables: {
    colorPrimary: '#0570de',
    colorBackground: '#ffffff',
    colorText: '#30313d',
    colorDanger: '#df1b41',
    fontFamily: 'Ideal Sans, system-ui, sans-serif',
    spacingUnit: '2px',
    borderRadius: '4px',
    // See all possible variables below
  }
};

Variabili comunemente utilizzate

Regole

L’opzione rules è una mappatura dei selettori tipo CSS nelle proprietà CSS, che consente una personalizzazione granulare dei singoli componenti. Dopo aver definito theme e variables, utilizza rules per integrare perfettamente Elements in modo che si adatti al design del tuo sito.

const appearance = {
    rules: {
      '.Tab': {
        border: '1px solid #E0E6EB',
        boxShadow: '0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(18, 42, 66, 0.02)',
      },

      '.Tab:hover': {
        color: 'var(--colorText)',
      },

      '.Tab--selected': {
        borderColor: '#E0E6EB',
        boxShadow: '0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(18, 42, 66, 0.02), 0 0 0 2px var(--colorPrimary)',
      },

      '.Input--invalid': {
        boxShadow: '0 1px 1px 0 rgba(0, 0, 0, 0.07), 0 0 0 2px var(--colorDanger)',
      },

      // See all supported class names and selector syntax below
    }
  };

Tutte le regole

Il selettore di una regola può indirizzare qualsiasi nome di classe pubblico nell’Element, così come gli stati, le pseudoclassi e gli pseudoelementi supportati per ciascuna classe. Ad esempio, quelli elencati di seguito sono selettori validi:

• .Tab, .Label, .Input
• .Tab:focus
• .Input--invalid, .Label--invalid
• .Input::placeholder

Quelli di seguito elencati non sono selettori validi:

• .p-SomePrivateClass, img, è possibile indirizzare solo nomi di classe pubblici
• .Tab .TabLabel, le relazioni antenato-discendente non sono supportate nei selettori
• .Tab--invalid, la classe .Tab non supporta lo stato --invalid

Ogni nome di classe utilizzato in un selettore supporta un elenco di proprietà CSS consentite, che specifichi usando le maiuscole e minuscole (ad esempio, boxShadow per la proprietà box-shadow).

Di seguito è riportato l’elenco completo dei nomi di classe supportati e dei rispettivi stati, pseudoclassi e pseudoelementi.

Schede

Input del modulo - Etichette soprastanti

Assicurati di scegliere una dimensione del carattere di almeno 16 px per i campi di inserimento sui dispositivi mobili.

Input del modulo - Etichette mobili

Blocca

Inserimento codice

Casella di spunta

Menu a discesa

Interruttore

Selettore

Assicurati che lo stato attivo di .PickerItem si distingue dagli altri stati.

COSE DA FARE Utilizza un colore principale, uno spessore e/o un contorno evidenti e ad alto contrasto per distinguere lo stato attivo che il cliente ha già selezionato.	COSE DA EVITARE Non utilizzare due opzioni di pari peso o colori a basso contrasto per gli stati PickerItem, perché una simili configurazione renderebbe più difficile distinguere quale stato è attivo.

Menu

Accordion

Payment Method Messaging Element

Icona radio

Puoi controllare le dimensioni complessive dell’icona con la proprietà width in .RadioIcon. È possibile controllare le dimensioni relative di .RadioIconInner con la proprietà r (raggio). .RadioIconOuter e .RadioIconInner sono elementi SVG e possono essere formattati con le proprietà stroke e fill. Consulta l’elenco completo delle proprietà CSS supportate riportato di seguito.

const appearance = {
  rules: {
    '.RadioIcon': {
      width: '24px'
    },
    '.RadioIconOuter': {
      stroke: '#E0E6EB'
    },
    '.RadioIconInner': {
      r: '16'
    }
  }
};

Altre opzioni di configurazione

Oltre a themes, variables e rules, sono disponibili opzioni aggiuntive di configurazione dell’aspetto per definire lo stile di Elements.

È possibile personalizzarle aggiungendole all’oggetto Appearance:

const appearance = {
  labels: 'floating',

  // other configurations such as `theme`, `variables` and `rules`...
}

Al momento supportiamo le seguenti opzioni: