O arquivo JSON contém as customizações visuais aplicáveis ao componente. A forma de armazenamento fica a critério do parceiro, sendo possível na pasta assets, via serviço, dentre outros.

Existe duas formas de aplicar estilo em um componente:

1. Na primeira forma, o parceiro integrador pode mudar todas as cores dos componentes de uma vez, por exemplo, alterar a cor de todos os textos. Aplicar o estilo a todos os componentes, por exemplo:

"componentNameDefaultExample": {
"textButtonColor": "#000000",
"backgroundButtonColor": "#FFFFFF",
"borderButtonColor": "#000000"
}

Abaixo o exemplo de JSON que deve ser informado:

Baixar JSON

Note analisando o JSON, cada componente possui seu nome especifico, e as opções de propriedades que podem alterar a cor, por exemplo:

"buttonBlock": { "color": "#5C6A7B", "colorDisabled": "#C5CED7", primaryButtonTextColor:
  "#FFFFFF",whiteButtonTextColor: "#FFFFFF",dangerButtonTextColor: "#0774E7"},

Neste exemplo, todos os botões terão a mesma cor aplicadas por color , colorDisabled, primaryButtonTextColor, whiteButtonTextColor, dangerButtonTextColor.

2. Outra forma, é aplicar uma cor específica para cada componente da tela, nesse caso o parceiro integrador irá informar uma cor para cada botão. Aplicar o estilo para um item específico:

”componentNameByScreenExample": {
"textButtonColor": "#000000",
"backgroundButtonColor": "#FFFFFF",
"borderButtonColor": "#000000"
}

A segunda forma de implementação, deve ser configurado da seguinte forma:

Para customizar o app, temos um arquivo JSON com campos específicos, e nas próximas sessões está descriminado cada campo nas telas.

Baixar JSON.

Inserir valor

1. insertValueHeader → buttonBackColor

2. insertValueInput → labelColor

3. insertValueInput → inputValueColor

4. insertValueInput → currencyColor

5. insertValueButtonNext → textColor (para mudar a cor do texto dentro do botão), textColorDisabled (cor do texto do botão desabilitado), color (botão ativo) e colorDisabled (botão desativado)

Selecionar forma de pagamento

1. selectPaymentTypeHeader → buttonBackColor

2. selectPaymentTypeHeader → buttonHelpColor. Para controlar a visibilidade deste botão adicione a chave selectPaymentTypeHeader → buttonHelpVisibility para os valores true ou false.

3. selectPaymentTypeHeader → textColor

4. selectPaymentTypeTextAmount → colorText

5. selectPaymentTypeAmount → colorText

6. selectPaymentTypeTitleOptions → colorText

7. selectPaymentTypeOptionsItem → borderColor (item não selecionado) e borderSelectedColor (item selecionado)

8. selectPaymentTypeOptionsItem → itemTextColor (item não selecionado) e itemTextSelectedColor (item selecionado))

9. selectPaymentTypeOptionsItem → itemRadioColor (item não selecionado) e itemRadioSelectedColor (item selecionado)

10. selectPaymentItemTitleInstallments → colorText

11. selectPaymentItemTitleInstallmentsIcon → color

12. selectPaymentItemTitleInstallmentsValues → colorText

13. selectPaymentItemTitleInstallmentsOpen → color

14. selectPaymentTypeButtonPayment → textColor (para mudar a cor do texto dentro do botão) textColorDisabled (cor do texto do botão desabilitado), color (botão ativo) e colorDisabled (botão desativado)

15. selectPaymentTypeItemInstallments → backgroundColor