Pagamento Lightbox

Visão Geral

O Pagamento Lightbox ou Checkout Lightbox permite que todo o processo de pagamento seja feito em uma janela que se sobrepõe ao site do vendedor. Dessa forma o comprador não é redirecionado para outra janela ou pop-up para realizar o pagamento.

Checkout Lightbox

Exemplo de loja virtual com checkout lightbox

Integração

O Checkout Lightbox usa várias características do HTML 5 e por isso o primeiro passo é que a sua página seja anotada com o doctype na primeira linha:

<!DOCTYPE html>

Os browsers mais comuns já suportam esse tipo de anotação, e os que ainda não suportam, ela será ignorada.

Atenção: É importante que você utilize a anotação acima descrita. A ausência desta anotação pode causar problemas na abertura do Lightbox em navegadores como Internet Explorer.

A integração com o Checkout Lightbox ocorre através de uma API JavaScript, portanto o passo seguinte é importar na página de pagamento o seguinte JavaScript:

Em Produção:

<script type="text/javascript"
src="https://stc.pagseguro.uol.com.br/pagseguro/api/v2/checkout/pagseguro.lightbox.js">
</script>

Em Sandbox:

<script type="text/javascript"
src="https://stc.sandbox.pagseguro.uol.com.br/pagseguro/api/v2/checkout/pagseguro.lightbox.js">
</script>

Esse JavaScript possui o método PagSeguroLightbox que inicia o processo de pagamento.

Informando os dados de pagamento

Neste passo você encaminhará os dados do seu checkout como os dados dos produtos, dados do cliente e informações sobre a entrega. Para isso você utilizará o código de redirecionamento obtido através da API de Pagamentos do PagSeguro. Esse código pode ser passado por parâmetro String ou em formato JSON. Veja os exemplos abaixo:

Parâmetro String

PagSeguroLightbox(‘1F69A3CF7878ED9994B3DF9DDC706796’);

Parâmetro JSON

PagSeguroLightbox({
    code: ‘1F69A3CF7878ED9994B3DF9DDC706796’
});

Atenção: Para saber como gerar o código de redirecionamento obtido através da API de Pagamentos, recomendamos a leitura da nossa documentação no link a seguir: /referencia-da-api#!/ws_pagseguro_uol_com_br/v2_checkout_xml

Eventos do Checkout Lightbox

O Checkout Lightbox possui eventos de sucesso e abandono que ocorrem em chamadas callback no Javascript.

Esses eventos lhe retornam informações sobre a ação do cliente no lightbox. Os eventos são:

EVENTO DESCRIÇÃO
success Evento que ocorre quando o cliente finaliza o checkout com sucesso. É passado como parâmetro o código da transação.
abort Evento que ocorre quando o cliente não finaliza o checkout e fecha o lightbox.


Basta passar uma funcão JavaScript com nome ‘success’ e ‘abort’ via JSON na chamada de abertura do Lightbox. Veja o exemplo abaixo:

Integração com eventos de callback

PagSeguroLightbox({
    code: '1F69A3CF7878ED9994B3DF9DDC706796'
    }, {
    success : function(transactionCode) {
        alert("success - " + transactionCode);
    },
    abort : function() {
        alert("abort");
    }
});

Atenção: É importante lembrar que as notificações das transações continuam funcionando da mesma maneira. Para saber mais sobre as notificações de pagamento acesse o link abaixo: /documentacao/notificacoes

O Checkout Lightbox funciona na maioria dos navegadores, porém alguns podem não ter suporte a esta funcionalidade.

Quando o Lightbox for chamado em um navegador que não tiver suporte será retornado um false. Assim, caso o navegador não suporte à funcionalidade, você poderá direcionar o cliente para o checkout via redirecionamento.

Exemplo em Produção:

var code = '1F69A3CF7878ED9994B3DF9DDC706796';
var isOpenLightbox = PagSeguroLightbox({
    code: 'code'
}, {
    success : function(transactionCode) {
        alert("success - " + transactionCode);
    },
    abort : function() {
        alert("abort");
    }
});
// Redirecionando o cliente caso o navegador não tenha suporte ao Lightbox
if (!isOpenLightbox){
    location.href="https://pagseguro.uol.com.br/v2/checkout/payment.html?code="+code;
}

Exemplo em Sandbox:

var code = '1F69A3CF7878ED9994B3DF9DDC706796';
var isOpenLightbox = PagSeguroLightbox({
    code: 'code'
}, {
    success : function(transactionCode) {
        alert("success - " + transactionCode);
    },
    abort : function() {
        alert("abort");
    }
});
// Redirecionando o cliente caso o navegador não tenha suporte ao Lightbox
if (!isOpenLightbox){
    location.href="https://sandbox.pagseguro.uol.com.br/v2/checkout/payment.html?code="+code;
}

Exemplo de página html com Checkout Lightbox

Em Produção:

<!DOCTYPE html>
<html>
    <head>
        <title>Minha loja</title>
    </head>
    <body>
        <button onclick="PagSeguroLightbox('38DAA0390C0CECBAA44EDFA10A26C9CA')">Pagar com lightbox</button>
        <script type="text/javascript"
            src="https://stc.pagseguro.uol.com.br/pagseguro/api/v2/checkout/pagseguro.lightbox.js"></script>
    </body>
</html>

Em Sandbox:

<!DOCTYPE html>
<html>
    <head>
        <title>Minha loja</title>
    </head>
    <body>
        <button onclick="PagSeguroLightbox('38DAA0390C0CECBAA44EDFA10A26C9CA')">Pagar com lightbox</button>
        <script type="text/javascript"
            src="https://stc.sandbox.pagseguro.uol.com.br/pagseguro/api/v2/checkout/pagseguro.lightbox.js"></script>
    </body>
</html>

Uma demonstração online do Checkout Lightbox pode ser encontrado em https://sandbox.pagseguro.uol.com.br/lojamodelo/.