Vendas com Pagseguro - #5 Pagamento por lightbox

06/06/2018

Nesse tutorial faremos o pagamento dinâmico no Pagseguro através da janela lightbox.

Pagamento com Pagseguro Lightbox

Para fazer o pagamento via lightbox precisamos primeiramente embutir o javascript pagseguro.lightbox.js da plataforma Pagseguro e chamar a função PagSeguroLightbox() passando o código hash como referência.

O nosso código html fica bem semelhante ao utilizado na última aula:

<!doctype html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>API Pagseguro</title>
</head>
<body>
    <form name="FormPagamento" id="FormPagamento" action="https://sandbox.pagseguro.uol.com.br/v2/checkout/payment.html" method="post">
        <input id="BotaoPagamento" type="image" src="https://stc.pagseguro.uol.com.br/public/img/botoes/pagamentos/209x48-pagar-azul-assina.gif" name="submit" alt="Pague com PagSeguro - é rápido, grátis e seguro!" />
    </form>

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

No javascript chamaremos a função PagSeguroLightbox() passando o código feito na última aula da seguinte forma:

var Root="http://"+document.location.hostname+"/";

$('#BotaoPagamento').on('click',function(event){
    event.preventDefault();

    $.ajax({
        url: Root+"Controllers/ControllerPagamentoDireto.php",
        type: 'POST',
        dataType:'html',
        success:function(data){
            PagSeguroLightbox(data);
        }
    });
});

Receba as aulas da Webdesign em Foco em Seu Email

Posts Relacionados

Vendas com Pagseguro - #4 Pagamento por redirecionamento

Hoje iniciaremos a parte de programação do nosso curso de Pagamento com Pagseguro da UOL. Vamos criar um botão de pagamento com redirecionamento dinâmico.

Vendas com Pagseguro - #6 Checkout Transparente I

Nessa aula iniciaremos nosso desenvolvimento do checkout transparente do PagSeguro da UOL. Vamos começar pegando a session ID da plataforma de pagamentos.

Pagseguro

Nesse curso será abordado a temática de vendas online com pagseguro através do redirecionamento, lightbox e checkout transparente.