> ## Documentation Index
> Fetch the complete documentation index at: https://docs.upag.io/llms.txt
> Use this file to discover all available pages before exploring further.

# SDKs

> SDKs npm upag (Node) e upag-js (browser) para integrar pagamentos, checkout e webhooks do Billing.

Bibliotecas npm que chamam `https://api.billing.upag.io/v1` com tipos e helpers de erro. Contratos HTTP completos ficam na aba **Referência**.

| npm                                                | Runtime             | Chave    |
| -------------------------------------------------- | ------------------- | -------- |
| [`upag`](https://www.npmjs.com/package/upag)       | Node.js (upag-node) | `sk_...` |
| [`upag-js`](https://www.npmjs.com/package/upag-js) | Browser             | `pk_...` |

## Qual pacote usar

<CardGroup cols={2}>
  <Card title="Node.js (upag-node)" icon="node-js" color="#68A063" href="./server">
    Pagamentos, assinaturas, faturas, webhooks, checkout no servidor.
  </Card>

  <Card title="Browser (upag-js)" icon="browser" color="#06AEDD" href="./frontend">
    Sessão de checkout, catálogo, antifraud no client.
  </Card>
</CardGroup>

## Dúvidas comuns

<Accordion title="Onde criar a sessão de checkout?">
  No client: `upag-js` + `pk_...`. No servidor: pacote `upag` + `sk_...`. Os dois falam com o mesmo recurso REST de checkout sessions.
</Accordion>

<Accordion title="Preciso de SDK?">
  Não. Requests `Authorization: Bearer` + JSON contra a Referência são suficientes.
</Accordion>

<Accordion title="Onde guardar cada chave?">
  Secret (`sk_...`) apenas no backend. Public (`pk_...`) pode ir no bundle do front. Não versione secret em git.
</Accordion>

## Docs relacionadas

<CardGroup cols={2}>
  <Card title="Quickstart" icon="rocket" href="../guides/quickstart">
    Primeiro fluxo com `upag`.
  </Card>

  <Card title="Webhooks" icon="webhook" href="../webhooks/overview">
    Eventos após pagamento e assinatura.
  </Card>

  <Card title="Checkout hospedado" icon="cart-shopping" href="../guides/checkout-hosted">
    Redirect e confirmação.
  </Card>

  <Card title="Simulador" icon="flask" href="../simulator">
    Testes em sandbox.
  </Card>
</CardGroup>