Skip to main content

​
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 para saber mais.

​
Instalação

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

​
Frontend

Para usar componentes de pagamento em páginas Astro, utilize a diretiva client:load para hidratação:
---
import { Checkout } from 'pagamentos/astro'
import CheckoutComponent from '../components/Checkout.vue'
---

<html lang="pt-BR">
  <head>
    <title>Checkout</title>
  </head>
  <body>
    <CheckoutComponent client:load />
  </body>
</html>

​
Backend (API Routes)

Astro suporta API routes para tratamento de webhooks. Crie um endpoint em src/pages/api/webhook.ts:
src/pages/api/webhook.ts
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