- โปรเจกต์ React ที่มีอยู่
- สิทธิ์เข้าถึง Stripe Test Mode
- ต้องมีแบ็กเอนด์สำหรับการชำระเงินที่ปลอดภัย
ไม่ต้องให้สิทธิ์รีโป หากต้องการให้ Bacodo ผสานโดยตรงจึงค่อยให้สิทธิ์โปรเจกต์ชั่วคราว
โต้ตอบส่วนเสริม
เพิ่ม Stripe.js องค์ประกอบการชำระเงิน และการชำระเงินลับของลูกค้าไปยัง React SPA ที่มีอยู่ของคุณ โดยไม่ต้องสร้างองค์ประกอบ, 3-D Secure และข้อผิดพลาดที่เป็นความลับตั้งแต่เริ่มต้น React ไม่ได้โฮสต์ webhooks — API ของคุณโฮสต์
เริ่มต้น
$145
USD · React
การรวม Stripe สำหรับ React · React
Requirements
ไม่ต้องให้สิทธิ์รีโป หากต้องการให้ Bacodo ผสานโดยตรงจึงค่อยให้สิทธิ์โปรเจกต์ชั่วคราว
ทำอะไร
Bacodo ผสานรวม Stripe เข้ากับโปรเจ็กต์ React ที่คุณมีอยู่แล้ว (Vite, CRA หรือที่คล้ายกัน) หลังจากส่งมอบ แหล่งที่มาของ React จะอยู่ใน repo ของคุณ รหัสลับและเว็บฮุคจะยังคงอยู่ในแบ็กเอนด์ที่คุณเรียกใช้อยู่แล้ว คุณยังคงเป็นเจ้าของบัญชี Stripe และค่าธรรมเนียม Stripe
React SPA ไม่สามารถสร้าง PaymentIntents หรือตรวจสอบ webhooks ได้อย่างปลอดภัย จำเป็นต้องมี Stripe.js, Elements หรือ Checkout และแบ็กเอนด์ที่ส่งคืนความลับของลูกค้า การสร้างที่แยกผิดจะจัดส่งรหัสลับในชุดรวม
เราเพิ่ม @stripe/react-stripe-js ซึ่งเป็นหน้าจอชำระเงินในแผนผัง React ของคุณ และการเรียกการดึงข้อมูล API ที่มีอยู่ของคุณต้องการสำหรับ PaymentIntents แล้ว การตรวจสอบ Webhook นั้นเชื่อมต่อกับ API นั้น ไม่ใช่ภายใน React
ทีมของคุณข้ามการใช้งาน Stripe React ที่ใช้งานจริงครั้งแรก: Elements, SCA, env สำหรับคีย์ที่เผยแพร่ได้ และการส่งมอบที่บันทึกว่า React พูดคุยกับ API ของคุณอย่างไร
นักพัฒนาและเอเจนซี่ที่มีส่วนหน้า React และ API อยู่แล้ว และต้องการเส้นทาง Stripe ที่บำรุงรักษาได้โดยไม่ต้องย้าย SPA ไปยัง Next.js
ฟีเจอร์หลัก
องค์ประกอบการชำระเงิน Mount Stripe พร้อมด้วย @stripe/react-stripe-js บนเส้นทางการชำระเงิน React ของคุณ ข้อมูลการ์ดจะอยู่บน Stripe — ไม่อยู่ในสถานะ React ที่คุณคงอยู่
แอป React ใช้เฉพาะคีย์ที่เผยแพร่ได้และข้อมูลลับไคลเอ็นต์ที่มีอายุสั้นจาก API ของคุณ Stripe Integration for React ไม่ได้ใส่ STRIPE_SECRET_KEY ใน Vite หรือ CRA env ที่ส่งไปยังเบราว์เซอร์
เปิดใช้งานกระเป๋าสตางค์ใน Payment Element เมื่อบัญชี Stripe และโดเมนของคุณอนุญาต การตอบสนองทางเลือกจะยังคงอยู่ในองค์ประกอบการ์ด
จัดส่ง React SPA พร้อมกับคีย์ที่เผยแพร่การทดสอบ Stripe ก่อน Live cutover เป็นเอกสารการเปลี่ยนแปลง env บวกกับ live Secret ที่ตรงกันบน API ของคุณ
หน้าจอความสำเร็จของ React ไม่ใช่แหล่งที่มาของความจริง API ของคุณจะตรวจสอบ Stripe webhook จากนั้นแอป React จะอ่านสถานะการชำระเงินจาก API นั้น
จัดการการ์ดที่ถูกปฏิเสธ องค์ประกอบที่ถูกยกเลิก เครือข่ายล้มเหลว และ 3-D Secure ที่ไม่สมบูรณ์ ดังนั้น React UI จะไม่ปล่อยให้ลูกค้าอยู่บนหน้าจอที่ไม่ทำงาน
กรณีใช้งาน
คุณมี React SPA และ API อยู่แล้ว คุณต้องมีการชำระเงินองค์ประกอบโดยไม่ต้องเขียนแคตตาล็อกใหม่ใน Next.js
คุณต้องมีเส้นทาง Stripe ที่บำรุงรักษาได้ใน React, แหล่งที่มาใน repo ไคลเอ็นต์ และการตัดคีย์สดที่จัดทำเป็นเอกสารแทนการสาธิต CodeSandbox
แอป React จะรวบรวมวิธีการชำระเงินวิธีแรกในขณะที่การสมัครสมาชิกจะยังคงอยู่ใน API และ Stripe Billing ของคุณหากคุณใช้อยู่แล้ว
Stripe Integration for React คือฝั่ง SPA หากคุณต้องการสร้าง API ด้วย ซึ่งมีการกำหนดขอบเขตแยกต่างหาก ราคานี้ไม่ใช่ราคาแบ็กเอนด์ใหม่
เดโม
ดูตัวอย่างเส้นทางการชำระเงินของ React: การดำเนินการชำระเงิน องค์ประกอบการชำระเงิน การยืนยัน และสถานะความล้มเหลว แซนด์บ็อกซ์สดสำหรับบัญชี Stripe ของคุณพร้อมใช้งานหลังจากการตรวจสอบความเข้ากันได้ หน้านี้ไม่ได้ประมวลผลการเรียกเก็บเงินจริง
วิธีทำงาน
เวิร์กโฟลว์ส่วนเสริมมาตรฐานของ Bacodo พร้อมการตรวจสอบเฉพาะ React สำหรับ Vite/CRA, React Router และ API ที่ SPA เรียกใช้อยู่แล้ว
01
ยืนยันการรวม Stripe สำหรับ React และคุณมี (หรือจะกำหนดขอบเขต) API ที่สามารถสร้าง PaymentIntents
02
ตรวจสอบเวอร์ชัน React, Bundler, UI การชำระเงินที่มีอยู่ และภาษาแบ็กเอนด์ที่ SPA ใช้อยู่แล้ว
03
เพิ่ม Stripe.js, องค์ประกอบ, ส่วนประกอบการชำระเงิน และสัญญาการดึงข้อมูลไปยังตำแหน่งข้อมูล PaymentIntent ของคุณ
04
เชื่อมต่อคีย์ที่เผยแพร่ได้ผ่านสภาพแวดล้อมสาธารณะของ Vite/CRA รหัสลับและเว็บฮุคจะยังคงอยู่ใน API
05
เรียกใช้การ์ดทดสอบ Stripe, 3-D Secure, ยกเลิก/ปฏิเสธ และยืนยันการอัปเดต API webhook ระบุว่าแอป React อ่านแล้ว
06
ส่งแหล่งที่มาของ React บันทึกเกี่ยวกับสภาพแวดล้อม และรายการตรวจสอบคีย์สด การใช้งาน React เป็นของคุณที่ต้องดูแลรักษา
สถาปัตยกรรม
ชุด React ไม่เคยเก็บรหัสลับไว้ Elements ใช้ความลับไคลเอ็นต์จาก API ของคุณ Stripe แจ้ง API นั้นโดย webhook ตอบสนองแล้วอ่านสถานะการสั่งซื้อ
เทคโนโลยีที่รองรับ
React ปัจจุบันบน Vite, CRA หรือตัวรวม SPA ที่คล้ายกัน นี่ไม่ใช่การลงจอดของเราเตอร์แอป Next.js — โปรดดูที่ Stripe Integration สำหรับ Next.js สำหรับสแต็กนั้น
การผูก Stripe React อย่างเป็นทางการสำหรับองค์ประกอบการชำระเงินและกระเป๋าเงิน
PaymentIntent สร้างและยืนยัน webhook บนแบ็กเอนด์ที่แอป React โทรไปแล้ว ส่วนเสริมนี้ไม่ได้แทนที่ API นั้นด้วยบริการเฉพาะ Bacodo เท่านั้น
บัญชี Stripe ของคุณ การทดสอบและคีย์สด จุดสิ้นสุดของเว็บฮุคบน API และกิจกรรมแดชบอร์ด
React SPA สามารถคงที่ได้ เว็บฮุคไม่สามารถ โฮสต์แบบคงที่เท่านั้นที่ไม่มี API ไม่สามารถดำเนินการตามเส้นทางการชำระเงินนี้ได้
สิ่งที่รวมอยู่
Pricing
ราคานี้สำหรับแพลตฟอร์ม React SPA เท่านั้น ไม่ใช้การกำหนดราคาส่วนเสริม Next.js, Django, Flutter หรือ React Native
การรวม Stripe สำหรับ React
เพิ่มการชำระเงิน Stripe ที่พร้อมใช้งานจริงไปยัง React SPA ที่มีอยู่และเก็บซอร์สโค้ดไว้
ข้อกำหนด
$145
จ่ายครั้งเดียวReact
ต้องการแบ็กเอนด์หรือไม่?
ชำระเงินอย่างปลอดภัยผ่านstripe
การส่งมอบและความปลอดภัย
การชำระเงิน React Stripe โดยทั่วไปจะถูกกำหนดขอบเขตหลังจากการตรวจสอบความเข้ากันได้ของ React ไทม์ไลน์ขึ้นอยู่กับ UI และ API การชำระเงิน React ปัจจุบันของคุณ
การ์ดโหมดทดสอบ เส้นทางการรักษาความปลอดภัย 3 มิติ การยกเลิก และการปฏิเสธจะถูกใช้บน React SPA ก่อนที่เราจะส่งมอบ
เฉพาะคีย์ที่เผยแพร่ได้เท่านั้นที่เป็นสาธารณะ รหัสลับและความลับของเว็บฮุคจะอยู่บนเซิร์ฟเวอร์ที่แอป React เรียกใช้
React ไม่ได้ตรวจสอบ Stripe-Signature API ของคุณทำ จากนั้น React จะอ่านผลลัพธ์
เราไม่เรียกร้องการรับรอง PCI หรือการฉ้อโกงเป็นศูนย์ React รวบรวมการ์ดผ่าน Stripe Elements ไม่ใช่รูปแบบการ์ดแบบกำหนดเองที่เราจัดเก็บ
คำถามที่พบบ่อย
Stripe Integration สำหรับ React ประกอบด้วย Stripe.js, องค์ประกอบการชำระเงินบนหน้าจอชำระเงิน React ที่มีอยู่, สัญญาดึงข้อมูลไปยัง PaymentIntent API, ความครอบคลุมของการทดสอบ และบันทึกการส่งมอบ คุณได้รับแหล่งปฏิกิริยาในโครงการของคุณ ค่าธรรมเนียม Stripe บัญชี Stripe ของคุณ และการสร้างแบ็กเอนด์ใหม่จะแยกจากกัน
ใช่ Stripe Integration for React สร้างขึ้นสำหรับ React SPA ที่คุณมีอยู่แล้ว (Vite, CRA หรือที่คล้ายกัน) เราปรับองค์ประกอบการชำระเงินและจุดเริ่มต้นการชำระเงินให้เข้ากับเส้นทาง React และ UI ปัจจุบันของคุณ แทนที่จะจัดส่งแอปสาธิตแยกต่างหากเป็นการส่งมอบ
ใช่สำหรับเส้นทาง React Stripe ที่ใช้งานจริง PaymentIntents, รหัสลับ และการตรวจสอบเว็บฮุคต้องอยู่บนเซิร์ฟเวอร์ เบราว์เซอร์ React ได้รับเฉพาะรหัสที่เผยแพร่ได้และรหัสลับไคลเอ็นต์เท่านั้น โฮสต์ React แบบคงที่เท่านั้นไม่สามารถดำเนินการเส้นทางการชำระเงินนี้ได้
Stripe Integration สำหรับ React ใช้ Stripe.js อย่างเป็นทางการและ @stripe/react-stripe-js สำหรับองค์ประกอบการชำระเงินและกระเป๋าเงิน เราไม่รวมการชำระเงิน React ไว้ในปลั๊กอินที่ไม่มีเอกสาร เว้นแต่ว่าคุณต้องการอย่างชัดเจน
ใช่ เมื่อบัญชี Stripe การตรวจสอบโดเมน และอุปกรณ์ต่างๆ ของคุณรองรับ ใน React ปุ่มกระเป๋าเงินเป็นขอบเขตที่ไม่บังคับ องค์ประกอบการชำระเงินด้วยบัตรใน React ยังคงเป็นทางเลือกเริ่มต้น
ไม่ Stripe Integration สำหรับ React เป็นเส้นทาง SPA เราเตอร์แอป Next.js และตัวจัดการเส้นทางเป็นการรวม Stripe สำหรับ Next.js เราไม่ย้าย React SPA ไปยัง Next.js ภายในราคาส่วนเสริม React นี้
ลูกค้า React สามารถยืนยัน PaymentIntent หรือรวบรวมวิธีการชำระเงินผ่าน Stripe.js ผลิตภัณฑ์ Stripe Billing ที่เป็นกิจวัตร พอร์ทัลลูกค้า และตรรกะของใบแจ้งหนี้พร้อมใช้งานบน API ของคุณ งาน React ที่มีการสมัครใช้งานจำนวนมากอาจต้องมีใบเสนอราคาที่กำหนดเอง
เบราว์เซอร์ React ใช้เฉพาะคีย์ที่เผยแพร่ได้ของ Stripe ผ่าน Vite หรือ CRA public env รหัสลับและข้อมูลลับในการลงนาม Webhook จะยังคงอยู่ใน API ของคุณ Stripe Integration for React ไม่ได้ใส่คีย์ลับไว้ในบันเดิล React
เราใช้ Stripe Integration สำหรับ React กับคีย์ทดสอบ Stripe และการ์ดทดสอบก่อน การเผยแพร่จริงเป็นเอกสารการเปลี่ยนแปลงคีย์เผยแพร่ใน React บวกกับความลับสดและเว็บฮุคที่ตรงกันบน API ของคุณ ไม่ใช่การเปิดใช้งานใบอนุญาตส่วนเสริม
องค์ประกอบการชำระเงิน Stripe จัดการ 3-D Secure ผ่าน Stripe.js หน้า React จะต้องคงขั้นตอนการชำระเงินไว้จนกว่า Stripe จะส่งกลับสถานะสุดท้าย Stripe Integration สำหรับ React เชื่อมโยงสถานะเหล่านั้นอย่างชัดเจน
ใช่สำหรับการดำเนินการหลังจาก React Payment Element React UI ไม่ใช่แหล่งที่มาของความจริง API ของคุณจะตรวจสอบลายเซ็น Stripe webhook จากนั้นทำเครื่องหมายคำสั่งซื้อที่ชำระเงิน ปลดล็อกเนื้อหา หรือแจ้งเตือนการดำเนินการ React จากนั้นจะอ่านสถานะนั้น
ใช่ โดยทั่วไป Stripe Integration สำหรับ React จะเก็บผลิตภัณฑ์ React ตะกร้าสินค้า และปุ่มชำระเงินของคุณไว้ และประกอบองค์ประกอบการชำระเงินจากการกระทำนั้น แบบฟอร์มการ์ด React แบบกำหนดเองที่แตะข้อมูล PAN แบบดิบอยู่นอกขอบเขตเริ่มต้น เนื่องจากองค์ประกอบการชำระเงินเป็นเส้นทาง PCI ที่ปลอดภัยกว่า
ไม่ คุณสร้างและเป็นเจ้าของบัญชี Stripe, คีย์ API และค่าธรรมเนียมการดำเนินการ Stripe ราคาส่วนเสริม React ถูกนำมาใช้ในโปรเจ็กต์ React ของคุณ ไม่ใช่ใบอนุญาตการชำระเงินของ Bacodo
ไม่ สินค้าดิจิทัลที่ขายภายใน App Store มักจะต้องใช้ IAP การรวม Stripe สำหรับ React ใช้สำหรับการชำระเงินแบบ Stripe ในเว็บไซต์ React หรือ SPA โดยที่ Stripe เป็นเส้นทางการชำระเงินที่อนุญาตสำหรับประเภทผลิตภัณฑ์ของคุณ
ใช่ ข้อมูลเมตา PaymentIntent บันทึกลูกค้า และฟิลด์ที่คุณคงอยู่หลังจากการยืนยันเว็บฮุคจะสอดคล้องกับรูปแบบคำสั่งซื้อที่มีอยู่ของคุณในระหว่างการรวม Stripe สำหรับ React แอป React จะแสดงเฉพาะสิ่งที่ API ของคุณส่งคืนเท่านั้น
แหล่งที่มาของ React อยู่ใน repo ของคุณ ดังนั้นทีมของคุณสามารถดูแลรักษามันได้ การสนับสนุน 30 วันที่มีให้ครอบคลุมคำถามทางเทคนิคและข้อบกพร่องในขอบเขต Stripe Integration สำหรับ React ที่ส่งมอบ ไม่ใช่งานฟีเจอร์ React ที่ไม่เกี่ยวข้อง
ในช่วงกรอบเวลา 30 วัน เราช่วยแก้ไขข้อขัดข้องในการผสานรวม React ที่จัดส่ง ซึ่งเกิดจากการเปลี่ยนแปลง Stripe หรือ Stripe.js ที่บันทึกไว้ การอัปเกรดแพ็คเกจ React ที่กำลังดำเนินอยู่หลังจากนั้นเป็นการบำรุงรักษาของคุณ หรือการสนับสนุนด้านเทคนิคแบบขยายเวลา หากคุณซื้อ
เราบันทึกวิธีการอ่านสถานะ PaymentIntent, บันทึก Stripe Dashboard และการจัดส่งเว็บฮุคจากเส้นทางการชำระเงินของ React การสนับสนุน 30 วันประกอบด้วยการแก้ไขปัญหาการปฏิเสธ การลดลงของ 3-D Secure และคีย์ที่กำหนดค่าไม่ถูกต้องสำหรับโฟลว์ React ที่จัดส่ง
เรายืนยันเวอร์ชัน React, Bundler (Vite, CRA หรือที่คล้ายกัน) ของคุณ และ API ที่ SPA เรียกใช้แล้วกับรุ่น Stripe.js ที่เราปักหมุดในเวลารวมระบบ รันไทม์ React ที่เก่ากว่าหรือมีการแยกส่วนอย่างมากอาจต้องมีขอบเขตเพิ่มเติม
30 วันหลังจากการส่งมอบจะรวมอยู่ในเส้นทาง React Stripe ที่จัดส่ง การสนับสนุนทางเทคนิคแบบขยายเวลาเป็นทางเลือกที่ 20% ของราคาส่วนเสริม React นี้ และครอบคลุมความช่วยเหลือทางเทคนิคเพิ่มเติมอีกหกเดือนเกี่ยวกับการผสานรวม React เดียวกัน ไม่ใช่การสร้างผลิตภัณฑ์ใหม่
เพิ่มการชำระเงิน Stripe ที่พร้อมใช้งานจริงไปยัง React SPA ที่มีอยู่ของคุณ เก็บซอร์สโค้ด และเก็บความลับใน API ของคุณ
$145