https://krirk0137.github.io/KrirkSpeedPromptPay/

PromptPay QR Generator

สร้าง QR Code สำหรับรับเงิน PromptPay จากเบอร์โทรหรือเลขบัตรประชาชน — รันใน browser ทั้งหมด ไม่มี backend ไม่มีการส่งข้อมูลออก

หน้าเว็บ static หน้าเดียว ใช้สร้าง PromptPay QR Code ตามมาตรฐาน EMVCo QR + ข้อกำหนดของธนาคารแห่งประเทศไทย รองรับทั้งโอนแบบระบุจำนวนเงิน (Dynamic QR) และไม่ระบุ (Static QR)

---

✨ Features

• 📱 รองรับทั้ง เบอร์โทรศัพท์ (10 หลัก) และ เลขบัตรประชาชน (13 หลัก)
• 💰 ระบุจำนวนเงินก็ได้ ไม่ระบุก็ได้
• ⚡ Quick Select ปุ่มลัดสำหรับรายชื่อที่ใช้บ่อย
• 💾 ดาวน์โหลด QR เป็น PNG
• 📋 Copy payload string (ไว้ debug หรือเอาไปใช้ที่อื่น)
• 🔒 ทำงาน client-side ทั้งหมด — ไม่มีการส่งข้อมูลขึ้น server
• 📐 Responsive ใช้ได้ทั้ง desktop และมือถือ
• 🎨 Editorial-style UI ใช้ฟอนต์ Fraunces + IBM Plex Sans Thai + JetBrains Mono

---

🚀 Demo

เปิดดูได้ที่: https://<your-username>.github.io/<repo-name>/

---

🛠️ Tech Stack

Markup	HTML5 (single file)
Styling	Vanilla CSS (no framework)
Logic	Vanilla JavaScript (ES6+)
QR Library	qrcodejs via CDN
Fonts	Google Fonts (Fraunces, IBM Plex Sans Thai, JetBrains Mono)
Backend	❌ ไม่มี

ไม่มี build step, ไม่มี dependencies ที่ต้อง install — เปิดไฟล์ใน browser ก็ใช้ได้เลย

---

📦 Deploy

Option 1: GitHub Pages (Public)

⚠️ คำเตือน: Public repo = ทุกคนเห็นเบอร์ในรายชื่อ Quick Select ห้ามใส่ข้อมูลส่วนบุคคลของคนอื่นโดยไม่ได้รับอนุญาต

1. สร้าง repo ใหม่ใน GitHub
2. อัปโหลด index.html เข้าไป (ต้องชื่อนี้เป๊ะ ๆ)
3. ไปที่ Settings → Pages
4. ที่ Source เลือก Deploy from a branch
5. เลือก branch main + folder / (root) → Save
6. รอ 1-2 นาที จะได้ URL: https://<username>.github.io/<repo>/

ถ้าอยากให้ URL สั้นเป็น https://<username>.github.io/ ตั้งชื่อ repo เป็น <username>.github.io

Option 2: GitHub Pages (Private — แนะนำถ้ามีรายชื่อจริง)

ต้องสมัคร GitHub Pro ($4/เดือน) ขึ้นไป แล้ว Private repo จะใช้ Pages ได้และจำกัด access ตาม login

Option 3: Cloudflare Pages (ฟรี + ใส่ access control ได้)

1. Push code ไป GitHub repo
2. เข้า Cloudflare Pages → Connect to Git
3. (Optional) เปิด Cloudflare Access สำหรับ password / email auth

Option 4: Local Only

เปิดไฟล์ index.html ด้วย browser โดยตรง — ทำงานได้เหมือนกันทุกอย่าง

---

⚙️ Customization

แก้รายชื่อ Quick Select

แก้ที่ array CONTACTS ใน <script>:

const CONTACTS = [
  { name: 'Peem',    tag: 'Spotify',     phone: '0838829874' },
  { name: 'Krirk',   tag: 'Crunchyroll', phone: '0867790954' },
  // ...
];

• name — ชื่อแสดงบนปุ่ม
• tag — label เล็กข้างชื่อ (เว้นเป็น '' ได้)
• phone — เบอร์ 10 หลัก ขึ้นต้นด้วย 0

แก้ธีมสี

แก้ CSS variables ใน :root:

:root {
  --paper:      #F5F0E6;  /* พื้นหลัง */
  --ink:        #1A1814;  /* ตัวอักษรหลัก */
  --accent:     #B23A2E;  /* สีเน้น */
  --gold:       #C19A4B;  /* สี secondary */
  /* ... */
}

---

🧠 How it Works

PromptPay QR ใช้มาตรฐาน EMVCo QR Code Specification โดย encode ข้อมูลเป็นรูปแบบ TLV (Tag–Length–Value) แล้วต่อท้ายด้วย CRC16/CCITT-FALSE

Payload Structure

Tag	Field	Value	Required
00	Payload Format Indicator	01	✅
01	Point of Initiation Method	11 = Static / 12 = Dynamic	✅
29	Merchant Account Info (PromptPay)	ดูด้านล่าง	✅
53	Transaction Currency	764 (THB)	✅
54	Transaction Amount	เช่น 100.00	optional
58	Country Code	TH	✅
63	CRC	CRC16/CCITT-FALSE	✅

Sub-tags ใน Tag 29

Tag	Field	Value
00	Application ID	A000000677010111
01	Phone Number	0066 + เบอร์ตัด 0 หน้า (13 หลัก)
02	National ID	13 หลัก
03	e-Wallet ID	15 หลัก

ตัวอย่าง

เบอร์ 0812345678 + จำนวน 100.00 บาท จะแปลงเป็น:

00020101021229370016A00000067701011101130066812345678530376454061100.005802TH6304XXXX

โดย XXXX คือ CRC16 ของทุกอย่างก่อนหน้า (รวม tag 6304 ด้วย)

CRC16 Algorithm

function crc16(data) {
  let crc = 0xFFFF;
  for (let i = 0; i < data.length; i++) {
    crc ^= data.charCodeAt(i) << 8;
    for (let j = 0; j < 8; j++) {
      crc = (crc & 0x8000) ? ((crc << 1) ^ 0x1021) : (crc << 1);
      crc &= 0xFFFF;
    }
  }
  return crc.toString(16).toUpperCase().padStart(4, '0');
}

Polynomial: 0x1021, Initial: 0xFFFF, No XOR-out, No reflection

---

🔒 Privacy & Security

• ✅ ข้อมูลทุกอย่างประมวลผลใน browser — ไม่มีการส่งข้อมูลออก
• ✅ ไม่มี analytics, ไม่มี tracking, ไม่มี cookies
• ✅ Source code เปิดเผยทั้งหมด ตรวจสอบเองได้
• ⚠️ ถ้า deploy เป็น public — รายชื่อใน CONTACTS array จะมองเห็นได้โดยใครก็ตามที่เข้าเว็บ
• ⚠️ ทดสอบ QR กับแอปธนาคารก่อนใช้รับเงินจริง

---

📝 Notes

• เบอร์/เลขบัตรที่ใช้ ต้องลงทะเบียน PromptPay กับธนาคาร แล้วเท่านั้น
• รหัสประจำตัวประชาชน 13 หลักใส่ตัวเลขล้วน ไม่ใส่ขีด
• เบอร์โทรใส่ 10 หลัก ขึ้นต้นด้วย 0 (ตัวโปรแกรมจะแปลงเป็น 0066xxx ให้เอง)
• จำนวนเงินทศนิยม 2 ตำแหน่ง

---

📄 License

MIT License — เอาไปใช้ ดัดแปลง ทำต่อ ขายได้ตามสบาย

---

🙏 Credits

• qrcodejs by davidshimjs
• PromptPay QR Spec Reference by dtinth
• EMVCo QR Code Specification
• Bank of Thailand PromptPay Standard