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

# SDKs Overview

> Embed Khaime commerce and checkout directly into your site.

# Khaime SDK

`@khaime/sdk` is an embeddable JavaScript library of Web Components that handle the full product-purchase flow — from showing a product to collecting payment — without sending the customer away from your page.

## Three ways to take a payment

<CardGroup cols={3}>
  <Card title="Pay Button" icon="bolt" href="/sdks/embedded/quickstart">
    One-click checkout for a single product. Drop `<khaime-pay-button>` in and you're done.
  </Card>

  <Card title="Storefront + Cart" icon="store" href="/sdks/embedded/storefront-cart">
    Full catalog with multi-item cart and checkout — `<khaime-storefront>` + `<khaime-cart-page>`.
  </Card>

  <Card title="Programmatic" icon="code" href="/sdks/embedded/programmatic">
    Create a checkout session on your server, render the payment UI on the client with `sdk.createPayment()`.
  </Card>
</CardGroup>

## Install

**Script tag (recommended for WordPress / static sites):**

```html theme={null}
<script src="https://api.khaime.com/sdk/v2/khaime.js"></script>
```

<Note>
  In development, use `https://api.khaimedev.com/sdk/v2/khaime.js`. The SDK auto-detects the API base from the script URL.
</Note>

**npm (for bundled apps):**

```bash theme={null}
npm install @khaime/sdk
```

```javascript theme={null}
import { KhaimeSDK } from '@khaime/sdk';
```

## Initialize

```javascript theme={null}
const sdk = KhaimeSDK.init({
  merchantId: 'YOUR_MERCHANT_ID', // required
  apiKey: 'sk_live_...',          // optional; required only for server-authenticated calls
  sandbox: false,                 // true to route to the sandbox environment
  debug: false,                   // true to log API calls and events
});
```

`KhaimeSDK.init` is idempotent — calling it a second time returns the same singleton instance.

The SDK registers four custom elements on init: `<khaime-storefront>`, `<khaime-product-card>`, `<khaime-pay-button>`, and `<khaime-pricing>`.

## What each flow covers

| Flow                                                | Best for                                                                  | Entry point                           | Cart?                  |
| --------------------------------------------------- | ------------------------------------------------------------------------- | ------------------------------------- | ---------------------- |
| [Pay Button](/sdks/embedded/quickstart)             | Single-product checkout, "Buy now" CTAs, digital downloads, subscriptions | `<khaime-pay-button product-id="…">`  | No                     |
| [Storefront + Cart](/sdks/embedded/storefront-cart) | Multi-SKU stores, physical goods, mixed baskets                           | `<khaime-storefront>`                 | Yes                    |
| [Programmatic](/sdks/embedded/programmatic)         | Server-driven pricing, WordPress shortcodes, custom UI                    | `sdk.createPayment({ sessionToken })` | No (or server-managed) |

All three flows share the same backend (`/api/v1/sdk/checkout/*`), emit the same [payment events](/sdks/embedded/events), and support both Stripe and Paystack — the SDK routes to the right gateway based on the transaction currency.

## Next steps

* Start with the [Pay Button quickstart](/sdks/embedded/quickstart) — shortest path to a working payment.
* Review the [events reference](/sdks/embedded/events) to hook into product clicks, cart updates, and payment outcomes.
* Always [verify payments server-side via webhooks](/webhooks/overview) before fulfilling an order.