# Personaliza el aspecto

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 combinar el diseño de tu aplicación. El diseño sigue siendo uniforme, pero puedes modificar colores, fuentes y mucho más con 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 coincidan con tu aplicación
1. Personaliza [formas](https://docs.stripe.com/elements/appearance-api/mobile.md#shapes-ios) como el radio de las esquinas
1. Ajusta [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) en cualquier variante de tu fuente personalizada en cualquier tamaño y peso. El Payment Element móvil utiliza la familia de fuentes 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, configura [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. Esta opción es útil si la fuente personalizada es un poco más grande o 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 Payment Element móvil 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, [principal](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance/Colors.html#/s:6Stripe12PaymentSheetC10AppearanceV6ColorsV7primarySo7UIColorCvp) define el color del botón **Paga** y de los elementos seleccionados, como la casilla **Guarda esta tarjeta**. Consulta el diagrama siguiente para ver algunos de los elementos de la interfaz de usuario asociados con cada categoría de color.
![](https://b.stripecdn.com/docs-statics-srv/assets/ios-appearance-colors.2063c1f71eaa17656639098f3f4d29d6.png)

> Para admitir el modo oscuro, inicializa los 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), el [ancho 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) que se usa en todo el Payment Element móvil.
![](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 Payment Element móvil en general, a través de varios 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 **Paga**). Consulta [Appearance.PrimaryButton](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance/PrimaryButton.html) para obtener 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, `appearance.primaryButton.cornerRadius` invalida el valor de `appearance.cornerRadius`.

> [Cuéntanos](https://github.com/stripe/stripe-ios/issues/new/choose) si crees que necesitamos agregar 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 combinar el diseño de tu aplicación. El diseño sigue siendo uniforme, pero puedes modificar colores, fuentes y mucho más mediante la creación de 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 coincidan con tu aplicación
1. Personaliza [formas](https://docs.stripe.com/elements/appearance-api/mobile.md#shapes-android) como el radio de las esquinas
1. Ajusta [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 Payment Element móvil utiliza la familia de fuentes de tu fuente personalizada, pero determina los tamaños y los pesos por sí mismo.

Para aumentar o disminuir el tamaño del texto, configura [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 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 del 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, [principal](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 seleccionados, como la casilla **Guardar esta tarjeta**. Consulta el diagrama siguiente para ver algunos de los elementos de la interfaz de usuario asociados con cada categoría de color.

> Para admitir el modo oscuro, configura [appearance.colorsDark](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-appearance/index.html#945237406%2FProperties%2F2002900378). Puedes desactivar eficazmente el modo oscuro 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 [el ancho del borde](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-shapes/index.html#495484314%2FProperties%2F2002900378) que se usan en todo el Payment Element móvil configurando la [apariencia. formas](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 Payment Element móvil en general, a través de varios 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 **Paga**). 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 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` invalida el valor de `appearance.shapes.cornerRadius`.

> Si tienes ideas para otras opciones de personalización, [comunícate con nosotros](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 combinar el diseño de tu aplicación. El diseño sigue siendo uniforme, pero puedes modificar los colores, las fuentes y mucho más si incluyes 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 coincidan con 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. Ajusta 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` `android/app/src/main/assets/font/<your-font>` a `android/app/src/main/res/font/<your-font>` y usa el nombre del archivo de fuente (que solo contiene caracteres alfanuméricos en minúsculas). El Payment Element móvil utiliza la familia de fuentes 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 la 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 Payment Element móvil 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, [principal](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance/Colors.html#/s:6Stripe12PaymentSheetC10AppearanceV6ColorsV7primarySo7UIColorCvp) define el color del botón **Paga** y de los elementos seleccionados, como la casilla **Guarda esta tarjeta**. Consulta el diagrama siguiente para ver algunos de los elementos de la interfaz de usuario asociados con cada categoría de color.
![](https://b.stripecdn.com/docs-statics-srv/assets/ios-appearance-colors.2063c1f71eaa17656639098f3f4d29d6.png)

> Para admitir el modo oscuro, inicializa los 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), [el ancho 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) que se usan en todo el Payment Element para dispositivos móviles.
![](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 a Payment Element móvil en general, a través de varios 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 **Paga**). Consulta [PrimaryButtonConfig](https://stripe.dev/stripe-react-native/api-reference/modules/PaymentSheet.html#PrimaryButtonConfig) para obtener 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` invalida el valor de `shapes.borderRadius`.

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