Payment window on your terms

The payment window is for you who want more control and a seamless experience in your web store. Integrate it into your site and let people complete purchases where they are, without jumping between pages.

Try for free View documentation

AI Editor

Or just give your AI editor a prompt

Copy this prompt into Cursor, Claude Code or another AI editor — it generates a working checkout integration for your stack in seconds.

You can also describe your project to the Kling AI workspace and it will generate a tailored prompt for you.

Try the AI workspace

Prompt

I need to add Kling payments to my website.

Stack: Next.js / React, hosted on Vercel.

I want to use Kling's embedded checkout overlay so customers
stay on my site. The API base URL is https://api.kling.is.

Here is what I need:
1. A server action that creates a checkout session via
   POST /v1/checkout/sessions with my secret key
2. A "Pay" button component that calls the server action,
   then opens the Kling overlay with kling.checkout({ sessionId })
3. Handle success and error callbacks

My API key is in the KLING_SECRET_KEY environment variable.
Use TypeScript. Keep it simple.

Get Started in minutes

Three steps to a checkout overlay on your site

Fastest — let your AI editor do the work

Paste one sentence and your AI editor scaffolds all three steps for your stack.

“Read https://kling.is/start and help me integrate Kling payments. Ask me about my business and pick the right path.”

Or, step by step

Add the script tag

Include the Kling SDK in your HTML. One line.

HTML

<script src="https://api.kling.is/v1/kling.js"></script>

Create a checkout session (server-side)

Call the Kling API from your server with your secret key. Never expose it to the browser.

TypeScript — Server

// Server-side: create a checkout session
const session = await fetch('https://api.kling.is/v1/checkout/sessions', {
  method: 'POST',
  headers: {
    Authorization: 'Bearer sk_test_your_key_here',
    'Content-Type': 'application/json',
    'Idempotency-Key': crypto.randomUUID(),
  },
  body: JSON.stringify({
    amount: 4990,
    currency: 'ISK',
    items: [{ description: 'Premium subscription', quantity: 1, unit_amount: 4990 }],
  }),
}).then((r) => r.json());

// Return session.id to the frontend

Open the checkout overlay (client-side)

Pass the session ID to the SDK and the overlay opens on top of your page.

TypeScript — Client

// Client-side: open the embedded checkout overlay
const kling = Kling.init();

const result = await kling.checkout({
  sessionId: session.id,
});

if (result.success) {
  console.log('Payment completed!', result.paymentIntentId);
  // Redirect to success page or update UI
}

Why a payment overlay?

Benefits of having the payment window directly on your site

Keep people on your site

The customer completes the purchase on your site, without going elsewhere.

Adapts to your look

The payment window fits your design, as if it were part of the page.

More control

You have complete control of the payment flow.

More sales, less dropout

Fewer opportunities to drop out of checkout, more completed purchases.

Easy to customize

Fine-tuning and customizations to match your needs and look.

Seamless experience

Payment flow that fits into your page and keeps focus on the purchase.

Ready to build?

Get API keys and start testing today. No credit card needed.

Start now View documentation