Stripe ใช้รับชำระเงินบน Webflow ได้ทั้งแบบไม่ต้องโค้ด (Payment Links) และแบบฝัง (Checkout/Elements) รองรับครั้งเดียว/สมัครสมาชิก ตั้งภาษี/คูปอง/ใบเสร็จ และเชื่อม Webhooks เพื่ออัปเดต CMS/CRM อัตโนมัติ เหมาะทั้งเว็บสินค้า บริการ และสมาชิก.
Payments Checkout Payment Links Subscriptions Webhooks
ข้ามไป: เวิร์กโฟลว์ · วิธีตั้งค่า · เปรียบเทียบวิธี · โค้ดตัวอย่าง · เช็กลิสต์ · FAQ
Stripe × Webflow คืออะไร (สรุปย่อ)
- Payment Links: ลิงก์/ปุ่มจ่ายสำเร็จรูป วางบน Webflow ได้ทันที เร็วสุด
- Checkout: หน้าชำระเงินโฮสต์โดย Stripe (ปรับโลโก้/แบรนด์ได้) ยืดหยุ่นกว่าลิงก์
- Elements: ฝังฟอร์มจ่ายบนเว็บ (คัสตอม UX สูง แต่ต้องมีฝั่งเซิร์ฟเวอร์)
- Webhooks: อัปเดต CMS/CRM อัตโนมัติหลังจ่ายสำเร็จ/ต่ออายุ/คืนเงิน
เว็บสมาชิกใช้ร่วมกับ Memberstack/Outseta ได้ (ทั้งสองรองรับ Stripe)
ตาราง: เวิร์กโฟลว์ยอดนิยมบน Webflow
| กรณีใช้งาน | วิธี | ผลลัพธ์ |
|---|
| ขายบริการ/เวิร์กช็อปครั้งเดียว |
Payment Links → ปุ่ม “ชำระเงิน” บนหน้า Landing |
ปล่อยขายเร็ว ไม่ต้องโค้ด/เซิร์ฟเวอร์ |
| ตะกร้าเล็ก/แพ็กเกจ |
Stripe Checkout → สร้าง session ตามสินค้า/ราคา |
ประสบการณ์จ่ายปลอดภัย รองรับคูปอง/ภาษี |
| สมาชิก/รายเดือน |
Checkout + Price แบบ Recurring + Webhooks |
ตัดรอบอัตโนมัติ อัปเดตสถานะสมาชิก |
| บริจาค/จ่ายตามใจ |
Checkout with adjustable amount |
ตั้งยอดเอง พร้อมใบเสร็จอัตโนมัติ |
อยากได้เทมเพลตหน้า Checkout/Success + สคริปต์ Webhooks ตั้งค่าแล้ว? คุยกับทีม Vision X Brain
How-to: ติด Stripe บน Webflow (5 ขั้น)
- เลือกวิธี: เริ่มจาก Payment Links (เร็ว) หรือ Checkout (ยืดหยุ่น). ต้องคัสตอมสูงค่อยใช้ Elements
- ตั้งสินค้า/ราคา ใน Stripe (one-time หรือ recurring) และกำหนดสกุลเงิน/ภาษี
- ฝังปุ่ม/โค้ด:
• Payment Links: วางลิงก์/ปุ่มใน Webflow
• Checkout: ปุ่มเรียก API ฝั่งเซิร์ฟเวอร์เพื่อสร้าง checkout session
- ตั้ง Webhooks: รับอีเวนต์
checkout.session.completed, invoice.paid ฯลฯ → ส่งเข้า Make/Zapier หรืออัปเดต CMS/CRM
- ทดสอบ Test mode → ไป Live: ทดสอบ 3DS/ใบเสร็จ/ภาษี/คูปอง แล้วสลับคีย์จริง
ตาราง: เปรียบเทียบวิธีเชื่อม Stripe บน Webflow
| วิธี | ข้อดี | ข้อควรระวัง | เหมาะกับ |
|---|
| Payment Links |
เร็วสุด ไม่ต้องโค้ด/เซิร์ฟเวอร์ |
คัสตอม UX/ลอจิกน้อย |
Landing page, บริการครั้งเดียว |
| Stripe Checkout |
ปลอดภัย/รองรับคูปอง/ภาษี/3DS |
ต้องมี endpoint สร้าง session |
แพ็กเกจ, สมัครสมาชิก |
| Stripe Elements |
คัสตอมสูง/ฝังในหน้า |
ต้องโค้ดทั้งหน้าและเซิร์ฟเวอร์ + PCI ระดับสูงกว่า |
องค์กร/ฟรอนต์เอนด์เฉพาะทาง |
โค้ดตัวอย่าง: สร้าง Checkout Session + ปุ่มบน Webflow
// 1) ฝั่งเซิร์ฟเวอร์ (Node/Express หรือ Serverless)
// POST /create-checkout-session
import Stripe from "stripe";
import express from "express";
const app = express();
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);
app.post("/create-checkout-session", async (req, res) => {
const session = await stripe.checkout.sessions.create({
mode: "payment", // หรือ "subscription"
line_items: [{ price: "price_XXX", quantity: 1 }],
success_url: "https://YOURDOMAIN.com/success?session_id={CHECKOUT_SESSION_ID}",
cancel_url: "https://YOURDOMAIN.com/cancel"
});
res.json({ id: session.id, url: session.url });
});
// 2) ฝั่ง Webflow (Custom Code ในปุ่ม)
fetch("/create-checkout-session", { method: "POST" })
.then(r => r.json())
.then(d => window.location.href = d.url);
เช็กลิสต์ก่อนขึ้นโปรดักชัน
- ตั้ง success/cancel URL ให้ถูก และส่งค่า utm/source ต่อเพื่อวัดผล
- เก็บ คีย์ลับ ในฝั่งเซิร์ฟเวอร์/Environment เท่านั้น
- ทดสอบ 3DS/SCA, คูปอง, ภาษี, ใบเสร็จ, การคืนเงิน
- ตั้ง Webhooks และตรวจ signature ก่อนประมวลผล
- อัปเดต CMS/CRM ผ่าน Make/Zapier หลังจ่ายสำเร็จ พร้อมกันซ้ำ (idempotency)
- แสดง นโยบายคืนเงิน/เงื่อนไข ชัดเจน และรองรับหลายสกุลเงินถ้าขายต่างประเทศ
บริการ/คอนเทนต์ที่เกี่ยวข้อง (Internal Links)
FAQ (People Also Ask)
ไม่มีเซิร์ฟเวอร์ ทำยังไงดี?
เริ่มจาก Payment Links หรือใช้ฟังก์ชัน Serverless (Netlify/Vercel/Cloudflare) สำหรับ Checkout
สมาชิกใช้ Stripe อย่างเดียวได้ไหม?
ได้ (Subscriptions) แต่บน Webflow จะสะดวกขึ้นถ้าใช้ Memberstack/Outseta ควบคู่
รองรับหลายสกุลเงิน/ภาษี?
ตั้งค่าได้ที่ Stripe (Products/Prices/Tax) จากนั้น Checkout จะจัดการให้อัตโนมัติ
อัปเดตล่าสุด: 12 Aug 2025
