Manual de configuração loja
1) Instalação da APP na loja
– Autenticado na conta da loja, aceda ao menu lateral “Transações” -> “Pagamentos” / “Configurações”, clique no menu superior “Afiliações de gateways” e depois no botão “+”.
– Procure por “easypay” e clique.
– Clique em “Instalar app”.
– Será aberta uma nova aba para instalação, clique em “INSTALAR”.
– Será aberto um pop-up. Clique em “INSTALAR”.
*Após instalar, caso a página não seja redirecionada, atualize o ecrã e aguarde.
2) Configuração do aplicativo
– Para configurar o aplicativo, aceda ao menu lateral e vá em “Configurações da conta” -> “Aplicativos” / “Meus aplicativos”, localize o Easypay Payment Provider e clique em “Configurações”.
A seguinte tela será aberta:
Nesta página é feita a configuração de campos importantes para o funcionamento do Easypay Payment Provider.
A configuração é separada por quatro partes: Credenciais Easypay (OBRIGATÓRIO), Pagamento (OBRIGATÓRIO), Personalização do Checkout Easypay (OPCIONAL) e Sandbox. Preencha atentamente.
Onde encontrar as informações necessárias para cada campo e como preencher:
- Credenciais Easypay (OBRIGATÓRIO)
1.1 Key ID e Key value:
– Autenticado no BackOffice da easypay, na parte superior do menu lateral clique no logótipo da easypay e clique na seta da conta desejada.
– No menu lateral clique em “Web Services” -> “Configuração API 2.0” -> e clique em “Chaves”.
– Copie o ID e a Chave. Caso queira, é possível criar uma nova chave clicando em “+ Nova”.
Volte à configuração do Easypay Payment Provider, cole o ID no campo “Key ID” e a Chave no campo “Key value”.
1.2 Merchant account UID:
Este parâmetro define a conta de comerciante onde serão depositados os valores das compras dos produtos da própria loja. Caso não tenha uma conta de comerciante separada, pode utilizar o “Account UID” da conta de pagamentos.
– Autenticado no BackOffice da easypay, na parte superior do menu lateral clique no logótipo da easypay e na conta “COMERCIANTE 1” clique na seta.
– Copie o “Account UID”.
Volte à configuração do Easypay Payment Provider, cole o “Account UID” no campo “Merchant account UID”.
1.3 Margin account UID:
NÃO PREENCHER.
Refere-se à conta de margens quando a loja é marketplace e utiliza split de pagamentos. Caso este seja o seu cenário, consulte o manual de instalação para Marketplace.
1.4 Refund account ID e Refund account key:
O Refund account ID vai receber o mesmo ID do “Key ID” e o Refund account key vai receber o mesmo valor do “Key value”. Caso tenha conta de refund separada, pode-se colocar as respectivas credenciais aqui.
- Pagamento (OBRIGATÓRIO)
Onde identificar se um método de pagamento é assíncrono ou síncrono: https://docs.quality-utility.aws.easypay.pt/concepts/payment-methods
Onde encontrar as siglas atualizadas disponíveis:
Entre no link: https://docs.quality-utility.aws.easypay.pt/checkout/reference
Em “payment”, clique para expandir os detalhes e aparecerá os métodos disponíveis.
2.1 Tipos de pagamento assíncronos aceites
Define os métodos de pagamento assíncronos que estarão disponíveis para o cliente. Deve ser preenchido apenas com as siglas dos tipos de pagamento ASSÍNCRONOS separados por vírgula, sem pontos e sem espaços.
Como preencher:
Correto: mb,dd,vi,sc
Incorreto: mb, dd, vi, sc
*Caso esse campo esteja preenchido, é obrigatório o preenchimento do campo “Dias para expiração de pagamentos assíncronos”.
2.2 Tipos de pagamento síncronos aceites
Define os métodos de pagamento síncronos que estarão disponíveis para o cliente. Deve ser preenchido apenas com as siglas dos tipos de pagamento SÍNCRONOS separados por vírgula, sem pontos e sem espaços.
Como preencher:
Correto: cc,mbw,uf
Incorreto: cc, mbw, vi, sc
2.3 Dias para expiração de pagamentos assíncronos
Define o tempo de expiração em dias de pagamentos assíncronos. Preencha apenas o número de dias desejado. Exemplo: Se for 10 dias, o preenchimento deve ser 10.
Como preencher:
Correto: 10
Correto: 5
Incorreto: dez
Incorreto: 10/05/2028
- Personalização do Checkout Easypay (OPCIONAL)
Caso não queira personalizar a aparência do seu checkout easypay, então será apresentado assim:
Pode contudo personalizar o tipo de letra, colocar o seu logotipo, e as cores de fundo e dos botões.
3.1 Checkout logo URL
O URL do logótipo do comerciante a apresentar no Checkout Easypay. Preencha o link onde a imagem está hospedada.
3.2 Checkout background color
A cor usada como background do Checkout Easypay. Preencha o código HEX da cor desejada.
Padrão: #ffffff.
3.3 Checkout accent color
A cor usada nos destaques e padrão para botões e bordas dos inputs. Preencha o código HEX da cor desejada.
Padrão: #0d71f9.
3.4 Checkout error color
A cor usada para apresentar erros. Preencha o código HEX da cor desejada.
Padrão: #ff151f.
3.5 Checkout input background color
A cor usada para o background dos inputs. Preencha o código HEX da cor desejada.
Padrão: transparent.
3.6 Checkout input border color
A cor usada para a borda dos inputs. Preencha o código HEX da cor desejada.
Padrão: a mesma utilizada no accent color.
3.7 Checkout input border radius
Permite definir o arredondamento das bordas dos inputs. Preencha com o arredondamento desejado em pixels. Utilize apenas números.
Padrão: 50px.
Como preencher:
Correto: 35
Incorreto: 35px
3.8 Checkout button background color
A cor usada para o background dos botões. Preencha com o código HEX da cor desejada.
Padrão: a mesma utilizada no accent color.
3.9 Checkout button border radius
Permite definir o arredondamento das bordas dos botões. Preencha com o arredondamento desejado em pixels. Utilize apenas números.
Padrão: 50px.
Como preencher:
Correto: 30
Incorreto: 30px
3.10 Checkout button box shadow
Permite ativar ou desativar a sombra nos botões.
3.11 Checkout font family
Define a fonte usada nos textos. Preencha com generic family name, web safe font ou o link da fonte.
Padrão: Overpass.
Como preencher:
Correto: sans-serif
Correto: verdana
Correto: https://fonts.gstatic.com/s/overpass/v12/qFda35WCmI96Ajtm83upeyoaX6QPnlo6_PPbM5qKl8Kuo8AzesE.woff2
3.12 Checkout base font size
Define o valor em pixels para o tamanho da fonte no elemento raíz. Utilize apenas números. *Em valores acima de 12, o layout do checkout quebra.
Padrão: 10.
Como preencher:
Correto: 11
Incorreto: 11px
- Sandbox
Para testes de desenvolvimento, ative o modo sandbox.
*Necessário utilizar credenciais de teste.
– Após o correto preenchimento dos campos, clique em “SALVAR”.
3) Configuração webhook
– Autenticado no BackOffice da Easypay, na parte superior do menu lateral clique no logótipo da Easypay e clique na conta desejada.
– No menu lateral clique em “Web Services” -> “Configuração URL”. No campo “URL: Notificar” preencha com o seguinte link substituindo apenas “nome-da-sua-loja” pelo nome real da sua loja:
https://nome-da-sua-loja.myvtex.com/_v/labsitpartnerpt.payment-provider-easypay/webhook
Por fim, clique em “Submeter”.
4) Configuração do método de pagamento Easypay dentro da VTEX
– Acesse “Transações” -> “Pagamentos” -> “Configurações”, clique em “Afiliações de gateways”.
– Clique no “+”.
– Procure por “easypay” e clique.
– Clique em “Salvar”.
– Agora é possível ver o “easypay” em Afiliações de gateways.
– Na aba Condições de pagamento, clique no “+”
– Procure por “Easypay” e clique.
– Caso deseje, preencha com um nome personalizado de sua escolha para fácil identificação da condição de pagamento. Deixe o status em “Ativo” e certifique-se de que o “Processar com a filiação:” esteja a apontar para “easypay”. Por fim, clique em “Salvar”.
– Em até 10 minutos, Easypay estará pronto para ser utilizado no checkout da loja.
– Checkout exemplo:
*Para inserir um logótipo dos métodos aceites similar ao checkout acima é necessário entrar em contato com a agência que realiza as personalizações da sua loja. Link para os logótipos da Easypay: https://www.easypay.pt/brand-center/