Create Payment Session

{
  "success": true,
  "message": "Payment intent created successfully",
  "data": {
    "intent_id": "intent_a1b2c3d4-e5f6-7890-abcd-ef1234567890",
    "token": "eyJpbnRlbnRfaWQiOiJpbnRlbnRfYTFiMmMzZDQt...",
    "payment_url": "https://pay.khaime.com/checkout?data=eyJhbW91bnQ...",
    "expires_at": "2026-01-16T22:00:00.000Z",
    "amount": 5320,
    "currency": "USD",
    "status": "pending",
    "payment_type": "one_time",
    "fee_details": {
      "base_product_price": 5000,
      "transaction_fee": 320,
      "total_amount": 5320,
      "customer_pays_fees": true,
      "is_international": false
    },
    "product": {
      "id": 501,
      "title": "Premium Plan",
      "description": "Monthly premium access",
      "type": "digital"
    },
    "customer": {
      "email": "jane@example.com",
      "first_name": "Jane",
      "last_name": "Doe"
    }
  }
}

import { KhaimeCheckout } from '@khaime/react';
import { useState, useEffect } from 'react';

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

  useEffect(() => {
    // Call your backend to create a payment intent
    fetch('/api/create-checkout', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        productId: 501,
        currency: 'USD',
      }),
    })
      .then((res) => res.json())
      .then((data) => {
        setToken(data.token);
        setLoading(false);
      })
      .catch((err) => {
        setError('Failed to load checkout');
        setLoading(false);
      });
  }, []);

  if (loading) return <div>Loading checkout...</div>;
  if (error) return <div>{error}</div>;
  if (!token) return <div>Something went wrong</div>;

  return (
    <div className="max-w-md mx-auto p-6">
      <h1 className="text-2xl font-bold mb-6">Complete Your Purchase</h1>

      <KhaimeCheckout
        token={token}
        onSuccess={(result) => {
          window.location.href = '/thank-you';
        }}
        onError={(error) => {
          alert(error.message);
        }}
      />
    </div>
  );
}

// Simply redirect to the payment_url from the API response
window.location.href = response.data.payment_url;