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

# SDK Checkout

> Embutir o checkout da Bob no seu site com cartão, PIX e 3DS.

<Note>
  **Cartão de crédito ainda está em breve.** Hoje o SDK monta o checkout **PIX** no seu site. Os recursos de cartão (campos seguros, tokenização, 3DS) descritos abaixo entram quando o cartão for lançado.
</Note>

Use o `@bobpayments/checkout-sdk` quando você quer uma página própria, mas não quer implementar os campos seguros de cartão. O SDK monta o checkout da Bob dentro do seu site e cuida de cartão, PIX, tokenização, 3DS, fallback e estados de tela.

<Warning>
  O SDK roda no browser, mas a criação da sessão continua no seu backend. Nunca envie `sk_live_` ou `sk_test_` para o frontend.
</Warning>

## Instalação

```bash theme={"system"}
pnpm add @bobpayments/checkout-sdk
# npm install @bobpayments/checkout-sdk · yarn add @bobpayments/checkout-sdk
```

## React

```tsx theme={"system"}
import { BobCheckout } from '@bobpayments/checkout-sdk';

export function PaymentPage({ checkoutToken }: { checkoutToken: string }) {
  return (
    <BobCheckout
      sessionToken={checkoutToken}
      onSuccess={(payment) => {
        window.location.href = `/orders/${payment.id}`;
      }}
      onError={(error) => {
        console.error(error);
      }}
    />
  );
}
```

## JavaScript

```typescript theme={"system"}
import { BobCheckout } from '@bobpayments/checkout-sdk';

const checkout = await BobCheckout.create({
  sessionToken: checkoutToken,
});

checkout.mount('#bob-payment');

// No unmount da página ou troca de sessão:
checkout.destroy();
```

## O que o SDK faz

* Carrega a sessão pelo `checkoutToken`.
* Mostra apenas métodos habilitados, como PIX e cartão.
* Monta campos seguros de cartão, sem inputs próprios para PAN, validade ou CVV.
* Tokeniza o cartão sem expor `pm_...` para a sua aplicação.
* Conduz autenticação 3DS quando a API retorna `nextActionUrl`.
* Aguarda o status final antes de chamar `onSuccess`.
* Esconde IDs internos e detalhes do processamento do comprador.

## Estados

O SDK recupera o estado pela API quando a página é recarregada. Ele não recria cobranças automaticamente no refresh.

```text theme={"system"}
loading_session
  -> form
  -> tokenizing_card
  -> submitting
  -> authenticating_3ds
  -> polling
  -> success
  -> failed
  -> expired|cancelled
```

## Segurança

* Não importe bibliotecas adicionais diretamente para usar o SDK Bob.
* Não salve tokens de cartão, `pm_...` ou corpo bruto de pagamento.
* Não envie dados sensíveis em eventos, analytics ou `postMessage`.
* Configure sua CSP para permitir os domínios necessários para o checkout da Bob.
* Desmonte o checkout com `destroy()` quando a sessão mudar ou o componente sair da tela.

## Próximos passos

<CardGroup cols={2}>
  <Card title="Cartão de crédito" icon="credit-card" href="/pages/credit-card/overview">
    Modos de integração e configuração de cartão.
  </Card>

  <Card title="Criar sessão de checkout" icon="code" href="/pages/checkout/create">
    Crie no backend a sessão que o SDK vai montar.
  </Card>
</CardGroup>