Vendas com Pagseguro - #13 Compra com dados dinâmicos

No vídeo de hoje aprenderemos como finalizar a compra pelo PagueSeguro utilizando dados dinâmicos, ou seja, dados digitados pelo usuário e não dados prontos como fizemos na última aula.

Compra com dados dinâmicos no Pagseguro

Para fazer uma transação com envio de dados provenientes do usuário, precisamos primeiramente criar um formulário com os campos necessários a compra. Veja como foi feito no código abaixo:

<div class="FormularioBase">
    <form id="Form1" name="Form1" method="post" action="Controllers/ControllerPedido.php">
        <input type="hidden" id="TokenCard" name="TokenCard">
        <input type="hidden" id="HashCard" name="HashCard">

        <div class="FormularioBase">
            <strong>Dados do Comprador</strong><br>
            <div class="Formulario">
                Nome do comprador: <br>
                <input type="text" id="NomeComprador" name="NomeComprador">
            </div>

            <div class="Formulario">
                CPF do comprador: <br>
                <input type="text" id="CPFComprador" name="CPFComprador" maxlength="11">
            </div>

            <div class="Formulario">
                DDD: <br>
                <input type="text" id="DDDComprador" name="DDDComprador" maxlength="2">
            </div>

            <div class="Formulario">
                Telefone do comprador: <br>
                <input type="text" id="TelefoneComprador" name="TelefoneComprador" maxlength="9">
            </div>
        </div>

        <div class="FormularioBase"><hr></div>

        <div class="FormularioBase">
            <strong>Dados de Entrega:</strong><br>
            <div class="Formulario">
                CEP: <br>
                <input type="text" id="CEP" name="CEP" maxlength="8">
            </div>

            <div class="Formulario">
                Endereco: <br>
                <input type="text" id="Endereco" name="Endereco">
            </div>

            <div class="Formulario">
                Número: <br>
                <input type="text" id="Numero" name="Numero">
            </div>

            <div class="Formulario">
                Complemento: <br>
                <input type="text" id="Complemento" name="Complemento">
            </div>

            <div class="Formulario">
                Bairro: <br>
                <input type="text" id="Bairro" name="Bairro">
            </div>

            <div class="Formulario">
                Cidade: <br>
                <input type="text" id="Cidade" name="Cidade">
            </div>

            <div class="Formulario">
                UF: <br>
                <input type="text" id="UF" name="UF" maxlength="2">
            </div>
        </div>

        <div class="FormularioBase"><hr></div>

        <div class="FormularioBase">
            <strong>Dados do Cartão</strong><br>
            <div class="Formulario">
                Número do Cartão: <br>
                <input type="text" id="NumeroCartao" name="NumeroCartao">
                <input type="hidden" id="BandeiraCartao" name="BandeiraCartao">
                <div class="BandeiraCartao"></div>
            </div>

            <div class="Formulario">
                Nome: <br>
                <input type="text" id="NomeCartao" name="NomeCartao">
            </div>

            <div class="Formulario">
                Mês de Validade: <br>
                <input type="text" id="MesValidade" name="MesValidade" maxlength="2">
            </div>

            <div class="Formulario">
                Ano de Validade: <br>
                <input type="text" id="AnoValidade" name="AnoValidade" maxlength="4">
            </div>

            <div class="Formulario">
                CVV: <br>
                <input type="text" id="CVV" name="CVV" maxlength="3">
            </div>

            <div class="Formulario">
                Quantidade de Parcelas: <br>
                <select name="QtdParcelas" id="QtdParcelas">
                    <option value="">Selecione</option>
                </select>
                <input type="hidden" id="ValorParcelas" name="ValorParcelas">
            </div>

            <div class="Formulario">
                CPF do dono do Cartao: <br>
                <input type="text" id="CPFCartao" name="CPFCartao" maxlength="11">
            </div>
        </div>

        <div class="Formulario">
            <input id="BotaoComprar" name="BotaoComprar" type="submit" value="Comprar">
        </div>
    </form>
</div>

Fizemos também uma estilização básica no CSS:

.FormularioBase{float:left; width: 100%; font-size: 22px; margin-bottom: 15px; font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial;}
.Formulario{float:left; width: 30.333333%; margin: 15px 1.5%;}
    .Formulario input[type='text'],.Formulario select{float:left; width: 80%; height: 40px; font-size: 18px;}
    .Formulario .BandeiraCartao{float:left; width: 20%;}

Como agora estamos recebendo dados vindos do usuário, precisamos alterar também nosso javascript para receber o token do cartão, afinal os dados virão de inputs text. Outro detalhe é que como o CVV normalmente é o último campo preenchido, quando ele perder o foco (blur), chamaremos a função getTokenCard(). O código ficará assim:

//Chamar a função de token
$('#CVV').on('blur',function(){
    getTokenCard();
});

//Obter o token do cartão de crédito
function getTokenCard()
{
    PagSeguroDirectPayment.createCardToken({
        cardNumber: $('#NumeroCartao').val(),
        brand: $('#BandeiraCartao').val(),
        cvv: $('#CVV').val(),
        expirationMonth: $('#MesValidade').val(),
        expirationYear: $('#AnoValidade').val(),
        success: function(response)
        {
           $('#TokenCard').val(response.card.token);
        }
    });
}

No backend receberemos as variáveis e atribuiremos ao nosso array que será enviado via cURL, conforme código abaixo:

include("../config/Config.php");

$TokenCard=$_POST['TokenCard'];
$HashCard=$_POST['HashCard'];
$QtdParcelas=filter_input(INPUT_POST,'QtdParcelas',FILTER_SANITIZE_SPECIAL_CHARS);
$ValorParcelas=filter_input(INPUT_POST,'ValorParcelas',FILTER_SANITIZE_SPECIAL_CHARS);
$CPFCartao=filter_input(INPUT_POST,'CPFCartao',FILTER_SANITIZE_SPECIAL_CHARS);
$NomeComprador=filter_input(INPUT_POST,'NomeComprador',FILTER_SANITIZE_SPECIAL_CHARS);
$CPFComprador=filter_input(INPUT_POST,'CPFComprador',FILTER_SANITIZE_SPECIAL_CHARS);
$DDDComprador=filter_input(INPUT_POST,'DDDComprador',FILTER_SANITIZE_SPECIAL_CHARS);
$TelefoneComprador=filter_input(INPUT_POST,'TelefoneComprador',FILTER_SANITIZE_SPECIAL_CHARS);
$NomeCartao=filter_input(INPUT_POST,'NomeCartao',FILTER_SANITIZE_SPECIAL_CHARS);
$Endereco=filter_input(INPUT_POST,'Endereco',FILTER_SANITIZE_SPECIAL_CHARS);
$Numero=filter_input(INPUT_POST,'Numero',FILTER_SANITIZE_SPECIAL_CHARS);
$Complemento=filter_input(INPUT_POST,'Complemento',FILTER_SANITIZE_SPECIAL_CHARS);
$Bairro=filter_input(INPUT_POST,'Bairro',FILTER_SANITIZE_SPECIAL_CHARS);
$Cidade=filter_input(INPUT_POST,'Cidade',FILTER_SANITIZE_SPECIAL_CHARS);
$UF=filter_input(INPUT_POST,'UF',FILTER_SANITIZE_SPECIAL_CHARS);
$CEP=filter_input(INPUT_POST,'CEP',FILTER_SANITIZE_SPECIAL_CHARS);

$Data["email"]=EMAIL_PAGSEGURO;
$Data["token"]=TOKEN_SANDBOX;
$Data["paymentMode"]="default";
$Data["paymentMethod"]="creditCard";
$Data["receiverEmail"]=EMAIL_PAGSEGURO;
$Data["currency"]="BRL";
$Data["itemId1"] = 1;
$Data["itemDescription1"] = 'Website';
$Data["itemAmount1"] = '500.00';
$Data["itemQuantity1"] = 1;
$Data["notificationURL="]="https://www.meusite.com.br/notificacao.php";
$Data["reference"]="83783783737";
$Data["senderName"]=$NomeComprador;
$Data["senderCPF"]=$CPFComprador;
$Data["senderAreaCode"]=$DDDComprador;
$Data["senderPhone"]=$TelefoneComprador;
$Data["senderEmail"]="c51994292615446022931@sandbox.pagseguro.com.br";
$Data["senderHash"]=$HashCard;
$Data["shippingType"]="1";
$Data["shippingAddressStreet"]=$Endereco;
$Data["shippingAddressNumber"]=$Numero;
$Data["shippingAddressComplement"]=$Complemento;
$Data["shippingAddressDistrict"]=$Bairro;
$Data["shippingAddressPostalCode"]=$CEP;
$Data["shippingAddressCity"]=$Cidade;
$Data["shippingAddressState"]=$UF;
$Data["shippingAddressCountry"]="BRA";
$Data["shippingType"]="1";
$Data["shippingCost"]="0.00";
$Data["creditCardToken"]=$TokenCard;
$Data["installmentQuantity"]=$QtdParcelas;
$Data["installmentValue"]=$ValorParcelas;
$Data["noInterestInstallmentQuantity"]=2;
$Data["creditCardHolderName"]=$NomeCartao;
$Data["creditCardHolderCPF"]=$CPFCartao;
$Data["creditCardHolderBirthDate"]='27/10/1987';
$Data["creditCardHolderAreaCode"]=$DDDComprador;
$Data["creditCardHolderPhone"]=$TelefoneComprador;
$Data["billingAddressStreet"]=$Endereco;
$Data["billingAddressNumber"]=$Numero;
$Data["billingAddressComplement"]=$Complemento;
$Data["billingAddressDistrict"]=$Bairro;
$Data["billingAddressPostalCode"]=$CEP;
$Data["billingAddressCity"]=$Cidade;
$Data["billingAddressState"]=$UF;
$Data["billingAddressCountry"]="BRA";
$BuildQuery=http_build_query($Data);
$Url="https://ws.sandbox.pagseguro.uol.com.br/v2/transactions";
$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);
var_dump($Xml);

Até a próxima ;)