Next.js - pagamentos.dev

O que é Next.js?

Next.js é um framework React para construção de aplicações web full-stack. Ele suporta renderização no servidor, geração estática e outras estratégias modernas. Visite o site oficial do Next.js 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 criar interfaces de pagamento no frontend, use o componente Checkout:

app/checkout/page.tsx

import { Checkout, CheckoutValues } from 'pagamentos/react'

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

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

Backend (API Routes)

No Next.js App Router, crie um route.ts para tratar webhooks:

app/api/webhook/route.ts

import { toNextJs } from 'pagamentos/nextjs'
import { pg } from '@/pagamentos'

export const POST = toNextJs(pg.webhooks.handler)

Confira um exemplo completo de API Route com Next.js + Mercado Pago em: github.com/pagamentosdev/pagamentos/blob/main/examples/with-nextjs/app/api/webhook/route.ts

​O que é Next.js?

​Instalação

​Frontend

​Backend (API Routes)

O que é Next.js?

Instalação

Frontend

Backend (API Routes)