Vendas Online via API com PayPal - #8 Button e Credit Card

Nesse tutorial vamos finalizar o pagamento enviando os dados do cartão de crédito e os dados pessoais do cliente pra API do PayPal.

Finalizando pagamento com PayPal

Bora lá continuar a trabalhar com a API do PayPal.

checkout.php

Iremos criar o botão de finalização do pagamento na nossa página checkout:

<main class="checkout">
    <div id="ppplus"></div>
    <button type="submit" id="continueButton"> Pagar</button>
</main>

assets/css/style.css

Que tal estilizar esse botão recém inserido no css também:

#continueButton{
    display:none;
    width: 30%;
    padding: 15px;
    background: #333;
    color:#fff;
    font-weight: bold;
    font-size: 19px;
    border-radius: 5px;
    margin: 0 auto;
}

assets/js/javascript.js

No javascript vamos mudar o display do botão após o carregamento do checkout. Vamos trazer também as ações a serem desencadeadas após o click no botão.

let json=await response.json();
ppp =await PAYPAL.apps.PPP({
    "approvalUrl": json.links[1].href,
    "placeholder": "ppplus",
    "mode": mode,
    "payerEmail":"webdesignemfoco@gmail.com",
    "payerFirstName":"Thiago",
    "payerLastName":"Romerson",
    "payerTaxId":"35581050600",
    "language":"pt_BR",
    "country":"BR"
});
payment_id=await json.id;
doc.querySelector('#continueButton').style.display='block';

async function messageListener(event) {
    try {
        //this is how we extract the message from the incoming events, data format should look like {"action":"inlineCheckout","checkoutSession":"error","result":"missing data in the credit card form"}
        let data = JSON.parse(event.data);
        if(data.result.state == 'APPROVED'){
            let response=await fetch(getRoot()+'controllers/ControllerPayment.php',{
                method:'POST',
                headers:{
                    Accept:'application/json',
                    'Content-Type':'application/json'
                },
                body:JSON.stringify({
                    payment_id: payment_id,
                    payer_id: data.result.payer.payer_info.payer_id
                })
            });
            let json=await response.json();
            console.log(json);
        }
        //insert logic here to handle success events or errors, if any
    } catch (exc) {
    }
}
if(doc.querySelector('#continueButton')){
    doc.querySelector('#continueButton').addEventListener('click', (event)=>{
        event.preventDefault();
        ppp.doContinue();
        if (win.addEventListener) {
            win.addEventListener("message", messageListener, false);
        } else if (win.attachEvent) {
            win.attachEvent("onmessage", messageListener);
        } else {
            throw new Error("Can't attach message listener");
        }
    });
}

Para fazer testes com o cartão na API do PayPal faça login na sua conta e acesse o link de Teste de Cartão de Crédito com PayPal.

Por hoje é só! Sucesso nos códigos e na vida!

Precisando de aulas particulares? webdesignemfoco@gmail.com