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

# Installation

> Install and set up @khaime/react in your project

# Installation

## Install the Package

<CodeGroup>
  ```bash npm theme={null}
  npm install @khaime/react
  ```

  ```bash yarn theme={null}
  yarn add @khaime/react
  ```

  ```bash pnpm theme={null}
  pnpm add @khaime/react
  ```
</CodeGroup>

## Requirements

* React 17.0.0 or higher
* A Khaime merchant account

<Note>
  The package includes Stripe and Paystack as dependencies - you don't need to install them separately.
</Note>

## Quick Start

### 1. Create a payment on your backend

Call the Khaime API to create a payment intent and get a token:

```typescript theme={null}
// Your backend
const response = await fetch('https://api.khaime.com/v1/payment/intent', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${KHAIME_SECRET_KEY}`,
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    amount: 4400,  // $44.00 in cents
    currency: 'USD',
    customer_email: 'customer@example.com',
    product_id: '123',
  }),
});

const { token } = await response.json();
// Return token to your frontend
```

### 2. Pass the token to your frontend

```typescript theme={null}
// Your API route (e.g., /api/create-checkout)
export async function POST(request: Request) {
  const { productId } = await request.json();

  // Create payment with Khaime
  const { token } = await createKhaimePayment(productId);

  return Response.json({ token });
}
```

### 3. Render the checkout component

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

function CheckoutPage() {
  const [token, setToken] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('/api/create-checkout', {
      method: 'POST',
      body: JSON.stringify({ productId: '123' }),
    })
      .then(res => res.json())
      .then(data => {
        setToken(data.token);
        setLoading(false);
      });
  }, []);

  if (loading) return <div>Loading checkout...</div>;
  if (!token) return <div>Error loading checkout</div>;

  return (
    <KhaimeCheckout
      token={token}
      onSuccess={(result) => {
        console.log('Payment successful!', result);
        window.location.href = '/success';
      }}
      onError={(error) => {
        console.error('Payment failed:', error.message);
      }}
    />
  );
}
```

## What Happens Behind the Scenes

When you render `<KhaimeCheckout token={...} />`:

1. The component decodes the token
2. It detects which payment gateway to use (Stripe, Paystack, etc.)
3. It renders the appropriate UI:
   * **Stripe**: Embedded payment form with card input
   * **Paystack**: Button that opens a popup
   * **Startbutton**: Button that redirects to payment page
4. When payment completes, `onSuccess` is called with the result

You don't need to know which gateway is being used - it's fully abstracted.

## Next Steps

<Card title="Components Reference" icon="puzzle-piece" href="/sdks/react/components">
  Learn about all available components and their props
</Card>