[Workshop] AI สร้าง Sale Page พร้อม Stripe Payment (QR code, Credit Card) แบบไม่เขียนโค้ด ด้วย Bolt.new

บทความนี้เป็นบทความประกอบ Video AI สร้าง Sale page หน้าเดียวรองรับชำระเงินด้วย QR Code, Credit Card โดยไม่ต้องเขียนโค้ดด้วย Bolt.new

Bolt.new คือแพลตฟอร์ม AI ช่วยเขียนโค้ดสร้าง Website / WebApp ผ่านการเขียน Prompt โดยไม่ต้องติดตั้งโปรแกรมในเครื่อง เพียงแค่เราพิมคำสั่งอธิบายโปรเจคที่เราต้องการ เพียงเท่านี้ โปรแกรมก็จะเริ่มเขียนโค้ด และแก้ไขปัญหาเบื้องต้นให้เราเอง โดยไม่ต้องมีพื้นฐานการเขียนโปรแกรม

หากต้องการแก้ไขส่วนที่ AI เขียนโค้ดมาให้ก็เพียงแค่พิมคำสั่งให้ระบบแก้ไขตัวเองได้เลย Bolt.new ยังสามารถจัดการเรื่องการ Deployment ในตัวผ่าน Netlify และเชื่อมต่อกับ Database ด้วย Supabase

นอกจาก Bolt.new แล้วยังมีโปรแกรมอื่น ๆ ที่มีความสามารถคล้าย ๆ กัน เช่น v0.dev, lovable.dev, Replit AI

ตัวอย่างเว็บไซต์ที่เสร็จสมบูรณ์แล้ว

ภาพรวม / Project Overview

ใน Project นี้เราจะใช้เครื่องมืออย่าง Bolt.new ซึ่งเป็น AI ที่จะช่วยเราทำ Website แบบไม่ต้องเขียนโค้ด เพียงแค่อธิบาย ตัวอย่างเว็บไซต์ที่ต้องการ ระบบก็จะสร้าง และ Deploy ให้เราใช้งานได้ทันที โดยโครงสร้างภาพรวมของ Project นี้มีส่วนประกอบดังนี้

• การพัฒนา Frontend หรือส่วนการแสดงผลทั้งหมด จะใช้ Bolt.new
• ระบบการจ่ายเงินใช้ Stripe ในการสร้างแบบฟอร์มจ่ายเงิน, สร้างสินค้า, ส่งอีเมลเมื่อมีการสั่งซื้อ และ เก็บข้อมูล Transaction ทั้งหมด (หากพบปัญหาการจ่ายเงินให้ติดต่อ Stripe)
• ใช้ GitHub ในการเก็บ Source code สำหรับ Backup project
• ใช้ Netlify ในการ Deployment เพื่อใช้งานจริง

โดยเว็บไซต์นี้จะสามารถทำงานได้ / มี Feature ตามนี้

1. ผู้ใช้งานสามารถดูข้อมูลสินค้าบนเว็บไซต์ได้
2. ผู้ใช้งานสามารถกดแบบฟอร์ม กรอกอีเมล และชำระเงินได้หลายช่องทางเช่น Credit card, PromptPay QR
3. เมื่อผู้ใช้งานจ่ายเงินเสร็จสมบูรณ์แล้ว ระบบจะพาไปหน้า Success เพื่อยืนยันการชำระเงิน
4. หากชำระเงินไม่สำเร็จ ระบบจะแสดง Error message เพื่อให้ผู้ใช้งานแก้ไขข้อมูลให้ถูกต้อง เช่น เลขบัตรเครดิตไม่ถูกต้อง, ไม่ได้จ่ายเงินใน PromptPay ตามเวลาที่กำหนด
5. เมื่อผู้ใช้งานจ่ายเงินเสร็จสมบูรณ์แล้ว ระบบจะส่งอีเมลไปหาผู้ดูแล เกี่ยวกับรายละเอียดของผู้ซื้อ

ประโยชน์ทางธุรกิจ / Business Overview

การใช้ Bolt.new ในการสร้างเว็บไซต์ Sale page ที่รองรับการจ่ายเงินในตัว สามารถนำไปทำหน้าขายคอร์สเรียนออนไลน์, ขาย Theme / Template เอกสาร โดยอาจจะต่อยอดให้รองรับให้มีหน้าอื่น ๆ อีกเช่นหน้าทำนัดหมาย หรือหน้าบทความ

เรื่องที่ต้องรู้ และข้อสงสัยก่อนเริ่มเชื่อมต่อระบบจ่ายเงินด้วย Bolt.new

Stripe Payment

Stripe เป็นระบบจัดการการจ่ายเงินเหมือน OPN, 2C2P, Pay Solution, Xendit ทำให้เราไม่ต้องสร้างหน้าแบบฟอร์มจ่ายเงินเอง รองรับช่องทางการจ่ายเงินหลายแบบทั้ง Apple Pay, Google Pay, Ali Pay QR Promptpay, Internet banking และ Credit card

รองรับระบบการจ่ายเงินทั้ง Recurring payment (จ่ายซ้ำทุกเดือนแบบ Subscription) และ One-time payment (จ่ายครั้งเดียว)

โดยเราสามารถเลือกได้ว่าจะเอาระบบของ Stripe มาเชื่อมต่อกับเว็บไซต์เราอย่างไร โดยสามารถแบ่งได้เป็น 3 รูปแบบตามความยากง่ายดังนี้

1. Payment link / Stripe-hosted page (ง่ายที่สุด)
   ทำเป็นลิ้งค์ หรือปุ่มที่เว็บไซต์ ที่กดแล้ว เข้าหน้าจ่ายเงินของ Stripe ได้ โดยเรามีหน้าที่แค่ใส่ลิ้งค์ในเว็บไซต์, ตั้งค่า Product และ Branding ใน Stripe
2. Embedded form (ใน Workshop นี้ใช้วิธีนี้)
   ใช้แบบฟอร์มจ่ายเงินของ Stripe มาฝังในเว็บไซต์ ให้กดจ่ายเงินได้ผ่านเว็บไซต์ของเราเลย
3. Custom component (ยากที่สุด แต่ปรับแต่งได้เต็มที่)
   ทำแบบฟอร์มทั้งหมดเอง สามารถปรับแต่งได้เต็มที่โดยส่งข้อมูลไปที่ Stripe

API

API หรือ Application Programming Interface คือรูปแบบการสื่อสารรูปแบบหนึ่งกับ Server หรือ Backend โดยส่วนใหญ่เราจะเจอ API ก็ต่อเมื่อ เราใช้ 3rd Party service อย่าง Stripe, LINE, Webhook (บริการเหล่านี้มักไม่มีหน้าจอ หรือปุ่มให้กด ต้องเขียนโค้ดเพื่อใช้งานระบบของเขาแทน)

ตัวอย่าง Stripe API

Secret Key

เนื่องจากใน Project ใช้ Stripe ในการจัดการระบบจ่ายเงินทั้งหมด โดยเราต้องมี Stripe account ในการใช้งาน ซึ่งแทนที่จะต้อง Login ใหม่ทุกครั้งเพื่อใช้งาน เราจะมีรหัสยาว ๆ เพื่อเข้าใช้งานแทน โดยเราขอเรียกว่า Secret key เป็นเสมือนกุญแจที่ถ้าใครมีก็สามารถสวมรอยใช้งานแทนเราได้ ดังนั้นเราจะไม่เปิดเผยไม่ว่าที่ไหนก็ตาม เพื่อความปลอดภัยของระบบและข้อมูลผู้ใช้งาน

โดยหลักการแล้วการที่ผู้ใช้งานเข้าหน้าเว็บไซต์ที่แสดงผล, Frontend หรือ Client คือการดาวน์ไฟล์ HTML ลงบนเครื่องของเขา ดังนั้นอะไรที่เราเขียนไว้บนนี้ ผู้ใช้งานอาจจะสามารถอ่านข้อมูลได้ทั้งหมด ดังนั้น Secret key ส่วนใหญ่จะถูกเก็บไว้บน Server หรือ Backend แทน เพื่อป้องกันไม่ให้ผู้ใช้งานเข้าถึงข้อมูลสำคัญเหล่านี้

Environment Variable

โดยการเก็บ Secret key ส่วนใหญ่จะเก็บผ่านสิ่งที่เรียกว่า Environment variable (ไฟล์ .env) ซึ่งเป็นไฟล์พิเศษที่ใช้เก็บค่าตัวแปรสำคัญที่ไม่ต้องการให้ปรากฏในโค้ดหลัก และสามารถจัดการแยกต่างหากได้อย่างปลอดภัย โดยใน Workshop เราจะต้อง setup Environment variable ทั้งใน Bolt.new ระหว่างพัฒนา และใน Netlify ตอน Deployment

Environment variable มีประโยชน์ในเชิงกรณีเราต้องการทำเวอร์ชั่นทดสอบ ให้แตกต่างจากเวอร์ชั่นจริง เช่นใน Stripe ใน Workshop นี้ เราจะใช้ API key ของเวอร์ชั่นทดสอบ เพื่อทดลองเล่นโดยไม่ต้องจ่ายเงินจริง ๆ

Quality Assurance

การทำ Project ด้วย Low-code และ Vibe coding ที่ไม่ได้ทำโดยโปรแกรมเมอร์ อาจจะมีปัญหาเรื่องคุณภาพของ Project เช่นทำมาแล้วใช้งานไม่ได้บ้าง หรือมีช่องโหว่ เราสามารถแก้ไขเรื่องนี้ได้โดยการทดสอบระบบก่อนใช้งานจริงเพื่อลดความเสียหายกับผู้ใช้งาน และชื่อเสียงของบริษัท

โดยเราสามารถแบ่งการทดสอบระบบอย่างง่ายได้ดังนี้

Acceptance testing

การทดสอบระบบตาม ฟีเจอร์การใช้งานจริง ว่าเป็นไปตามที่เราคาดหวังไว้หรือไม่ ? โดยจะต้องมี Expectation และ Actual result เมื่อใช้งานระบบเช่น

Regression test

การทดสอบระบบซ้ำทั้งระบบ เมื่อมีการเพิ่มฟีเจอร์ใหม่เข้ามา เพราะในการทำ Project มีโอกาสสูงที่เมื่อเพิ่มฟีเจอร์ใหม่เข้ามาในระบบอาจจะทำให้ ฟีเจอร์เดิมใช้งานไม่ได้ เช่น ทำฟีเจอร์ล็อคอินเพิ่มเข้ามาใน Proejct ควรกลับไปทดสอบฟีเจอร์ระบบจ่ายเงินเดิมด้วยทุกครั้ง

ค่าใช้จ่ายที่อาจจะเกิดขึ้น / Cost Breakdown

สำหรับการทำ Project นี้เพื่อใช้งานจริง สามารถแบ่งค่าใช้จ่ายที่เกิดขึ้นได้ดังนี้

Bolt.new

Bolt.new ใช้เพื่อ Prompt เพื่อสร้างเว็บไซต์คิดเป็นค่าใช้จ่ายเป็น token ในการใช้งาน AI ของ Platform โดยมีรายละเอียดดังนี้

• Free plan จะใช้ได้เพียง 150,000 token ต่อวัน และ 1 million token ต่อเดือน (เมื่อเต็ม Quota จะใช้งานต่อไม่ได้)
• Pro plan คิดราคาเริ่มต้นที่ $20 (ประมาณ 700 บาท) ต่อ 10 million Token ต่อเดือน

รายละเอียดเกี่ยวกับราคาของ Bolt.new

หรือสามารถใช้งาน Bolt.diy ซึ่งเป็นโปรแกรม bolt.new เวอร์ชั่นฟรี สามารถติดตั้งลงเครื่องคอมพิวเตอร์ได้เลยฟรี แต่ต้องใช้ ChatGPT, Claude API key ของตัวเอง อ่านรายละเอียดเกี่ยวกับ Bolt.diy

Netlify platform

Netlify เป็น Platform สำหรับการ Host website ของเรา โดยคิดค่าบริการแบบ Pay per usage (ยิ่งคนเข้าใช้งานเว็บไซต์เยอะ ยิ่งจ่ายแพง) โดยใน Workshop นี้ใช้ฟีเจอร์ใน Netlify ดังนี้

ส่วนใหญ่ ถ้าไม่ใช่เว็บไซต์คนเข้าหลักหมื่น หลักแสน แทบไม่เสียค่าใช้จ่ายเพิ่มเลย

Netlify hosting การเช่า hosting ของ Netlify ใช้งานได้ฟรี ประมาณ 100GB (Bandwidth) ต่อเดือน และ $55 (ประมาณ 1,800 บาท) ต่อเดือนเมื่อใช้งานเกิน Quota

รายละเอียดเกี่ยวกับราคาของ Netlify

Stripe Payment

Stripe คิดค่าธรรมเนียม Platform ตาม Transaction ดังเช่น

• สำหรับบัตรเครดิต ประเภท VISA และ Master Card
  • รับชำระเงินจากในประเทศ 3.65% + 10 บาท
  • รับชำระเงินจาก ต่างประเทศ 4.75% + 10 บาท
• สำหรับการชำระเงินด้วย Promptpay ค่าธรรมเนียม 1.65%

อ่านรายละเอียดเพิ่มเติมเกี่ยวกับ Stripe fee

แนวคิดการพัฒนา / Task Breakdown

ขั้นตอนในการลงมือทำไล่เป็นขั้นตอนจากง่ายไปยาก หากทำตามขั้นตอนเหล่านี้จะสามารถเห็นภาพรวมของการพัฒนาได้ดียิ่งขึ้น

ใน Tutorial นี้เราจะไม่ได้เชื่อมต่อ Stripe และ Netlify ผ่าน Bolt.new โดยตรง เนื่องจากระบบ Bolt.new ยังทำออกมาไม่สมบูรณ์

1. Development Stage (ขั้นตอนการพัฒนา)
   1. Import template sale page with Stripe payment
   2. สร้าง Stripe account และ Product เพื่อนำ Secret มาใช้ใน Project
   3. สร้างไฟล์ Environment variable
   4. ทดลองเล่น Flow การจ่ายเงิน
   5. Prompt เพิ่มเติมเพื่อแก้ไขให้เว็บไซต์สมบูรณ์
2. Testing / Audit Stage (การตรวจสอบก่อนใช้งาน)
   1. ตรวจสอบฟีเจอร์การจ่ายเงินทั้งจ่ายสำเร็จ และจ่ายไม่สำเร็จ
   2. การตรวจสอบการแสดงผลในหลาย ๆ ขนาดหน้าจอ ด้วย Responsive viewer (Chrome extension)
3. Deployment Stage (ขั้นตอนการใช้งานจริง)
   1. เชื่อมต่อ GitHub กับ Netlify เพื่อทำการ Deploy
   2. เชื่อม Domain name เข้ากับ Netlify (ส่วนเสริม)

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

Account ที่ใช้ในการทำ Workshop จะสมัครภายหลังหรือสมัครก่อนก็ได้

• Bolt.new account  สมัครเข้าใช้งานฟรีที่นี่ https://bolt.new/
• Stripe account สมัครเข้าใช้งานฟรีที่นี่ https://stripe.com/en-th
• GitHub account สมัครเข้าใช้งานที่นี่ (ฟรี) ที่ https://github.com/
• Netlify account สมัครเข้าใช้งานที่นี่ (ฟรี) ที่ https://www.netlify.com/
• Domain name (ส่วนเสริม)

ขั้นตอนการลงมือทำ / How to

Import Template Sale Page พร้อม Stripe Payment (QR code, Credit Card)

Import template จาก GitHub repository เข้ามาใน Bolt.new

Template: https://github.com/Datayolk/next-embedded-stripe-form

(Datayolk คือ username และ next-embedded-stripe-form คือ project / repository)

โดยเราสามารถ Import project เข้ามาใน Bolt.new เพื่อปรับแต่งต่อได้โดยใช้ Format ตามนี้ https://bolt.new/~/github.com/<username>/<repository>

ตัวอย่างกรณีที่จะใช้ next-embedded-stripe-form คือ https://bolt.new/~/github.com/Datayolk/next-embedded-stripe-form

สมัคร Stripe account และหา API Keys

สมัครใช้งาน Stripe account โดยเมื่อเปิดใช้งานครั้งแรกใน Sandbox mode จะยังไม่ต้องยืนยันตัวตน สามารถเริ่มทดลองใช้งานได้ก่อนเลย โดยในขั้นตอนนี้เราจะต้อง Copy ข้อมูล API keys ในหน้า Dashboard ซึ่งจะมี 2 อันได้แก่

• Publishable key
• Secret key

สร้าง Product ใหม่ ใน Sandbox / Test mode

สร้างสินค้าใหม่โดยตั้งราคาให้ไม่ต่ำกว่า 10 บาท, เลือกเป็น One-off payment และใส่ข้อมูลให้เรียบร้อยตามนี้

Title: No-Code Founder’s Web App Blueprint

Description: Complete guide for non-technical founders to build web applications without coding. Step-by-step instructions, tool recommendations, and proven frameworks to turn your ideas into functional web apps using no-code platforms.

Amount: 10

Image: ตัวอย่างภาพ

จากนั้นจึงกด Copy Price ID ไป

สร้างไฟล์ Environment variable

สร้างไฟล์ .env ใน Bolt.new โดยใส่ข้อมูล ตาม .env.example ซึ่งจะเป็นข้อมูลที่ได้มาจากขั้นตอนก่อนหน้า

ทดสอบ ระบบการจ่ายเงิน ผ่าน Test Case ที่สร้างโดย Generative AI

ในตอนนี้เว็บไซต์ตัวอย่างใน Bolt.new ของเราก็เชื่อมระบบจ่ายเงินสำเร็จแล้ว เราลองเล่น Flow การจ่ายเงินได้เลย

โดยการทดสอบระบบจ่ายเงินของ Stripe (UI part) เราจะทดสอบโดยอ้างอิงตาม Document ของ Stripe และพยายามคิดในมุมของผู้ใช้งาน ว่าเราจะทำอะไรบนเว็บไซต์บ้าง และคาดหวังอะไรให้เกิดขึ้นบ้าง ? โดยใน Workshop นี้ ของแบ่งการทดสอบเป็นหมวดหมู่ตามนี้

Payment Flow

การทดสอบการจ่ายเงินโดยจะกรอกข้อมูลสมมติเพื่อจำลองการจ่ายเงินสำเร็จ หรือ จ่ายเงินล้มเหลว ตาม เอกสาร Test your integration | Stripe (ในเอกสารทดสอบจะให้เลขบัตรเครดิต/ เดบิตให้ โดย CVC , Date เราสามารถกรอกได้เอง) โดยมีเงื่อนไขทางธุรกิจดังนี้

• ผู้ใช้งานเห็นแบบฟอร์มการจ่ายเงิน และสามารถกรอกรายละเอียดการชำเงินได้
• [กรณีที่เลือกการจ่ายเงินด้วยบัตร Credit / Debit] หากกรอกข้อมูลบัตรไม่ครบ หรือรูปแบบไม่ถูกต้องจะไม่สามารถกด Submit / Pay ได้ ระบบจะแสดง Error message
• [กรณีที่เลือกการจ่ายเงินด้วยบัตร Credit / Debit] เมื่อกรอกข้อมูลครบแล้ว หากข้อมูลบัตรไม่ถูกต้อง ระบบจะแสดง Error message
• [กรณีที่เลือกการจ่ายเงินด้วยบัตร Credit / Debit] เมื่อกรอกข้อมูลครบแล้ว หากข้อมูลบัตรถูกต้อง ระบบจะพาไปหน้า Success page /return
• [กรณีที่เลือกการจ่ายเงินด้วย QR Promptpay] ระบบจะให้กด Generate QR และ Simulate Scan หากไม่กดอะไร ระบบจะไม่แสดงผลอะไร
• [กรณีที่เลือกการจ่ายเงินด้วย QR Promptpay] เมื่อกด Simulate Scan ระบบจะพอไปหน้า Simulate Scan โดยเราสามารถเลือกกด Authorize test payment (จ่ายเงินตามเงื่อนไข) หรือ Expire test payment (ไม่จ่ายในเวลาที่กำหนด) เมื่อทำเงื่อนไขถูกต้องระบบจะพาไปหน้า Success page /return
• กรณีที่เข้าไปหน้า /return โดยไม่ผ่านการจ่ายเงิน ระบบจะไม่แสดงข้อมูลใด ๆ

ตัวอย่างข้อมูลบัตรจาก Stripe Document

• Success case
  • Visa
    4242424242424242
  • Mastercard
    5555555555554444
• Fail case
  • Generic decline
    4000000000000002
  • Insufficient funds decline
    4000000000009995
  • อยู่ในฐานข้อมูล Fraud prevention ของ Stripe
    4100000000000019

สร้าง Payment Flow Test Case ด้วย Generative AI (Claude)

ในขั้นตอนนี้ เราจะเอาเงื่อนไขทางธุรกิจมาปรับเป็น Test Case ที่เป็นแนวทางในการทดสอบระบบแบบเป็นขั้นตอน ซึ่งใครที่ได้รับเอกสารนี้จะต้องสามารถทดสอบผลการทำงานของระบบได้เลย

ใน Workshop นี้ เราใช้ Generative AI ในการช่วยสร้าง Test Case สำหรับทดสอบตาม Prompt นี้

สร้าง Test case ตามเงื่อนไขธุรกิจ [Business requirement] และแสดงผลออกมาในรูปแบบตาราง ที่สามารถ Copy paste ลงใน Google Sheet ได้เลย พร้อม Field สำหรับ Log ผลการทดสอบ 

Business requirement = “” 

ขอขอบคุณ [WLB บอกเล่าเก้าสิบ] Tester’s Copilot: ใช้ Generative AI ให้เหมือนมีผู้ช่วยส่วนตัว EP. 1 สำหรับไอเดียในการสร้าง Test case ด้วย Generative AI

ตัวอย่าง Test case ในไฟล์ Google Sheet

ตั้งค่าให้ส่งอีเมลเมื่อมีการจ่ายเงินสำเร็จ (ส่วนเสริม)

ใน Workshop นี้เราสามารถตั้งค่าระบบ Automation ใน Stripe ได้เบื้องต้น เช่นการส่งอีเมล เมื่อมี Order ใหม่ โดยเข้าไปที่ Menu Workflows

• เลือก Event “Checkout session is complete”
• เลือก Action “Email team member” โดยเลือกข้อมูลผู้ใช้งานมาแสดงผลได้เช่น Email ผ่านเมนู Append data โดยเลือก Checkout session → Customer details → Email

ปรับแต่ง Stripe Form UI เพิ่มเติม

เข้าไปที่ Settings ของ Stripe เพื่อปรับแต่งการแสดงผลเพิ่มเติมเช่นสีหรือข้อความอื่น ๆ

Prompt เพิ่มเติมเพื่อแก้ไขให้เว็บไซต์สมบูรณ์

เมื่อ Function การจ่ายเงินทำงานได้ถึงพอใจตามที่เราต้องการแล้ว ขั้นตอนต่อไป เราค่อยมาปรับแต่งเพิ่มเติม ให้เป็นเว็บไซต์ของเราจริง ๆ (อย่าลืมบอกว่าห้ามแก้ไขส่วนของการ Checkout) ตัวอย่างการใช้ Prompt

Product Name:
No-Code Founder's Web App Blueprint

Product Type:
E-book (Digital Download)

Target Audience:
Aspiring startup founders, entrepreneurs, or solo founders with no technical background who want to build web apps without hiring developers.

Goal of the Page:
Encourage visitors to purchase the e-book by clearly explaining its value, benefits, and what problems it helps solve.

Key Product Description (to include on page):
A complete guide for non-technical founders to build web applications without coding.
Includes:

Step-by-step instructions to go from idea to launch

Proven no-code frameworks used by successful startups

Tool recommendations for every stage (design, database, automation, etc.)

Tips to validate your idea, build MVPs, and iterate quickly

Benefits to Highlight:

Save thousands on developer costs

Build and test your idea in days, not months

Gain confidence to launch your own product

Learn how to use platforms like Bubble, Glide, Airtable, and more

Tone & Style:
Friendly, empowering, and practical. Use clear and simple language. Focus on the outcomes and benefits.

Call to Action (CTA):

"Download the E-book Now"

"Start Building Without Code Today"

Include trust elements like testimonials or money-back guarantee if available

Page Sections to Include:

Hero Section: Catchy headline + subheadline + CTA button

Who It's For: Describe the audience (e.g., non-tech founders)

What's Inside: Bulleted features of the e-book

Benefits: What they'll gain after reading

Social Proof: Testimonials or stats (optional)

CTA Section: Repeat strong call to action

** Don't edit Checkout component in index page **

ทดสอบ ระบบการจ่ายเงิน (อีกรอบ)

ทดสอบระบบทั้งหมดอีกรอบเมื่อมีการแก้ไข เพื่อตรวจสอบว่าของใหม่ที่เพิ่มเข้ามาไม่พังกระทบของเดิม ตามหลักของการทำ Regression test

เชื่อมต่อ Project เข้ากับ GitHub

เชื่อมต่อ Project เข้ากับ GitHub เพื่อเก็บ Sourcecode ที่เสร็จแล้วไว้บน GitHub โดยขั้นตอนนี้เราจะทำผ่าน Bolt.new เลย ผ่านการกด Menu GitHub integration ด้านบน

เชื่อมต่อ Netlify เข้ากับ GitHub

สมัครใช้งาน Netlify ผ่าน Netlify โดยตรง โดยไม่ผ่าน Bolt.new

เลือกการ Deployment ผ่าน GitHub และในส่วนนี้นอกจากการตั้งค่า Project แล้ว เรายังต้องตั้งค่า Environment variable อีกด้วย การใส่ Environment variable ในการ Deploy ทำให้เราแยก Stripe sandbox account สำหรับทดสอบใน Bolt ออกจาก Stripe production account ใน Netlify ได้ (ใน Project นี้จะใช้ Sandbox env โดยสามารถก็อปปี้จากไฟล์ .env ใน Bolt.new ได้เลย)

เมื่อ Deploy เสร็จลองตรวจสอบผลลัพธ์อีกรอบ

ไฟล์สำเร็จรูป และแหล่งอ้างอิงอื่น ๆ

• Template ของ Workshop นี้
• ตัวอย่าง Sample project ของการใช้ Stripe

แนวทางการต่อยอดเพิ่มเติม และข้อจำกัดใน Project นี้

อัปเดต Dependency / Package ให้ใหม่อยู่เสมอ

การสร้าง Website ส่วนใหญ่ แม้จะเป็นการเขียนโค้ด แต่ก็ไม่มีใครเขียนทุกอย่างเองจาก 0 อาจจะมีบ้างทีไปยืมโค้ดของคนอื่นมาใช้

เหมือนที่โรงงานผลิตรถยนต์ ก็ไม่ได้ผลิตยางรถยนต์เอง แต่สั่งซื้อจาก Supplier อีกที ซึ่งใน Digital product อาจจะเรียกว่า Dependency, Supply chain, Package

ซึ่งปัญหาอาจจะเกิดขึ้นได้หากเราใช้โค้ดของคนอื่น / Supplier ที่เก่าแล้วและมีช่องโหว่ แต่เราไม่ได้อัปเดตให้ใหม่อยู่เสมอ

Prompt ที่อาจจะช่วยปรับปรุงโค้ดให้ปลอดภัยมากขึ้น

Analyze my project dependencies for security vulnerabilities, and suggest safer alternatives for any packages that are outdated or have known security issues.

ต่อระบบอัตโนมัติเมื่อมีการจ่ายเงินเข้ามาในระบบด้วย Webhook ใน Activepieces

ใน Workshop นี้ เมื่อมีการจ่ายเงินเข้ามาในระบบ Stripe แล้ว เราจะส่งอีเมลไปหาผู้ดูแลเพื่อดำเนินการติดต่อลูกค้า หรือส่งสินค้าต่อไป แต่เราสามารถพัฒนาให้เมื่อมีการจ่ายเงินแล้ว เราไปทำ Automation อื่น ๆ นอก Stripe platform ได้อีก เช่น บันทึกข้อมูลการซื้อลงระบบ CRM หรือส่งอีเมลพาเข้า Learning platform ผ่าน Activepieces ด้วย Webhook

พัฒนาระบบจ่ายเงินให้สามารถเลือก Product ได้เอง

ใน Workshop นี้เราสามารถเลือก Product ได้เพียงอย่างเดียว ในการต่อยอด เราสามารถทำให้ ลูกค้า สามารถเลือก Product และจ่ายเงินได้เองที่เว็บไซต์ของเราเลย

คำถามที่พบบ่อยเกี่ยวกับ Project นี้

กรณีที่ Stripe secret key ถูกเปิดเผย หรือถูกแฮกจะทำอย่างไร ?

เมื่อ Secret key ถูกเอาไปใช้โดยไม่ใช่เรา อย่างแรก เมื่อรู้เรื่องแล้ว เราสามารถ Revoke / Rotate Stripe secret key ได้ผ่าน Stripe dashboard โดยสามารถทำตาม Tutorial นี้ได้เลย

บทความที่เกี่ยวข้อง

June 20, 2025July 9, 2025Vibe Coding 12

[Workshop] สำรองงานใน Bolt.new อย่างไร? ใช้ GitHub ง่ายๆ ไม่ต้องกลัวโค้ดหาย (สำหรับมือใหม่)

แนวทางการใช้ GitHub Integration ใน Bolt.new เพื่อเก็บประวัติการแก้ไขใน Project ทั้งหมดไว้บน GitHub และการทำ Version control ผ่านการสร้าง Branch ใน GitHub

June 2, 2025July 3, 2025Vibe Coding 28

[Workshop] ใช้ AI สร้าง Personal Blog จาก Free Template แบบไม่ต้องเขียนโค้ดด้วย Bolt.new

เรียนรู้แนวทางการสร้าง Personal Blog แบบไม่ต้องเขียน Code เองด้วย template จาก Bolt.new พร้อมการอธิบายการใช้เครื่องมือกลุ่ม Vibe Coding

April 13, 2025June 3, 2025Vibe Coding 46

[Workshop] ใช้ AI สร้าง Sale page มี Contact form แบบไม่ต้องเขียน Code เองด้วย Bolt.new

เรียนรู้แนวทางการสร้าง Sale page มี Contact form แบบไม่ต้องเขียน Code เองด้วย Bolt.new พร้อมการอธิบายเกี่ยวกับความเสี่ยงในการใช้เครื่องมือกลุ่ม Vibe Coding

• Facebook
• Twitter
• Line

AI Bolt.new Low-Code No-Code Workshop

Worakarn Ounhattapradit

พีเตอร์ ผู้ตัดสินใจกระโดดข้ามสายงานจากนักออกแบบ มาสู่โลกแห่งเทคโนโลยี สนใจในเทคโนโลยีใหม่ ๆ ที่จะพัฒนาคุณภาพชีวิตคนให้ดีขึ้น อ่านรายละเอียดเพิ่มเติม