Personalizar a aparência

O Mobile Payment Element aceita personalização visual, o que permite que você combine o design do seu aplicativo. O layout permanece consistente, mas você pode modificar cores, fontes e muito mais incluindo o parâmetro appearance ao chamar initPaymentSheet().

1. Comece personalizando a fonte
2. Personalize as cores para corresponder ao seu aplicativo
3. Personalize formas como o raio da borda
4. Ajuste fino de 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,
});

Fontes

Personalize a fonte passando um FontConfig para font e definindo family. No iOS, o valor de family deve ser o “nome PostScript” encontrado no Font Book. No Android, copie o arquivo .ttf ou .otf de android/app/src/main/assets/font/<your-font> para android/app/src/main/res/font/<your-font> e use o nome do arquivo da fonte (contendo apenas caracteres alfanuméricos minúsculos). O Mobile Payment Element usa a família de fontes da sua fonte personalizada, mas determina os próprios tamanhos e pesos.

Para aumentar ou diminuir o tamanho do texto, defina scale. Multiplicamos os tamanhos das fontes por esse valor antes de exibi-los. Isso é útil se a fonte personalizada for um pouco maior ou menor que a fonte do sistema.

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

Cores

Personalize as cores no Payment Element para dispositivos móveis modificando as categorias de cores definidas em Appearance.Colors. Cada categoria de cores determina a cor de um ou mais componentes na IU. Por exemplo, principal define a cor do botão Pagar e alguns itens, como a caixa de seleção Salvar este cartão. Consulte o diagrama abaixo para ver alguns dos elementos da IU associados a cada categoria de cores.

Formatos

Além de fontes e cores, você também pode personalizar o raio da borda, a largura da borda e a sombra usadas em todo o Mobile Payment Element.

Componentes específicos da IU

As seções anteriores descrevem as opções de personalização que afetam o Mobile Payment Element de forma ampla, em vários componentes de IU. Também oferecemos opções de personalização específicas para o botão principal (por exemplo, o botão Pagar). Consulte PrimaryButtonConfig para obter a lista completa de opções de personalização.

As opções de personalização para componentes específicos da interface do usuário têm precedência sobre outros valores. Por exemplo, primaryButton.shapes.borderRadius substitui o valor de shapes.borderRadius.