# Overview: Integration

> Integrate PaymentKit into your application using our APIs, SDKs, and webhooks. Build custom checkout flows, sync billing data, and automate your payment workflows.

# API authentication

All API requests require authentication using your secret API key:

```bash
curl https://app.paymentkit.com/api/{account_id}/customers \
  -H "Authorization: Bearer st_prod_..."
```

<Note>
  Keep your secret API key secure. Never expose it in client-side code or public repositories.
</Note>

# API keys

PaymentKit provides two types of API keys:

| Key Type              | Prefix      | Use                   |
| --------------------- | ----------- | --------------------- |
| **Secret token**      | `st_{env}_` | Server-side API calls |
| **Publishable token** | `pt_{env}_` | Client-side SDKs      |

Where `{env}` is `prod` for production or `stg` for staging (e.g., `st_prod_abc123`, `pt_stg_xyz789`).

**Generate API tokens:**

1. Navigate to **Developers > API Tokens**
2. Click **Create API Token**
3. Copy your tokens and store them securely

<Tip>
  Use staging tokens (`st_stg_`, `pt_stg_`) during development. Staging tokens work with test payment methods and don't process real payments.
</Tip>

# Integration options

Choose the integration approach that best fits your needs:

<CardGroup cols={2}>
  <Card title="Hosted Checkout" icon="solid window-maximize" color="#C6C7F8" href="/guides/hosted-pages/checkout-sessions">
    Redirect customers to a PaymentKit-hosted checkout page. Fastest to implement with no frontend code required.
  </Card>

  <Card title="Embedded Checkout" icon="solid code" color="#C6C7F8" href="/guides/integration/sdk-reference/payment-kit-js/getting-started">
    Embed checkout elements directly in your site for a seamless branded experience.
  </Card>

  <Card title="No-Code" icon="solid mouse-pointer" color="#C6C7F8">
    Use the dashboard to create checkout links and manage billing without writing code.
  </Card>
</CardGroup>

# SDKs

Use our official SDK for easier integration:

<CardGroup cols={2}>
  <Card title="Python" icon="brands python" color="#C6C7F8" href="/guides/integration/sdk-reference/python">
    Official Python SDK for server-side integrations.
  </Card>
</CardGroup>

# Frontend libraries

For client-side integrations, use our frontend library:

<CardGroup cols={2}>
  <Card title="PaymentKit.js" icon="brands js" color="#C6C7F8" href="/guides/integration/sdk-reference/payment-kit-js/getting-started">
    JavaScript library for embedding secure payment elements on your website.
  </Card>
</CardGroup>

# Webhooks

Receive real-time notifications when events occur in your PaymentKit account:

<Card title="Webhooks" icon="solid webhook" color="#C6C7F8" href="/guides/integration/webhooks">
  Set up webhook endpoints to receive event notifications and trigger automated workflows.
</Card>

**Common webhook use cases:**

* Fulfill orders when payments succeed
* Provision access when subscriptions are created
* Send receipts when invoices are paid
* Revoke access when subscriptions are cancelled

# Data synchronization

Keep your systems in sync with PaymentKit:

## Push (Webhooks)

Listen for events and update your database when things change in PaymentKit.

```mermaid
sequenceDiagram
    participant PK as PaymentKit
    participant YS as Your Server
    participant DB as Your Database

    PK->>YS: POST webhook (event data)
    YS->>DB: Update records
```

## Pull (API)

Query the API to fetch current state when needed.

```mermaid
sequenceDiagram
    participant YS as Your Server
    participant PK as PaymentKit

    YS->>PK: GET /api/{account_id}/{resource}
    PK-->>YS: Response (current state)
```

<Tip>
  For best results, use webhooks for real-time updates and API calls for verification and reconciliation.
</Tip>

# Testing

PaymentKit provides a complete test environment:

* **Test API keys** - Process test payments without real charges
* **Test cards** - Simulate various payment scenarios
* **Test mode** - All dashboard features work in test mode

<Card title="Test payments" icon="solid flask" color="#C6C7F8" href="/guides/getting-started/test-payments">
  Learn how to test your integration with test cards and simulated scenarios.
</Card>

# Next steps

<CardGroup cols={2}>
  <Card title="Accept your first payment" icon="solid credit-card" color="#C6C7F8" href="/guides/getting-started/accept-payments">
    Follow our quickstart guide to process your first payment.
  </Card>

  <Card title="Set up webhooks" icon="solid webhook" color="#C6C7F8" href="/guides/integration/webhooks">
    Configure webhook endpoints to receive event notifications.
  </Card>

  <Card title="Embed checkout" icon="solid code" color="#C6C7F8" href="/guides/integration/sdk-reference/payment-kit-js/getting-started">
    Add payment forms directly to your website.
  </Card>

  <Card title="Explore the API" icon="solid book" color="#C6C7F8" href="/api-reference">
    Browse the full API reference documentation.
  </Card>
</CardGroup>