SkjölunTaktu við greiðslum

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 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 á þjóninum.

Skoða sem markdown