DocsBuild with AI
Add payments to a Lovable app
How to take card payments in a Lovable app in Iceland with Kling. Copy one prompt into Lovable, keep your secret key in Supabase, and test with a test card before you go live.
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 Lovable 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 Lovable's built-in Stripe setup isn't an option here. Kling works the same way, though: your app's backend creates a checkout, and the customer pays on a Kling payment page or in a payment window on top of your app.
What Lovable builds
Lovable runs the backend of your app as Supabase Edge Functions, and that is where a payment starts. When a customer clicks Pay, a small function creates a checkout session with the amount and your secret key. Amounts are whole krónur, so 5000 means 5.000 kr. The app then either sends the customer to the Kling payment page or opens the payment window on top of the page, so they never leave your app. Card details go straight to Kling and never pass through your app.
A second function receives a webhook from Kling when the payment goes through, checks its signature and marks the order as paid. The webhook is what confirms the payment, not the customer's browser coming back, because the browser can be closed before it gets there.
Where the secret key goes
Sign up at kling.is/signup and your test key (sk_test_...) is ready straight away on the API Keys & Docs page. The key belongs in a Supabase secret, never in the code Lovable writes for the browser. Lovable can ask you for it when it builds the function, or you can add it yourself in Supabase among the Edge Function secrets. The webhook's signing secret, which you get when you add the webhook under Notifications in the dashboard, goes in a Supabase secret the same way.
Test it
A test key only reaches test data, and no real money moves. Pay with the test card 4111 1111 1111 1111, any future expiry date and any CVC, and the order should be marked paid. The card 4000 0000 0000 0002 shows you what a declined payment looks like.
Go live
When you are ready for real payments, apply in the dashboard. Kling applies to the card acquirer on your behalf, and once you are approved you create a live key and put it in the same Supabase secret in place of the test key. Test and live have separate webhooks, so add one for live as well. See Test mode to going live.
To start, copy the prompt at the top of this page and paste it into Lovable.