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

# Início rápido

> Monte o Payment Element, tokenize dados do cartão e crie um pagamento com cartão pelo seu back-end no caminho mais curto possível.

Use esta página para a menor integração funcional do Payment Element.

## Pré-requisitos

* uma chave pública da Pagou
* uma rota no back-end que crie `POST /v2/transactions`
* tratamento de webhook para o estado final do pagamento

## Carregue o script

```html theme={null}
<script src="https://js.pagou.ai/payments/v3.js"></script>
<script>
  Pagou.setEnvironment("sandbox");
</script>
```

## Monte o campo

```js theme={null}
const elements = Pagou.elements({
  publicKey: "pk_test_sua_chave_publica",
  locale: "pt-BR",
  origin: window.location.origin,
});

const card = elements.create("card", { theme: "default" });
card.mount("#card-element");
```

## Envie pelo seu back-end

```js theme={null}
const result = await elements.submit({
  createTransaction: async (tokenData) => {
    const response = await fetch("/api/pay", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        token: tokenData.token,
        amount: 2490,
        installments: 1,
        orderId: "order_2001",
      }),
    });

    const payload = await response.json();
    return payload.data ?? payload;
  },
});
```

## 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": "pending",
    "method": "credit_card"
  }
}
```

## Erro comum

```json theme={null}
{
  "status": "error",
  "error": "Unable to initialize the card field."
}
```

Como corrigir: confirme a chave pública, o `origin` e o ambiente do script. Seu back-end deve devolver o payload da transaction sem remover campos como `id`, `status` e `next_action`.

## Próximos passos

* [Referência do SDK v3](/pt/frontend/payment-element/sdk-reference)
* [Aceitar um pagamento](/pt/frontend/payment-element/accept-a-payment)
* [Aparência e eventos](/pt/frontend/payment-element/appearance-and-events)
* [Testes e troubleshooting](/pt/frontend/payment-element/testing-and-troubleshooting)