- โปรเจกต์ Next.js ที่มีอยู่
- สิทธิ์เข้าถึง Stripe Test Mode
ไม่ต้องให้สิทธิ์รีโป หากต้องการให้ Bacodo ผสานโดยตรงจึงค่อยให้สิทธิ์โปรเจกต์ชั่วคราว
ส่วนเสริม Next.js
เพิ่ม Stripe Checkout หรือองค์ประกอบการชำระเงิน PaymentIntents และ webhooks ที่ลงนามแล้วลงในโปรเจ็กต์เราเตอร์แอป Next.js ที่มีอยู่ของคุณโดยไม่ต้องสร้างการชำระเงิน การรักษาความปลอดภัยแบบ 3 มิติ และการเดินสายตัวจัดการเส้นทางตั้งแต่ต้น
เริ่มต้น
$145
USD · Next.js
การรวม Stripe สำหรับ Next.js · Next.js
Requirements
ไม่ต้องให้สิทธิ์รีโป หากต้องการให้ Bacodo ผสานโดยตรงจึงค่อยให้สิทธิ์โปรเจกต์ชั่วคราว
ทำอะไร
Bacodo ผสานรวม Stripe เข้ากับโปรเจ็กต์ Next.js ที่คุณมีอยู่แล้ว หลังจากส่งมอบ การใช้งานจะยังคงอยู่ใน Repo ของคุณ เพื่อให้ทีมของคุณสามารถอ่าน เปลี่ยนแปลง และขยายได้ คุณยังคงเป็นเจ้าของบัญชี Stripe, คีย์ API และค่าธรรมเนียม Stripe
การชำระเงินด้วยบัตรและกระเป๋าสตางค์ใน Next.js จำเป็นต้องมี PaymentIntents, การชำระเงินหรือองค์ประกอบการชำระเงิน, การรักษาความปลอดภัยแบบ 3 มิติ, รหัสลับเฉพาะเซิร์ฟเวอร์ และตัวจัดการเส้นทางของเว็บฮุคที่ตรวจสอบลายเซ็น การสร้างเส้นทางตั้งแต่เริ่มต้นนั้นช้าและผิดพลาดได้ง่าย
เราเพิ่ม Stripe.js บนไคลเอนต์ Next.js, Route Handlers (หรือ Server Actions) ที่สร้าง PaymentIntents หรือ Checkout Sessions, การตรวจสอบ webhook, หน้าสำเร็จ/ยกเลิก และทดสอบ/กำหนดค่าสภาพแวดล้อมจริงสำหรับ App Router
ทีมของคุณข้ามการใช้งาน Stripe Next.js ที่ใช้งานจริงครั้งแรก: ตัวจัดการเราเตอร์ของแอป, SCA, สถานะข้อผิดพลาด และการส่งมอบที่บันทึกวิธีจัดส่งคีย์สด
นักพัฒนา ทีมเทคนิค เอเจนซี่ และสตาร์ทอัพที่มีแอป Next.js อยู่แล้ว และต้องการเส้นทางการชำระเงินที่ใช้งานจริงที่พวกเขาสามารถรักษาไว้ได้
ฟีเจอร์หลัก
ใช้ Stripe Checkout ที่โฮสต์ไว้หรือองค์ประกอบการชำระเงินแบบฝังในหน้าชำระเงิน Next.js ของคุณ ปุ่มเข้าการ์ด, 3-D Secure และปุ่มกระเป๋าเงินจะอยู่บนเส้นทาง PCI ของ Stripe — ไม่ใช่รูปแบบการ์ดแบบกำหนดเองที่คุณจัดเก็บ
สร้างเซสชันการชำระเงินหรือ PaymentIntents ในตัวจัดการเส้นทาง Next.js เบราว์เซอร์ใช้เฉพาะคีย์ที่เผยแพร่ได้และข้อมูลลับไคลเอ็นต์เท่านั้น โดยคีย์ลับจะไม่จัดส่งใน Client Component
เปิดใช้งานปุ่มกระเป๋าเงินใน Stripe Checkout หรือ Payment Element เมื่อบัญชี Stripe และโดเมนของคุณได้รับการตรวจสอบแล้ว ทางเลือก Next.js จะยังคงอยู่ในการชำระเงินด้วยบัตร
จัดส่งแอป Next.js พร้อมด้วยคีย์ทดสอบ Stripe การ์ดทดสอบ และเอกสารตัดส่วนไปยังคีย์สด ตัวแปรสภาพแวดล้อม Next.js อยู่นอกกลุ่มไคลเอนต์
ความสำเร็จในการชำระเงินใน Next.js UI ไม่ใช่แหล่งที่มาของความจริง ตัวจัดการเส้นทางจะตรวจสอบลายเซ็น Stripe และอัปเดตคำสั่งซื้อหรือสถานะการให้สิทธิ์ก่อนที่จะปฏิบัติตาม
จัดการบัตรที่ถูกปฏิเสธ การชำระเงินที่ถูกยกเลิก เครือข่ายล้มเหลว และการรักษาความปลอดภัย 3 มิติที่ไม่สมบูรณ์ ดังนั้น Next.js UI จะไม่ปล่อยให้ลูกค้าอยู่ในหน้าที่ไม่ทำงาน
กรณีใช้งาน
คุณได้สั่งซื้อหรือจองใน Next.js แล้ว และต้องการชำระเงินด้วยบัตรโดยไม่ต้องเขียนแคตตาล็อกหรือขั้นตอนการจองใหม่
คุณต้องมีเส้นทาง Stripe ที่สามารถบำรุงรักษาได้ใน Next.js, แหล่งที่มาใน repo ไคลเอ็นต์ และการตัดคีย์สดที่บันทึกไว้ แทนที่จะเป็นต้นแบบ Next.js แบบครั้งเดียว
แอป Next.js ต้องรวบรวมการชำระเงินครั้งแรกหรืออัปเดตวิธีการชำระเงินในขณะที่การสมัครสมาชิกและใบแจ้งหนี้ยังคงอยู่บนเซิร์ฟเวอร์ของคุณและ Stripe Billing หากคุณใช้งานอยู่แล้ว
เริ่มต้นด้วยการเรียกเก็บเงินของลูกค้าในแอป Next.js คุณสามารถกำหนดขอบเขตการเรียกเก็บเงิน Stripe Connect หรือปลายทางแยกกันได้หากโมเดลตลาด Next.js ของคุณต้องการ
เดโม
ดูตัวอย่างเส้นทางการชำระเงิน Next.js: รถเข็นหรือการชำระเงิน องค์ประกอบการชำระเงินหรือการชำระเงิน สถานะการยืนยัน และความล้มเหลว แซนด์บ็อกซ์สดสำหรับบัญชี Stripe ของคุณพร้อมใช้งานหลังจากการตรวจสอบความเข้ากันได้ หน้านี้ไม่ได้ประมวลผลการเรียกเก็บเงินจริง
วิธีทำงาน
ขั้นตอนการทำงานเสริมมาตรฐานของ Bacodo พร้อมด้วย Next.js และการตรวจสอบเฉพาะ Stripe สำหรับเราเตอร์แอป ตัวจัดการเส้นทาง และชั้นข้อมูลที่มีอยู่ของคุณ
01
ยืนยันการรวม Stripe สำหรับ Next.js และตรวจสอบว่าการชำระเงินในวันแรกนั้นโฮสต์การชำระเงินหรือองค์ประกอบการชำระเงินหรือไม่
02
ตรวจสอบเวอร์ชัน Next.js, App Router กับ Pages Router, UI การชำระเงินที่มีอยู่, ฐานข้อมูล และดูว่าคุณมีบัญชี Stripe อยู่แล้วหรือไม่
03
เพิ่ม Stripe.js, หน้าชำระเงิน, ตัวจัดการเส้นทางสำหรับเซสชันหรือ PaymentIntents และตัวจัดการเว็บฮุคที่ลงนาม
04
คีย์ทดสอบ Wire Next.js, ตำแหน่งข้อมูล webhook และการกำหนดค่าเซิร์ฟเวอร์เฉพาะสภาพแวดล้อม
05
เรียกใช้การ์ดทดสอบ Stripe, 3-D Secure, ยกเลิก/ปฏิเสธเส้นทาง และการยืนยันเว็บฮุคบนแอป Next.js
06
ส่งซอร์ส Next.js บันทึกการกำหนดค่า และรายการตรวจสอบคีย์สด การใช้งาน Next.js เป็นของคุณที่ต้องดูแลรักษา
สถาปัตยกรรม
เบราว์เซอร์ Next.js จะไม่พูดคุยกับ Stripe ด้วยรหัสลับ องค์ประกอบการชำระเงินหรือการชำระเงินใช้ความลับของลูกค้าจากตัวจัดการเส้นทาง Stripe แจ้ง webhook Next.js ของคุณก่อนที่คุณจะดำเนินการ
เทคโนโลยีที่รองรับ
Next.js ที่เสถียรในปัจจุบันพร้อม App Router เป็นค่าเริ่มต้น Pages Router สามารถกำหนดขอบเขตได้หากนั่นคือสิ่งที่ repo Next.js ของคุณใช้อยู่แล้ว
Stripe.js อย่างเป็นทางการบนไคลเอนต์ Next.js และแถบบนเซิร์ฟเวอร์สำหรับเซสชัน PaymentIntents และการตรวจสอบ webhook
การอัปเดตคำสั่งซื้อหรือการให้สิทธิ์จะอยู่ในฐานข้อมูลหรือ API ที่แอป Next.js ของคุณใช้อยู่แล้ว เราจะไม่แทนที่แบ็กเอนด์ของคุณด้วยบริการ Bacodo เท่านั้น
บัญชี Stripe ของคุณ การทดสอบและคีย์สดที่ใช้โดย Next.js, จุดสิ้นสุดของ webhook และกิจกรรมแดชบอร์ด ค่าธรรมเนียมการดำเนินการ Stripe ยังคงอยู่กับ Stripe
โฮสต์ที่สามารถเรียกใช้ตัวจัดการเส้นทาง Next.js และรับ Stripe webhooks (เช่น Vercel หรือเซิร์ฟเวอร์โหนด) การส่งออกแบบคงที่เท่านั้นไม่เพียงพอสำหรับเส้นทางการชำระเงินนี้
สิ่งที่รวมอยู่
Pricing
ราคานี้สำหรับแพลตฟอร์ม Next.js เท่านั้น ไม่ใช้การกำหนดราคาส่วนเสริมของ Django หรือ Flutter
การรวม Stripe สำหรับ Next.js
เพิ่มการชำระเงิน Stripe ที่พร้อมใช้งานจริงไปยังแอป Next.js ที่มีอยู่และเก็บซอร์สโค้ดไว้
ข้อกำหนด
$145
จ่ายครั้งเดียวNext.js
ต้องการแบ็กเอนด์หรือไม่?
ชำระเงินอย่างปลอดภัยผ่านstripe
การส่งมอบและความปลอดภัย
การรวมการชำระเงิน Stripe ของ Next.js โดยทั่วไปจะมีขอบเขตหลังจากการตรวจสอบความเข้ากันได้ของ Next.js ไทม์ไลน์ขึ้นอยู่กับ UI การชำระเงิน Next.js และชั้นข้อมูลปัจจุบันของคุณ
การ์ดโหมดทดสอบ เส้นทางการรักษาความปลอดภัย 3 มิติ การยกเลิก และการปฏิเสธ ถูกใช้ในแอป Next.js ก่อนที่เราจะส่งมอบ
คีย์ลับ Stripe และความลับในการลงนาม Webhook ยังคงอยู่ในสภาพแวดล้อมเซิร์ฟเวอร์ เบราว์เซอร์ Next.js ได้รับเฉพาะคีย์ที่เผยแพร่ได้และข้อมูลลับไคลเอ็นต์ที่มีอายุสั้นเท่านั้น
ตัวจัดการเส้นทาง webhook ของ Next.js จะตรวจสอบลายเซ็น Stripe ก่อนที่จะอัปเดตคำสั่งซื้อหรือสถานะการให้สิทธิ์
เราไม่อ้างสิทธิ์ในการรับรอง PCI, การฉ้อโกงเป็นศูนย์ หรือรับประกันอัตราการอนุมัติ ข้อมูลบัตร Next.js จะถูกรวบรวมผ่าน Stripe Checkout หรือองค์ประกอบการชำระเงิน ไม่ใช่แบบฟอร์มบัตรแบบกำหนดเองที่เราจัดเก็บ
คำถามที่พบบ่อย
Stripe Integration สำหรับ Next.js ประกอบด้วย Stripe.js, Checkout หรือ Payment Element บนหน้าชำระเงิน Next.js ที่มีอยู่, PaymentIntent หรือ Checkout Session การสร้างใน Route Handlers, ตัวจัดการ webhook ที่ลงนามแล้ว, ความครอบคลุมของการทดสอบ และบันทึกการส่งมอบ คุณได้รับแหล่งที่มา Next.js ในโครงการของคุณ ค่าธรรมเนียม Stripe และบัญชี Stripe ของคุณแยกจากกัน
ใช่ Stripe Integration สำหรับ Next.js สร้างขึ้นสำหรับโครงการ Next.js ที่คุณมีอยู่แล้ว เราปรับการชำระเงินและจุดเข้าชำระเงินให้เข้ากับเส้นทาง Next.js และ UI ปัจจุบันของคุณ แทนที่จะจัดส่งแอปสาธิตแยกต่างหากเป็นการส่งมอบ
ใช่สำหรับเส้นทางการผลิต Next.js Stripe PaymentIntents, Checkout Sessions และรหัสลับต้องอยู่บนเซิร์ฟเวอร์ เบราว์เซอร์ Next.js รับเฉพาะคีย์ที่เผยแพร่ได้และข้อมูลลับไคลเอ็นต์เท่านั้น การส่งออก Next.js แบบคงที่เท่านั้นไม่สามารถโฮสต์เส้นทางเว็บฮุคนี้ได้
Stripe Integration สำหรับ Next.js ใช้ Stripe.js อย่างเป็นทางการบนไคลเอนต์และ Stripe Node SDK ในตัวจัดการเส้นทาง Next.js เราไม่รวมการชำระเงิน Next.js ไว้ในปลั๊กอินที่ไม่มีเอกสาร เว้นแต่ว่าคุณต้องการอย่างชัดเจน
ใช่ เมื่อบัญชี Stripe การตรวจสอบโดเมน และอุปกรณ์ต่างๆ ของคุณรองรับ ใน Next.js ปุ่มกระเป๋าเงินเป็นขอบเขตที่ไม่บังคับ องค์ประกอบการชำระเงินด้วยบัตรหรือการชำระเงินใน Next.js ยังคงเป็นทางเลือกเริ่มต้น
การรวม Stripe เริ่มต้นสำหรับขอบเขต Next.js คือ App Router สามารถรวมเส้นทาง Pages Router API ได้ หากนั่นคือสิ่งที่ repo Next.js ของคุณใช้อยู่แล้ว และเรายอมรับในระหว่างการตรวจสอบความเข้ากันได้ของ Next.js
ไคลเอนต์ Next.js สามารถยืนยัน PaymentIntent หรือเริ่มเซสชันการชำระเงินผ่าน Stripe.js ผลิตภัณฑ์ Stripe Billing ที่เกิดซ้ำ พอร์ทัลลูกค้า และตรรกะของใบแจ้งหนี้พร้อมใช้งานบนเซิร์ฟเวอร์ งาน Next.js ที่ต้องมีการสมัครใช้งานจำนวนมากอาจต้องมีใบเสนอราคาที่กำหนดเอง
เบราว์เซอร์ Next.js ใช้เฉพาะคีย์ที่เผยแพร่ได้ของ Stripe เท่านั้น รหัสลับและความลับในการเซ็นชื่อเว็บฮุคจะยังคงอยู่ในตัวแปรสภาพแวดล้อมเซิร์ฟเวอร์ที่ตัวจัดการเส้นทางใช้ Stripe Integration สำหรับ Next.js ไม่ได้ใส่คีย์ลับใน Client Components
เราใช้ Stripe Integration สำหรับ Next.js กับคีย์ทดสอบ Stripe และการ์ดทดสอบก่อน การถ่ายทอดสดเป็นคีย์ที่ได้รับการบันทึกไว้และการตัดเว็บฮุคใน Stripe Dashboard และสภาพแวดล้อมเซิร์ฟเวอร์ Next.js ไม่ใช่การเปิดใช้งานใบอนุญาตส่วนเสริม
องค์ประกอบการชำระเงินและการชำระเงินของ Stripe จัดการความปลอดภัย 3 มิติผ่าน Stripe.js หน้า Next.js จะต้องคงขั้นตอนการชำระเงินไว้จนกว่า Stripe จะส่งกลับสถานะสุดท้าย Stripe Integration สำหรับ Next.js เชื่อมโยงสถานะเหล่านั้นอย่างชัดเจน
ใช่สำหรับการดำเนินการหลังจากการชำระเงิน Next.js หรือองค์ประกอบการชำระเงิน Next.js UI ไม่ใช่แหล่งที่มาของความจริง ตัวจัดการเส้นทางจะตรวจสอบลายเซ็น Stripe webhook จากนั้นทำเครื่องหมายคำสั่งซื้อที่ชำระเงิน ปลดล็อกเนื้อหา หรือแจ้งการดำเนินการ
ใช่ โดยทั่วไป Stripe Integration สำหรับ Next.js จะเก็บผลิตภัณฑ์ Next.js รถเข็น และปุ่มชำระเงินของคุณไว้ และเปิดการชำระเงินหรือติดตั้งองค์ประกอบการชำระเงินจากการกระทำนั้น แบบฟอร์มการ์ด Next.js แบบกำหนดเองที่แตะข้อมูล PAN แบบดิบอยู่นอกขอบเขตเริ่มต้น เนื่องจากองค์ประกอบการชำระเงินหรือการชำระเงินเป็นเส้นทาง PCI ที่ปลอดภัยกว่า
ไม่ คุณสร้างและเป็นเจ้าของบัญชี Stripe, คีย์ API และค่าธรรมเนียมการดำเนินการ Stripe ราคาส่วนเสริม Next.js ใช้กับโปรเจ็กต์ Next.js ของคุณ ไม่ใช่ใบอนุญาตการชำระเงินของ Bacodo
ไม่ สินค้าดิจิทัลที่ขายภายใน App Store มักจะต้องใช้ IAP Stripe Integration สำหรับ Next.js ใช้สำหรับการชำระเงิน Stripe ในเว็บไซต์หรือเว็บแอป Next.js โดยที่ Stripe เป็นเส้นทางการชำระเงินที่อนุญาตสำหรับประเภทผลิตภัณฑ์ของคุณ
ใช่ ข้อมูลเมตาของเซสชัน PaymentIntent หรือ Checkout บันทึกลูกค้า และฟิลด์ที่คุณคงอยู่หลังจากการยืนยันเว็บฮุคจะสอดคล้องกับโมเดลคำสั่งซื้อ Next.js ที่มีอยู่ของคุณในระหว่างการผสานรวม Stripe สำหรับ Next.js
แหล่งที่มา Next.js อยู่ใน repo ของคุณ ดังนั้นทีมของคุณสามารถดูแลรักษาได้ การสนับสนุน 30 วันที่มีให้ครอบคลุมคำถามทางเทคนิคและข้อบกพร่องในขอบเขต Stripe Integration สำหรับ Next.js ที่จัดส่ง ไม่ใช่งานฟีเจอร์ Next.js ที่ไม่เกี่ยวข้อง
ในช่วงกรอบเวลา 30 วัน เราได้ช่วยเหลือในกรณีที่การผสานรวม Next.js ที่ส่งมามีสาเหตุมาจากการเปลี่ยนแปลง Stripe หรือ Stripe.js ที่บันทึกไว้ การอัปเกรดแพ็คเกจ Next.js ที่กำลังดำเนินอยู่หลังจากนั้นเป็นการบำรุงรักษาของคุณ หรือการสนับสนุนด้านเทคนิคแบบขยายเวลา หากคุณซื้อ
เราบันทึกวิธีการอ่านสถานะ PaymentIntent หรือ Checkout Session บันทึก Stripe Dashboard และการจัดส่ง webhook จากเส้นทางการชำระเงิน Next.js การสนับสนุน 30 วันประกอบด้วยการแก้ปัญหาการปฏิเสธ การลดลงของ 3-D Secure และคีย์ที่กำหนดค่าไม่ถูกต้องสำหรับโฟลว์ Next.js ที่จัดส่ง
เรายืนยันเวอร์ชัน Next.js, App Router หรือ Pages Router และรันไทม์ของโหนดกับ Stripe SDK ที่เราปักหมุดไว้ ณ เวลารวมระบบ รันไทม์ Next.js ที่เก่ากว่าหรือมีการแยกส่วนอย่างมากอาจต้องมีขอบเขตเพิ่มเติม
30 วันหลังจากการส่งมอบจะรวมอยู่ในเส้นทาง Next.js Stripe ที่จัดส่ง การสนับสนุนด้านเทคนิคแบบขยายเวลาเป็นทางเลือกที่ 20% ของราคาส่วนเสริม Next.js นี้ และครอบคลุมความช่วยเหลือทางเทคนิคเพิ่มเติมอีกหกเดือนเกี่ยวกับการบูรณาการ Next.js เดียวกันนั้น ไม่ใช่การสร้างผลิตภัณฑ์ใหม่
เพิ่มการชำระเงิน Stripe ที่พร้อมใช้งานจริงลงในแอป Next.js ที่คุณมีอยู่ เก็บซอร์สโค้ด และข้ามการสร้างการชำระเงินตั้งแต่ต้น
$145