Skip to main content

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.

O que é Angular?

Angular é um framework de desenvolvimento web criado pelo Google, usado para construir aplicações de página única (SPAs) robustas para cenários corporativos. Visite o site oficial do Angular para saber mais.
Angular é um framework 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

Seu primeiro componente

Vamos usar o componente Checkout para criar um checkout de pagamento simples:
checkout.component.ts
import { Component } from '@angular/core'
import { CommonModule } from '@angular/common'
import { Checkout, CheckoutValues } from 'pagamentos/angular'

@Component({
  selector: 'app-checkout',
  standalone: true,
  imports: [CommonModule, Checkout],
  template: `
    <pagamentos-checkout 
      [metodoPagamento]="metodos"
      (onSubmit)="onSubmit($event)"
    />
  `
})
export class CheckoutComponent {
  metodos = ['pix', 'boleto', 'cartaoCredito']

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