# Greiðslugluggi á þinni síðu

Opnaðu greiðslusíðu Kling sem glugga ofan á þinni eigin vefsíðu með @klingis/embed, svo viðskiptavinir greiða með korti án þess að fara af síðunni.

Greiðsluglugginn opnar greiðslusíðu Kling í glugga ofan á þinni síðu. Þjónninn þinn býr til [greiðsluferli](https://kling.is/docs/checkout) með leynilyklinum; vafrinn opnar það með `@klingis/embed`. Kortaupplýsingar fara beint til Kling og koma aldrei við síðuna þína.

## Uppsetning

```bash
npm install @klingis/embed
```

Eða notaðu script-tag, ekkert byggingarskref:

```html
<script src="https://api.kling.is/v1/kling.js"></script>
```

## 1. Búðu til greiðsluferli á þjóninum

```typescript
// t.d. route handler í Next.js: app/api/checkout/route.ts
export async function POST() {
  const res = await fetch("https://api.kling.is/v1/checkout/sessions", {
    method: "POST",
    headers: {
      Authorization: `Bearer ${process.env.KLING_SECRET_KEY}`,
      "Content-Type": "application/json",
    },
    // Krónan hefur enga aukastafi: 5000 þýðir 5.000 kr.
    body: JSON.stringify({ amount: 5000, currency: "ISK" }),
  });
  const session = await res.json();
  return Response.json({ sessionId: session.id });
}
```

## 2. Opnaðu gluggann í vafranum

```typescript
import { Kling } from "@klingis/embed";

const kling = Kling.init({ locale: "is" });

const { sessionId } = await fetch("/api/checkout", { method: "POST" }).then((r) => r.json());

const result = await kling.checkout({
  sessionId,
  onSuccess: (res) => console.log("Greitt", res.sessionId, res.paymentStatus),
  onError: (err) => console.log("Mistókst", err.code, err.message),
  onCancel: () => console.log("Lokað"),
});
```

Með script-taginu er `Kling` aðgengilegt beint:

```html
<script src="https://api.kling.is/v1/kling.js"></script>
<script>
  const kling = Kling.init();
  kling.checkout({ sessionId: "cs_..." });
</script>
```

## Stillingar

`Kling.init(options)`:

| Stilling | Sjálfgefið | Lýsing |
|---|---|---|
| `locale` | greint sjálfkrafa | `is` eða `en` |
| `baseUrl` | `https://pay.kling.is` | Slóð greiðslusíðunnar, fyrir þróun |
| `apiUrl` | `https://api.kling.is` | Slóð API-sins |

`kling.checkout(options)`:

| Stilling | Lýsing |
|---|---|
| `sessionId` | Nauðsynlegt. Greiðsluferlið sem þjónninn bjó til |
| `onSuccess` | Kallað þegar greiðsla tekst |
| `onError` | Kallað þegar greiðsla mistekst |
| `onCancel` | Kallað þegar viðskiptavinurinn lokar glugganum |
| `showSuccessScreen` | Sýna staðfestingarskjá Kling (sjálfgefið `true`) |

`kling.checkout()` skilar stýringu: bíddu eftir henni (`await`) til að fá niðurstöðuna, eða kallaðu á `.close()` til að loka glugganum. `kling.preload({ sessionId })` byrjar að hlaða áður en smellt er, svo glugginn opnast hraðar.

## Staða greiðslunnar í vafranum

`onSuccess` og niðurstaðan innihalda `paymentStatus`:

- `paid`: greiðsla með korti eða veski fór í gegn.
- `awaiting_claim`: krafa var send í heimabanka og viðskiptavinurinn greiðir hana seinna. Ekki afhenda strax.

Notaðu niðurstöðuna í vafranum bara til að uppfæra viðmótið. Afgreiddu pantanir út frá [webhooks](https://kling.is/docs/webhooks) á þjóninum.