React - pagamentos.dev

O que é React?

React é uma biblioteca JavaScript para construir interfaces de usuário. Ele é amplamente utilizado para criar aplicações web interativas e responsivas. Visite o site oficial do React para saber mais.

React é uma biblioteca de frontend. Isso significa que ele é executado no navegador do usuário e você pode usá-lo para criar interfaces de pagamento.Para lidar com a lógica de pagamento, como criar cobranças, processar pagamentos e lidar com webhooks, você ainda precisará de um backend. Confira o guia de integração com Backend para saber como configurar.

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

Seu primeiro componente

Vamos usar o componente Checkout para criar um checkout de pagamento simples:

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

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

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

import { createRoot } from 'react-dom/client'
import { CheckoutPage } from './checkout'

const root = createRoot(document.getElementById('root')!)
root.render(<CheckoutPage />)

Ao carregar a página, você verá um formulário de checkout com os métodos de pagamento especificados. Quando o usuário preencher o formulário e enviar, os dados do pagamento serão registrados no console.

Next.js Svelte

​O que é React?

​Instalação

​Seu primeiro componente

O que é React?

Instalação

Seu primeiro componente