VTEX - Levpay Documentation

Bem vindo a Levpay! Este manual vai lhe auxiliar a ativar os meios de pagamento por depósito e transferência no seu e-commerce VTEX. Caso precise de ajuda durante o processo, fale com o responsável pela ativação da sua operação ou entre em contato através do e-mail [email protected].

IMPORTANTE: Para usar o módulo da Levpay na VTEX você vai precisar da AppKey e da AppToken da sua Loja VTEX. Saiba mais sobre essas chaves e veja como obtê-las em: Chaves de acesso

Para ativar sua integração Levpay na VTEX, você deve informar a AppKey e AppToken da sua loja para o seu Gerente de Contas na Levpay.

Instalação

Acesse a sua Loja VTEX pelo painel administrativo e siga a rota: Pagamentos > Configurações
Clique em “Afiliações de Gateways” e depois no botão verde “+” para adicionar a nova afiliação da Levpay:
Após clicar botão verde “+” abrirá uma tela com todos os conectores disponiveis na VTEX, você deve procurar na seção “OUTROS” por “LevPay” e clicar para abrir a página de configuração do Gateway:
Na página de configuração você vai usar a Appkey e Apptoken gerado em sua Loja VTEX, basta preencher os campos e clicar em “Salvar”:

Pronto! O Conector Levpay na plataforma VTEX foi adicionado com sucesso!

Agora é preciso configurar as condições de pagamento na sua loja.

Configurando o Conector Levpay na plataforma

Para continuar o processo volte ao menu de “Configurações” pela rota: Pagamentos > Configurações. Vamos configurar agora a opção de pagamento através da Levpay.

Clique na opção “Condições de Pagamento”, em seguida, no botão verde “+” para adicionar a opção LevPay:
No menu de opções, procure na seção “OUTRO” por “LevPay” e clique para abrir a página de configuração:
Esse será o lugar de colocar condições especiais para o usuário que escolher “Deposito e Transferência” (Levpay), isso se aplica caso julgue conveniente
Para concluir clique em “Inativa” para ativar e em “Salvar”:

Pronto! O Conector Levpay na plataforma VTEX foi adicionado com sucesso!

No ultimo passo vamos configurar a exibição dos dados bancários na tela de “Pedido Confirmado”.

Configurando exibição dos dados bancários:

Acesse a sua Loja VTEX pelo painel administrativo e siga a rota: Configurações da Loja > Checkout:
Selecione o layout (site) da sua Loja VTEX:
Clique no menu “Código”:
Após carregar selecione o arquivo checkout-confirmation-custom.js
Agora inclua o seguinte código no FINAL do arquivo

Copie o código abaixo e o cole no local apontado acima.

IMPORTANTE: O código abaixo deve ser inserido no final do arquivo que já estiver escrito. *NÃO USE O ARQUIVO ABAIXO PARA SUBSTIUIR ARQUIVOS EXISTENTES

//LevPay - START
var _levPay = (function () {
    "use strict";

    function createInfoBank(slug, banks, receipt_url) {
        var bank;
        jQuery.each(banks, function (i, b) {
            if (b.slug === slug) {
                bank = b;
                return;
            }
        });
        if (!bank) {
            return;
        }
        setText(bank, receipt_url);
        setInterval(function () {
            setText(bank, receipt_url);
        }, 1000);
    }

    function setText(bank, receipt_url) {
        var obj = $(".bg-washed-green").find(".w-100");
        if (obj.length == 0 || obj.html().indexOf("Comprovante") !== -1) {
            return;
        }

        var html = '<h4>Faça o depósito ou a transferência para os dados abaixo: </h4>' +
            '<h5>DADOS PARA PAGAMENTO</h5>' +
            '<div class="fl w-100 w-50-ns" style="overflow-wrap: break-word;">' +
            '    <p>' +
            '        Banco: <strong>' + bank.name + '</strong><br/>' +
            '        Agência: <strong>' + bank.account_agency + '</strong><br/>' +
            '        Conta Corrente: <strong>' + bank.account_number + '</strong><br/>' +
            '        Titular: <strong>' + bank.account_owner + '</strong><br/>' +
            '        CNPJ: <strong>' + bank.account_owner_document + '</strong>' +
            '    </p>' +
            '</div>' +
            '<div class="fr mt4 mt0-ns w-30-ns">' +
            '    <a id="print-bank-invoice" href="' + receipt_url + '" ><span class="f6 link dim br1 ph3 pv2 mb2 dib white bg-green"><span>Enviar Comprovante</span></span></a>' +
            '</div>';
        obj.html(html);
    }
    var attemptsLevPay = 0;

    function getOrderLevPay(tid) {
        $.ajax("https://dashboard.levpay.com/publicapi/apps/vtex/status/" + tid + "/details")
            .done(function (data) {
                createInfoBank(data.order.bank_slug, data.banks, data.order.receipt_url);
            })
            .fail(function (jqXHR, textStatus, msg) {
                console.log("Erro getOrderLevPay: ", textStatus, msg);
                attemptsLevPay++;
                if (attemptsLevPay < 3) {
                    setTimeout(function () {
                        getOrderLevPay(tid);
                    }, 1500);
                }
            });
    }
    var attemptsVtex = 0;

    function getOrderVtex(order) {
        $.ajax("/api/checkout/pub/orders/order-group/" + order)
            .done(function (data) {
                var payment = data[0].paymentData.transactions[0].payments[0];
                if (payment.paymentSystemName === "LevPay") {
                    getOrderLevPay(payment.tid);
                }
            })
            .fail(function (jqXHR, textStatus, msg) {
                console.log("Erro getOrderVtex: ", textStatus, msg);
                attemptsVtex++;
                if (attemptsVtex < 3) {
                    setTimeout(function () {
                        getOrderVtex(order);
                    }, 1500);
                }
            });
    }

    function getUrlVars() {
        var vars = {},
            hash;
        var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
        for (var i = 0; i < hashes.length; i++) {
            hash = hashes[i].split('=');
            vars[hash[0]] = hash[1];
        }
        return vars;
    }
    getOrderVtex(getUrlVars().og);
})();
//LevPay - END

Clique no botão “Salvar”:

Está pronto! Agora é só anunciar para os seus clientes e passar a vender mais!