> ## 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.

# Payment Element para pagamentos com cartão

> Entenda por que o Payment Element é o padrão recomendado para aceitar cartão na Pagou.

Use Payment Element quando estiver construindo ou reconstruindo o checkout.

## Por que a Pagou recomenda

* Campos hospedados reduzem exposição PCI.
* A tokenização acontece no navegador sem o seu back-end tocar dados brutos do cartão.
* A autenticação do cartão é tratada dentro de `elements.submit(...)`, sem campos extras a coletar.
* O contrato do back-end fica simples: criar uma transaction com o token devolvido pelo navegador.

## Requisição do back-end

```bash theme={null}
curl --request POST \
  --url https://api.pagou.ai/v2/transactions \
  --header "Authorization: Bearer SEU_TOKEN" \
  --header "Content-Type: application/json" \
  --data '{
    "external_ref": "order_2001",
    "amount": 2490,
    "currency": "BRL",
    "method": "credit_card",
    "token": "pgct_token_from_browser",
    "installments": 1,
    "buyer": {
      "name": "Ada Lovelace",
      "email": "ada@example.com",
      "document": {
        "type": "CPF",
        "number": "12345678901"
      }
    },
    "products": [
      {
        "name": "Plan upgrade",
        "price": 2490,
        "quantity": 1
      }
    ]
  }'
```

## Exemplo de resposta

```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",
    "amount": 2490,
    "base_price": 2490,
    "currency": "BRL",
    "next_action": {
      "type": "three_ds_challenge"
    },
    "created_at": "2026-03-16T14:00:00.000Z",
    "updated_at": "2026-03-16T14:00:00.000Z",
    "paid_at": null
  }
}
```

## Erro comum

Status `422`

```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"
    }
  ]
}
```

Como corrigir: crie o token no Payment Element antes. Não colete os dados brutos do cartão no seu próprio formulário e envie direto para a API.

## Regra de decisão

* Use Payment Element em novos fluxos de cartão no navegador.
* Mantenha tokenização antiga apenas quando você estiver sustentando um fluxo legado e ainda não puder migrar.

## Continue com

* [Início rápido](/pt/frontend/payment-element/quickstart)
* [Aceitar um pagamento](/pt/frontend/payment-element/accept-a-payment)
* [Migration from WebSDK](/pt/frontend/payment-element/migration-from-websdk)