Como configurar o pop-up que contém o QRCode ou a chave PIX para pagamento?

💡Introdução

É possível configurar a estrutura do pop-up, como o Título, a moldura onde será apresentado o QRCode, e o input com a chave pix para copiar e etc. 

👊 Como fazer isso na prática

Inicialmente, vamos adicionar na tela:

• 1 componente de texto;

• 1 componente de agrupamento e outro agrupamento dentro do mesmo e 1 componente de HTML;

• 1 componente de agrupamento e mover o campo dos Pix da inscrição se for para inscrição ou da matrícula para matrícula;

• 1 componente de agrupamento e o componente do que levará o candidato para o Portal do candidato/inscrito;

• 1 componente de agrupamento e outro agrupamento dentro do mesmo e o campo Base64 do pix da inscrição se for para inscrição ou da matrícula para matrícula.

Ficando desta forma:

Agora vamos configurar os componentes movidos para a tela para ficar mais bonito visualmente! 😉

Título

Para configurar o título, vamos abrir o componente de texto:

Posteriormente, vamos dar o nome para o componente:

Após isso, vamos configurar o texto que será o título:

1. Inserir um parágrafo antes e depois do título e selecionar tudo (atalho CTRL + A) na área de texto;
2. Mudamos de parágrafo para Título 2 (tag h2 do HTML);
3. Clicamos no “B”, para transformar o texto em Negrito(Bold);
4. Clicamos no A sublinhado para selecionarmos a cor do texto, nesse caso, selecionamos a Cinza escuro, após isso, só salvar.

Configurar a moldura do QRCode

Alinhamento do conteúdo

Inicialmente, devemos configurar o primeiro agrupamento que aqui vamos nomear de alinhamento do conteúdo.

Posteriormente, vamos em Alinhamento e configuramos a direção e os alinhamentos horizontais e verticais conforme a imagem abaixo. Ao fazer isso, podemos salvar.

Moldura do QRCode

Agora, vamos abrir o outro agrupamento que está dentro do Alinhamento de conteúdo e vamos nomear ele de Moldura do QRCode.

Colocamos na aba Personalização e configuramos a Largura máxima como 100.

Em alinhamento, configuramos a direção e os alinhamentos horizontais e verticais conforme a imagem abaixo:

Pra finalizar a configuração desse agrupamento, em CSS, configuramos o código CSS, conforme abaixo:

.img{

width:200px;

height:200px;

}

Componente de HTML

Abrimos o componente de HTML e renomeamos ele como QRCode.

Em Básico, configuramos desta forma:

1. Tipo do código: HTML;
2. Tag HTML: img
3. Classe CSS: img (classe CSS configurada no passo anterior);
4. Marcar Usar atributos;
5. Nome campo: src;
6. Tipo do campo: Campo do sistema;
7. Procurar pelo campo Base64 do pix na matrícula (Criado no início do tutorial).

Input do PIX

Abrimos o agrupamento que será o responsável pelo input do PIX. Renomeamos ele conforme imagem abaixo:

Na aba Alinhamento, configuramos a direção e os alinhamentos horizontais e verticais. Após isso, basta salvar.

CTA do portal do candidato

Agora, configuramos o agrupamento que será responsável por alinhar o botão do Portal do candidato no pop-up, com isso, inicialmente configuramos o nome como CTA e em Classe CSS adicionamos a classe custom-button-mobile.

Em Alinhamento, configuramos a direção e os alinhamentos horizontais e verticais conforme imagem abaixo. Feito isso, basta salvar.

Campos ocultos

Para fechar com chave de ouro a configuração do pop-up, basta fecharmos o penúltimo agrupamento e renomeamos para Campos ocultos.

Em Alinhamento, configuramos a direção e os alinhamentos horizontais e verticais conforme imagem abaixo:

Em CSS, configuramos a classe CSS conforme abaixo:

.fields-hidden{

display:none;

}

Campos

Agora no último agrupamento, configuramos o nome de Campose a classe CSS como fields-hidden.

Em Alinhamento, configuramos a direção e os alinhamentos horizontais e verticais conforme imagem abaixo. Feito isso, é só salvar a configuração.

Exemplo de como ficou configurado

Com todos os passos anteriores realizados, clique em salvar no canto superior direito da tela.

❓Ficou com alguma dúvida?

Confira mais conteúdos sobre a Integração com cartão e pix utilizando o EduCONNECT Pay, clicando AQUI.

Se precisar, entre em contato com o nosso time de atendimento!

✅ Este artigo te ajudou?

Se este conteúdo foi útil para a sua demanda, nos avise! Ficaremos felizes em saber.