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. Copy one prompt into v0, add your secret key as an environment variable, and test with a test card.
Fastest: let your AI tool do the work
Copy the prompt and paste it into ChatGPT, Claude, Cursor, Lovable or any other AI tool. It reads our quickstart, asks about your business and picks the right setup.
You can add payments to a v0 app in Iceland with Kling, a payments platform for Iceland that takes cards, Apple Pay and Google Pay in Icelandic krónur. Stripe doesn't onboard Icelandic businesses, and Kling fits the Next.js apps v0 builds well: a route handler on the server creates the checkout, and the customer pays without leaving your page.
What v0 builds
v0 adds a route handler to your Next.js app that creates a checkout session when a customer clicks Pay. It runs on the server, so it can use your secret key, and it sends the amount in whole krónur (5000 means 5.000 kr.). A client component then opens the payment window on top of your page, or sends the customer to the Kling payment page and back. Card details go straight to Kling and never touch your app.
A second route handler receives webhooks. Kling calls it when a payment goes through, and it checks the signature against the raw request body before it marks the order as paid. That is what confirms an order, not the customer's browser coming back.
Where the secret key goes
Sign up at kling.is/signup and copy your test key (sk_test_...) from the API Keys & Docs page. Add it to the project's environment variables in v0, and in your Vercel project's settings when you deploy. Don't give it a NEXT_PUBLIC_ prefix: that would ship it to the browser. Only server code, such as the route handlers, should read it. The webhook's signing secret, which you get when you add a webhook under Notifications in the dashboard, is an environment variable too.
Test it
With a test key no real money moves. Pay with 4111 1111 1111 1111, any future expiry date and any CVC, and check that the order is marked paid. 4000 0000 0000 0002 is declined.
Go live
Apply for live payments in the dashboard. Kling applies to the card acquirer for you, and once you are approved you create a live key and set it in Vercel in place of the test key. Live has its own webhook and signing secret. See Test mode to going live.
To start, copy the prompt at the top of this page and paste it into v0.