Personalização do tema da interface de pagamento

Como funciona

Há dois temas padrões disponíveis para a interface de pagamento: claro e escuro. Para alternar entre esses temas sem usar o personalizador, passe 63295a9a2e47fab76f7708e1 para o tema claro ou 63295aab2e47fab76f7708e3 para o tema escuro no parâmetro settings.ui.theme ao obter o token.

Para combinar a interface de pagamento com o design do jogo, você pode criar um tema personalizado e configurar as seguintes características:

cores dos elementos da interface
tamanho da fonte
largura da borda e raio dos cantos dos elementos da interface
layout
exibição de logotipo de jogo

Você pode usar um tema personalizado como tema padrão para todos os seus projetos na Conta de Distribuidor. Se você quiser especificar temas diferentes para jogos individuais, passe essas configurações no token.

As configurações de tema passadas no token têm prioridade sobre as configurações especificadas na Conta de Distribuidor.

Configuração da personalização na Conta de Distribuidor

Você pode criar um tema personalizado em um projeto e usá-lo em todos os seus projetos nesta Conta de Distribuidor.

Abra seu projeto na Conta de Distribuidor e vá para a seção Pay Station > UI theme.

Clique em Create new theme.
Clique no ícone de lápis para alterar o nome do tema.

Para alterar as cores dos elementos da interface, vá para a aba Colors. Você pode alterar a paleta de cores de superfícies, textos e controles, bem como as cores que aparecem nas notificações de status.

Para definir o tamanho da fonte, vá para a aba Typography. Use os campos correspondentes para alterar o tamanho da fonte dos seguintes elementos da interface:

Campo	Elemento da interface
Title 1	Título na página de status do pagamento.
Title 2	Valor total da quantia.
Title 3	Títulos de seção (por exemplo, Pagamento via cartão).
Title 4	Atualmente, não é utilizado.
Corpo G	títulos de subseção títulos em instruções para pagamentos em dinheiro botão copiar copiar Total
Corpo M	nome do projeto (é exibido quando o projeto não possui logotipo) texto em dicas de ferramenta e descrições mensagem na página de status de pagamento texto na lista de métodos de pagamento (a lista suspensa na versão móvel)
Texto pequeno	nome de usuário textos legais informações no carrinho (por exemplo, nome de um item, valor do IVA)
Título	Atualmente, não é utilizado.

Para configurar a largura da borda e o raio dos canto dos elementos da interface, vá para a aba Borders e faça as alterações.

Largura máxima da borda — 3 px.
Raio máximo do canto — 16 px.

Para ver como o logotipo do jogo aparece na interface de pagamento, na seção Preview, marque a caixa Show logo. Para configurar a exibição de um logotipo de jogo na interface de pagamento, passe os parâmetros necessários no token.

Para ver como um tema aparece nas versões móvel e desktop da interface de pagamento, alterne entre as abas na seção Preview.

Os botões e links não funcionam no modo de visualização.

Para ver diferentes estados da interface de pagamento, alterne entre as abas Payment by card, Payment methods e Payment status.

Clique em Publish.
Para aplicar esse tema a todos os seus projetos na Conta de Distribuidor, defina a configuração Set as default como On na janela modal que abrir. Isso não afetará projetos em que o tema é passado no token.
Clique em Publish.

Depois que o tema é publicado, você pode editá-lo a qualquer momento. O tema não é aplicado à interface de pagamento, a menos que você o defina como o tema padrão ou o habilite usando as configurações de token.

Na aba UI theme, as seguintes ações rápidas estão disponíveis ao clicar no ••• no bloco de um tema específico:

Personalizar — abre o personalizador para fazer alterações.
Editar — permite alterar o nome de um tema e definir a configuração Set as default como On ou Off.
Duplicar — duplica um tema para criar um novo com base nele.
Excluir tema.

Configuração da personalização via API

Alterar layout

Você pode alterar o layout da interface de pagamento para adaptá-la à interface do jogo. Para fazer isso, passe o parâmetro settings.ui.layout ao criar um token. Esse parâmetro pode ter os seguintes valores:

embed — nesse caso, a interface de pagamento é aberta dentro do jogo: o preenchimento da interface de pagamento é cortado nas bordas para caber em outros elementos da interface.

column_reverse — nesse caso, a ordem das colunas na interface de pagamento muda: informações sobre métodos de pagamento são exibidas no lado esquerdo e informações sobre um pedido no lado direito.

embed_column_reverse — nesse caso, a interface de pagamento é aberta dentro do seu jogo e a ordem das colunas na interface de pagamento muda: informações sobre métodos de pagamento são exibidas no lado esquerdo e as informações sobre pedidos no lado direito.

Passagem de configurações personalizadas de tema da interface no token

Para aplicar configurações personalizadas a um jogo específico, passe a ID do tema personalizado publicado no parâmetro settings.ui.theme ao criar o token.

Você pode encontrar o tema ID: