Vendas Online via API com PayPal - #4 Template

29/01/2021

Nesse tutorial faremos o template do nosso sistema de integração com a API do PayPal.

Construindo um template de e-commerce

index.html

Na index vamos implementar o código html dos nossos produtos:

<!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 com PayPal</title>
    <link rel="stylesheet" href="assets/css/style.css">
</head>

<body>
    <header>
        <img src="assets/img/banner.png" alt="Banner Pet Shop">
    </header>

    <main>
        <div class="product">
            <div class="product__title">Casinha</div>
            <div class="product__price">R$ 200,00</div>
            <div class="product__image"><img src="assets/img/casa.jpg" alt="Casinha do cachorro"></div>
            <a href="checkout.php?name=casinha&&price=200">
                <div class="product__button">
                    <div class="product__button--label">Comprar</div>
                </div>
            </a>
        </div>

        <div class="product">
            <div class="product__title">Coleira</div>
            <div class="product__price">R$ 50,00</div>
            <div class="product__image"><img src="assets/img/coleira.jpg" alt="Coleira do cachorro"></div>
            <a href="checkout.php?name=coleira&&price=50">
                <div class="product__button">
                    <div class="product__button--label">Comprar</div>
                </div>
            </a>
        </div>
    </main>

    <footer>
        <strong>Pet Shop Webdesign em Foco</strong><br>
        Endereço tal tal x <br>
        Telefone: (xx) xxxx-xxxx
    </footer>

    <script src="assets/js/javascript.js"></script>
</body>
</html>

assets/css/style.css

Vamos estilizar os elementos html com o CSS:

*{margin:0; padding:0; box-sizing: border-box; font-family: Arial, sans-serif;}

header{width: 100%;}
    header img{width: 100%; vertical-align: middle}

footer{
    width: 100%;
    padding: 30px 5%;
    background: #333;
    color: #fff;
    border-top: 5px solid #fff;
    box-shadow: 0 10px 20px #999;
    font-size: 18px;
    text-align: center;
    line-height: 35px;
}

main{
    display:grid;
    grid-template-columns: repeat(4,20%);
    justify-content: space-evenly;
    background: #eee;
    padding: 30px 0;
}

.product{
    position: relative;
    background: #fff;
    box-shadow: 0 10px 20px #ccc;
    border-radius: 3px;
    border: 1px solid #ddd;
    text-align: center;
}
.product a{color:#333;}
.product__title{
    font-size: 16px;
    background: #333;
    font-weight: bold;
    color:#fff;
    padding: 10px;
}

.product__price{
    font-size: 20px;
    font-weight: bold;
    margin-top: 15px;
}

.product__image img{
    width: 70%;
}

.product__button{
    display: grid;
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    font-size: 17px;
    font-weight: bold;
    z-index: 2;
    background: #000;
    align-items: center;
    justify-content: center;
}

.product:hover .product__button{
    opacity: 0.9;
    transition: opacity 1s;
}

.product__button--label{
    background: #fff;
    padding: 13px;
    border-radius: 2px;
}

checkout.php

Vamos criar o início da nossa página de checkout onde serão realizados os pagamentos:

<!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 com PayPal</title>
    <link rel="stylesheet" href="assets/css/style.css">
</head>

<body>
    <header>
        <img src="assets/img/banner.png" alt="Banner Pet Shop">
    </header>

    <main>
        <?php
        var_dump($_GET);
        ?>
    </main>

    <footer>
        <strong>Pet Shop Webdesign em Foco</strong><br>
        Endereço tal tal x <br>
        Telefone: (xx) xxxx-xxxx
    </footer>

    <script src="assets/js/javascript.js"></script>
</body>
</html>

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

Precisando de aulas particulares? webdesignemfoco@gmail.com

Receba as aulas da Webdesign em Foco em Seu Email

Posts Relacionados

Vendas Online via API com PayPal - #3 Introdução à API

Iniciamos hoje a trabalhar com a API do PayPal e consequentemente com o checkout transparente da plataforma.

Vendas Online via API com PayPal - #5 Pegando o Token

Nesse tutorial começamos a trabalhar literalmente com a API do PayPal, utilizando pra isso a lib PayPal Plus que é a utilizada no Brasil.

PayPal

Nessa playlist você aprenderá como realizar vendas com o facilitador de pagamento PayPal. Aprenderá também a fazer o checklist transparente com PayPal.