> ## 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.
# Astro
> Integrando o Astro com o **pagamentos.dev**
## O que é Astro?
Astro é um framework web que prioriza conteúdo e permite construir websites
rápidos com qualquer linguagem de UI que você preferir.
Visite o site oficial do [Astro](https://astro.build/) para saber mais.
## Instalação
Para começar o desenvolvimento, instale a biblioteca com seu gerenciador de
pacotes favorito:
```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
```
## Frontend
Para usar componentes de pagamento em páginas Astro, utilize a diretiva
`client:load` para hidratação:
```astro --- theme={"theme":{"light":"vitesse-light","dark":"vitesse-dark"}}
import { Checkout } from 'pagamentos/astro'
import CheckoutComponent from '../components/Checkout.vue'
---
Checkout
```
## Backend (API Routes)
Astro suporta API routes para tratamento de webhooks. Crie um endpoint em
`src/pages/api/webhook.ts`:
```ts src/pages/api/webhook.ts theme={"theme":{"light":"vitesse-light","dark":"vitesse-dark"}}
import type { APIRoute } from 'astro'
import { toAstro } from 'pagamentos/astro'
import { pg } from '../../pagamentos'
export const POST: APIRoute = toAstro(pg.webhooks.handler)
```
> Confira um exemplo completo de API Route com Astro + Mercado Pago em:
> [github.com/pagamentosdev/pagamentos/blob/main/examples/with-astro/src/pages/api/webhook.ts](https://github.com/pagamentosdev/pagamentos/blob/main/examples/with-astro/src/pages/api/webhook.ts)