# Personalizzare l'aspetto

Personalizzare l'integrazione per dispositivi mobili con l'API Appearance

# iOS

> This is a iOS for when platform is ios. View the full page at https://docs.stripe.com/elements/appearance-api/mobile?platform=ios.

[Payment Element per dispositivi mobili](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=mobile&platform=ios) supporta la personalizzazione visiva, che consente di adattarlo al design della tua app. Il layout rimane coerente, ma è possibile modificare colori, caratteri e altro utilizzando la proprietà [appearance](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html#/s:6Stripe12PaymentSheetC13ConfigurationV10appearanceAC10AppearanceVvp) sull’oggetto [PaymentSheet.Configuration](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html).

1. Inizia personalizzando il [carattere](https://docs.stripe.com/elements/appearance-api/mobile.md#fonts-ios)
1. Personalizza i [colori](https://docs.stripe.com/elements/appearance-api/mobile.md#colors-ios) per adattarli alla tua app
1. Personalizza le [forme](https://docs.stripe.com/elements/appearance-api/mobile.md#shapes-ios) come il raggio dell’angolo
1. Ottimizza [componenti specifici](https://docs.stripe.com/elements/appearance-api/mobile.md#specific-ui-components-ios)
![](https://b.stripecdn.com/docs-statics-srv/assets/ios-appearance-before-after-example.ad6a9aad238be9b198e9ebbc77ebe1d4.png)

```swift
var configuration = PaymentSheet.Configuration()
// The following code creates the appearance shown in the screenshot abovevar appearance = PaymentSheet.Appearance()
appearance.font.base = UIFont(name: "AvenirNext-Regular", size: UIFont.systemFontSize)!
appearance.cornerRadius = 12
appearance.shadow = .disabled
appearance.borderWidth = 0.5
appearance.colors.background = .white
appearance.colors.primary = UIColor(red: 36/255, green: 36/255, blue: 47/255, alpha: 1)
appearance.colors.textSecondary = .black
appearance.colors.componentPlaceholderText = UIColor(red: 115/255, green: 117/255, blue: 123/255, alpha: 1)
appearance.colors.componentText = .black
appearance.colors.componentBorder = .clear
appearance.colors.componentDivider = UIColor(red: 195/255, green: 213/255, blue: 200/255, alpha: 1)
appearance.colors.componentBackground = UIColor(red: 243/255, green: 248/255, blue: 250/247, alpha: 1)
appearance.primaryButton.cornerRadius = 20
configuration.appearance = appearance
let paymentSheet = PaymentSheet(/* ... */, configuration: configuration)
```

## Caratteri

Personalizza il carattere impostando [font.base](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance/Font.html#/s:6Stripe12PaymentSheetC10AppearanceV4FontV4baseSo6UIFontCvp) su qualsiasi variante del tipo di carattere personalizzato, di qualsiasi dimensione e spessore. 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 di tutto il testo, imposta [font.sizeScaleFactor](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance/Font.html#/s:6Stripe12PaymentSheetC10AppearanceV4FontV15sizeScaleFactor12CoreGraphics7CGFloatVvp). 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.

```swift
var configuration = PaymentSheet.Configuration()
configuration.appearance.font.base = UIFont(name: "CustomFont-Regular", size: UIFont.systemFontSize)
configuration.appearance.font.sizeScaleFactor = 1.15 // Increase the size of all text by 1.15x
```

## Colori

Personalizza i colori di Payment Element per dispositivi mobili modificando le categorie di colori definite in [Appearance.Colors](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance.html#/s:6Stripe12PaymentSheetC10AppearanceV6ColorsV). Ogni categoria di colore determina il colore di uno o più componenti dell’interfaccia utente. Ad esempio, [principale](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance/Colors.html#/s:6Stripe12PaymentSheetC10AppearanceV6ColorsV7primarySo7UIColorCvp) 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.
![](https://b.stripecdn.com/docs-statics-srv/assets/ios-appearance-colors.2063c1f71eaa17656639098f3f4d29d6.png)

> Per supportare la modalità scura, inizializza gli UIColors personalizzati con [init(dynamicProvider:)](https://developer.apple.com/documentation/uikit/uicolor/3238041-init).

## Forme

Oltre ai caratteri e ai colori, puoi anche personalizzare il [raggio dell’angolo](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance.html#/s:6Stripe12PaymentSheetC10AppearanceV12cornerRadius12CoreGraphics7CGFloatVvp), la [larghezza del bordo](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance.html#/s:6Stripe12PaymentSheetC10AppearanceV11borderWidth12CoreGraphics7CGFloatVvp) e l’[ombra](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance.html#/s:6Stripe12PaymentSheetC10AppearanceV6shadowAE6ShadowVvp) utilizzati in Payment Element per dispositivi mobili.
![](https://b.stripecdn.com/docs-statics-srv/assets/ios-appearance-shapes.ee37fc31111aa78f26af4045a3857468.png)

## 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](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance/PrimaryButton.html).

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

> [Comunicaci](https://github.com/stripe/stripe-ios/issues/new/choose) se pensi che sia necessario aggiungere altre opzioni di personalizzazione.


# Android

> This is a Android for when platform is android. View the full page at https://docs.stripe.com/elements/appearance-api/mobile?platform=android.

[Payment Element per dispositivi mobili](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=mobile&platform=android) supporta la personalizzazione visiva, che consente di adattare il design della tua app. Il layout rimane coerente, ma è possibile modificare colori, caratteri e altro ancora creando il proprio oggetto [PaymentSheet.Configuration](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/index.html) con un oggetto [appearance](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/index.html#-431946322%2FProperties%2F2002900378).

1. Inizia personalizzando il [carattere](https://docs.stripe.com/elements/appearance-api/mobile.md#fonts-android)
1. Personalizza i [colori](https://docs.stripe.com/elements/appearance-api/mobile.md#colors-android) per adattarli alla tua app
1. Personalizza le [forme](https://docs.stripe.com/elements/appearance-api/mobile.md#shapes-android) come il raggio dell’angolo
1. Ottimizza [componenti specifici](https://docs.stripe.com/elements/appearance-api/mobile.md#specific-ui-components-android)
![](https://b.stripecdn.com/docs-statics-srv/assets/android-appearance-before-after-example.acf584a69eb99f47fe0b5ffab24818b8.png)

```kotlin
// The following code creates the appearance shown in the screenshot aboveval 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](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-typography/index.html#-786783041%2FProperties%2F2002900378) 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](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-typography/index.html#1477076499%2FProperties%2F2002900378). 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.

```kotlin
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.Builder("Example, Inc.")
    // …
    .appearance(appearance)
    .build()
```

## Colori

Personalizza i colori di Payment Element per dispositivi mobili modificando le categorie di colori definite in [PaymentSheet.Colors](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-colors/index.html). Ogni categoria di colore determina il colore di uno o più componenti dell’interfaccia utente. Ad esempio, [principale](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-colors/index.html#1242160296%2FProperties%2F2002900378) 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.

> Per supportare la modalità scura, imposta [appearance.colorsDark](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-appearance/index.html#945237406%2FProperties%2F2002900378). Puoi disattivare in modo efficace la modalità scura impostando [appearance.colorsDark](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-appearance/index.html#945237406%2FProperties%2F2002900378) to the same value as [appearance.colorsLight](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-appearance/index.html#2092498352%2FProperties%2F2002900378)
![](https://b.stripecdn.com/docs-statics-srv/assets/android-appearance-colors.413c76aaf01a54c25478cb8d7532c7e7.png)

## Forme

Oltre a personalizzare caratteri e colori, puoi anche personalizzare il [raggio dell’angolo](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-shapes/index.html#-1129752289%2FProperties%2F2002900378) e la [larghezza del bordo](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-shapes/index.html#495484314%2FProperties%2F2002900378) utilizzati in Payment Element per dispositivi mobili impostando [appearance.shapes](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-appearance/index.html#-2108514638%2FProperties%2F2002900378).
![](https://b.stripecdn.com/docs-statics-srv/assets/android-appearance-shapes.800169ea6a81e0bfdbccbb18bfdf7121.png)

## 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](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-primary-button/index.html).

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`.

> Se hai idee per ulteriori opzioni di personalizzazione, [contattaci](https://github.com/stripe/stripe-android/issues/new/choose).


# React Native

> This is a React Native for when platform is react-native. View the full page at https://docs.stripe.com/elements/appearance-api/mobile?platform=react-native.

[Payment Element per dispositivi mobili](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=mobile&platform=react-native) supporta la personalizzazione visiva, che consente di adattare il design della tua app. Il layout rimane coerente, ma puoi modificare colori, caratteri e altro ancora includendo il parametro `appearance` quando chiami [initPaymentSheet()](https://stripe.dev/stripe-react-native/api-reference/index.html#initPaymentSheet).

1. Inizia personalizzando il [carattere](https://docs.stripe.com/elements/appearance-api/mobile.md#fonts-react-native)
1. Personalizza i [colori](https://docs.stripe.com/elements/appearance-api/mobile.md#colors-react-native) per adattarli alla tua app
1. Personalizza le [forme](https://docs.stripe.com/elements/appearance-api/mobile.md#shapes-react-native) come il raggio del bordo
1. Ottimizza [componenti specifici](https://docs.stripe.com/elements/appearance-api/mobile.md#specific-ui-components-react-native)
![](https://b.stripecdn.com/docs-statics-srv/assets/ios-appearance-before-after-example.ad6a9aad238be9b198e9ebbc77ebe1d4.png)

```js
// The following code creates the appearance shown in the screenshot aboveconst 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](https://stripe.dev/stripe-react-native/api-reference/modules/PaymentSheet.html#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.

```js
 ...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](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance.html#/s:6Stripe12PaymentSheetC10AppearanceV6ColorsV). Ogni categoria di colore determina il colore di uno o più componenti dell’interfaccia utente. Ad esempio, [principale](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance/Colors.html#/s:6Stripe12PaymentSheetC10AppearanceV6ColorsV7primarySo7UIColorCvp) 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.
![](https://b.stripecdn.com/docs-statics-srv/assets/ios-appearance-colors.2063c1f71eaa17656639098f3f4d29d6.png)

> Per supportare la modalità scura, inizializza gli UIColors personalizzati con [init(dynamicProvider:)](https://developer.apple.com/documentation/uikit/uicolor/3238041-init).

## Forme

Oltre ai caratteri e ai colori, puoi anche personalizzare il [raggio del bordo](https://stripe.dev/stripe-react-native/api-reference/modules/PaymentSheet.html#AppearanceParams), la [larghezza del bordo](https://stripe.dev/stripe-react-native/api-reference/modules/PaymentSheet.html#AppearanceParams) e l’[ombreggiatura](https://stripe.dev/stripe-react-native/api-reference/modules/PaymentSheet.html#ShadowConfig) utilizzati in Payment Element per dispositivi mobili.
![](https://b.stripecdn.com/docs-statics-srv/assets/react-native-appearance-shapes.a71c754a951ea02fff121f584953ba33.png)

## 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](https://stripe.dev/stripe-react-native/api-reference/modules/PaymentSheet.html#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`.

> [Facci sapere](https://github.com/stripe/stripe-react-native/issues/new/choose) se pensi che sia necessario aggiungere altre opzioni di personalizzazione.