Skip to main content

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.

​
Pay Button

The fastest way to sell a single product. Drop <khaime-pay-button> onto your page, point it at a product ID, and the SDK handles everything — creating a checkout session, opening the payment modal, and reporting the result. Use this when you have a single product per button (a digital download, a subscription plan, an event ticket, a course). For multi-item baskets, see Storefront + Cart.

​
1. Load the SDK

<script src="https://api.khaime.com/sdk/v2/khaime.js"></script>

​
2. Initialize

const sdk = KhaimeSDK.init({
  merchantId: 'YOUR_MERCHANT_ID',
  sandbox: true, // omit or set to false in production
});

​
3. Render the button

<khaime-pay-button
  merchant-id="YOUR_MERCHANT_ID"
  product-id="456"
  label="Buy now"
  variant="primary"
></khaime-pay-button>

​
4. Handle the result

sdk.on({
  onCheckoutInit: (sessionToken) => {
    console.log('Session created:', sessionToken);
  },
  onPaymentSuccess: (result) => {
    // result: { sessionToken, orderId, amount, currency, paymentMethod }
    console.log('Order placed:', result.orderId);
    window.location.href = '/thank-you?order=' + result.orderId;
  },
  onPaymentError: (err) => {
    console.error('Payment failed:', err.error);
  },
});
onPaymentSuccess means the customer completed the payment UI. Always confirm the order server-side via a webhook before fulfilling.

​
What happens under the hood

1

Click

The customer clicks the button. The SDK calls POST /api/v1/sdk/checkout/initialize with { product_id, quantity, currency? } and receives a session token.
2

Modal opens

The SDK lazy-loads the checkout modal and fetches GET /api/v1/sdk/checkout/session/{sessionToken} to get the payment gateway credentials.
3

Payment

The modal renders Stripe Elements (USD, EUR, GBP, etc.) or Paystack inline (NGN, GHS, ZAR) based on the transaction currency.
4

Confirm

On submit, the SDK calls POST /api/v1/sdk/checkout/session/{sessionToken}/confirm and emits khaime:payment-success with the order ID.

​
Full example

<!DOCTYPE html>
<html>
<body>
  <h1>Premium Plan — $50/mo</h1>

  <khaime-pay-button
    merchant-id="1234"
    product-id="456"
    label="Subscribe"
  ></khaime-pay-button>

  <script src="https://api.khaime.com/sdk/v2/khaime.js"></script>
  <script>
    const sdk = KhaimeSDK.init({ merchantId: '1234', sandbox: true });

    sdk.on({
      onPaymentSuccess: ({ orderId }) => {
        window.location.href = '/welcome?order=' + orderId;
      },
    });
  </script>
</body>
</html>

​
Attributes reference

AttributeTypeRequiredDescription
merchant-idstring / numberyesYour Khaime merchant ID.
product-idstring / numberyesThe product the customer is buying.
labelstringnoButton text. Defaults to the product’s configured CTA.
variantprimary | secondary | outlinenoVisual style. Defaults to primary.
sandboxboolean attributenoForces sandbox mode on this component.

​
Next steps