ตอนนี้คุณรู้แล้วว่าจะขายอะไร และจะขายแบบไหน
คำถามถัดไปตรงมากขึ้นทันที: แล้วจะรับเงินยังไง
นี่คือจุดที่หลายคนรู้สึกว่าเรื่องเริ่มใหญ่ขึ้น เพราะพอคำว่า “เงิน” เข้ามา มันไม่เหมือนการเพิ่มฟีเจอร์ธรรมดาอีกแล้ว แต่มันเริ่มแตะเรื่องความเชื่อใจ ความถูกต้อง และประสบการณ์ตอนจ่ายจริง
คุณไม่ควรเป็นคนรับเงินเองตรงๆ
ลองนึกว่าคุณเปิดร้านอาหาร
หน้าที่ของคุณคือทำอาหารและดูแลร้าน ไม่ใช่ยืนรับเงินทุกโต๊ะเอง เช็กเองทุกครั้งว่าใครจ่ายแล้วหรือยัง แล้วคอยส่งสัญญาณกลับไปให้ครัว
ร้านส่วนใหญ่เลยมีคนทำหน้าที่นี้แยกออกมา
ในคอร์สนี้ เราจะใช้ภาพว่า Stripe (บริการรับชำระเงินออนไลน์) คือแคชเชียร์ของร้าน
- แอปของคุณคือร้าน
- หน้าที่ของคุณคือทำของที่มีคุณค่า
- Stripe คือคนรับเงิน จัดการการจ่าย และคอยบอกแอปว่า
คนนี้จ่ายแล้ว
สิ่งที่แคชเชียร์ช่วยคือ คุณไม่ต้องไปยุ่งกับรายละเอียดการรับเงินเองทั้งหมด แอปของคุณแค่ส่งคนไปที่จุดจ่ายเงิน แล้วรอฟังผลว่าจ่ายสำเร็จหรือไม่
ทำไมบทนี้ต้องใช้ Stripe และต้องเป็น test mode
คอร์สนี้เราจะใช้ Stripe เพราะเป้าหมายไม่ใช่แค่ “ให้คนจ่ายได้”
เป้าหมายคือทำให้ flow แบบนี้เกิดขึ้นได้จริง:
- คนกดจ่าย
- ระบบรับเงินทำงาน
- แอปรู้ผลว่าจ่ายสำเร็จ
- บทถัดไปเราจะเอาผลนั้นไปใช้ปลดล็อกสิ่งที่คนจ่ายควรได้
นี่คือเหตุผลที่เราจะไม่ใช้วิธี manual ในบทนี้
อีกเรื่องที่สำคัญเท่ากันคือ เราจะใช้ test mode (โหมดทดสอบ — ไม่มีเงินจริง) เท่านั้น
แปลว่า คุณจะได้ลองทุกอย่างเหมือนรับเงินจริง แต่จะไม่มีเงินจริงไหลเข้าออก และไม่ควรใช้บัตรจริงในบทเรียนนี้
ตอนทดสอบในบทนี้ ให้แน่ใจว่าคุณอยู่ใน Stripe test mode เสมอ และใช้บัตรทดสอบเท่านั้น:
4242 4242 4242 4242
วันหมดอายุในอนาคตอะไรก็ได้ และ CVC อะไรก็ได้
เตรียม Stripe ก่อนเชื่อมกับแอป
ก่อนเขียน prompt ให้ทำส่วนนี้ก่อน
- ไปที่
stripe.comแล้วสมัครบัญชี - เข้า Stripe dashboard
- มองหาสถานะหรือสวิตช์ที่บอกว่า
Test mode - ให้แน่ใจว่าตอนนี้คุณอยู่ในโหมดทดสอบ
- มองหาส่วน
DevelopersและAPI keys - เตรียม test keys ไว้สำหรับเชื่อมกับ Lovable
ตรงนี้ไม่ต้องจำชื่อปุ่มทุกปุ่มให้เป๊ะ เพราะ UI อาจเปลี่ยนได้ แต่ภาพรวมคือ คุณต้องมีบัญชี Stripe และต้องอยู่ในโหมดทดสอบก่อนเสมอ
ถ้าคุณยังไม่ได้เปิด test mode ให้เรียบร้อย แล้วไปต่อทันที บทนี้จะงงขึ้นมากโดยไม่จำเป็น เพราะคุณจะไม่แน่ใจว่ากำลังทดสอบหรือกำลังแตะเงินจริง
เชื่อม Stripe เข้ากับโปรเจกต์ใน Lovable
หลังจากพร้อมใน Stripe แล้ว ให้กลับมาที่โปรเจกต์ของคุณใน Lovable
มองหาส่วน integration หรือ setting ที่เกี่ยวกับ Stripe แล้วเชื่อมบัญชีของคุณเข้าไป
หลักคิดของขั้นตอนนี้คล้ายกับตอนคุณเชื่อม Supabase ในคอร์ส database คือ คุณกำลังบอกแอปว่า ถ้าจะรับเงิน ให้ไปใช้แคชเชียร์คนนี้
หลังเชื่อมเสร็จ คุณก็พร้อมจะเพิ่มปุ่มจ่ายเงินจริงในแอปแล้ว
ลงมือทำ — เพิ่มปุ่มจ่ายเงินด้วย Stripe
เปิดโปรเจกต์แอปรวมสูตรอาหาร แล้วส่ง prompt นี้
เพิ่มระบบชำระเงินด้วย Stripe ในแอปสูตรอาหาร
- เพิ่มปุ่ม "ปลดล็อกสูตรทั้งหมด — ฿99" ในหน้าที่แสดงสูตรอาหารฟรี
- เมื่อกดปุ่ม ให้เปิดหน้าชำระเงินของ Stripe
- ใช้ราคา 99 บาทแบบจ่ายครั้งเดียว
- เมื่อชำระเงินสำเร็จ ให้กลับมาที่แอปพร้อมข้อความ "ขอบคุณ! ปลดล็อกสูตรทั้งหมดแล้ว"
- ใช้ Stripe test mode สำหรับการทดสอบทั้งหมด
- ดีไซน์ปุ่มและหน้าก่อนจ่ายให้ดูน่าเชื่อถือและเข้าใจง่าย
ไม่เปลี่ยนฟังก์ชันหรือ design ที่มีอยู่แล้วprompt นี้กำลังทำ 3 อย่างพร้อมกัน:
- สร้างจุดขายบนหน้าจอ
- ส่งคนไปจ่ายกับ Stripe
- พากลับมาพร้อมข้อความสำเร็จหลังจ่ายเสร็จ
ทดสอบ — รับเงินครั้งแรกแบบไม่มีเงินจริง
หลังจาก AI ทำเสร็จ ให้ลองกดปุ่มจ่ายเงินนั้น
คุณควรถูกพาไปยังหน้าชำระเงินของ Stripe จากนั้นให้ใช้ข้อมูลบัตรทดสอบนี้:
- หมายเลขบัตร:
4242 4242 4242 4242 - วันหมดอายุ: อะไรก็ได้ที่เป็นอนาคต
- CVC: อะไรก็ได้
กดจ่ายให้เสร็จ แล้วดูว่าคุณถูกพากลับมาที่แอปหรือไม่ พร้อมข้อความยืนยันหรือไม่
ถ้าทุกอย่างทำงาน คุณเพิ่งผ่านจังหวะสำคัญมากของคอร์สนี้แล้ว
เพราะถึงมันจะยังไม่ใช่เงินจริง แต่ flow การรับเงินทั้งระบบทำงานจริงแล้ว
ถ้าคุณกดจ่ายด้วยบัตรทดสอบ แล้วกลับมาที่แอปพร้อมข้อความสำเร็จ แปลว่าระบบรับเงินของแอปคุณเริ่มทำงานแล้วจริงๆ
ถ้ายังกดแล้วไปไม่ถึงหน้าจ่าย หรือจ่ายแล้วไม่กลับมา
บทนี้มีหลายจุดเชื่อมกัน เลยเป็นเรื่องปกติถ้ารอบแรกยังไม่สมบูรณ์
ถ้ากดแล้วไม่ไปหน้าจ่าย ลองบอก AI ว่า:
ตอนนี้ปุ่มชำระเงินยังไม่เปิดหน้าชำระเงินของ Stripe
ช่วยตรวจการเชื่อมต่อ Stripe และทำให้ปุ่มนี้พาไปหน้าชำระเงินได้จริงใน test mode
ไม่เปลี่ยนฟังก์ชันหรือ design ที่มีอยู่แล้วถ้าจ่ายเสร็จแล้วไม่กลับมาที่แอป ลองบอกเพิ่มว่า:
หลังชำระเงินสำเร็จแล้ว ยังไม่กลับมาที่หน้า success ของแอป
ช่วยทำให้หลังจ่ายสำเร็จ ผู้ใช้กลับมาที่แอปพร้อมข้อความยืนยันที่ชัดเจน
ไม่เปลี่ยนฟังก์ชันหรือ design ที่มีอยู่แล้วถ้าคุณรู้สึกว่าบทนี้มีหลายชิ้นส่วนกว่าเดิม นั่นปกติ เพราะนี่เป็นครั้งแรกที่แอปของคุณเริ่มคุยกับระบบรับเงินจริงภายนอก
สำหรับแอปของคุณเอง
หลักเดียวกันนี้เอาไปใช้กับแอปอื่นได้ตรงๆ
- แอปจดโน้ต: ปุ่มปลดล็อกจำนวนโน้ตไม่จำกัด
- แอปติดตามรายจ่าย: ปลดล็อกรายงานขั้นสูง
- แอปคอนเทนต์: จ่ายเพื่อเข้าถึงบทความหรือวิดีโอทั้งหมด
- แอป utility เล็กๆ: จ่ายครั้งเดียวเพื่อปลดล็อกเวอร์ชันเต็ม
คำถามสำคัญคือ:
คนควรเห็นปุ่มจ่ายเงินตรงจุดไหน ที่เขาเข้าใจทันทีว่าจ่ายแล้วจะได้อะไรเพิ่ม
อย่าเริ่มจากวางปุ่มจ่ายไว้ทุกที่ ให้เริ่มจากจุดที่คุณค่าของของเสียเงินชัดที่สุด
วันนี้คุณไม่ได้แค่เพิ่มปุ่ม
สิ่งที่คุณเพิ่มจริงๆ คือ “ระบบรับเงิน” ให้กับแอปของคุณ
ก่อนหน้านี้ แอปของคุณอาจมีผู้ใช้ มีข้อมูล มี design และมี API แล้ว แต่วันนี้มันเริ่มมีทางแปลงคุณค่านั้นเป็นรายได้ได้จริงเป็นครั้งแรก
นี่เป็นก้าวที่ทั้งเทคนิคและอารมณ์ใหญ่กว่าที่เห็น เพราะมันเปลี่ยนคำถามจาก คนใช้ไหม ไปเป็น คนยอมจ่ายไหม
คุณไม่ต้องยืนรับเงินเองทีละคนแล้ว ระบบเริ่มทำหน้าที่นั้นแทนคุณได้ และนั่นคือหนึ่งในสัญญาณว่าแอปของคุณกำลังก้าวจากโปรเจกต์ ไปสู่ของที่มีโมเดลธุรกิจจริง
คุณเพิ่งทำอะไรสำเร็จไปแล้วบ้าง
- คุณเข้าใจแล้วว่า payment gateway คือช่องทางรับชำระเงินที่ช่วยจัดการเรื่องเงินแทนแอปของคุณ
- คุณรู้แล้วว่าทำไมคอร์สนี้เลือก Stripe เพื่อให้ระบบรับเงินต่อกับการปลดล็อกอัตโนมัติได้
- คุณเชื่อม Stripe ในโหมดทดสอบและสร้างปุ่มจ่ายเงินในแอปได้แล้ว
- คุณทดสอบการจ่ายเงินครั้งแรกผ่านแอปของตัวเองสำเร็จ โดยไม่ใช้เงินจริง
บทต่อไป เราจะไปยังคำถามที่สำคัญไม่แพ้กัน: จ่ายแล้วได้อะไร เพราะถ้าคนจ่ายเงินเสร็จแล้วแอปยังเหมือนเดิมทุกอย่าง ระบบรับเงินก็ยังไม่ถือว่าสมบูรณ์