Customização da Tela de Pagamento

Visão Geral#

Quando seu cliente abre um paymentUrl, ele chega à tela de pagamento do Pluggy, onde escolhe seu banco e autoriza o pagamento. No Dashboard, em Pagamentos > Customização, você pode fazer com que essa tela pareça com seu produto: o nome e o logotipo da sua empresa, e suas cores.

A customização se aplica a cada pagamento de uma aplicação: Pix imediato e Pix Automático, tanto no desktop quanto no mobile. O valor, o destinatário, a lista de bancos, as informações de Open Finance e o rodapé "Powered by Pluggy" nunca são personalizáveis, para que seus clientes sempre vejam os detalhes do pagamento como são.

Padrão da equipe e customização por aplicação#

Existem dois níveis:

• Padrão da equipe: aplica-se a cada aplicação da equipe, incluindo aquelas que você criar posteriormente. Não pertence a um ambiente: aplica-se tanto às suas aplicações de sandbox quanto de produção.
• Customização da aplicação: na primeira vez que você salva uma aplicação, ela recebe uma customização própria, começando a partir de uma cópia do padrão da equipe. A partir de então, alterações no padrão da equipe não a afetam mais.

Quando sua equipe tem mais de uma aplicação no ambiente selecionado no Dashboard, escolha qual editar com o seletor Aplicação abaixo do título da página. A primeira opção, Todas as aplicações (padrão da equipe), edita o padrão da equipe. Cada aplicação mostra se tem sua própria customização ou usa o padrão da equipe, e uma aplicação com sua própria customização pode voltar a ela a qualquer momento com Usar o padrão da equipe.

O que você pode personalizar#

Nome da empresa#

Exibido ao lado do logotipo, na parte superior da tela de pagamento. Até 30 caracteres.

Logotipo#

Exibido na parte superior da tela de pagamento, ao lado do nome da empresa. Faça o upload de um arquivo PNG, JPG, SVG ou WebP de até 5 MB. Ao contrário do widget, a tela de pagamento aceita apenas logotipos enviados, não URLs.

O arquivo é verificado pelo seu conteúdo, portanto, um arquivo renomeado para outra extensão é rejeitado. Arquivos SVG são limpos antes de serem armazenados: scripts e referências a arquivos externos são removidos, então use um SVG autocontido (uma imagem incorporada é mantida, uma vinculada não é exibida).

Sem um logotipo, a tela mostra a primeira letra do nome da sua empresa na sua cor principal.

Cor principal#

Usada nos botões e destaques da tela de pagamento, com texto branco sobre ela. Insira como uma cor hexadecimal de seis dígitos (#RRGGBB) ou escolha-a. Use uma cor escura o suficiente para que o texto seja fácil de ler: o Dashboard avisa quando não é, mas não impede que você a salve.

Cor secundária#

Também uma cor hexadecimal de seis dígitos. Usada em botões secundários, com texto branco ou preto dependendo de qual é mais legível, e nos detalhes dos pagamentos de Pix Automático (o destinatário e o primeiro pagamento). Com Seguir cor principal ativado, os botões secundários são contornados na sua cor principal, e os detalhes do Pix Automático usam a escala da sua cor principal: a própria cor, ou tons mais claros e mais escuros dela, dependendo de onde é exibida.

Reutilizando a customização do seu widget Pluggy Connect#

Se você já personalizou o widget Pluggy Connect, pode reutilizar seu nome da empresa, logotipo e cor principal em vez de inseri-los novamente. Ative Usar o do widget ao lado de cada campo: o campo mostra o valor do widget e continua seguindo-o, então uma alteração na customização do widget também muda a tela de pagamento.

Cada campo escolhe por conta própria: reutilizar o nome da empresa do widget não traz seu logotipo ou cor. Enquanto um campo segue o widget, o valor que você havia inserido para ele é mantido e retorna quando você desativa Usar o do widget.

Um campo só está disponível para reutilização quando a customização do widget tem um valor próprio para ele. Os padrões do widget (o nome da empresa padrão, o logotipo do Pluggy e a cor do Pluggy) não são reutilizados, e também não é reutilizado um logotipo de widget cujo endereço não seja https.

Prévia#

A página mostra uma prévia ao vivo da tela de pagamento enquanto você edita, antes de salvar. Alterne entre um pagamento Pix imediato e um Pix Automático, e entre os layouts desktop e mobile.

Quando as alterações aparecem#

Após você salvar, novas telas de pagamento usam a customização em cerca de um minuto. Um cliente que já tem a tela de pagamento aberta a vê na próxima vez que a carregar.