Personaliza el aspecto

El Payment Element móvil admite la personalización visual, lo que te permite combinarlo con el diseño de tu aplicación. El diseño sigue siendo coherente, pero puedes modificar los colores, las fuentes y mucho más si incluyes el parámetro appearance cuando llamas a initPaymentSheet().

1. Empieza por personalizar la fuente
2. Personaliza los colores para que coincidan con tu aplicación
3. Personaliza las formas como el radio del borde
4. Ajusta 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 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.

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

Formas

Además de las fuentes y los colores, también puedes personalizar el radio del borde, el ancho del borde, y la sombra que se usan en todo el Payment Element para dispositivos móviles.

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