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 creando il tuo oggetto PaymentSheet.Configuration con un oggetto appearance.

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

// The following code creates the appearance shown in the screenshot above
val appearance = PaymentSheet.Appearance(
   colorsLight = PaymentSheet.Colors(
       primary = Color(red = 36, green = 36, blue = 47),
       surface = Color.White,
       component = Color(red = 243, green = 248, blue = 245),
       componentBorder = Color.Transparent,
       componentDivider = Color.Black,
       onComponent = Color.Black,
       subtitle = Color.Black,
       placeholderText = Color(red = 115, green = 117, blue = 123),
       onSurface = Color.Black,
       appBarIcon = Color.Black,
       error = Color.Red,
   ),
   shapes = PaymentSheet.Shapes(
       cornerRadiusDp = 12.0f,
       borderStrokeWidthDp = 0.5f
   ),
   typography = PaymentSheet.Typography.default.copy(
       fontResId = R.font.avenir_next
   ),
   primaryButton = PaymentSheet.PrimaryButton(
   shape = PaymentSheet.PrimaryButtonShape(
       cornerRadiusDp = 20f
   ),
)

// ...

paymentSheet.presentWithPaymentIntent(
   clientSecret,
   PaymentSheet.Configuration(
       merchantDisplayName = merchantName,
       appearance = appearance
   )
)

Caratteri

Personalizza il carattere impostando typography.fontResId sull’ID risorsa del carattere personalizzato. 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 typography.sizeScaleFactor. Stripe moltiplica le dimensioni dei caratteri per questo valore prima di visualizzarle. Questa impostazione è utile se il carattere personalizzato è leggermente più grande o più piccolo del carattere di sistema.

val appearance = PaymentSheet.Appearance(
    // …
    typography = PaymentSheet.Typography.default.copy(
        sizeScaleFactor = 1.15f, // Increase the size of all text by 1.15x
        fontResId = R.font.myFont,
    ),
)
val configuration = PaymentSheet.Configuration(
    // …
    appearance = appearance
)

Colori

Personalizza i colori di Payment Element per dispositivi mobili modificando le categorie di colori definite in PaymentSheet.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 a personalizzare caratteri e colori, puoi anche personalizzare il raggio dell’angolo e la larghezza del bordo utilizzati in Payment Element per dispositivi mobili impostando appearance.shapes.

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 Appearance.PrimaryButton.

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