> ## Documentation Index
> Fetch the complete documentation index at: https://developer.pagou.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Visão geral

> Entenda o que é o Payment Element, quando usá-lo e como ele se encaixa no ciclo de vida de pagamentos com cartão da Pagou.

Payment Element é a integração recomendada no navegador para novos checkouts com cartão.

## Quando usar

* Você está construindo um novo checkout com cartão.
* Você quer campos hospedados em vez de coletar dados brutos do cartão.
* Você precisa de 3D Secure no mesmo fluxo do navegador.
* Seu back-end deve continuar dono da criação da transação e da liberação do pedido.

## Navegador vs back-end

Responsabilidades do navegador:

* carregar o script da Pagou
* montar o campo de cartão
* enviar por `elements.submit(...)`
* continuar o fluxo de challenge no navegador quando necessário

Responsabilidades do back-end:

* autenticar com credenciais secretas
* criar `POST /v2/transactions`
* persistir `external_ref`, ID da transação e `requestId`
* liberar o pedido apenas a partir de webhook ou reconciliação

## Exemplo de requisição do back-end

```json theme={null}
{
  "external_ref": "order_2001",
  "amount": 2490,
  "currency": "BRL",
  "method": "credit_card",
  "token": "pgct_token_from_browser",
  "installments": 1
}
```

## Exemplo de resposta do back-end

```json theme={null}
{
  "success": true,
  "requestId": "0190a2b4-18a7-7de0-9a43-69b7cf261201",
  "data": {
    "id": "018f1f2e-7b43-7c9a-8d3e-1a2b3c4d5e70",
    "status": "three_ds_required",
    "method": "credit_card",
    "next_action": {
      "type": "three_ds_challenge"
    }
  }
}
```

Retorne esse payload ao navegador sem alterações. `next_action` é opaco — `elements.submit(...)` o lê
e conclui a autenticação do cartão para você.

## Erro comum

```json theme={null}
{
  "type": "https://api.pagou.ai/problems/validation-error",
  "title": "Validation Error",
  "status": 422,
  "detail": "The request contains invalid data.",
  "errors": [
    {
      "field": "token",
      "message": "Token is required for credit card payments",
      "code": "invalid_type"
    }
  ]
}
```

## Comece por aqui

* [Início rápido](/pt/frontend/payment-element/quickstart)
* [Aceitar um pagamento](/pt/frontend/payment-element/accept-a-payment)
* [3D Secure](/pt/frontend/payment-element/three-d-secure)