> ## 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.

# Checkout SDK

> Embed Bob's checkout on your site with card, PIX, and 3DS.

<Note>
  **Credit card is still coming soon.** Today the SDK mounts the **PIX** checkout on your site. The card features (secure fields, tokenization, 3DS) described below arrive when card is launched.
</Note>

Use `@bobpayments/checkout-sdk` when you want your own page but don't want to implement the secure card fields. The SDK mounts Bob's checkout inside your site and handles card, PIX, tokenization, 3DS, fallback, and screen states.

<Warning>
  The SDK runs in the browser, but session creation stays on your backend. Never send `sk_live_` or `sk_test_` to the frontend.
</Warning>

## Installation

```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');

// On page unmount or session change:
checkout.destroy();
```

## What the SDK does

* Loads the session by the `checkoutToken`.
* Shows only enabled methods, such as PIX and card.
* Mounts secure card fields, with no inputs of its own for PAN, expiry, or CVV.
* Tokenizes the card without exposing `pm_...` to your application.
* Runs 3DS authentication when the API returns `nextActionUrl`.
* Waits for the final status before calling `onSuccess`.
* Hides internal IDs and processing details from the buyer.

## States

The SDK recovers state from the API when the page is reloaded. It does not automatically recreate charges on refresh.

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

## Security

* Do not import additional libraries directly to use the Bob SDK.
* Do not store card tokens, `pm_...`, or the raw payment body.
* Do not send sensitive data in events, analytics, or `postMessage`.
* Configure your CSP to allow the domains required for Bob's checkout.
* Unmount the checkout with `destroy()` when the session changes or the component leaves the screen.

## Next steps

<CardGroup cols={2}>
  <Card title="Credit card" icon="credit-card" href="/en/pages/credit-card/overview">
    Card integration modes and configuration.
  </Card>

  <Card title="Create a checkout session" icon="code" href="/en/pages/checkout/create">
    Create the session that the SDK will mount on the backend.
  </Card>
</CardGroup>