Home
Button Mobile Webdesign em Foco
Newsletter Webdesign em Foco
Support Webdesign em Foco
Contribuition Webdesign em Foco
Doe para a Webdesign em Foco
Suporte da Webdesign em Foco
Fechar

Vendas com Pagseguro - #4 Pagamento por redirecionamento

02/06/2018

Olá turma! 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, ou seja, vamos pegar o código hash via API e redirecionarmos para o Pagseguro dinâmicamente.

Pagamento Dinâmico via API com PagueSeguro

O primeiro passo para o redirecionamento dinâmico com o PagSeguro é pegar o hash diretamente do site deles. Para isso utilizaremos a biblioteca Zepto. O formulário será parecido com o utilizado na última aula, porém retiraremos o value do itemCode e mudaremos url passando os valores via GET.

<!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="get">
        <!-- NÃ?O EDITE OS COMANDOS DAS LINHAS ABAIXO -->
        <input type="hidden" name="code" id="code" value="" />
        <input type="hidden" name="iot" value="button" />
        <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 src="Libraries/Javascript.min.js"></script>
</body>
</html>

Posteriormente criaremos o ControllerPagamentoDireto.php que fará um curl ao site do Pagseguro e terá como retorno o código hash necessário para a transação. Nesse php forneceremos todas as informações da compra e do comprador.

$Data["email"]="SEU EMAIL CADASTRADO NO PAGSEGURO";
$Data["token"]="SEU TOKEN DO SANDBOX DO PAGSEGURO";
$Data["currency"]="BRL";
$Data["itemId1"]="1";
$Data["itemDescription1"]="Website desenvolvido pela WEF.";
$Data["itemAmount1"]="1000.00";
$Data["itemQuantity1"]="1";
$Data["itemWeight1"]="1000";
$Data["reference"]="83783783737";
$Data["senderName"]="João da Silva";
$Data["senderAreaCode"]="37";
$Data["senderPhone"]="99999999";
$Data["senderEmail"]="c51994292615446022931@sandbox.pagseguro.com.br";
$Data["shippingType"]="1";
$Data["shippingAddressStreet"]="Rua Antonieta";
$Data["shippingAddressNumber"]="10";
$Data["shippingAddressComplement"]="Casa";
$Data["shippingAddressDistrict"]="Jardim Paulistano";
$Data["shippingAddressPostalCode"]="30690090";
$Data["shippingAddressCity"]="Belo Horizonte";
$Data["shippingAddressState"]="MG";
$Data["shippingAddressCountry"]="BRA";

$BuildQuery=http_build_query($Data);
$Url="https://ws.sandbox.pagseguro.uol.com.br/v2/checkout";

$Curl=curl_init($Url);
curl_setopt($Curl,CURLOPT_HTTPHEADER,Array("Content-Type: application/x-www-form-urlencoded; charset=UTF-8"));
curl_setopt($Curl,CURLOPT_POST,true);
curl_setopt($Curl,CURLOPT_SSL_VERIFYPEER,false);
curl_setopt($Curl,CURLOPT_RETURNTRANSFER,true);
curl_setopt($Curl,CURLOPT_POSTFIELDS,$BuildQuery);
$Retorno=curl_exec($Curl);
curl_close($Curl);

$Xml=simplexml_load_string($Retorno);
echo $Xml->code;

Por fim, faremos a chamada desse processamento através do ajax usando nossa biblioteca Zepto.

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){
            $('#code').val(data);
            $('#FormPagamento').submit();
        }
    });
});

Caso queira utilizar no modo de produção (real), basta mudar o token para o token da sua conta real e retirar o sandbox da url do formulário e do curl php.

Com isso já teremos um redirecionamento para pagamento efetivo de forma dinâmica.

Receba as aulas da Webdesign em Foco em Seu Email
Suporte Webdesign em Foco

Posts Relacionados

Vendas com Pagseguro - #3 Pagamento por email, link e botão
No vídeo de hoje aprenderemos como realizar os pagamentos mais simples disponibilizados pelo Pagseguro. São eles: pagamento por email, link e botão.
Saiba mais!
Vendas com Pagseguro - #5 Pagamento por lightbox
Nesse tutorial faremos o pagamento dinâmico no Pagseguro através da janela lightbox. Para isso utilizaremos a função javascript PagSeguroLightbox.
Saiba mais!
Pagseguro
Nesse curso será abordado a temática de vendas online com pagseguro através do redirecionamento, lightbox e checkout transparente.
Saiba mais!