INET paymentr Journey: ลูกค้าชำระเงิน

1

ลูกค้ากด Link/QR ชำระเงิน

Link จะนำไปยังหน้า InetPaymentCenter ที่ /pay/{sessionId}

📸 รูป: หน้า InetPaymentCenter ที่ลูกค้าเห็นครั้งแรก

แสดงชื่อร้านค้า, รายการสินค้า, ยอดเงินรวม, ตัวเลือกชำระเงิน (QR, Credit, etc.)

📱 ใน LINE LIFF

ถ้าลูกค้าเปิดจาก LINE app ระบบจะ detect LIFF context และเปิด payment ใน browser ภายนอก (ผ่าน liff.openWindow external=true)

2

เลือกวิธีชำระเงิน (PayType)

ลูกค้าเลือกจาก PayTypes ที่ Merchant อนุญาตไว้ตอนสร้าง Session

ผลลัพธ์หลังสร้าง Session สำเร็จ - QR Code และ Link ชำระเงิน

📸 รูป: ส่วน "เลือกวิธีชำระเงิน" ใน InetPaymentCenter

แสดงปุ่ม QR, Credit Card, Installment, Digital Wallet ที่ลูกค้ากดเลือก

QR แสดง QR Code ให้สแกนจากแอปธนาคาร
QRCS แสดง QR Code สำหรับชำระผ่านบัตรเครดิต Visa / Mastercard
CR กรอกข้อมูลบัตรเครดิตโดยตรง
ISTM เลือกธนาคาร + จำนวนงวดผ่อน (ขั้นต่ำ 3,000 บาท)
DW เลือกกระเป๋าเงินดิจิทัล (TrueMoney, Rabbit LINE Pay, etc.)

3

กรอกข้อมูลเพิ่มเติม (ถ้ามี)

ระบบอาจขอข้อมูลเพิ่มตาม PayType ที่เลือก

ตัวอย่าง: Credit Card (CR)

Card Number4111 1111 1111 1111

Expiry12/25

CVV123

CardholderSOMCHAI RAKNGAN

📸 รูป: ฟอร์มกรอก Credit Card ใน InetPaymentCenter

แสดงฟิลด์ Card Number, Expiry, CVV, Cardholder Name, ปุ่ม Pay

สำหรับ QR: ระบบ generate QR ใหม่จาก INet API → แสดงให้ลูกค้าสแกน
สำหรับ Credit Card: กรอกฟอร์มแล้วกด "ชำระเงิน"
สำหรับ Digital Wallet: redirect ไปยังแอป wallet ที่เลือก

4

ระบบเรียก INet API สร้าง Transaction

Frontend ส่ง PayType ที่เลือกไป Backend → Backend เรียก INet createPayment

PaymentCenter

→

POST /pay/{id}/pay

→

INet createPayment API

→

QR / Deeplink / Form

📸 แนบรูป: หน้าแสดง QR Code ที่ได้จาก INet (สำหรับ QR PayType)

แสดง QR Code ขนาดใหญ่ พร้อมข้อความ "สแกนเพื่อชำระเงิน" และจำนวนเงิน

5

INet ส่ง Webhook กลับมาเมื่อชำระเสร็จ

หลังลูกค้าชำระเงินสำเร็จ INet จะส่ง Webhook ไปยัง URL ที่ตั้งค่าไว้

pending

→

awaiting_payment

→

paid

INet Server

→

Webhook POST

→

Our Backend

→

Update DB

→

Push to LINE

📸 แนบรูป: Webhook Logs ที่แสดง webhook ล่าสุดจาก INet

แสดงรายการ webhook ที่มี status "completed", "payment_confirmed" หรือสถานะสำเร็จ

Status = paid: อัปเดต paidAt, paidAmount, paymentType
Status = failed: บันทึก failReason
Status = expired: Session หมดอายุตาม expiresAt

6

Payment Center แสดงผลลัพธ์ให้ลูกค้า

หน้าจอลูกค้าจะเปลี่ยนเป็นแสดงสถานะ ชำระเงินสำเร็จ

📸 แนบรูป: หน้า InetPaymentCenter ที่แสดง "ชำระเงินสำเร็จ"

แสดงไอคอนเขียว ยอดเงิน Payment Ref จาก INet ปุ่ม "กลับหน้าร้านค้า" (ถ้ามี successUrl)

ถ้ามี successUrl: แสดงปุ่ม "กลับหน้าร้านค้า" หรือ redirect อัตโนมัติ
ถ้ามี failUrl: redirect เมื่อชำระล้มเหลว

✅ ชำระเงินเสร็จสมบูรณ์!

ทุกฝ่ายได้รับการอัปเดต: ลูกค้าเห็นหน้าสำเร็จ, ระบบ backend ได้รับ webhook, session status = paid

Next: Journey ถัดไป → ตรวจสอบ & Debug