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

HTML attribute
Programmatic

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

<div id="pay"></div>
<script>
  sdk.payButton('#pay', {
    productId: 456,
    label: 'Buy now',
    variant: 'primary', // 'primary' | 'secondary' | 'outline'
  });
</script>

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

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.

Modal opens

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

Payment

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

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

Attribute	Type	Required	Description
`merchant-id`	string / number	yes	Your Khaime merchant ID.
`product-id`	string / number	yes	The product the customer is buying.
`label`	string	no	Button text. Defaults to the product’s configured CTA.
`variant`	`primary` \| `secondary` \| `outline`	no	Visual style. Defaults to `primary`.
`sandbox`	boolean attribute	no	Forces sandbox mode on this component.

Next steps

Listen for richer events — see the events reference.
Need a cart with multiple items? Move to Storefront + Cart.
Creating sessions from your backend (e.g. WordPress)? See Programmatic checkout.

SDKs

Purchase Flow

Pay Button Quickstart

Pay Button

1. Load the SDK

2. Initialize

3. Render the button

4. Handle the result

What happens under the hood

Full example

Attributes reference

Next steps

​Pay Button

​1. Load the SDK

​2. Initialize

​3. Render the button

​4. Handle the result

​What happens under the hood

​Full example

​Attributes reference

​Next steps

Pay Button

1. Load the SDK

2. Initialize

3. Render the button

4. Handle the result

What happens under the hood

Full example

Attributes reference

Next steps