Pix no Checkout Brick

[lucascp2004]

Boa tarde!
Oi essa semana estive mexando com Checkout Bricks e estou com dificuldade de processar o pagamento com pix. Eu consigo exibir o payment brick e depois que o usuario clica em submit aparece o pix copia e cola, mas depois do pagamento eu não sei como mostrar automaticamente que a compra foi efetuada, eu tô usando back_urls na preferência e callback_url no pagamento, mas essas urls não são chamadas. Eu gostaria de saber como redirecionar o usuario automaticamente após o pagamento, mas isso não é extremamente necessário, e queria saber como receber da api que o pagamento foi pago. De qualquer forma, o pagamento pode ser efetuado.

Na notification_url eu recebo algo como,

{'action': 'payment.updated', 'api_version': 'v1', 'data': {'id': ''}, 'date_created': '2024-10-17T21:47:33Z', 'id': , 'live_mode': True, 'type': 'payment', 'user_id': '<user_id>'}

mas eu não entendo o signficado disso, payment.updated siginfica que foi pago?

Código

BACKEND

def pagar_cartao(request): #a função pagar cartão faz a preferência e o pagamento
    sdk = mercadopago.SDK(config("MERCADO_PAGO_TOKEN"))
    payer = {
        "email": config("EMAIL_COMPRADOR"),
        "firstName": config("FIRST_NAME_COMPRADOR"),
        "lastName": config("LAST_NAME_COMPRADOR"),
        "identification": {
            "type": "CPF",
            "number": config("CPF_COMPRADOR")
        }
    }
    base_url = f"{request.scheme}://{request.get_host()}"
    if request.method == "POST":
        request_values = json.loads(request.body)
        if request_values['payment_method_id']=='pix':
            pg=PagamentoCartao.objects.get(user_id=1000)
            request_options = mercadopago.config.RequestOptions()
            request_options.custom_headers = {
                'x-idempotency-key': str(pg.pix_key)
            }
            valor=request_values['transaction_amount']
            email=request_values['payer']['email']
            payload = {
                "callback_url":base_url+"/payment/preference/success",
                "transaction_amount": valor,
                "payment_method_id": "pix",
                "payer": {
                    "email": email,
                }
            }
            payment= sdk.payment().create(payload, request_options)
            payment_response=payment['response']
            print('payment_response')
            print(payment_response)
            return JsonResponse({
                'api_number': config('MP_PUBLIC_API'),
                'custom_id': payment_response['id'],
                'failure_url':base_url,
                'return_url': base_url,
            })
    valor=float(request.session['valor'])
    pgs=PagamentoCartao.objects.filter(user_id=1000)
    if len(pgs)==1:
        pg=pgs.first()
        preference_response = sdk.preference().get(pg.preference_id)
        preference = preference_response["response"]
        print('Link pagar cartão com preferencia salva')
        return render(request, 'pagamentos/pagar-cartao.html', {
            'valor': valor,
            'preference_id': pg.preference_id,
            'json': preference,
            'payer': payer,
            'api_number': config('MP_PUBLIC_API')
        })
    print('Link pagar cartão sem preferencia salva')
    pg=PagamentoCartao.objects.create(value=valor, user_id=1000)
    preference_data = {
        "auto_return":"all",
        "payer":payer,
        "back_urls": {
            "success": base_url+'/payment/preference/success',
            "failure": base_url+"/payment/preference/failure",
        },
      # o "purpose": "wallet_purchase", permite apenas pagamentos logados
      # para permitir pagamentos como guest, você pode omitir essa propriedade
        "purpose": "wallet_purchase",
        "items": [
            {
                "title": "Meu Item",
                "quantity": 1,
                "unit_price": valor
            }
        ]
    }
    preference_response = sdk.preference().create(preference_data)
    preference = preference_response["response"]
    pg.preference_id=preference['id']
    pg.save()
    return render(request, 'pagamentos/pagar-cartao.html',{
        'valor':valor,
        'preference_id':pg.preference_id,
        'json':preference,
        'payer':preference_data['payer'],
        'api_number':config('MP_PUBLIC_API')
    })

FRONTEND

pagar-cartao.html

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

    <script src="https://sdk.mercadopago.com/js/v2"></script>
    <style>
        body{

            font-size: x-large;
        }
    </style>
    </head>
    <body>


          <div id="statusScreenBrick_container"></div>
        <div id="paymentBrick_container"></div>
        {{json}}
    </body>
    <script type="text/javascript" >
        const mp = new MercadoPago('{{api_number}}');
        const paymentBrick = mp.bricks();
    	const renderPaymentBrick = async (paymentBrick) => {
 const settings = {
   initialization: {
     /*
      "amount" é o valor total a ser pago por todos os meios de pagamento
    com exceção da Conta Mercado Pago e Parcelamento sem cartão de crédito, que tem seu valor de processamento determinado no backend através do "preferenceId"
     */
     amount: {{valor}},
     preferenceId: "{{preference_id}}",
     payer: {
        email: "{{ payer.email }}",
        firstName: "{{ payer.firstName }}",
        lastName: "{{ payer.lastName }}",
        identification: {
            type: "{{ payer.identification.type }}",
            number: "{{ payer.identification.number }}"
        }
    }
   },
   customization: {
     paymentMethods: {

       bankTransfer: "all",
       creditCard: "all",
       debitCard: "all",

     },
   },
   callbacks: {
     onReady: () => {
       /*
        Callback chamado quando o Brick estiver pronto.
        Aqui você pode ocultar loadings do seu site, por exemplo.
       */
     },
     onSubmit: ({ selectedPaymentMethod, formData }) => {
       // callback chamado ao clicar no botão de submissão dos dados
       return new Promise((resolve, reject) => {
         console.log("Enviou Dados");
         fetch("{% url "pagar_cartao" %}", {
           method: "POST",
           headers: {
             "Content-Type": "application/json",

		      "X-CSRFToken": "{{ csrf_token }}",
           },
           body: JSON.stringify(formData),
         })
           .then((response) => response.json())
           .then((response) => {
               console.log('dados recebidos')

             //lidar com a resposta
               {% include 'pagamentos/status-brick.html' %}
             //fim lidar com a resposta
             resolve();
           })
           .catch((error) => {
             // lidar com a resposta de erro ao tentar criar o pagamento
             reject();
           });
       });
     },
     onError: (error) => {
       // callback chamado para todos os casos de erro do Brick
       console.error(error);
     },
   },
 };
 window.paymentBrickController = await paymentBrick.create(
   "payment",
   "paymentBrick_container",
   settings
 );
};
renderPaymentBrick(paymentBrick);
    </script>
</html>

status-brick.html

            const mp = new MercadoPago(response.api_number, { // Add your public key credential
              locale: 'pt'
            });
            const statusBrick = mp.bricks();
            const renderStatusScreenBrick = async (statusBrick) => {
              const settings = {
                initialization: {
                  paymentId: response.custom_id, // Payment identifier, from which the status will be checked
                },
                customization: {
                  visual: {
                    hideStatusDetails: true,
                    hideTransactionDate: true,
                    style: {
                      theme: 'default', // 'default' | 'dark' | 'bootstrap' | 'flat'
                    }
                  },
                  backUrls: {
                    'error': response.failure_url,
                    'return': response.return_url,
                  }
                },
                callbacks: {
                  onReady: () => {
                    $("#paymentBrick_container").hide();
                  },
                  onError: (error) => {
                    console.error(error)
                  },
                },
              };
              window.statusScreenBrickController = await statusBrick.create('statusScreen', 'statusScreenBrick_container', settings);
            };
            renderStatusScreenBrick(statusBrick);

[meliguicarvalho]

Olá! Obrigado por entrar em contato.

Essa notificação que você recebe indica que o pagamento foi atualizado, após receber a notificação, você pode realizar uma chamada como indicado nessa seção da documentação para obter o status atual do pagamento.

Espero que isso tenha ajudado.

[lucascp2004]

Muito obrigado! Agora eu posso processar o pagamento por pix. Eu vi que o Status brick tem um onReady callback que posso usar pra redirecionar o usuário, então meu problema está resolvido. Se vocês quizerem posso fazer um sample do checkout brick em python. Faço?