✅ ฟรี 100% — ไม่มีค่ารายเดือน ไม่ต้องใช้บัตร

เชื่อม Ko-fi → Streamlabs ให้โดเนทเด้งเป็น Alert จริง

ทำให้เงินโดเนทจาก Ko-fi โผล่ใน Alert Box, นับรวมใน Goal Widget และเข้า Donation log ของ Streamlabs — ผ่านตัวกลางฟรีของ Cloudflare

Ko-fi มีคนกดโดเนท → ยิง Webhook
Cloudflare Worker ตัวกลาง แปลงข้อมูลแล้วส่งต่อ
🔔
Streamlabs เด้ง Alert + นับ Goal จริง

ทำไมต้องมี Cloudflare ตรงกลาง?

เพราะ Ko-fi กับ Streamlabs "พูดคนละภาษา" กัน Ko-fi ยิงข้อมูลออกมาแบบหนึ่ง แต่ Streamlabs รับโดเนทอีกแบบหนึ่ง — Cloudflare Worker คือโปรแกรมเล็ก ๆ ที่คอยรับจาก Ko-fi แล้วแปลงให้ Streamlabs เข้าใจ แล้วส่งต่อให้ ทั้งหมดนี้ทำงานบนคลาวด์ฟรีของ Cloudflare ไม่ต้องเปิดคอมทิ้งไว้

ผลลัพธ์ที่ได้ โดเนทจาก Ko-fi จะถูกบันทึกเป็น "โดเนทจริง" ใน Streamlabs ทุกประการ — ขึ้น Alert Box, เข้า Recent Events, และนับรวมใน Donation Goal โดยอัตโนมัติ (ไม่ใช่แค่ overlay แยกที่ไม่นับยอด)

สิ่งที่ต้องเตรียม

☕ บัญชี Ko-fiที่เปิดรับโดเนทอยู่แล้ว (แพลนฟรีใช้ Webhook ได้ ไม่ต้องเป็น Gold) 🔔 บัญชี Streamlabsที่ใช้ทำ Alert บนสตรีมอยู่แล้ว ⚡ บัญชี Cloudflareสมัครฟรีที่ dash.cloudflare.com (ไม่ต้องผูกบัตร) 💻 เครื่อง Windowsใช้ PowerShell (มีมากับ Windows อยู่แล้ว) สั่ง 1 คำสั่งตอนขอ Token

ภาพรวม 7 ขั้นตอน

  1. สร้างแอป API บน Streamlabs → ได้ Client ID + Client Secret
  2. ขอ "รหัสอนุญาต" (Authorization Code)
  3. แลกรหัสนั้นเป็น Access Token ด้วย PowerShell
  4. สร้าง Cloudflare Worker แล้ววางโค้ดตัวกลาง
  5. ใส่ความลับ (Secrets) 2 ตัว แล้ว Deploy
  6. ตั้งค่า Webhook ใน Ko-fi ให้ชี้มาที่ Worker
  7. กดทดสอบ — ดูโดเนทเด้งใน Streamlabs
1

สร้างแอป API บน Streamlabs

~5 นาที
  • เข้า https://streamlabs.com/dashboard#/settings/api-settings หรือ dev.streamlabs.com แล้วล็อกอิน
  • ไปแท็บ Register Your Application → กดสร้างแอปใหม่
  • กรอกข้อมูลแอป (ชื่ออะไรก็ได้ เช่น Kofi Relay) ตามนี้:
Application NameKofi Relay (หรือชื่ออะไรก็ได้) Scopes / สิทธิ์ติ๊ก donations.create Redirect URIhttp://localhost Whitelistใส่ชื่อ Twitch ของตัวเอง (ระหว่างทดสอบ)
เสร็จแล้วจะได้ 2 อย่างนี้เก็บไว้ให้ดี: Client ID และ Client Secret (กดปุ่ม Show เพื่อดู Secret)
ห้ามแชร์ Client Secret ให้ใครมันเหมือนรหัสผ่านของแอป ถ้าหลุดให้กด Reset เพื่อสร้างใหม่ได้
2

ขอ "รหัสอนุญาต" (Authorization Code)

~2 นาที

เอา Client ID ของคุณไปแทนที่ YOUR_CLIENT_ID ในลิงก์ข้างล่าง แล้วเปิดในเบราว์เซอร์ (ที่ล็อกอิน Streamlabs อยู่):

URL
https://streamlabs.com/api/v2.0/authorize?client_id=YOUR_CLIENT_ID&redirect_uri=http://localhost&response_type=code&scope=donations.create
  • กด Approve / อนุญาต
  • เบราว์เซอร์จะเด้งไปหน้า http://localhost/?code=..... แล้วขึ้นว่า "เชื่อมต่อไม่ได้"ถือว่าปกติ!
  • ดูที่ ช่องที่อยู่ (address bar) ด้านบน คัดลอกข้อความยาว ๆ ที่อยู่หลัง code= มาเก็บไว้
สิ่งที่ควรเห็นหน้าจอโหลดไม่ขึ้น (ขาว ๆ / error) แต่ URL ข้างบนคือ localhost/?code=def50200ab12... — นั่นแหละคือ "รหัส" ที่เราต้องการ
รหัสนี้หมดอายุเร็วมาก (ไม่กี่นาที)ให้ทำขั้นตอนที่ 3 ต่อทันที ถ้าช้าไปต้องเปิดลิงก์ขอรหัสใหม่
3

แลกรหัสเป็น Access Token (PowerShell)

~2 นาที

เปิด PowerShell (กดปุ่ม Start พิมพ์ว่า PowerShell) แล้วแก้ YOUR_CLIENT_ID เป็นของคุณ จากนั้นวางทั้งก้อนนี้แล้วกด Enter — มันจะถามให้พิมพ์ Client Secret และ รหัสจากขั้นที่ 2 ทีละบรรทัด (วิธีนี้กันพิมพ์ผิด/ลืมแก้ค่า):

PowerShell
$code   = Read-Host "วางรหัสจากขั้นที่ 2 (code=...)"
$secret = Read-Host "วาง Client Secret"

$body = @{
  grant_type    = "authorization_code"
  client_id     = "YOUR_CLIENT_ID"
  client_secret = $secret
  redirect_uri  = "http://localhost"
  code          = $code
}

$resp = Invoke-RestMethod -Method Post -Uri "https://streamlabs.com/api/v2.0/token" -Body $body
Write-Host "`n===== ACCESS TOKEN (คัดลอกบรรทัดล่างไปเก็บ) =====" -ForegroundColor Green
$resp.access_token
สิ่งที่ควรเห็นข้อความยาวมากขึ้นต้นด้วย eyJ0eXAiOiJKV1Qi... — นั่นคือ Access Token ของคุณ เก็บไว้ใช้ในขั้นที่ 5
ถ้าขึ้น error 500 / Bad Requestมักเป็นเพราะรหัส (code) หมดอายุ หรือยังไม่ได้แก้ YOUR_CLIENT_ID — ให้กลับไปขั้นที่ 2 ขอรหัสใหม่แล้วรันอีกครั้งทันที
4

สร้าง Cloudflare Worker + วางโค้ด

~6 นาที
  • เข้า dash.cloudflare.com (สมัครฟรีถ้ายังไม่มี) → เมนูซ้าย Workers & Pages
  • กด CreateCreate Worker → ตั้งชื่อ เช่น kofi-streamlabsDeploy
  • กด Edit code → ลบโค้ดเดิมทั้งหมด → วางโค้ดข้างล่างนี้แทน → กด Deploy มุมขวาบน
worker.js
// Ko-fi -> Streamlabs donation relay (Cloudflare Worker)
// รับ Webhook จาก Ko-fi แล้วส่งต่อเป็นโดเนทจริงเข้า Streamlabs
//
// ต้องตั้งค่า Secrets 2 ตัว (Settings > Variables and Secrets):
//   STREAMLABS_ACCESS_TOKEN  - access_token ที่ได้จากขั้นที่ 3
//   KOFI_VERIFICATION_TOKEN  - Verification Token จากหน้า Ko-fi Webhooks

const SUPPORTED_CURRENCIES = [
  "AUD", "BRL", "CAD", "CZK", "DKK", "EUR", "HKD", "ILS", "MYR", "MXN", "NOK",
  "NZD", "PHP", "PLN", "GBP", "RUB", "SGD", "SEK", "CHF", "THB", "TRY", "USD"
];

export default {
  async fetch(request, env) {
    // เปิดด้วยเบราว์เซอร์ = เช็คว่ายังมีชีวิตอยู่
    if (request.method !== "POST") {
      return new Response("Ko-fi -> Streamlabs relay is alive.", { status: 200 });
    }

    // Ko-fi ส่งมาเป็น form ที่มีฟิลด์เดียวชื่อ data (เป็น JSON string)
    let kofi;
    try {
      const form = await request.formData();
      kofi = JSON.parse(form.get("data"));
    } catch (err) {
      return new Response("Bad payload", { status: 400 });
    }

    // ปฏิเสธถ้าไม่ได้มาจากบัญชี Ko-fi ของเรา
    if (kofi.verification_token !== env.KOFI_VERIFICATION_TOKEN) {
      return new Response("Invalid verification token", { status: 401 });
    }

    let currency = (kofi.currency || "USD").toUpperCase();
    if (!SUPPORTED_CURRENCIES.includes(currency)) currency = "USD";

    const params = new URLSearchParams({
      name: (kofi.from_name || "Anonymous").slice(0, 25),
      identifier: kofi.email || kofi.kofi_transaction_id || ("kofi-" + Date.now()),
      message: (kofi.message || "").slice(0, 255),
      amount: kofi.amount || "0",
      currency: currency
    });

    const res = await fetch("https://streamlabs.com/api/v2.0/donations", {
      method: "POST",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        "Accept": "application/json",
        "Authorization": "Bearer " + env.STREAMLABS_ACCESS_TOKEN
      },
      body: params
    });

    // ตอบ 200 เสมอ เพื่อไม่ให้ Ko-fi ยิงซ้ำ; ถ้า Streamlabs error ให้ดูใน Worker logs
    if (!res.ok) {
      console.log("Streamlabs error", res.status, await res.text());
    }
    return new Response("OK", { status: 200 });
  }
};
โค้ดนี้ไม่มีความลับอยู่ในตัวมันอ่านค่าจาก Secrets ที่เราจะใส่ในขั้นต่อไป จึงปลอดภัยที่จะวาง/แชร์ได้
5

ใส่ Secrets 2 ตัว แล้ว Deploy

~3 นาที

ในหน้า Worker ของคุณ → SettingsVariables and Secrets → กด Add เลือกชนิดเป็น Secret แล้วเพิ่มทีละตัว:

STREAMLABS_ACCESS_TOKENวาง Access Token (eyJ0...) จากขั้นที่ 3 KOFI_VERIFICATION_TOKENเว้นไว้ก่อน — จะได้ค่าในขั้นที่ 6 แล้วค่อยกลับมาใส่
  • กด Save / Deploy ให้เรียบร้อย
  • จดที่อยู่ Worker ของคุณไว้ จะหน้าตาประมาณ:
    https://kofi-streamlabs.ชื่อคุณ.workers.dev
  • ลองเปิด URL นั้นในเบราว์เซอร์ ต้องขึ้นว่า "Ko-fi -> Streamlabs relay is alive."
สิ่งที่ควรเห็นเปิด URL แล้วเจอข้อความ relay is alive = Worker ทำงานแล้ว พร้อมรับ Webhook
6

ตั้งค่า Webhook ใน Ko-fi

~3 นาที
  • เข้า https://ko-fi.com/manage/webhooks (เมนู More → API/Webhooks)
  • ช่อง Webhook URL → วาง URL ของ Worker จากขั้นที่ 5
  • คัดลอก Verification Token ที่อยู่ในหน้านั้น
  • กลับไปที่ Cloudflare (ขั้นที่ 5) ใส่ค่านี้ในSecret KOFI_VERIFICATION_TOKEN แล้ว Deploy ซ้ำ
  • กลับมาที่ Ko-fi กด Update / Save
Verification Token ต้องตรงกันเป๊ะถ้าค่าใน Ko-fi กับใน Cloudflare ไม่ตรงกัน Worker จะตอบ 401 และโดเนทจะไม่เข้า
7

ทดสอบ!

~1 นาที
  • ในหน้า Ko-fi Webhooks กดปุ่ม Send Test
  • เปิด Streamlabs → Recent Events (หรือ Alert Box ที่กำลังโชว์)
สิ่งที่ควรเห็นมีโดเนททดสอบโผล่ขึ้นมา ประมาณว่า "Jo Example tipped $3.00 — Good luck with the integration!" = สำเร็จ! 🎉 ทุกอย่างเชื่อมกันครบแล้ว
เสร็จสมบูรณ์ต่อไปเวลามีคนโดเนทผ่าน Ko-fi จริง ๆ มันจะเด้ง Alert บนสตรีมและนับรวมใน Goal ให้อัตโนมัติ ไม่ต้องเปิดคอมทิ้งไว้

🛠️ แก้ปัญหาที่เจอบ่อย

อาการสาเหตุ & วิธีแก้
กด Send Test แล้ว Streamlabs เงียบ ไม่มีอะไรเข้า เช็คว่า Webhook URL ใน Ko-fi คือ URL ของ Worker จริง ๆ และใส่ Secrets ครบ 2 ตัวแล้ว Deploy ใหม่; ลองเปิด URL Worker ในเบราว์เซอร์ดูว่าขึ้น "relay is alive"
โดเนทไม่เข้า / เปิด log เจอหน้า HTML login เป็นปัญหาคลาสสิกเวลาส่ง token ผิดที่ — ต้องส่งใน Authorization: Bearer (header) ไม่ใช่ใน body โค้ดในขั้นที่ 4 แก้จุดนี้ให้แล้ว อย่าเผลอย้าย token ลง body
ตอนขอ Token ขึ้น error 500 รหัส (code) หมดอายุ (มีอายุไม่กี่นาที) หรือยังไม่ได้แก้ YOUR_CLIENT_ID → ขอรหัสใหม่ในขั้นที่ 2 แล้วรันทันที
Worker ตอบ 401 Invalid verification token ค่า KOFI_VERIFICATION_TOKEN ใน Cloudflare ไม่ตรงกับใน Ko-fi → คัดลอกใหม่ให้ตรงเป๊ะ แล้ว Deploy
ยอดเงิน/สกุลเงินเพี้ยน ถ้าสกุลเงินไม่อยู่ในรายการที่ Streamlabs รองรับ โค้ดจะตกเป็น USD ให้อัตโนมัติ (THB รองรับอยู่แล้ว)
ดู log ของ Workerที่หน้า Worker → แท็บ Logs (Observability) จะเห็นว่าแต่ละครั้งที่ Ko-fi ยิงมา เกิดอะไรขึ้น และ error จาก Streamlabs (ถ้ามี)

🔒 เรื่องความปลอดภัย

  • อย่าแชร์ Client Secret, Access Token, และ Verification Token ให้ใคร — มันเหมือนกุญแจบ้าน
  • ใส่ค่าพวกนี้เป็น Secret ใน Cloudflare เท่านั้น (ไม่ใช่เขียนลงในโค้ดตรง ๆ)
  • ถ้าเผลอทำหลุด: ไปกด Reset / Regenerate ที่ Streamlabs แล้วทำขั้นที่ 2–3 ใหม่ และเปลี่ยน Verification Token ใน Ko-fi
  • ไฟล์ tutorial นี้ใช้ค่าตัวอย่างทั้งหมด แชร์ต่อให้เพื่อนได้เลย ปลอดภัย

💸 ฟรีจริงไหม? (ลิมิตของแต่ละบริการ)

Cloudflare Workersแพลนฟรี: 100,000 ครั้ง/วัน — เหลือเฟือสำหรับโดเนทสตรีม Ko-fi Webhookใช้ได้ทุกแพลน รวมแพลนฟรี (ไม่ต้องเป็น Gold) Streamlabs APIแนะนำไม่เกิน ~2 โดเนท/นาที ปกติไม่ถึงอยู่แล้ว