Topics

DocsBuild with AI

Add payments to a Bolt app

How to take card payments in an app built with Bolt in Iceland with Kling. Keep your key in a server-side environment variable, paste one prompt, and test with a test card.

Stripe doesn't onboard businesses in Iceland. Kling is a payments platform for Iceland that you can add to a Bolt app with one prompt: a server route creates a checkout, and the customer pays in an overlay on your site.

1. Get a test key

Sign up at kling.is/signup and copy your test key (sk_test_...) from the API Keys & Docs page.

2. Keep the key on the server

The secret key must only be read by server code. Put it in the project's .env file as KLING_SECRET_KEY, without a public prefix such as VITE_ or NEXT_PUBLIC_, which would ship it to the browser. If your Bolt project uses Supabase for its backend, store it as a Supabase secret instead and follow the Lovable guide: the steps are the same.

3. Paste this prompt into Bolt

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

1. Add a server-side endpoint (an API route, not frontend code) that calls POST https://api.kling.is/v1/checkout/sessions with "Authorization: Bearer ${KLING_SECRET_KEY}" from the environment 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 endpoint, then open the checkout with Kling.init({ locale: "is" }) and kling.checkout({ sessionId }).
3. Add a webhook endpoint that verifies the X-Kling-Signature header ("sha256=" plus the hex HMAC-SHA256 of the raw body, keyed with KLING_WEBHOOK_SECRET) and marks the order paid on checkout.session.completed.
4. Never expose the secret key to the browser.

4. Test it

Pay with 4111 1111 1111 1111, any future expiry date and any CVC. 4000 0000 0000 0002 is declined.

Webhooks and going live

Once the app is deployed, add a webhook under Notifications in the dashboard and put its signing secret in KLING_WEBHOOK_SECRET. See Webhooks and Test mode to going live.

View as markdown