🚧
Esta é uma documentação de engenharia. Acesse sua plataforma de e-commerce na seção INTEGRAÇÕES do menu lateral caso esteja configurando nossa forma de pagamento em sua loja.

Como instalar

A instalação é bem simples, basta copiar o código abaixo e colocar na página desejada.

<div id="pagaleve-transparent-checkout-root"></div>
<script src="https://transparent-checkout.pagaleve.com.br/pagaleve-transparent-checkout-installer.js"></script>

📘
Verifique junto à sua plataforma de ecommerce a maneira correta de inserir os códigos nos templates de sua loja.

Como utilizar

Iniciando o script

Ao realizar a instalação não será exibido nada em tela, por padrão ficará sempre invisível. Para se comunicar com o script é necessário enviar um comando informando que o script deve inicializar, essa comunicação é feita através do exemplo abaixo:

parent.postMessage({action: 'pagaleve-checkout-init', url: 'https://....' }, '*')

No atributo url, é necessário passar a url do checkout adicionando um parâmetro chamado t com o valor pagaleve, conforme exemplo completo abaixo:

const checkoutURL = 'https://checkout.pagaleve.com.br/?c=123&m=123p=123&a=123&u=123&cb=123&pm=split'
const urlWithParameter = checkoutURL + '&t=pagaleve' //aqui está sendo concatenado o parametro t com o valor pagaleve
 
parent.postMessage({action: 'pagaleve-checkout-init', url: urlWithParameter }, '*')

📘
Verifique e utilize os valores corretos para cada variável da query string acima,. Neste exemplo estamos usando valores fictícios. Caso tenha dúvidas entre em contato com a engenharia da Pagaleve.

Nessa etapa, uma modal irá aparecer sobre a tela com o nosso fluxo normal de checkout para ser utilizado pelo cliente.

Pagamento ou cancelamento do checkout

Não é possível fechar a modal nem iniciar novamente, rejeitamos tentativas de fechar ou de duplicidade de inicialização.

Quando o checkout finalizar, seja por cancelamento ou pagamento, nosso script irá informar e fechar automaticamente, para saber quando isso acontece, basta executar o comando abaixo:

window.addEventListener('message', function(event){ 
    if(event.data.action === 'pagaleve-checkout-finish'){
        console.log('message', event.data) // será retornando um objeto contendo a url de cancelamento/aprovação e qual foi o motivo da finalização
        console.log(event.data.reason) // cancel/confirm
        console.log(event.data.value) // https://sualoja.com.br/cancelament / https://sualoja.com.br/aprovacao
        console.log(event.data) // { reason: 'cancel', value: 'https://sualoja.com.br/cancelamento' }
    }
})

Fluxograma

Através desse fluxograma é possível visualizar o fluxo inteiro de comunicação: