เชื่อมต่อ Stripe กับแอป MonstarX

รับชำระเงินด้วยบัตร การสมัครสมาชิก และหน้าชำระเงินในแอปของคุณ

ประเภท

สำหรับแอปของคุณ

หมวดหมู่

การชำระเงินและการเรียกเก็บเงิน

วิธีเชื่อมต่อ

คีย์ API

Stripe คือบริษัทรับชำระเงินที่ดูแลทั้งแบบฟอร์มบัตร ฝั่งธนาคาร และใบเสร็จ แล้วโอนเงินเข้าบัญชีธนาคารของคุณ เชื่อมต่อ Stripe แล้วแอปจะขายของได้ ไม่ว่าจะเป็นแพ็กคลาส สินค้า หรือสมาชิกรายเดือน ผ่านหน้าชำระเงินที่ปลอดภัยซึ่ง Stripe ดูแลให้

สร้างอะไรได้บ้าง

• ปุ่ม “ซื้อเลย” ที่เปิดหน้าชำระเงินของ Stripe แล้วพาลูกค้ากลับมาที่แอปเมื่อจ่ายเสร็จ
• แพ็กและบันเดิล เช่น “5 คลาส $90” ที่ปลดล็อกบางอย่างในแอปเมื่อจ่ายแล้ว
• การสมัครสมาชิกรายเดือนหรือรายปี สำหรับสมาชิกหรือแผนแบบเสียเงิน
• ประวัติคำสั่งซื้อ ของลูกค้าแต่ละคน และหน้าผู้ดูแลที่แสดงรายการการชำระเงิน
• ขั้นตอนต่อเนื่องอัตโนมัติ เช่น ทำเครื่องหมายว่าคำสั่งซื้อชำระแล้วและส่งใบเสร็จทางอีเมล เมื่อ Stripe ยืนยันการชำระเงิน

ก่อนเริ่มต้น

• บัญชี Stripe สมัครฟรี Stripe หักค่าธรรมเนียมจากการชำระเงินที่สำเร็จแต่ละครั้ง (ดู ราคาของ Stripe) MonstarX ไม่คิดเงินเพิ่ม
• สำหรับการทดสอบ ไม่ต้องมีอะไรเพิ่ม ทุกบัญชี Stripe ใช้ แซนด์บ็อกซ์ (sandbox) ได้ ซึ่งเป็นสำเนาบัญชีไว้ฝึกใช้ที่ไม่มีเงินจริงเคลื่อนไหว
• สำหรับการรับเงินจริง Stripe จะให้คุณเปิดใช้งานบัญชีก่อน โดยกรอกข้อมูลธุรกิจและบัญชีธนาคารที่จะรับเงิน

แซนด์บ็อกซ์และใช้งานจริงคืออะไร

Stripe ให้คีย์ 2 ชุด และ MonstarX จะถามว่าคุณกำลังวางคีย์ชุดไหนในตัวเลือก สภาพแวดล้อม

สภาพแวดล้อม	คีย์ขึ้นต้นด้วย	สิ่งที่เกิดขึ้น
แซนด์บ็อกซ์ (คีย์ทดสอบ)	sk_test_… และ pk_test_…	จ่ายเงินจำลองด้วยหมายเลขบัตรทดสอบ ไม่มีการตัดเงินจากบัตรจริงและไม่มีเงินเคลื่อนไหว ใช้ระหว่างสร้างแอป
ใช้งานจริง (คีย์ใช้งานจริง)	sk_live_… และ pk_live_…	บัตรจริง เงินจริง โอนเข้าบัญชีธนาคารของคุณ ใช้เมื่อลูกค้าจริงจ่ายเงิน

สิ่งที่สร้างในฝั่งหนึ่งจะไม่มีในอีกฝั่ง ผลิตภัณฑ์ ราคา ลูกค้า และการชำระเงินที่ทำในแซนด์บ็อกซ์จะอยู่ในแซนด์บ็อกซ์เท่านั้น

จ่ายเงินด้วยบัตรทดสอบอย่างไร

ในแซนด์บ็อกซ์ หน้าชำระเงินของ Stripe รับบัตรทดสอบที่ Stripe เผยแพร่ไว้ ใส่วันหมดอายุในอนาคตอะไรก็ได้ (เช่น 12/34) CVC 3 หลักอะไรก็ได้ และรหัสไปรษณีย์อะไรก็ได้

หมายเลขบัตร	ผลลัพธ์
4242 4242 4242 4242	ชำระเงินสำเร็จ
4000 0000 0000 0002	บัตรถูกปฏิเสธ ให้คุณเห็นว่าลูกค้าจะเห็นอะไรเมื่อชำระเงินไม่สำเร็จ
4000 0025 0000 3155	ธนาคารขอการยืนยันเพิ่มเติม (3D Secure) ก่อนชำระเงินสำเร็จ

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

รับคีย์

1. ลงชื่อเข้าใช้ Stripe Dashboard

2. ถ้าจะทดสอบ ให้เปิด sandbox จากเมนูบัญชีที่มุมซ้ายบน ถ้าจะใช้งานจริง ให้เปลี่ยนเป็น live mode แทน

3. เปิด API keys (อยู่ใต้ Developers) คัดลอก Publishable key แล้วกดแสดงและคัดลอก Secret key

คำเตือน

คีย์ลับใช้รับเงินและคืนเงินในบัญชีของคุณได้ วางคีย์นี้เฉพาะในแบบฟอร์มตัวเชื่อมต่อของ MonstarX เท่านั้น อย่าวางในแชท อีเมล หรือโค้ดของแอป คีย์ลับแบบใช้งานจริงจะแสดงเพียงครั้งเดียว ให้เก็บไว้ในที่ปลอดภัย

เชื่อมต่อใน MonstarX

เมื่อคุณขอระบบชำระเงิน MonstarX มักแสดงการ์ด เชื่อมต่อ Stripe ในแชทที่มีช่องเดียวกันนี้ หรือจะเชื่อมต่อเองก็ได้

1. เปิดโปรเจกต์ แล้วคลิก แบ็กเอนด์ ในแถบด้านบน จากนั้นคลิก คลาวด์

2. ในส่วน ตัวเชื่อมต่อ คลิก เชื่อมต่อ ข้าง Stripe

3. เลือก สภาพแวดล้อม เป็น แซนด์บ็อกซ์ (คีย์ทดสอบ) หรือ ใช้งานจริง (คีย์ใช้งานจริง)

4. วาง คีย์ลับ และ คีย์ที่เผยแพร่ได้ ปล่อย ข้อมูลลับสำหรับลงนาม Webhook ว่างไว้ก่อน

   

5. คลิก เชื่อมต่อ Stripe แถวจะแสดง เชื่อมต่อแล้ว · แซนด์บ็อกซ์ (หรือ เชื่อมต่อแล้ว · ใช้งานจริง) และพรีวิวจะรีสตาร์ทพร้อมคีย์

MonstarX ไม่ได้ตรวจว่าคีย์ตรงกับสภาพแวดล้อมที่เลือกไหม ให้แน่ใจว่าคีย์ sk_test_ ใช้กับ แซนด์บ็อกซ์ และคีย์ sk_live_ ใช้กับ ใช้งานจริง

ต้องใช้ข้อมูลลับสำหรับลงนาม Webhook ไหม

Webhook คือการที่ Stripe แจ้งแอปว่า “การชำระเงินนี้สำเร็จแล้ว” แม้ลูกค้าจะปิดหน้าไปก่อนกลับมาที่แอปก็ตาม แอปที่ปลดล็อกบางอย่างหลังชำระเงิน หรือมีระบบสมาชิก ควรมี webhook เพิ่ม webhook หลังจากเผยแพร่แอปแล้ว เพราะ Stripe เข้าถึงพรีวิวส่วนตัวของคุณไม่ได้

1. ถาม MonstarX ว่า “ที่อยู่ webhook ของ Stripe ในแอปฉันคืออะไร และควรรับเหตุการณ์อะไรบ้าง” ปกติจะเป็น https://your-app.monstarx.app/api/stripe-webhook

2. ใน Stripe เปิด Webhooks คลิก Create an event destination เลือกเหตุการณ์เหล่านั้น เลือก Webhook endpoint แล้ววางที่อยู่

3. กดแสดง signing secret (ขึ้นต้นด้วย whsec_) แล้วคัดลอก

4. ใน MonstarX คลิก อัปเดตคีย์ ที่แถว Stripe วางค่าในช่อง ข้อมูลลับสำหรับลงนาม Webhook แล้วคลิก บันทึกคีย์ เผยแพร่อีกครั้งเพื่อให้แอปที่ออนไลน์อยู่ได้รับค่านี้

แซนด์บ็อกซ์และ live mode มี webhook และ signing secret แยกกัน

ขอให้ MonstarX ใช้งาน

คุณพิมพ์	สิ่งที่เกิดขึ้น
“ให้สมาชิกซื้อแพ็ก 5 คลาสราคา $90 ผ่าน Stripe”	ปุ่มซื้อ หน้าชำระเงิน Stripe ตามยอดนั้น และหน้าขอบคุณ แพ็กจะเพิ่มให้เมื่อจ่ายแล้ว
“เพิ่มแผน Pro รายเดือนราคา $12 ผ่าน Stripe และหน้าที่ให้ดูแผนของฉัน”	หน้าชำระเงินแบบสมัครสมาชิก และหน้าที่แสดงแผนของสมาชิก
“เพิ่มหน้าผู้ดูแลที่แสดงการชำระเงินทุกรายการ”	หน้าที่แสดงรายการการชำระเงิน ว่าใครจ่าย จ่ายค่าอะไร และเมื่อไร
“นำเข้าผลิตภัณฑ์จาก Stripe มาไว้ในร้าน”	MonstarX ต้องใช้คีย์ของคุณเพื่ออ่านบัญชี การ์ดจึงแสดง MonstarX ต้องการ Stripe เพื่อดำเนินการต่อ และ MonstarX จะทำงานต่อเองเมื่อคุณเชื่อมต่อ

ยังไม่มีคีย์ใช่ไหม คลิก ภายหลัง บนการ์ด MonstarX จะสร้างระบบชำระเงินทั้งหมดไว้ก่อน และปุ่มจะแจ้งว่ายังไม่ได้เชื่อมต่อ Stripe จนกว่าคุณจะเพิ่มคีย์

เริ่มใช้งานจริง

1. เปิดใช้งานบัญชี Stripe เปลี่ยนเป็น live mode แล้วคัดลอกคีย์ใช้งานจริง

2. ใน แบ็กเอนด์›คลาวด์ คลิก อัปเดตคีย์ ที่แถว Stripe

3. ตั้ง สภาพแวดล้อม เป็น ใช้งานจริง (คีย์ใช้งานจริง) วางคีย์ใช้งานจริงทั้งสอง (และข้อมูลลับสำหรับลงนาม Webhook แบบใช้งานจริง ถ้าใช้) แล้วคลิก บันทึกคีย์

4. เผยแพร่แอปอีกครั้ง นับจากนี้การชำระเงินจะเป็นเงินจริง

เคล็ดลับ

ลองจ่ายเงินจริงด้วยตัวเองสักครั้งด้วยยอดเล็ก ๆ แล้วคืนเงินจาก Stripe Dashboard เป็นวิธีที่เร็วที่สุดในการตรวจว่าทุกอย่างใน live mode ทำงานได้

ความปลอดภัยและความเป็นส่วนตัว

• คีย์จัดเก็บแบบเข้ารหัสไว้กับแอปนี้เท่านั้น ชื่อคีย์จะแสดงใน แบ็กเอนด์›ข้อมูลลับ แต่ค่าของคีย์จะไม่แสดงอีก
• คีย์ลับ และ ข้อมูลลับสำหรับลงนาม Webhook ใช้ที่เซิร์ฟเวอร์ของแอปเท่านั้น ส่วน คีย์ที่เผยแพร่ได้ ออกแบบมาให้มองเห็นได้ในเบราว์เซอร์ จึงปลอดภัย
• หมายเลขบัตรพิมพ์ในหน้าชำระเงินของ Stripe เอง และไม่ถึงแอปหรือ MonstarX เลย
• เฉพาะเจ้าของโปรเจกต์เท่านั้นที่เชื่อมต่อ อัปเดต หรือยกเลิกการเชื่อมต่อ Stripe ได้ ยกเลิกการเชื่อมต่อ จะนำคีย์ออกจากแอปนี้ แล้วหน้าชำระเงินจะแจ้งว่ายังไม่ได้เชื่อมต่อ Stripe
• ถ้าคีย์รั่วไหล ให้ roll คีย์ใน Stripe Dashboard แล้ววางคีย์ใหม่ด้วย อัปเดตคีย์

ข้อควรรู้

• แอปหนึ่งใช้สภาพแวดล้อม Stripe ได้ครั้งละ 1 แบบ ถ้าเปลี่ยนแอปที่ใช้งานจริงกลับไปใช้คีย์แซนด์บ็อกซ์ การรับเงินจริงจะหยุดจนกว่าคุณจะเปลี่ยนกลับ
• Stripe มี restricted keys (rk_…) ที่มีเฉพาะสิทธิ์ที่คุณเลือกด้วย ใช้ในช่อง คีย์ลับ ได้ ถ้าคีย์อนุญาตทุกอย่างที่แอปทำ เช่น สร้าง checkout session
• การทดสอบ QA ทดสอบขั้นตอนชำระเงินไปจนถึงขั้น Stripe และทำเครื่องหมายว่าต้องใช้คีย์ หากยังไม่ได้เชื่อมต่อ Stripe

คำถามที่พบบ่อย

MonstarX หักส่วนแบ่งจากยอดขายของฉันไหม

ไม่หัก การชำระเงินเข้าบัญชี Stripe ของคุณโดยตรง มีแค่ค่าธรรมเนียมของ Stripe เอง

ลองชำระเงินโดยไม่ใช้บัตรจริงได้ไหม

ได้ เชื่อมต่อด้วย แซนด์บ็อกซ์ (คีย์ทดสอบ) แล้วจ่ายด้วยบัตรทดสอบ 4242 4242 4242 4242 ใส่วันที่ในอนาคตและ CVC อะไรก็ได้ ไม่มีเงินเคลื่อนไหว

เปลี่ยนจากการทดสอบเป็นรับเงินจริงอย่างไร

คลิก อัปเดตคีย์ ที่แถว Stripe ตั้ง สภาพแวดล้อม เป็น ใช้งานจริง (คีย์ใช้งานจริง) วางคีย์ใช้งานจริง คลิก บันทึกคีย์ แล้วเผยแพร่อีกครั้ง

ทำไมหน้าชำระเงินแจ้งว่ายังไม่ได้เชื่อมต่อ Stripe

ยังไม่ได้ใส่คีย์ หรือคีย์ถูกนำออกไปแล้ว เปิด แบ็กเอนด์ → คลาวด์ แล้วเชื่อมต่อ Stripe พรีวิวจะรีสตาร์ทพร้อมคีย์

ดูการชำระเงินใน MonstarX ได้ไหม

แอปจะแสดงสิ่งที่ MonstarX สร้างไว้ให้ เช่น หน้าคำสั่งซื้อ ส่วนบันทึกการชำระเงิน การคืนเงิน และการโอนเงินทั้งหมดอยู่ใน Stripe Dashboard

หน้าที่เกี่ยวข้อง

เชื่อมต่อบริการกับแอปตัวเชื่อมต่อของแอป การ์ด และปุ่มภายหลังทำงานอย่างไร

เผยแพร่แอปนำแอปขึ้นออนไลน์เพื่อให้ Stripe เข้าถึงได้

Twilioส่ง SMS ใบเสร็จหรือการแจ้งเตือนถึงลูกค้า

ข้อมูลลับและคีย์ APIที่เก็บคีย์ของคุณ