Personalizzare l'aspetto

Payment Element per dispositivi mobili supporta la personalizzazione visiva, che ti consente di adattarla al design della tua app. Il layout rimane coerente, ma puoi modificare i colori, i caratteri e molto altro ancora includendo il parametro appearance quando chiami initPaymentSheet().

1. Inizia personalizzando il carattere
2. Personalizza i colori per adattarli alla tua app
3. Personalizza le forme come il raggio del bordo
4. Ottimizza componenti specifici

// The following code creates the appearance shown in the screenshot above
const customAppearance = {
 font: {
   family:
     Platform.OS === 'android' ? 'avenirnextregular' : 'AvenirNext-Regular',
 },
 shapes: {
   borderRadius: 12,
   borderWidth: 0.5,
 },
 primaryButton: {
   shapes: {
    borderRadius: 20,
   },
 },
 colors: {
   primary: '#fcfdff',
   background: '#ffffff',
   componentBackground: '#f3f8fa',
   componentBorder: '#f3f8fa',
   componentDivider: '#000000',
   primaryText: '#000000',
   secondaryText: '#000000',
   componentText: '#000000',
   placeholderText: '#73757b',
 },
};

const { error } = await initPaymentSheet({
 ...
 appearance: customAppearance,
});

Caratteri

Personalizza il tipo di carattere specificando un FontConfig in font e impostando family. Nei sistemi iOS, il valore di family deve essere il “nome PostScript” che si trova nel Font Book. Nei sistemi Android, copia il file .ttf o .otf da android/app/src/main/assets/font/<your-font> a android/app/src/main/res/font/<your-font> e usa il nome del file del carattere (contenente solo caratteri alfanumerici minuscoli). Payment Element per dispositivi mobili utilizza la famiglia di caratteri del carattere personalizzato, ma ne determina autonomamente le dimensioni e lo spessore.

Per aumentare o diminuire le dimensioni del testo, imposta scale. Moltiplichiamo le dimensioni dei caratteri per questo valore prima di visualizzarle. Ciò è utile se il carattere personalizzato è leggermente più grande o più piccolo del carattere di sistema.

...
const appearance: AppearanceParams = {
   font: {
     family: Platform.OS === 'android' ? 'avenirnextregular' : 'AvenirNext-Regular',
     scale: 1.15,
   },
 },

Colori

Personalizza i colori di Payment Element per dispositivi mobili modificando le categorie di colori definite in Appearance.Colors. Ogni categoria di colore determina il colore di uno o più componenti dell’interfaccia utente. Ad esempio, principale definisce il colore del pulsante Paga e degli elementi selezionati, come la casella di controllo Salva questa carta. Fai riferimento al diagramma seguente per vedere alcuni degli elementi dell’interfaccia utente associati a ciascuna categoria di colori.

Forme

Oltre ai caratteri e ai colori, puoi anche personalizzare il raggio del bordo, la larghezza del bordo e l’ombreggiatura utilizzati in Payment Element per dispositivi mobili.

Componenti specifici dell’interfaccia utente

Le sezioni precedenti descrivono le opzioni di personalizzazione che interessano in generale Payment Element per dispositivi mobili e coinvolgono più componenti dell’interfaccia utente. Forniamo anche opzioni di personalizzazione specifiche per il pulsante principale (ad esempio, il pulsante Paga). Per l’elenco completo delle opzioni di personalizzazione, fai riferimento a PrimaryButtonConfig.

Le opzioni di personalizzazione per componenti specifici dell’interfaccia utente hanno la precedenza sugli altri valori. Ad esempio, primaryButton.shapes.borderRadius sostituisce il valore di shapes.borderRadius.