# Visão geral

A FaciPay JS SDK: botão de pagamento, popup e callbacks para aceitar pagamentos no browser.

A **FaciPay JS SDK** é uma biblioteca de browser que renderiza o botão de pagamento,
abre o popup do checkout e comunica o resultado à sua aplicação através de callbacks.

```js
const facipay = FaciPay(PUBLISHABLE_KEY);

facipay.generateButton({
  createOrder: async () => referenceNumber,
  onApprove: async (data, actions) => { /* ... */ },
}).render('#facipay-button-container');
```

## Modelo mental

<CardGroup cols={3}>
  <Card title="FaciPay()" icon="key" href="/pt/sdk/facipay">
    Inicializa a SDK e valida a `publishableKey`.
  </Card>
  <Card title="generateButton()" icon="square-plus" href="/pt/sdk/generate-button">
    Cria o botão com callbacks e opções.
  </Card>
  <Card title="button.render()" icon="window" href="/pt/sdk/button-object">
    Renderiza no DOM e gere o ciclo de vida.
  </Card>
</CardGroup>

## O que a SDK faz (e não faz)

**Faz:**
- Renderiza o botão "Pagar Agora" (com os ícones FaciPay, Multicaixa Express e Referência EMIS).
- Abre e gere o popup do checkout (comunicação por `postMessage`).
- Expõe callbacks para cada resultado (`onApprove`, `onPending`, `onCancel`, `onError`).

**Não faz:**
- **Não** cria a ordem nem fala diretamente com a API de pagamentos — isso é o seu
  backend, dentro do `createOrder()`.
- **Não** é a fonte da verdade do estado — isso é o webhook.

<Note>
A SDK é **JavaScript de browser** e abre um popup. Não funciona em runtimes nativos
(React Native, Flutter). Para mobile nativo, peça a documentação específica.
</Note>

## Requisitos

- Um browser moderno com popups permitidos para o seu domínio.
- **HTTPS** em produção.
- Um container no DOM **antes** de chamar `.render()`.

<Card title="Próximo passo: Instalação" icon="arrow-right" href="/pt/sdk/installation">
  Carregar a SDK em cada framework.
</Card>