# Add payments to a Lovable app

How to take card payments in a Lovable app in Iceland with Kling. Store your key as a Supabase secret, paste one prompt, and test with a test card.

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](https://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

```text
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](https://kling.is/en/docs/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](https://kling.is/en/docs/going-live).