// 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

// 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 });
}

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);
      }}
    />
  );
}