SDK Documentation

The JavaScript SDK allows you to securely accept card payments in your checkout flow with a few lines of code. This guide covers setup, initialization, payment creation, callback handling.

---

🔧 Environments

Environment	Script URL
Sandbox	https://cdn.lightningpay.me/media/getkollo-sdk/1.1.0/sandbox/getkollo.js
Production	https://cdn.lightningpay.me/media/getkollo-sdk/1.1.0/prod/getkollo.js

👉 View Demo Website

---

✅ Integration Steps

Step 1: Register Your App ID & Domain

• Contact the Hello Clever team to register your domain and receive your app_id.

Step 2: Include SDK Script in Checkout Page

<script
  src="https://cdn.lightningpay.me/media/getkollo-sdk/1.1.0/sandbox/getkollo.js"
  async
></script>

Step 3: Add Mount Element in HTML

<div class="get-kollo"></div>

This is where the payment iframe will be injected. It must exist before calling createPayment().

Step 4: Initialize SDK and Create Payment

async function createGetKollo() {
  const getKolloSDK = new GetKollo({
    app_id: "your-app-id",
  });

  const init = await getKolloSDK.initialize();
  if (!init?.success) return alert(init?.error);

  const order = {
    external_id: "order-001",
    customer_name: "John Doe",
    customer_email: "john_doe@gmail.com",
    amount: 1000,
    currency: "USD",
    return_url: "https://yourdomain.com/success"
  };

  const options = {
    mountElement: ".get-kollo",
    styleProps: {
      frame: {
        width: "100%",
        height: "100%"
      }
    }
  };

  const resp = await getKolloSDK.createPayment(order, options);
  if (!resp?.success) return alert(resp?.error);

  window.getkolloCardCallback = (message) => {
    if (message?.status !== "succeeded") {
      alert(message?.error);
    }
  };
}

---

🧾 SDK Configuration Reference

GetKollo({ app_id })

• app_id: Your unique application identifier (required)

const getKolloSDK = new GetKollo({
  app_id: [YOUR_APP_ID],
});

const init = await getKolloSDK.initialize();

createPayment(order, options)

🧾 order (required)

Field	Type	Required	Description
external_id	string	✅	Unique identifier for the order
customer_name	string	✅	Name of the customer
customer_email	string	✅	Email of the customer
amount	number	✅	Transaction amount in cents
currency	string	✅	"USD"
return_url	string	❌	URL to redirect after success/failure

⚙️ options (required)

Field	Type	Required	Description
mountElement	string	✅	CSS selector for mounting the iframe
styleProps.frame.width	string	❌	Width of iframe (default: 500px)
styleProps.frame.height	string	❌	Height of iframe (default: 500px)

const order = {
  external_id: [EXTERNAL_ID],
  customer_name: [CUSTOMER_NAME],
  customer_email: [CUSTOMER_EMAIL],
  amount: [ORDER_AMOUNT],
  currency: [CURRENCY], // USD
  return_url: [RETURN_URL], // optional redirect URL
};

const options = {
  mountElement: ".get-kollo", // Element classname or ID
  styleProps: {
    frame: {
      width: "100%",
      height: "100%",
    },
  },
};

const resp = await getKolloSDK.createPayment(order, options);

Listener Payment status

After the payment is submitted, the SDK will call:

window.getkolloCardCallback = (response) => {
  if (response?.status !== "succeeded") {
    alert(response?.error?.message);
  }
};

Response Fields

Field	Description
status	"succeeded" or "failed"
error	Error object (message, code)
order	Order object as provided in the SDK call
type	"callback"

---

📊 Payment Statuses

Status	Meaning
pending	Customer has not completed payment yet
authorised	Payment authorised, need capture to succeeded
waiting	Payment succeeded, awaiting payout
received	Payment settled
expired	Payment link expired
return_pending	Refund initiated
partially_refunded	Payment has been refunded partially.
return_received	Refund completed
return_expired	Refund expired (after 10 days)
return_rejected	Refund failed (e.g. due to destination account issue)
failed	Payment canceled
in_dispute	Payment is disputing
dispute_lost	Payment dispute resolved, amount not returned to merchant