> ## 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 Quickstart > One-click product checkout in three lines. # Pay Button The fastest way to sell a single product. Drop `` 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](/sdks/embedded/storefront-cart). ## 1. Load the SDK ```html theme={null} ``` ## 2. Initialize ```javascript theme={null} const sdk = KhaimeSDK.init({ merchantId: 'YOUR_MERCHANT_ID', sandbox: true, // omit or set to false in production }); ``` ## 3. Render the button ```html theme={null} ``` ```html theme={null}

``` ## 4. Handle the result ```javascript theme={null} 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](/webhooks/overview) before fulfilling. ## What happens under the hood The customer clicks the button. The SDK calls `POST /api/v1/sdk/checkout/initialize` with `{ product_id, quantity, currency? }` and receives a session token. The SDK lazy-loads the checkout modal and fetches `GET /api/v1/sdk/checkout/session/{sessionToken}` to get the payment gateway credentials. The modal renders Stripe Elements (USD, EUR, GBP, etc.) or Paystack inline (NGN, GHS, ZAR) based on the transaction currency. On submit, the SDK calls `POST /api/v1/sdk/checkout/session/{sessionToken}/confirm` and emits `khaime:payment-success` with the order ID. ## Full example ```html theme={null}

Premium Plan — $50/mo

``` ## 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](/sdks/embedded/events). * Need a cart with multiple items? Move to [Storefront + Cart](/sdks/embedded/storefront-cart). * Creating sessions from your backend (e.g. WordPress)? See [Programmatic checkout](/sdks/embedded/programmatic).