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

# Home

> Integrate PIX with hosted checkout, the Checkout SDK, or the direct API.

<div className="bob-home not-prose">
  <section className="bob-hero">
    <div className="bob-hero-glow" aria-hidden="true" />

    <div className="bob-hero-content">
      <p className="bob-hero-kicker">Welcome to the Bob Payments documentation</p>
      <h1>Payments that fit your product</h1>

      <p className="bob-hero-description">
        Integrate PIX with hosted checkout, the Checkout SDK, or the direct API.
      </p>

      <a className="bob-hero-button" href="/en/pages/quickstart">
        Start integrating <span aria-hidden="true">→</span>
      </a>
    </div>
  </section>

  <div className="bob-home-surface">
    <div className="bob-home-container">
      <a className="bob-feature-banner" href="/en/pages/sdk/overview">
        <span className="bob-feature-icon" aria-hidden="true">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
            <path d="M9 18l-5-6 5-6" />

            <path d="M15 6l5 6-5 6" />
          </svg>
        </span>

        <span className="bob-feature-copy">
          <span className="bob-feature-title">Official SDKs</span>
          <span>Integrate on the backend or embed the checkout in your site.</span>
        </span>

        <span className="bob-feature-button">Explore SDKs <span aria-hidden="true">→</span></span>
      </a>

      <div className="bob-entry-grid">
        <div className="bob-entry-card">
          <div className="bob-entry-title">
            <span className="bob-entry-icon" aria-hidden="true">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                <path d="M14 3h5a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-5" />

                <path d="M10 17l5-5-5-5" />

                <path d="M15 12H3" />
              </svg>
            </span>

            <h2>Get started with Bob Payments</h2>
          </div>

          <a className="bob-entry-action" href="/en/pages/quickstart">See the quickstart</a>

          <ul>
            <li>Understand the payment flow.</li>
            <li>Create your first session in the sandbox.</li>
            <li>Confirm the result via webhook.</li>
            <li>Prepare your integration for production.</li>
          </ul>
        </div>

        <div className="bob-entry-card">
          <div className="bob-entry-title">
            <span className="bob-entry-icon" aria-hidden="true">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                <path d="M9 18l-5-6 5-6" />

                <path d="M15 6l5 6-5 6" />
              </svg>
            </span>

            <h2>Integration methods</h2>
          </div>

          <a className="bob-entry-action" href="/en/pages/payments">Choose an integration</a>

          <ul>
            <li>Hosted checkout to get started fast.</li>
            <li>Checkout SDK inside your site.</li>
            <li>Direct API to control the PIX flow.</li>
            <li>Server SDKs for Node.js and PHP.</li>
          </ul>
        </div>

        <div className="bob-entry-card">
          <div className="bob-entry-title">
            <span className="bob-entry-icon" aria-hidden="true">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                <path d="M4 19V5a2 2 0 0 1 2-2h9l5 5v11a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z" />

                <path d="M14 3v5h5" />

                <path d="M8 13h8" />

                <path d="M8 17h5" />
              </svg>
            </span>

            <h2>API reference</h2>
          </div>

          <a className="bob-entry-action" href="/en/pages/pix/create">See endpoints</a>

          <ul>
            <li>Bearer key authentication.</li>
            <li>Sessions, transactions, and customers.</li>
            <li>Idempotency and error codes.</li>
            <li>Webhook events and signatures.</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>