Add payments to a Lovable app

Stripe doesn't onboard businesses in Iceland, so Lovable's built-in Stripe setup isn't an option here. Kling is a payments platform for Iceland that works the same way: your app's backend creates a checkout, and the customer pays in an overlay or on a Kling page. In Lovable the backend part runs as Supabase Edge Functions.

1. Get a test key

Sign up at kling.is/signup and copy your test key (sk_test_...) from the API Keys & Docs page. Test keys work right away, and no real money moves.

2. Store the key as a secret

The secret key must never be in your frontend code. Connect your Lovable project to Supabase, then add a secret named KLING_SECRET_KEY with your test key, in Supabase under Edge Functions and secrets. Lovable can also ask you for it when it builds the function.

3. Paste this prompt into Lovable

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

1. Create a Supabase Edge Function "kling-checkout" that calls POST https://api.kling.is/v1/checkout/sessions with the header "Authorization: Bearer <KLING_SECRET_KEY from the function's secrets>" and a JSON body with the amount and "currency": "ISK". Return the session id. Amounts are whole krónur (5000 means 5.000 kr.); never multiply by 100.
2. In the frontend, install @klingis/embed. When the customer clicks Pay, call the function, then open the checkout with Kling.init({ locale: "is" }) and kling.checkout({ sessionId }).
3. Create a second Edge Function "kling-webhook" that receives Kling webhooks. Verify the X-Kling-Signature header: it is "sha256=" plus the hex HMAC-SHA256 of the raw request body, keyed with the KLING_WEBHOOK_SECRET secret. On checkout.session.completed, mark the order as paid.
4. Never put the secret key in frontend code.

4. Test it

Pay with the test card 4111 1111 1111 1111, any future expiry date and any CVC. 4000 0000 0000 0002 shows a declined payment.

5. Webhooks

Add a webhook in the dashboard under Notifications pointing at your kling-webhook function's URL, with the checkout.session.completed event. Copy its signing secret into a Supabase secret named KLING_WEBHOOK_SECRET. See Webhooks.

Going live

When your account is approved for live payments, create a live key and swap it into the KLING_SECRET_KEY secret. See Test mode to going live.