# Personalizar a aparência

Personalize sua integração móvel com a 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.

O [Payment Element móvel](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=mobile&platform=ios) oferece suporte à personalização visual, permitindo que você combine com o design do seu app. O layout permanece consistente, mas você pode modificar cores, fontes e mais usando a propriedade [aparência](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html#/s:6Stripe12PaymentSheetC13ConfigurationV10appearanceAC10AppearanceVvp) no objeto [PaymentSheet.Configuration](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html).

1. Comece personalizando a [fonte](https://docs.stripe.com/elements/appearance-api/mobile.md#fonts-ios)
1. Personalize as [cores](https://docs.stripe.com/elements/appearance-api/mobile.md#colors-ios) para corresponder ao seu aplicativo
1. Personalize [formas](https://docs.stripe.com/elements/appearance-api/mobile.md#shapes-ios) como raio de canto
1. Ajuste [fino de componentes específicos](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)
```

## Fontes

Personalize a fonte definindo [font.base](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance/Font.html#/s:6Stripe12PaymentSheetC10AppearanceV4FontV4baseSo6UIFontCvp) para qualquer variante da sua fonte personalizada em qualquer tamanho e peso. O Payment Element para dispositivos móveis usa a família de fontes da sua fonte personalizada, mas determina os próprios tamanhos e pesos.

Para aumentar ou diminuir o tamanho de todo o texto, defina [font.sizeScaleFactor](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance/Font.html#/s:6Stripe12PaymentSheetC10AppearanceV4FontV15sizeScaleFactor12CoreGraphics7CGFloatVvp). Multiplicamos os tamanhos das fontes por esse valor antes de exibi-las. Isso é útil se a fonte personalizada for um pouco maior ou menor que a fonte do 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
```

## Cores

Personalize as cores no Payment Element para dispositivos móveis modificando as categorias de cores definidas em [Appearance.Colors](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance.html#/s:6Stripe12PaymentSheetC10AppearanceV6ColorsV). Cada categoria de cores determina a cor de um ou mais componentes na IU. Por exemplo, [principal](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance/Colors.html#/s:6Stripe12PaymentSheetC10AppearanceV6ColorsV7primarySo7UIColorCvp) define a cor do botão **Pagar** e alguns itens, como a caixa de seleção **Salvar este cartão**. Consulte o diagrama abaixo para ver alguns dos elementos da IU associados a cada categoria de cores.
![](https://b.stripecdn.com/docs-statics-srv/assets/ios-appearance-colors.2063c1f71eaa17656639098f3f4d29d6.png)

> Para aceitar o modo escuro, inicialize os UIColors personalizados com [init(dynamicProvider:)](https://developer.apple.com/documentation/uikit/uicolor/3238041-init).

## Formatos

Além de fontes e cores, você também pode personalizar o [raio do canto](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance.html#/s:6Stripe12PaymentSheetC10AppearanceV12cornerRadius12CoreGraphics7CGFloatVvp), a [largura da borda](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance.html#/s:6Stripe12PaymentSheetC10AppearanceV11borderWidth12CoreGraphics7CGFloatVvp) e a [sombra](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance.html#/s:6Stripe12PaymentSheetC10AppearanceV6shadowAE6ShadowVvp) usados em todo o Payment Element para dispositivos móveis.
![](https://b.stripecdn.com/docs-statics-srv/assets/ios-appearance-shapes.ee37fc31111aa78f26af4045a3857468.png)

## Componentes específicos da IU

As seções acima descrevem as opções de personalização que afetam o Payment Element para dispositivos móveis de forma ampla, em vários componentes de IU. Também oferecemos opções de personalização específicas para o botão principal (por exemplo, o botão **Pagar**). Consulte [Appearance.PrimaryButton](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance/PrimaryButton.html) para obter a lista completa de opções de personalização.

As opções de personalização para componentes específicos da IU têm precedência sobre outros valores. Por exemplo, `appearance.primaryButton.cornerRadius` substitui o valor de `appearance.cornerRadius`.

> [Fale conosco](https://github.com/stripe/stripe-ios/issues/new/choose) se você acredita que precisamos adicionar mais opções de personalização.


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

O [Payment Element móvel](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=mobile&platform=android) oferece suporte à personalização visual, permitindo que você combine com o design do seu app. O layout permanece consistente, mas você pode modificar cores, fontes e mais criando o objeto [PaymentSheet.Configuration](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/index.html) com um objeto [aparência](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/index.html#-431946322%2FProperties%2F2002900378).

1. Comece personalizando a [fonte](https://docs.stripe.com/elements/appearance-api/mobile.md#fonts-android)
1. Personalize as [cores](https://docs.stripe.com/elements/appearance-api/mobile.md#colors-android) para corresponder ao seu aplicativo
1. Personalize [formas](https://docs.stripe.com/elements/appearance-api/mobile.md#shapes-android) como raio de canto
1. Ajuste fino de [componentes específicos](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
   )
)

```

## Fontes

Personalize a fonte definindo [typography.fontResId](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-typography/index.html#-786783041%2FProperties%2F2002900378) como o ID de recurso da fonte personalizada. O Payment Element para dispositivos móveis usa a família de fontes da sua fonte personalizada, mas determina os próprios tamanhos e pesos.

Para aumentar ou diminuir o tamanho do texto, defina [typography.sizeScaleFactor](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-typography/index.html#1477076499%2FProperties%2F2002900378). A Stripe multiplica os tamanhos das fontes por esse valor antes de exibi-los. Essa configuração é útil se a fonte personalizada for um pouco maior ou menor que a fonte do 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()
```

## Cores

Personalize as cores no Payment Element para dispositivos móveis modificando as categorias de cores definidas em [PaymentSheet.Colors](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-colors/index.html). Cada categoria de cores determina a cor de um ou mais componentes na IU. Por exemplo, [principal](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-colors/index.html#1242160296%2FProperties%2F2002900378) define a cor do botão **Pagar** e seleciona itens como a caixa de seleção **Salvar este cartão**. Consulte o diagrama abaixo para ver alguns dos elementos da IU associados a cada categoria de cores.

> Para aceitar o modo escuro, defina [appearance.colorsDark](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-appearance/index.html#945237406%2FProperties%2F2002900378). Você pode desativar efetivamente o modo escuro definindo [appearance.colorsDark](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-appearance/index.html#945237406%2FProperties%2F2002900378) com o mesmo valor de [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)

## Formatos

Além de personalizar fontes e cores, você também pode personalizar o [raio do canto](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-shapes/index.html#-1129752289%2FProperties%2F2002900378) e a [largura da borda](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-shapes/index.html#495484314%2FProperties%2F2002900378) usadas em todo o Payment Element para dispositivos móveis definindo [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)

## Componentes específicos da IU

As seções acima descrevem as opções de personalização que afetam o Payment Element para dispositivos móveis de forma ampla, em vários componentes de IU. Também oferecemos opções de personalização específicas para o botão principal (por exemplo, o botão **Pagar**). Consulte [Appearance.PrimaryButton](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-primary-button/index.html) para obter a lista completa de opções de personalização.

As opções de personalização para componentes específicos da IU têm precedência sobre outros valores. Por exemplo, `appearance.primaryButton.shapes.cornerRadius` substitui o valor de `appearance.shapes.cornerRadius`.

> Se tiver ideias para opções adicionais de personalização, [fale conosco](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.

O [Payment Element móvel](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=mobile&platform=react-native) oferece suporte à personalização visual, permitindo que você combine com o design do seu app. O layout permanece consistente, mas você pode modificar cores, fontes e outros elementos incluindo o parâmtero `aparência` ao chamar [initPaymentSheet()](https://stripe.dev/stripe-react-native/api-reference/index.html#initPaymentSheet).

1. Comece personalizando a [fonte](https://docs.stripe.com/elements/appearance-api/mobile.md#fonts-react-native)
1. Personalize as [cores](https://docs.stripe.com/elements/appearance-api/mobile.md#colors-react-native) para corresponder ao seu aplicativo
1. Personalize [formas](https://docs.stripe.com/elements/appearance-api/mobile.md#shapes-react-native) como o raio da borda
1. Ajuste fino de [componentes específicos](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,
});

```

## Fontes

Personalize a fonte passando um [FontConfig](https://stripe.dev/stripe-react-native/api-reference/modules/PaymentSheet.html#FontConfig) para `font` e definindo `family`. No iOS, o valor de `family` deve ser o “nome PostScript” encontrado no Font Book. No Android, copie o arquivo `.ttf` ou `.otf` de `android/app/src/main/assets/font/<your-font>` para `android/app/src/main/res/font/<your-font>` e use o nome do arquivo da fonte (contendo apenas caracteres alfanuméricos minúsculos). O Mobile Payment Element usa a família de fontes da sua fonte personalizada, mas determina os próprios tamanhos e pesos.

Para aumentar ou diminuir o tamanho do texto, defina `scale`. Multiplicamos os tamanhos das fontes por esse valor antes de exibi-los. Isso é útil se a fonte personalizada for um pouco maior ou menor que a fonte do sistema.

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

## Cores

Personalize as cores no Payment Element para dispositivos móveis modificando as categorias de cores definidas em [Appearance.Colors](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance.html#/s:6Stripe12PaymentSheetC10AppearanceV6ColorsV). Cada categoria de cores determina a cor de um ou mais componentes na IU. Por exemplo, [principal](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance/Colors.html#/s:6Stripe12PaymentSheetC10AppearanceV6ColorsV7primarySo7UIColorCvp) define a cor do botão **Pagar** e alguns itens, como a caixa de seleção **Salvar este cartão**. Consulte o diagrama abaixo para ver alguns dos elementos da IU associados a cada categoria de cores.
![](https://b.stripecdn.com/docs-statics-srv/assets/ios-appearance-colors.2063c1f71eaa17656639098f3f4d29d6.png)

> Para aceitar o modo escuro, inicialize os UIColors personalizados com [init(dynamicProvider:)](https://developer.apple.com/documentation/uikit/uicolor/3238041-init).

## Formatos

Além de fontes e cores, você também pode personalizar o [raio da borda](https://stripe.dev/stripe-react-native/api-reference/modules/PaymentSheet.html#AppearanceParams), a [largura da borda](https://stripe.dev/stripe-react-native/api-reference/modules/PaymentSheet.html#AppearanceParams) e a [sombra](https://stripe.dev/stripe-react-native/api-reference/modules/PaymentSheet.html#ShadowConfig) usadas em todo o Mobile Payment Element.
![](https://b.stripecdn.com/docs-statics-srv/assets/react-native-appearance-shapes.a71c754a951ea02fff121f584953ba33.png)

## Componentes específicos da IU

As seções anteriores descrevem as opções de personalização que afetam o Mobile Payment Element de forma ampla, em vários componentes de IU. Também oferecemos opções de personalização específicas para o botão principal (por exemplo, o botão **Pagar**). Consulte [PrimaryButtonConfig](https://stripe.dev/stripe-react-native/api-reference/modules/PaymentSheet.html#PrimaryButtonConfig) para obter a lista completa de opções de personalização.

As opções de personalização para componentes específicos da interface do usuário têm precedência sobre outros valores. Por exemplo, `primaryButton.shapes.borderRadius` substitui o valor de `shapes.borderRadius`.

> [Entre em contato](https://github.com/stripe/stripe-react-native/issues/new/choose) se você acredita que precisamos adicionar mais opções de personalização.