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 al incluir el parámetro appearance cuando llamas a initPaymentSheet().

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

// The following code creates the appearance shown in the screenshot above
const 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 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.

...
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. 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 las fuentes y los colores, también puedes personalizar el radio del borde, la anchura del borde y la sombra utilizados en todo el Mobile Payment Element.

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