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

Instalação

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

npm i pagamentos

yarn add pagamentos

pnpm add pagamentos

bun 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

​O que é Astro?

​Instalação

​Frontend

​Backend (API Routes)

O que é Astro?

Instalação

Frontend

Backend (API Routes)