Vendas com Pagseguro - #12 Finalizando compra com cartão

Hoje finalizaremos nossa primeira compra através do checkout transparente do PagueSeguro pelo cartão de crédito.

Comprando via cartão de crédito pelo Pagseguro

Para realizar a transação via checkout transparente pelo modo cartão de crédito precisamos fazer um cURL para a API do PagSeguro passando os dados fundamentais para a transação. Para tanto, no nosso html criaremos um formulário com action para ControllerPedido.php.

<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">
    <input type="text" id="NumeroCartao" name="NumeroCartao">
    <div class="BandeiraCartao"></div>
    <select name="QtdParcelas" id="QtdParcelas">
        <option value="">Selecione</option>
    </select>
    <input type="text" id="ValorParcelas" name="ValorParcelas">
    <input id="BotaoComprar" name="BotaoComprar" type="submit" value="Comprar">
</form>

Criaremos agora nosso ControllerPedido.php da seguinte forma:

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);

$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"]='José Comprador';
$Data["senderCPF"]='22111944785';
$Data["senderAreaCode"]='37';
$Data["senderPhone"]='99999999';
$Data["senderEmail"]="c51994292615446022931@sandbox.pagseguro.com.br";
$Data["senderHash"]=$HashCard;
$Data["shippingType"]="1";
$Data["shippingAddressStreet"]='Av. Brig. Faria Lima';
$Data["shippingAddressNumber"]='1384';
$Data["shippingAddressComplement"]='5 Andar';
$Data["shippingAddressDistrict"]='Jardim Paulistano';
$Data["shippingAddressPostalCode"]='01452002';
$Data["shippingAddressCity"]='Sao Paulo';
$Data["shippingAddressState"]='SP';
$Data["shippingAddressCountry"]="BRA";
$Data["shippingType"]="1";
$Data["shippingCost"]="0.00";
$Data["creditCardToken"]=$TokenCard;
$Data["installmentQuantity"]=$QtdParcelas;
$Data["installmentValue"]=$ValorParcelas;
$Data["noInterestInstallmentQuantity"]=2;
$Data["creditCardHolderName"]='Jose Comprador';
$Data["creditCardHolderCPF"]='22111944785';
$Data["creditCardHolderBirthDate"]='27/10/1987';
$Data["creditCardHolderAreaCode"]='37';
$Data["creditCardHolderPhone"]='99999999';
$Data["billingAddressStreet"]='Av. Brig. Faria Lima';
$Data["billingAddressNumber"]='1384';
$Data["billingAddressComplement"]='5 Andar';
$Data["billingAddressDistrict"]='Jardim Paulistano';
$Data["billingAddressPostalCode"]='01452002';
$Data["billingAddressCity"]='Sao Paulo';
$Data["billingAddressState"]='SP';
$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);

O nosso javascript ficará assim:

//Exibe a quantidade e valores das parcelas
function getParcelas(Bandeira)
{
    PagSeguroDirectPayment.getInstallments({
        amount: Amount,
        maxInstallmentNoInterest: 2,
        brand: Bandeira,
        success: function(response)
        {
            $.each(response.installments,function(i,obj){
                $.each(obj,function(i2,obj2){
                    var NumberValue=obj2.installmentAmount;
                    var Number= "R$ "+ NumberValue.toFixed(2).replace(".",",");
                    var NumberParcelas= NumberValue.toFixed(2);
                    $('#QtdParcelas').show().append(<option value='"+obj2.quantity+"' label='"+NumberParcelas+"'>"+obj2.quantity+" parcelas de "+Number+</option>");
                });
            });
        }
    });
}

//Pegar o valor da parcela
$("#QtdParcelas").on('change',function(){
    var ValueSelected=document.getElementById('QtdParcelas');
    $("#ValorParcelas").val(ValueSelected.options[ValueSelected.selectedIndex].label);
});

Na próxima aula vamos dar uma organizada no layout desse checkout.