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

# TanStack Start

> Integrando o TanStack Start com o **pagamentos.dev**

## O que é TanStack Start?

TanStack Start é um framework de roteamento e renderização baseado em React,
construído sobre TanStack Router para fornecer roteamento com tipagem segura e
renderização no servidor.

Visite o site oficial do [TanStack Start](https://tanstack.com/start) para saber
mais.

## Instalação

Para começar o desenvolvimento, instale a biblioteca com seu gerenciador de
pacotes favorito:

<CodeGroup>
  ```bash npm theme={"theme":{"light":"vitesse-light","dark":"vitesse-dark"}}
  npm i pagamentos
  ```

  ```bash Yarn theme={"theme":{"light":"vitesse-light","dark":"vitesse-dark"}}
  yarn add pagamentos
  ```

  ```bash pnpm theme={"theme":{"light":"vitesse-light","dark":"vitesse-dark"}}
  pnpm add pagamentos
  ```

  ```bash Bun theme={"theme":{"light":"vitesse-light","dark":"vitesse-dark"}}
  bun i pagamentos
  ```
</CodeGroup>

## Frontend

Crie uma página com `createFileRoute` para exibir o checkout:

```tsx src/routes/checkout.tsx theme={"theme":{"light":"vitesse-light","dark":"vitesse-dark"}}
import { createFileRoute } from '@tanstack/react-router'
import { Checkout, CheckoutValues } from 'pagamentos/react'

export const Route = createFileRoute('/checkout')({
  component: CheckoutPage
})

function CheckoutPage() {
  async function onSubmit(data: CheckoutValues) {
    console.log('Dados do pagamento:', data)
  }

  return (
    <Checkout 
      onSubmit={onSubmit}
      metodoPagamento={[
        'pix',
        'boleto',
        'cartaoCredito'
      ]}      
    />
  )
}
```

## Backend (API Routes)

TanStack Start usa `createFileRoute` com `server.handlers` para definir API routes:

```ts src/routes/api/webhook.ts theme={"theme":{"light":"vitesse-light","dark":"vitesse-dark"}}
import { createFileRoute } from '@tanstack/react-router'
import { toTanStackStart } from 'pagamentos/tanstack-start'
import { pg } from '../../pagamentos'

export const Route = createFileRoute('/api/webhook')({
  server: {
    handlers: {
      POST: toTanStackStart(pg.webhooks.handler)
    }
  }
})
```

> Confira um exemplo completo de API Route com TanStack Start + Mercado Pago em:
> [github.com/pagamentosdev/pagamentos/blob/main/examples/with-tanstack-start/app/routes/api/webhook.ts](https://github.com/pagamentosdev/pagamentos/blob/main/examples/with-tanstack-start/app/routes/api/webhook.ts)