# Personaliza la apariencia

Personaliza tu integración móvil con la 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.

El [Payment Element móvil](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=mobile&platform=ios) admite la personalización visual, lo que te permite adaptarlo al diseño de tu aplicación. El diseño mantiene su coherencia, pero puedes modificar los colores, las fuentes y otros aspectos utilizando la propiedad [aspecto](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html#/s:6Stripe12PaymentSheetC13ConfigurationV10appearanceAC10AppearanceVvp) en tu objeto [PaymentSheet.Configuration](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html).

1. Empieza por personalizar la [fuente](https://docs.stripe.com/elements/appearance-api/mobile.md#fonts-ios)
1. Personaliza los [colores](https://docs.stripe.com/elements/appearance-api/mobile.md#colors-ios) para que se adecúen a tu aplicación
1. Personaliza [formas](https://docs.stripe.com/elements/appearance-api/mobile.md#shapes-ios) como el radio de las esquinas
1. Perfecciona los [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)
```

## Fuentes

Personaliza la fuente configurando [font.base](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance/Font.html#/s:6Stripe12PaymentSheetC10AppearanceV4FontV4baseSo6UIFontCvp) para cualquier variante de tu fuente personalizada en cualquier tamaño y peso. El Mobile Payment Element utiliza la familia tipográfica de tu fuente personalizada, pero determina los tamaños y los pesos por sí mismo.

Para aumentar o disminuir el tamaño de todo el texto, establece [font.sizeScaleFactor](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance/Font.html#/s:6Stripe12PaymentSheetC10AppearanceV4FontV15sizeScaleFactor12CoreGraphics7CGFloatVvp). Multiplicamos los tamaños de fuente por este valor antes de mostrarlos. Esto es útil si tu fuente personalizada es un poco más grande o más pequeña que la fuente del 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
```

## Colores

Personaliza los colores en el Mobile Payment Element modificando las categorías de color definidas en [Appearance.Colors](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance.html#/s:6Stripe12PaymentSheetC10AppearanceV6ColorsV). Cada categoría de color determina el color de uno o varios componentes de la interfaz de usuario. Por ejemplo, [primary](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance/Colors.html#/s:6Stripe12PaymentSheetC10AppearanceV6ColorsV7primarySo7UIColorCvp) define el color del botón **Pagar** y de los elementos elegidos, como la casilla de verificación **Guardar esta tarjeta**. Consulta el diagrama a continuación para ver algunos de los elementos de la interfaz de usuario asociados a cada categoría de color.
![](https://b.stripecdn.com/docs-statics-srv/assets/ios-appearance-colors.2063c1f71eaa17656639098f3f4d29d6.png)

> Para aceptar el modo oscuro, inicializa tus UIColors personalizados con [init(dynamicProvider:)](https://developer.apple.com/documentation/uikit/uicolor/3238041-init).

## Formas

Además de las fuentes y los colores, también puedes personalizar el [radio de las esquinas](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance.html#/s:6Stripe12PaymentSheetC10AppearanceV12cornerRadius12CoreGraphics7CGFloatVvp), la [anchura del borde](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance.html#/s:6Stripe12PaymentSheetC10AppearanceV11borderWidth12CoreGraphics7CGFloatVvp) y la [sombra](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance.html#/s:6Stripe12PaymentSheetC10AppearanceV6shadowAE6ShadowVvp) utilizado en todo el Mobile Payment Element.
![](https://b.stripecdn.com/docs-statics-srv/assets/ios-appearance-shapes.ee37fc31111aa78f26af4045a3857468.png)

## Componentes específicos de la interfaz de usuario

En las secciones anteriores se describen las opciones de personalización que afectan al Mobiles Payment Element en general, a través de múltiples componentes de la interfaz de usuario. También ofrecemos opciones de personalización específicas para el botón principal (por ejemplo, el botón **Pagar**). Consulta [Appearance.PrimaryButton](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance/PrimaryButton.html) para obtener la lista completa de las opciones de personalización.

Las opciones de personalización para componentes específicos de la interfaz de usuario tienen prioridad sobre otros valores. Por ejemplo, `appearance.primaryButton.cornerRadius` anula el valor de `appearance.cornerRadius`.

> [Dinos](https://github.com/stripe/stripe-ios/issues/new/choose) si crees que necesitamos añadir más opciones de personalización.


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

El [Payment Element móvil](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=mobile&platform=android) admite la personalización visual, lo que te permite adaptarlo al diseño de tu aplicación. El diseño mantiene su coherencia, pero puedes modificar los colores, las fuentes y otros aspectos creando tu objeto [PaymentSheet.Configuration](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/index.html) con un objeto [aspecto](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/index.html#-431946322%2FProperties%2F2002900378).

1. Empieza por personalizar la [fuente](https://docs.stripe.com/elements/appearance-api/mobile.md#fonts-android)
1. Personaliza los [colores](https://docs.stripe.com/elements/appearance-api/mobile.md#colors-android) para que se adecúen a tu aplicación
1. Personaliza [formas](https://docs.stripe.com/elements/appearance-api/mobile.md#shapes-android) como el radio de las esquinas
1. Perfecciona los [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
   )
)

```

## Fuentes

Personaliza la fuente estableciendo [typography.fontResId](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-typography/index.html#-786783041%2FProperties%2F2002900378) en el ID de recurso de la fuente personalizada. El Mobile Payment Element utiliza la familia tipográfica de tu fuente personalizada, pero determina los tamaños y los pesos por sí mismo.

Para aumentar o disminuir el tamaño del texto, establece [typography.sizeScaleFactor](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-typography/index.html#1477076499%2FProperties%2F2002900378). Stripe multiplica los tamaños de fuente por este valor antes de mostrarlos. Esta configuración es útil si la fuente personalizada es un poco más grande o más pequeña que la fuente del 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()
```

## Colores

Personaliza los colores en el Payment Element móvil modificando las categorías de color definidas en [PaymentSheet.Colors](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-colors/index.html). Cada categoría de color determina el color de uno o varios componentes de la interfaz de usuario. Por ejemplo, [primary](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-colors/index.html#1242160296%2FProperties%2F2002900378) define el color del botón **Pagar** y de los elementos elegidos, como la casilla de verificación **Guardar esta tarjeta**. Consulta el diagrama a continuación para ver algunos de los elementos de la interfaz de usuario asociados a cada categoría de color.

> Para aceptar el modo oscuro, establece [appearance.colorsDark](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-appearance/index.html#945237406%2FProperties%2F2002900378). Puedes desactivar el modo oscuro de forma efectiva estableciendo [appearance.colorsDark](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-appearance/index.html#945237406%2FProperties%2F2002900378) en el mismo valor que [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)

## Formas

Además de personalizar las fuentes y los colores, también puedes personalizar el [radio de las esquinas](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-shapes/index.html#-1129752289%2FProperties%2F2002900378) y la [anchura del borde](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-shapes/index.html#495484314%2FProperties%2F2002900378) utilizados en todo el Payment Element móvil estableciendo [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 de la interfaz de usuario

En las secciones anteriores se describen las opciones de personalización que afectan al Mobiles Payment Element en general, a través de múltiples componentes de la interfaz de usuario. También ofrecemos opciones de personalización específicas para el botón principal (por ejemplo, el botón **Pagar**). Consulta [Appearance.PrimaryButton](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-primary-button/index.html) para obtener la lista completa de las opciones de personalización.

Las opciones de personalización para componentes específicos de la interfaz de usuario tienen prioridad sobre otros valores. Por ejemplo, `appearance.primaryButton.shapes.cornerRadius` anula el valor de `appearance.shapes.cornerRadius`.

> Si tienes ideas para más opciones de personalización, [contáctanos](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.

El [Payment Element móvil](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=mobile&platform=react-native) admite la personalización visual, lo que te permite adaptarlo al diseño de tu aplicación. El diseño mantiene su coherencia, pero puedes modificar los colores, las fuentes y otros aspectos incluyendo el parámetro `aspecto` cuando llames a [initPaymentSheet()](https://stripe.dev/stripe-react-native/api-reference/index.html#initPaymentSheet).

1. Empieza por personalizar la [fuente](https://docs.stripe.com/elements/appearance-api/mobile.md#fonts-react-native)
1. Personaliza los [colores](https://docs.stripe.com/elements/appearance-api/mobile.md#colors-react-native) para que se adecúen a tu aplicación
1. Personaliza las [formas](https://docs.stripe.com/elements/appearance-api/mobile.md#shapes-react-native) como el radio del borde
1. Perfecciona los [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,
});

```

## Fuentes

Personaliza la fuente pasando [FontConfig](https://stripe.dev/stripe-react-native/api-reference/modules/PaymentSheet.html#FontConfig) a `font` y estableciendo `family`. En iOS, el valor de `family` debe ser el «Nombre de PostScript» que se encuentra en el Libro de fuentes. En Android, copia el archivo `.ttf` o `.otf` de `android/app/src/main/assets/font/<your-font>` a `android/app/src/main/res/font/<your-font>` y usa el nombre del archivo de la fuente (que solo puede contener caracteres alfanuméricos en minúsculas). El Mobile Payment Element utiliza la familia tipográfica de tu fuente personalizada, pero determina los tamaños y los pesos por sí mismo.

Para aumentar o disminuir el tamaño del texto, establece `scale`. Multiplicamos los tamaños de fuente por este valor antes de mostrarlos. Esto es útil si tu fuente personalizada es un poco más grande o más pequeña que la fuente del sistema.

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

## Colores

Personaliza los colores en el Mobile Payment Element modificando las categorías de color definidas en [Appearance.Colors](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance.html#/s:6Stripe12PaymentSheetC10AppearanceV6ColorsV). Cada categoría de color determina el color de uno o varios componentes de la interfaz de usuario. Por ejemplo, [primary](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance/Colors.html#/s:6Stripe12PaymentSheetC10AppearanceV6ColorsV7primarySo7UIColorCvp) define el color del botón **Pagar** y de los elementos elegidos, como la casilla de verificación **Guardar esta tarjeta**. Consulta el diagrama a continuación para ver algunos de los elementos de la interfaz de usuario asociados a cada categoría de color.
![](https://b.stripecdn.com/docs-statics-srv/assets/ios-appearance-colors.2063c1f71eaa17656639098f3f4d29d6.png)

> Para aceptar el modo oscuro, inicializa tus UIColors personalizados con [init(dynamicProvider:)](https://developer.apple.com/documentation/uikit/uicolor/3238041-init).

## Formas

Además de las fuentes y los colores, también puedes personalizar el [radio del borde](https://stripe.dev/stripe-react-native/api-reference/modules/PaymentSheet.html#AppearanceParams), la [anchura del borde](https://stripe.dev/stripe-react-native/api-reference/modules/PaymentSheet.html#AppearanceParams) y la [sombra](https://stripe.dev/stripe-react-native/api-reference/modules/PaymentSheet.html#ShadowConfig) utilizados en todo el Mobile Payment Element.
![](https://b.stripecdn.com/docs-statics-srv/assets/react-native-appearance-shapes.a71c754a951ea02fff121f584953ba33.png)

## Componentes específicos de la interfaz de usuario

En las secciones anteriores se describen las opciones de personalización que afectan al Mobile Payment Element en general, a través de múltiples componentes de la interfaz de usuario. También ofrecemos opciones de personalización específicas para el botón principal (por ejemplo, el botón **Pagar**). Consulta [PrimaryButtonConfig](https://stripe.dev/stripe-react-native/api-reference/modules/PaymentSheet.html#PrimaryButtonConfig) para ver la lista completa de opciones de personalización.

Las opciones de personalización para componentes específicos de la interfaz de usuario tienen prioridad sobre otros valores. Por ejemplo, `primaryButton.shapes.borderRadius` anula el valor de `shapes.borderRadius`.

> [Dinos](https://github.com/stripe/stripe-react-native/issues/new/choose) si crees que necesitamos añadir más opciones de personalización.