Personaliza la apariencia

El Mobile Payment Element admite la personalización visual, lo que te permite hacer coincidir el diseño de tu aplicación. El diseño sigue siendo coherente, pero puedes modificar los colores, las fuentes y mucho más creando tu objeto PaymentSheet.Configuration con un objeto de apariencia.

1. Empieza por personalizar la fuente
2. Personaliza los colores para que se adecúen a tu aplicación
3. Personaliza formas como el radio de las esquinas
4. Perfecciona los componentes específicos

// 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
   )
)

Fuentes

Personaliza la fuente estableciendo typography.fontResId 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. 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.

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. Cada categoría de color determina el color de uno o varios componentes de la interfaz de usuario. Por ejemplo, primary 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.

Formas

Además de personalizar las fuentes y los colores, también puedes personalizar el radio de las esquinas y la anchura del borde utilizados en todo el Payment Element móvil estableciendo appearance.shapes.

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