Configurar pagamento com easypay marketplace

6 min de leitura

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

Para utilizar a afiliação easypay no seu marketplace, é necessário:

Instalar o app easypay
Configurar o app easypay
Configurar Webhook easypay
Configurar afiliação easypay

Caso sua loja não seja um marketplace, acesse os artigos Configurar pagamento com easypay 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":1197,"height":548,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":63241,"url":"//images.ctfassets.net/alneenqid6w5/4EEjKGvGS9CtKtpKoIxM6P/e872f7e1484e7498288ac9c214572261/easypay_pt_10.PNG"}}$

${"base64":"","img":{"width":1194,"height":480,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":111244,"url":"//images.ctfassets.net/alneenqid6w5/76UJMX2vIty0CSYqHSyvRM/25620b17b9a968615a66e71505e81c65/easypay_pt_11.png"}}$

${"base64":"","img":{"width":1425,"height":438,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":118579,"url":"//images.ctfassets.net/alneenqid6w5/61bArIKoWC0mVXu8WmRlq7/ca541fe6220d0e6b1f74bf7816fe18a7/easypay_pt_12.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.

No menu lateral do ambiente easypay, clique em Beneficiário.
Copie as informações e salve as informações do Account UID disponíveis em Conta de Margens.

${"base64":" ","img":{"width":1601,"height":568,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":210101,"url":"//images.ctfassets.net/alneenqid6w5/6SjwHG131w2wUNlXLFcCD3/2853c1435b96a9be0f442236d36039c0/easypay_pt_13.PNG"}}$

Refund account ID e Refund account key: easypay refund keys ID e value.

${"base64":"","img":{"width":1221,"height":700,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":140159,"url":"//images.ctfassets.net/alneenqid6w5/3Llo906P3snImorgYKdsEn/5df8f470383b6e45032959a3707fa399/easypay_pt_14.PNG"}}$

${"base64":"","img":{"width":1246,"height":365,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":42476,"url":"//images.ctfassets.net/alneenqid6w5/3CQJbQd6HywrS4FVMNzrIp/6cfaca92ba1aa114173cc97862d325ac/easypay_pt_15.PNG"}}$

${"base64":" ","img":{"width":1531,"height":252,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":25125,"url":"//images.ctfassets.net/alneenqid6w5/28yf4dj3pbum7HuzvO7FHH/49c04507ba1eb16fa85c6964786d50f5/easypay_pt_16.png"}}$

${"base64":" ","img":{"width":1531,"height":334,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":64231,"url":"//images.ctfassets.net/alneenqid6w5/4Syc7o7Twuasd3uFyw9F0W/b22ae772f368d8e25db2723ff88b5276/easypay_pt_17.png"}}$

Os reembolsos são debitados diretamente de uma conta pertencente ao marketplace. Posteriormente, o marketplace deve solicitar ao seller o valor reembolsado.

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:

${"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"}}$

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"}}$

Caso haja mais de uma conta de pagamento em seu marketplace, adicione um link para cada uma das contas existentes.

Configurar afiliação easypay

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

No Admin VTEX, acesse Configurações da loja > Pagamentos > Configurações, ou digite Configurações na barra de busca no topo da página.
Na aba Afiliações de Gateways, clique no botão +.
Clique no conector easypay.
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.

Para configurar os 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.