Configurar pagamento com easypay

6 min de leitura

Na VTEX, você pode integrar com o provedor de pagamento easypay. Por meio deste provedor, sua loja pode efetuar vendas utilizando a easypay, MBWay e MultiBanco.

Para utilizar easypay, é necessário:

Instalar o app easypay
Configurar o app easypay
Configurar Webhook easypay
Configurar afiliação easypay
Configurar pagamento com Apple Pay na easypay (opcional)

Caso você seja um marketplace ou seller, acesse os artigos Configurar pagamento com easypay no Marketplace ou Configurar pagamento com easypay seller.

Instalar o app easypay

Para instalar o app easypay, siga os passos abaixo:

No VTEX IO CLI, execute o comando vtex login nomedaconta para realizar o login em sua conta.
Instale o app easypay por meio do comando vtex install easypaypartnerpt.payment-provider-easypay.

Configurar o app easypay

Após realizar a instalação do App easypay, você precisa configurá-lo. Para acessar a tela de configurações, siga os passos abaixo:

No Admin VTEX, acesse Hub de Extensões > Gerenciamento de Aplicativos, ou digite Gerenciamento de Aplicativos na barra de busca no topo da página.
Localize o app Easypay Payment Provider e clique em Configurações.

As informações de configuração estão divididas em quatro seções:

Credenciais easypay (obrigatório)
Pagamento (obrigatório)
Personalização do Checkout easypay (opcional)
Modo sandbox

${"base64":"","img":{"width":968,"height":776,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":51162,"url":"//images.ctfassets.net/alneenqid6w5/5SQRO4e7bYL1o8CG383UBE/03f939e9444e2655b4b9b540a4e521cc/easypay_pt_1.png"}}$

Você deve realizar as configurações abaixo no ambiente easypay. O controle destas configurações é de responsabilidade da easypay, e portanto, a VTEX não garante que os passos abaixo estejam atualizados permanentemente. Utilize este documento como uma referência e consulte sua conta no ambiente easypay para informações atualizadas.

Credenciais easypay

As informações desta seção devem ser preenchidas obrigatoriamente.

Key ID e Key Value: valor e ID da chave easypay.

${"base64":"","img":{"width":762,"height":339,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":26735,"url":"//images.ctfassets.net/alneenqid6w5/53o4nqsgB92I5zBOt2gpwv/0f8e3401fc6b08160fede1cc08cc49ec/easypay_pt_2.PNG"}}$

${"base64":"","img":{"width":1029,"height":474,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":78747,"url":"//images.ctfassets.net/alneenqid6w5/3Qrv6zVnD0aUq4bqHXgrlk/912dd97df028290e81d6f90057093878/easypay_pt_3.PNG"}}$

${"base64":"","img":{"width":1250,"height":273,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":59353,"url":"//images.ctfassets.net/alneenqid6w5/32OyO0qBLXPTJ0aZpXsQIv/849733bfcb8535a272d38c08c39138d2/easypay_pt_4.PNG"}}$

Merchant account UID: identificação da conta do comerciante onde serão depositados os valores das compras dos produtos efetuados na loja. Caso não haja uma conta comerciante separada, é possível utilizar o “Account UID” da conta de pagamentos.

${"base64":"","img":{"width":1075,"height":389,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":39960,"url":"//images.ctfassets.net/alneenqid6w5/gQE8fL64YRCCggxVZB7qX/8e130d01b3cc65871f540233b1693df5/easypay_pt_5.PNG"}}$

${"base64":"","img":{"width":1081,"height":389,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":74441,"url":"//images.ctfassets.net/alneenqid6w5/3S2dkHv1WmJSyAVVn3salh/084650f9a54f09ac4466c7c0c52e6ba8/easypay_pt_6.PNG"}}$

Margin account UID: identificação da conta de margens.

Este campo somente deverá ser preenchido quando a loja for um marketplace e realizar split de pagamentos. Saiba mais em Configurar pagamento com easypay no Marketplace.

Refund account ID e Refund account key: caso não exista conta específica de reembolso, o valor do Key ID deverá ser preenchido no campo Refund account ID, e o valor de Key value em Refund account key.

Pagamento

Nesta seção, você deve indicar se a sua loja utilizará pagamentos assíncronos, síncronos ou ambos. Acesse a documentação easypay para verificar os métodos de pagamentos disponíveis e suas respectivas siglas de identificação.

${"base64":"","img":{"width":1361,"height":705,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":235897,"url":"//images.ctfassets.net/alneenqid6w5/2Im2zLusDEAguft1GN8uf3/cad6490003aff12d7e28cd11f8d93a0d/easypay_pt_7.png"}}$

Tipos de pagamento assíncronos aceites: métodos de pagamento assíncronos disponíveis para o cliente. Preencha apenas com as siglas dos tipos de Assíncronos, separados por vírgula, sem pontos e sem espaços.

Exemplo:

Correto	Incorreto
mb,dd,vi	mb, dd, vi

Caso este campo seja preenchido, será obrigatório o preenchimento do campo Dias para expiração de pagamentos assíncronos.

Tipos de pagamento síncronos aceites: métodos de pagamento síncronos disponíveis para o cliente. Preencha apenas com as siglas dos tipos de Síncronos, separados por vírgula, sem pontos e sem espaços.

Exemplo:

Correto	Incorreto
cc,mbw	cc, mbw

Dias para expiração de pagamentos assíncronos: tempo de expiração (em dias) de pagamentos assíncronos. Preencha apenas o número de dias desejados.

Exemplo:

Correto	Incorreto
10	10 dias, Dez ou 10/05/2023

Personalização do Checkout easypay

A easypay possui um layout de Checkout nativo configurado no app. Veja abaixo:

${"base64":"","img":{"width":876,"height":699,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":129574,"url":"//images.ctfassets.net/alneenqid6w5/1xcsW6xpPx79OOnA2dB1zw/d6a72835fdfeac5d00f0db79078123d5/easypay_pt_8.png"}}$

Caso deseje realizar algum tipo de personalização no Checkout nativo da easypay, preencha um ou mais dos campos nesta seção:

Checkout logo URL: logotipo a ser exibido no Checkout easypay. Preencha com o link do endereço da imagem a ser utilizada.
Checkout background color: cor do background. Preencha o código HEX da cor desejada. Padrão nativo: #ffffff.
Checkout accent color: cor dos destaques, padrão de botões e bordas dos inputs. Preencha o código HEX da cor desejada. Padrão nativo: #0d71f9.
Checkout error color: cor das mensagens de erros. Preencha o código HEX da cor desejada. Padrão nativo: #ff151f.
Checkout input background color: cor do background dos inputs. Preencha o código HEX da cor desejada. Padrão nativo: transparent.
Checkout input border color: cor da borda dos inputs. Preencha o código HEX da cor desejada. Padrão nativo: a mesma cor utilizada no accent color.
Checkout input border radius: permite definir o arredondamento das bordas dos inputs. Preencha com o valor desejado em pixels (apenas números). Padrão nativo: 50 pixels.

Exemplo:

Correto	Incorreto
35	35px

Checkout button background color: cor do background dos botões. Preencha o código HEX da cor desejada. Padrão nativo: a mesma cor utilizada no accent color.
Checkout button border radius: permite definir o arredondamento das bordas dos botões. Preencha com o valor desejado em pixels (apenas números). Padrão nativo: 50 pixels.

Exemplo:

Correto	Incorreto
30	30px

Checkout button box shadow: opção que permite ativar ou desativar a sombra nos botões.
Checkout font family: fontes utilizadas em textos. Preencha com o generic family name, web safe font ou link da fonte . Padrão nativo: Overpass. Exemplo correto: sans-serif, verdana, ou https://fonts.gstatic.com/s/overpass/v12/qFda35WCmI96Ajtm83upeyoaX6QPnlo6_PPbM5qKl8Kuo8AzesE.woff2
Checkout base font size: permite definir o tamanho da fonte no elemento raíz. Preencha com o valor desejado em pixels (apenas números). Padrão nativo: 10 pixels.

Exemplo:

Correto	Incorreto
11	11px

Não utilize fontes acima de 12 pixels, pois poderão distorcer a visualização do layout.

Modo Sandbox

Para habilitar o ambiente de testes de desenvolvimento, selecione a opção Ativar modo sandbox. Você deve utilizar credenciais de teste.

Após concluir o preenchimento dos campos de configuração, clique em Salvar.

Configurar webhook easypay

Para configurar o webhook da easypay, sig os passos abaixo:

https://{nome-da-sua-conta}.myvtex.com/_v/easypaypartnerpt.payment-provider-easypay/webhook

${"base64":"","img":{"width":1340,"height":605,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":139248,"url":"//images.ctfassets.net/alneenqid6w5/2f7UMqQzrIqNbtslGCFxyC/5724ef2676c10b5f1eff6594eafb5412/easypay_pt_9.PNG"}}$

Configurar afiliação easypay

Para configurar a afiliação easypay, siga os passos abaixo:

No Admin VTEX, acesse Configurações da loja > Pagamentos > Provedores, ou digite Provedores na barra de busca no topo da página.
Na tela de provedores, clique no botão Novo provedor.
Digite o nome easypay na barra de busca e clique sobre o nome do provedor.
Preencha os campos Application Key e Application Token com as informações da sua conta easypay.
Em Captura Automática de Pagamento, selecione a opção Use O Comportamento Recomendado Pelo Processador de Pagamentos.
Em Ativar divisão e enviar recebedores?, selecione a opção Sim.
Clique em Salvar.

Configurar pagamento com Apple Pay na easypay (opcional)

Para processar pagamentos com Apple Pay na easypay você precisa primeiramente realizar configurações para habilitar sua loja no ambiente da Apple Pay. Saiba mais em Setting up Merchant ID in Apple Pay.

Para configurar outros métodos de pagamento a serem processados pela easypay, acesse Condições de Pagamento.

Para definir condições especiais sobre os métodos de pagamento, acesse Configurar condições especiais de Pagamento.

Depois de seguir os passos indicados, o conector easypay pode demorar até 10 minutos para aparecer no checkout da sua loja como uma opção de pagamento.