Checkout Transparente Pagseguro em PHP, JS e Python - #11 Pagamento com Cartão de Crédito Criptografado I

20/04/2023

Na aula de hoje aprenderemos como realizar o checkout transparente do Pagseguro usando cartão de crédito criptografado e como linguagem de programação o Python.

Pagseguro Crédito - Python

Antes de mais nada, na pasta app criaremos dois diretórios, o templates e o static.

project/urls.py

No arquivo urls vamos criar a rota home:

from django.contrib import admin
from django.urls import path
from app.views import paymentController,home

urlpatterns = [
    path('admin/', admin.site.urls),
    path('PaymentController/', paymentController),
    path('', home)
]

project/settings.py

No arquivo settings vamos fazer referência ao arquivo de template e ao diretório de arquivos estáticos.

import os

STATIC_URL = '/static/'

STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),)

TEMPLATE_DIRS = (os.path.join(BASE_DIR, 'static',"template"),)

app/views.py

Criaremos as seguintes funções na views:

from django.shortcuts import render
from django.http import HttpResponse
import json, requests

def getPublicKey():
    url = 'https://sandbox.api.pagseguro.com/public-keys/'
    headers = {
        'Content-Type': 'application/json',
        'Authorization' : 'SEU_TOKEN'
    }
    body = json.dumps({
        "type": "card"
    })
    reqs = requests.post(url,headers=headers,data=body)
    return reqs.json()['public_key']

def paymentController(request):
     return HttpResponse('Hello World')

def home(request):
    publicKey = getPublicKey()
    return render(request, 'index.html')

Não esqueça de instalar os módulos json e requests:

pip install json
pip install requests

app/templates/index.html

Vamos criar dentro de templates o html com o formulário de pagamento com cartão:

{% load static %}
<!doctype html>
<html lang="en">
<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>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css">
</head>
<body>
    <form method="post" name="formCard" id="formCard" action="">
        <div class="col-6 m-auto">
            <input type="text" name="publicKey" id="publicKey">
            <input type="text" name="encriptedCard" id="encriptedCard">
            <input type="text" class="form-control" name="cardNumber" id="cardNumber" maxlength="16" placeholder="Número do Cartão">
            <input type="text" class="form-control" name="cardHolder" id="cardHolder" placeholder="Nome no Cartão">
            <input type="text" class="form-control" name="cardMonth" id="cardMonth" maxlength="2" placeholder="Mês de Validade do Cartão">
            <input type="text" class="form-control" name="cardYear" id="cardYear" maxlength="4" placeholder="Ano do Cartão">
            <input type="text" class="form-control" name="cardCvv" id="cardCvv" maxlength="4" placeholder="CVV do Cartão">
            <input type="submit" class="btn btn-primary" value="Pagar">
        </div>
    </form>

    <script src="https://assets.pagseguro.com.br/checkout-sdk-js/rc/dist/browser/pagseguro.min.js"></script>
    <script src="{% static 'javascript.js' %}"></script>
</body>
</html>

app/static/javascript.js

Até então nosso arquivo javascript está assim:

(function(win,doc){
    'use script';

    /*var card = PagSeguro.encryptCard({
        publicKey: "MINHA_CHAVE_PUBLICA",
        holder: "Nome Sobrenome",
        number: "4242424242424242",
        expMonth: "12",
        expYear: "2030",
        securityCode: "123"
    });

    var encrypted = card.encryptedCard;*/

})(window,document);

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

Precisa de um professor? webdesignemfoco@gmail.com

Receba as aulas da Webdesign em Foco em Seu Email

Posts Relacionados

Checkout Transparente Pagseguro em PHP, JS e Python - #10 Requisitos Python

Nesta aula iniciaremos a integração do ecommerce com Pagseguro utilizando como linguagem backend o Python.

Checkout Transparente Pagseguro em PHP, JS e Python - #12 Pagamento com Cartão de Crédito Criptografado II

Nesse tutorial finalizaremos a parte de vendas com cartão criptografado utilizando o Pagseguro e a linguagem de programação Python.

Pagseguro

Nesse curso serÃ¡ abordado a temÃ¡tica de vendas online com pagseguro atravÃ©s do redirecionamento, lightbox e checkout transparente.