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

# Checkout

> Como criar um fluxo de checkout com **pagamentos.dev**

## O que é um checkout?

O checkout é a etapa final do processo de compra, onde o cliente fornece as
informações de pagamento e conclui a transação. Você pode criar um fluxo de
checkout (utilizando a interface do provedor) ou customizado (com uma interface
própria).

## Criando um checkout

Essa é a forma mais simples de implementar um checkout, onde o cliente é
redirecionado para a página de pagamento do provedor. O provedor cuida de
toda a interface e experiência de pagamento, garantindo segurança e conformidade
com as normas do setor. **Essa é a opção recomendada para a maioria dos casos**.

Para criar um checkout, basta criar um checkout e redirecionar o cliente para a
URL de pagamento fornecida pelo provedor. Por exemplo:

```ts theme={"theme":{"light":"vitesse-light","dark":"vitesse-dark"}}
import { Hono } from 'hono'
import { pg } from './pagamentos'

const app = new Hono()

app.get('/checkout', async (c) => {
  // Informações prévias para exibir na página de checkout
  const url = await pg.checkout.create({
    idempotencyKey: crypto.randomUUID(),
    valor: 1000, // valor em centavos    
    produto: {
      nome: 'Produto Exemplo',
      descricao: 'Descrição do produto',
      imagem: 'https://example.com/imagem.png'
    }
  })

  return c.redirect(url)
})

export default app
```

No exemplo acima, quando o cliente acessar a rota `/checkout`, ele será
redirecionado para a página de pagamento do provedor, onde poderá concluir a
transação.

## Criando um checkout customizado (transparente)

Para criar um checkout customizado (transparente), você precisa criar a
interface de pagamento em seu frontend e enviar os dados para seu backend.

Você pode utilizar os componentes fornecidos pela biblioteca para facilitar a
criação da interface de pagamento. Por exemplo, utilizando React:

```tsx theme={"theme":{"light":"vitesse-light","dark":"vitesse-dark"}}
import { Checkout } from 'pagamentos/react'

function App() {
  return (
    <Checkout
      onSubmit={(data) => {
        // Envie os dados para seu backend
      }}
    />    
  )
}

export default App
```

No exemplo acima, o componente `Checkout` irá renderizar um formulário de
pagamento. Você pode receber os dados do formulário no seu próprio backend e
processar o pagamento utilizando os métodos da biblioteca.

```ts theme={"theme":{"light":"vitesse-light","dark":"vitesse-dark"}}
import { Hono } from 'hono'
import { pg } from './pagamentos'

const app = new Hono()

app.post('/processar-pagamento', async (c) => {
  const data = validarDados(c)

  // Processar o pagamento utilizando os dados recebidos
  const pagamento = await pg.cobrancas.create({
    idempotencyKey: crypto.randomUUID(),
    valor: data.valor,
    metodoPagamento: data.metodoPagamento,
    cliente: data.cliente,
    cartaoCredito: {
      token: data.cartaoCredito.token
    }
  })

  await salvarNoBanco(pagamento)

  return c.json({ success: true })
})

```

Dependendo do método de pagamento escolhido, o processo pode envolver etapas
adicionais, como exibição de QR code para Pix e geração de boleto.

Confira mais detalhes sobre os componentes disponíveis na seção de
[integrações](/integracoes).