Components

KhaimeCheckout

The main checkout component with order summary and payment form.

import { KhaimeCheckout } from '@khaime/react';

<KhaimeCheckout
  token="eyJ..."
  onSuccess={(result) => console.log('Paid!', result)}
  onError={(error) => console.error(error)}
/>

Props

string

required

The payment token from your Khaime API. This is an opaque string - pass it directly without parsing.

string

Override the product name shown in the order summary. If not provided, uses the name from the token.

string

Override the product image URL. If not provided, uses the image from the token.

boolean

default:"true"

Whether to show the order summary section above the payment form.

string

Custom text for the submit button. Defaults to “Pay ”.

string

URL to redirect to after 3D Secure authentication (Stripe only). Defaults to current page.

(result: PaymentResult) => void

Called when payment is successful.

(error: PaymentError) => void

Called when payment fails.

() => void

Called when the payment form is ready to accept input.

() => void

Called when user closes the payment popup (Paystack only).

Example with All Props

<KhaimeCheckout
  token={token}
  productName="Premium Plan"
  productImage="https://example.com/product.png"
  showOrderSummary={true}
  submitButtonText="Subscribe Now"
  returnUrl="https://myapp.com/checkout/complete"
  onSuccess={(result) => {
    console.log('Gateway used:', result.gateway);
    console.log('Payment ID:', result.paymentIntentId || result.reference);
    router.push('/success');
  }}
  onError={(error) => {
    toast.error(error.message);
  }}
  onReady={() => {
    console.log('Checkout ready');
  }}
  onClose={() => {
    console.log('User closed popup');
  }}
/>

KhaimePaymentElement

A minimal payment form without the order summary. Use this when you want to build your own checkout UI.

import { KhaimePaymentElement } from '@khaime/react';

<KhaimePaymentElement
  token="eyJ..."
  onSuccess={(result) => console.log('Paid!')}
/>

Props

string

required

The payment token from your Khaime API.

string

URL to redirect to after 3D Secure authentication.

string

CSS class name to apply to the container.

(result: PaymentResult) => void

Called when payment is successful.

(error: PaymentError) => void

Called when payment fails.

() => void

Called when the payment form is ready.

() => void

Called when user closes the popup (Paystack only).

Example: Custom Checkout Layout

function CustomCheckout({ token, product }) {
  return (
    <div className="checkout-container">
      {/* Your custom order summary */}
      <div className="order-summary">
        <img src={product.image} alt={product.name} />
        <h2>{product.name}</h2>
        <p className="price">${product.price}</p>
      </div>

      {/* Just the payment form */}
      <KhaimePaymentElement
        token={token}
        className="payment-form"
        onSuccess={(result) => {
          // Handle success
        }}
      />
    </div>
  );
}

Types

PaymentResult

Returned in the onSuccess callback.

interface PaymentResult {
  success: boolean;
  paymentIntentId?: string;  // Present for Stripe payments
  reference?: string;        // Present for Paystack payments
  gateway: 'stripe' | 'paystack' | 'startbutton';
}

PaymentError

Returned in the onError callback.

interface PaymentError {
  code: string;
  message: string;
}

Common Error Codes

Code	Description
`card_declined`	The card was declined
`insufficient_funds`	Insufficient funds
`expired_card`	The card has expired
`invalid_cvc`	Invalid CVC code
`processing_error`	Error processing the payment
`missing_credentials`	Payment token is invalid or missing data

Styling

The components come with minimal default styling. You can customize the appearance:

Using className

<KhaimePaymentElement
  token={token}
  className="my-payment-form"
/>

.my-payment-form button {
  background-color: #your-brand-color;
}

Using Stripe Appearance API

For Stripe payments, you can customize the payment element appearance:

<KhaimeCheckout
  token={token}
  appearance={{
    theme: 'stripe',
    variables: {
      colorPrimary: '#0070f3',
      borderRadius: '8px',
    },
  }}
/>

The appearance prop only affects Stripe payments. Paystack uses its own popup styling.

​Components

​KhaimeCheckout

​Props

​Example with All Props

​KhaimePaymentElement

​Props

​Example: Custom Checkout Layout

​Types

​PaymentResult

​PaymentError

​Common Error Codes

​Styling

​Using className

​Using Stripe Appearance API

Components

KhaimeCheckout

Props

Example with All Props

KhaimePaymentElement

Props

Example: Custom Checkout Layout

Types

PaymentResult

PaymentError

Common Error Codes

Styling

Using className

Using Stripe Appearance API