PublishedAt

วิธีการ Test Stripe Webhook บนเครื่อง local

วิธีการ Test Stripe Webhook บนเครื่อง local

สวัสดีครับ บทความนี้จะพูดถึงวิธีการทดสอบ Stripe Webhook บนเครื่อง local กัน ปัญหาที่เจอบ่อยมากคือ Stripe ต้องการ URL เพื่อไว้ส่ง webhook ซึ่งเราต้อง deploy web ก่อนเพื่อส่ง event ให้มาหาเรา ทีนี้พอเป็น localhost เทสบนเครื่อง เราไม่สามารถรับ event ได้ ดังนั้นเราเลยต้องใช้ Stripe CLI มาช่วย forward event โดยที่เราไม่ต้อง deploy website แต่เทสผ่าน localhost ได้เลย

*Cover Image สร้างด้วย prompt ChatGPT

ปัญหาที่เจอ

ปัญหาคือตอน develop บน local เราเปิด server ที่ localhost:3000 ซึ่ง Stripe ไม่สามารถเข้าถึงได้

Terminal window
Stripe http://localhost:3000/api/webhook

วิธีแก้คือใช้ Stripe CLI ที่รันบนเครื่องเรา แล้วทำหน้าที่รับ event จาก Stripe แล้วส่งต่อมาที่ localhost ครับ

Terminal window
Stripe Stripe CLI http://localhost:3000/api/webhook

Step 1 : ติดตั้ง Stripe CLI

Stripe CLI
You can use the Stripe CLI to build, test, and manage your integration from the command line, including calling an API, testing a webhooks integration, and creating an application.docs.stripe.com

ติดตั้งผ่าน Homebrew (macOS)

Terminal window
brew install stripe/stripe-cli/stripe

ตรวจสอบว่าติดตั้งถูกต้อง

Terminal window
stripe version
# stripe version 1.27.0

Step 2 : Login

ทำการ login เพื่อให้ Stripe CLI สามารถส่ง event ไปยัง webhook URL ของเราได้

Terminal window
stripe login
Your pairing code is: xxxxxxxxxxxx
This pairing code verifies your authentication with Stripe.
Press Enter to open the browser or visit https://dashboard.stripe.com/stripecli/confirm_auth?t=xxxxxx

กด Enter แล้วเปิด browser เพื่อยืนยันตัวตนกับ Stripe account ของเรา ให้เราทำการ login stripe บนเว็บ

Terminal window
Done! The Stripe CLI is configured for <your-account> with account id <acc_xxx>

หรือถ้าใช้ AI/LLM ลองเพิ่ม skills ได้เช่นกัน

Terminal window
npx skills add -y https://docs.stripe.com

Step 3 : เตรียม Webhook Endpoint

ตัวอย่างง่ายๆ ของ webhook handler ที่รับ event จาก Stripe มีขั้นตอนหลักๆ สามอย่างคือ

  1. รับ raw body จาก request
  2. ตรวจสอบ signature ว่า event มาจาก Stripe จริงๆ
  3. จัดการ event ตาม type ที่เราสนใจ

เพื่อให้ง่ายที่สุด เราจะใช้ Express ไฟล์เดียวเลย ไม่ต้อง scaffold project อะไรทั้งนั้น

ติดตั้ง dependencies

Terminal window
npm install express stripe dotenv

สร้างไฟล์ server.js

server.js
import 'dotenv/config'
import express from 'express'
import Stripe from 'stripe'
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY)
const webhookSecret = process.env.STRIPE_WEBHOOK_SECRET
const app = express()
app.post('/api/stripe-webhook', express.raw({ type: 'application/json' }), (req, res) => {
const signature = req.headers['stripe-signature']
let event
try {
event = stripe.webhooks.constructEvent(req.body, signature, webhookSecret)
} catch (err) {
console.error('Webhook signature failed:', err.message)
return res.status(400).send(`Webhook Error: ${err.message}`)
}
switch (event.type) {
case 'checkout.session.completed': {
const session = event.data.object
console.log('Payment success:', session.id)
break
}
default:
console.log(`Unhandled event: ${event.type}`)
}
res.json({ received: true })
})
app.listen(3000, () => console.log('Server running on http://localhost:3000'))

สร้างไฟล์ .env

Terminal window
STRIPE_SECRET_KEY=sk_test_...
STRIPE_WEBHOOK_SECRET=whsec_...

รัน server

Terminal window
node server.js

สังเกตว่า route /api/stripe-webhook ใช้ express.raw() แทน express.json() เพราะ Stripe ต้องการ raw body ในการคำนวณ signature ครับ ถ้าใช้ express.json() signature จะไม่ตรงและ verify ไม่ผ่าน

Step 4 : Forward Events ด้วย stripe listen

ตอนนี้เราจะใช้ Stripe CLI มา forward event มาที่ webhook ของเรา รัน command นี้ในอีก terminal นึง

Terminal window
# Terminal 2
stripe listen --forward-to localhost:3000/api/stripe-webhook

จะเห็น output แบบนี้

Terminal window
> Ready! You are using Stripe API Version [2025-04-30.basil].
> Your webhook signing secret is whsec_abc123xyz... (^C to quit)

สำคัญมาก: copy ค่า whsec_... นี้ไปใส่ใน .env

Terminal window
STRIPE_WEBHOOK_SECRET=whsec_abc123xyz...

ค่านี้จะเปลี่ยนทุกครั้งที่รัน stripe listen ใหม่ ดังนั้นถ้า restart CLI ต้อง update env ด้วยนะครับ

Step 5 : ทดสอบด้วย stripe trigger

ก่อนจะทดสอบ flow จริง ลองยิง event จาก CLI ก่อนได้เลย เพื่อเช็คว่า webhook handler ของเรารับได้ถูกต้อง

เปิดอีก terminal แล้วรัน เพื่อจำลองส่ง event checkout.session.completed

Terminal window
stripe trigger checkout.session.completed

ใน terminal ที่รัน stripe listen จะเห็น log ประมาณนี้

Terminal window
2026-06-10 15:30:00 --> checkout.session.completed [evt_xxx]
2026-06-10 15:30:00 <-- [200] POST http://localhost:3000/api/stripe-webhook [evt_xxx]

และใน server log ของเราจะเห็น

Terminal window
Payment success: cs_test_xxx

ถ้า response เป็น 200 แสดงว่า webhook handler ทำงานถูกต้องแล้วครับ

ถ้าได้ 400 หรือ 500 ให้เช็ค

  • ค่า STRIPE_WEBHOOK_SECRET ใน .env ถูกไหม
  • Server ของเรารันอยู่ไหม หรือ URL ผิด?

การเทส Stripe เราสามารถใช้บัตรเครดิต ตัวเทส ได้ โดยใส่ดังนี้

Terminal window
Card: 4242 4242 4242 4242
Expiry: 12/29 (อะไรก็ได้ที่ยังไม่หมดอายุ)
CVC: 123 (อะไรก็ได้)
Test card numbers
Use test cards to validate your Stripe integration without moving real money. Test a variety of international scenarios, including successful and declined payments, card errors, disputes, and bank authentication. You can also test non-card payment methods and redirects.docs.stripe.com

สรุป

เราสามารถทดสอบ webhook ของเรากับ Stripe CLI ได้ง่ายๆ แค่

  1. ติดตั้ง Stripe CLI → brew install stripe/stripe-cli/stripe
  2. Login → stripe login
  3. Forward events → stripe listen --forward-to localhost:PORT/api/webhook
  4. Copy whsec_... ไปใส่ STRIPE_WEBHOOK_SECRET ใน .env
  5. ทดสอบด้วย stripe trigger checkout.session.completed
  6. ทดสอบ flow จริงด้วย test card 4242 4242 4242 4242

หากใครติดปัญหาตรงส่วนไหน สอบถามมาได้นะครับ

Happy Coding ❤️

Freelance

ต้องการคนช่วยพัฒนาเว็บไซต์หรือ Web App?

รับงาน Frontend, Backend, Web App, CMS, เว็บไซต์บริษัท, E-Commerce, และเชื่อมต่อ API สำหรับธุรกิจหรือทีมที่ต้องการคนช่วยพัฒนา

ดูบริการ Freelance
Authors
avatar

Chai Phonbopit

Senior Software Engineer ประสบการณ์กว่า 12 ปี ด้าน Frontend: React, Next.js, Tailwind CSS และ Backend: Node.js, Express, NestJS ปัจจุบันสนใจ Astro, Cloudflare Workers และ AI Coding Tool