# Add payments to a v0 app

How to take card payments in a Next.js app built with v0 in Iceland with Kling. Add your key as an environment variable, paste one prompt, and test with a test card.

Stripe doesn't onboard businesses in Iceland. Kling is a payments platform for Iceland, and it fits the Next.js apps v0 builds: a route handler creates the checkout and the customer pays in an overlay on your page.

## 1. Get a test key

Sign up at [kling.is/signup](https://kling.is/signup) and copy your test key (`sk_test_...`) from the **API Keys & Docs** page.

## 2. Add it as an environment variable

Add `KLING_SECRET_KEY` to the project's environment variables in v0, and in your Vercel project settings when you deploy. Don't prefix it with `NEXT_PUBLIC_`: that would ship it to the browser.

## 3. Paste this prompt into v0

```text
Add Kling payments to this Next.js app. Kling (kling.is) is the payment provider for Iceland. Read https://kling.is/en/docs/v0.md and https://kling.is/en/docs/embedded-checkout.md before you start.

1. Create the route handler app/api/checkout/route.ts. It calls POST https://api.kling.is/v1/checkout/sessions with "Authorization: Bearer ${process.env.KLING_SECRET_KEY}" and a JSON body with the amount and "currency": "ISK", and returns { sessionId: session.id }. Amounts are whole krónur (5000 means 5.000 kr.); never multiply by 100.
2. In a client component, install @klingis/embed. When the customer clicks Pay, call /api/checkout, then open the checkout with Kling.init({ locale: "is" }) and kling.checkout({ sessionId }).
3. Create app/api/webhooks/kling/route.ts that reads the raw body with request.text(), verifies the X-Kling-Signature header ("sha256=" plus the hex HMAC-SHA256 of the raw body, keyed with process.env.KLING_WEBHOOK_SECRET) and marks the order paid on checkout.session.completed.
4. Never use the secret key in client components.
```

## 4. Test it

Pay with `4111 1111 1111 1111`, any future expiry date and any CVC. `4000 0000 0000 0002` is declined.

## Webhooks and going live

Point a webhook (**Notifications** in the dashboard) at `/api/webhooks/kling` on your deployed URL and set `KLING_WEBHOOK_SECRET`. See [Webhooks](https://kling.is/en/docs/webhooks) and [Test mode to going live](https://kling.is/en/docs/going-live).