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

# React SDK

> Accept global payments in your React app with a single component

# React SDK

The `@khaime/react` package lets you accept payments from anywhere in the world with just a few lines of code. We handle the complexity of routing to the right payment provider.

```tsx theme={null}
import { KhaimeCheckout } from '@khaime/react';

<KhaimeCheckout
  token={checkoutToken}
  onSuccess={(result) => console.log('Paid!')}
/>
```

## Why Use the React SDK?

<CardGroup cols={2}>
  <Card title="One Integration" icon="plug">
    No need to integrate Stripe, Paystack, or other providers separately. Just pass a token.
  </Card>

  <Card title="Global Coverage" icon="globe">
    Accept USD, EUR, NGN, GHS, KES, ZAR, and 100+ currencies automatically.
  </Card>

  <Card title="Automatic Routing" icon="route">
    We detect the currency and route to the best payment provider for your customer.
  </Card>

  <Card title="White-labeled" icon="eye-slash">
    Your customers never see Stripe or Paystack. It's all your brand.
  </Card>
</CardGroup>

## How It Works

```
┌─────────────────┐         ┌─────────────────┐
│   Your Backend  │ ──────► │   Khaime API    │
│                 │         │                 │
│ Create payment  │         │ Returns: token  │
└─────────────────┘         └─────────────────┘
                                    │
                                    ▼
                            ┌─────────────────┐
                            │  Your Frontend  │
                            │                 │
                            │ <KhaimeCheckout │
                            │   token={token} │
                            │ />              │
                            └─────────────────┘
                                    │
                    ┌───────────────┼───────────────┐
                    ▼               ▼               ▼
              ┌──────────┐   ┌──────────┐   ┌──────────┐
              │  Stripe  │   │ Paystack │   │ Redirect │
              │ (embed)  │   │ (popup)  │   │  (URL)   │
              └──────────┘   └──────────┘   └──────────┘
```

1. Your backend calls the Khaime API to create a payment
2. Khaime returns a `token` containing everything needed
3. Pass the token to `<KhaimeCheckout />`
4. We decode it, detect the gateway, and render the right UI

<Note>
  The token is opaque - don't try to parse it. Just pass it directly to the component.
</Note>

## Supported Payment Methods

| Currency                      | Gateway     | Experience               |
| ----------------------------- | ----------- | ------------------------ |
| USD, EUR, GBP, CAD, AUD, etc. | Stripe      | Embedded payment form    |
| NGN, GHS, ZAR, KES            | Paystack    | Popup checkout           |
| Other regions                 | Startbutton | Redirect to payment page |

## Next Steps

<CardGroup cols={2}>
  <Card title="Installation" icon="download" href="/sdks/react/installation">
    Get started with npm install
  </Card>

  <Card title="Components" icon="puzzle-piece" href="/sdks/react/components">
    Learn about KhaimeCheckout and KhaimePaymentElement
  </Card>
</CardGroup>