DocsBuild with AI
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 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
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 and Test mode to going live.