DocsBuild with AI
Add payments to a Bolt app
How to take card payments in an app built with Bolt in Iceland with Kling. Copy one prompt into Bolt, keep your secret key in a server-side 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 Bolt 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, so Kling is the provider to tell Bolt about. The setup is the familiar one: code on the server creates a checkout, and the customer pays in a payment window on your site or on a Kling payment page.
What Bolt builds
Bolt adds a server-side endpoint to your app, such as an API route, or a Supabase Edge Function if your project uses Supabase for its backend. When a customer clicks Pay, the endpoint creates a checkout session with the amount and your secret key. Amounts are whole krónur, so 5000 means 5.000 kr. The page then opens the payment window on top of your site, or sends the customer to the Kling payment page and back again when they have paid. Card details go straight to Kling and never touch your app.
Bolt also adds an endpoint for webhooks: Kling calls it when a payment goes through, the endpoint checks the signature and marks the order as paid. That way the order is confirmed even if the customer closes the browser before getting back to your site.
Where the secret key goes
Sign up at kling.is/signup and copy your test key (sk_test_...) from the API Keys & Docs page. Only server code may read it. In a Bolt project it goes in the project's environment variables, without a public prefix such as VITE_ or NEXT_PUBLIC_, because those prefixes ship a variable to the browser. If the backend runs on Supabase, store the key as a Supabase secret instead, as described for Lovable. When you deploy, add the same variable in your hosting provider's settings. The webhook's signing secret, which you get when you add the webhook under Notifications in the dashboard, is kept the same way.
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, so you can see how your app handles a failed payment.
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 swap it in for the test key. Nothing else in the code changes. 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 Bolt.