ประมวลผลการชำระเงินด้วย Firebase

การใช้ฟีเจอร์ Firebase และ Stripe ที่แตกต่างกันเล็กน้อย ทำให้คุณสามารถประมวลผลการชำระเงินในเว็บแอปของคุณได้โดยไม่ต้องสร้างโครงสร้างพื้นฐานเซิร์ฟเวอร์ของคุณเอง คู่มือนี้จะอธิบายให้คุณทราบถึงการปรับแต่งและการปรับใช้แอปตัวอย่างโอเพ่นซอร์ส cloud-functions-stripe-sample.web.app เวอร์ชันของคุณเอง

ก่อนที่คุณจะเริ่มต้น ให้สร้างโปรเจ็กต์ใน คอนโซล Firebase และตั้งค่าบัญชี Stripe

หมายเหตุ: พันธมิตรของเราที่ Stripe ได้เปิดตัวส่วนขยายใหม่สอง รายการ เรียกใช้การชำระเงินการสมัครสมาชิกด้วย Stripe และ ส่งใบแจ้งหนี้โดยใช้ Stripe เพื่อให้สามารถประมวลผลการชำระเงินด้วยรหัสที่น้อยลง!

ภาพรวมการนำไปปฏิบัติ

1. ตั้งค่าบัญชี ลาย
2. สร้างโครงการใน คอนโซล Firebase
3. เปิดใช้งานการเรียกเก็บเงินสำหรับโปรเจ็กต์ของคุณและกำหนดค่า Firebase CLI เพื่อใช้โปรเจ็กต์ของคุณกับ firebase use --add
4. รับ ซอร์สโค้ด สำหรับแอป Firestripe ตัวอย่าง กำหนดค่าด้วยข้อมูลที่ถูกต้องสำหรับโปรเจ็กต์ของคุณและปรับแต่งโค้ดให้เหมาะกับแอปของคุณ
5. เมื่อคุณทำให้แอปใช้งานได้แล้ว ให้มองหารายชื่อผู้ใช้และธุรกรรมในคอนโซล Firebase

ตั้งค่าและปรับใช้แอปตัวอย่าง

1. รับ ซอร์สโค้ด
2. เปิดใช้งานการลงชื่อเข้าใช้ Google และอีเมลใน การตั้งค่าผู้ให้บริการตรวจสอบสิทธิ์ ของคุณ
3. เปิดใช้งาน Cloud Firestore
4. ติดตั้ง Firebase CLI หากคุณยังไม่ได้ติดตั้ง และเข้าสู่ระบบด้วย firebase login
5. กำหนดค่าตัวอย่างนี้เพื่อใช้โปรเจ็กต์ของคุณกับ firebase use --add
6. ติดตั้งการพึ่งพาในเครื่องโดยการรัน cd functions; npm install; cd -

7. เพิ่ม คีย์ลับ Stripe API ของคุณไปยังการกำหนดค่าสภาพแวดล้อม Cloud Functions:

   firebase functions:config:set stripe.secret=<YOUR STRIPE SECRET KEY>

8. ตั้งค่า รหัส Stripe ที่เผยแพร่ได้ ใน /public/javascript/app.js :

   const STRIPE_PUBLISHABLE_KEY=<YOUR STRIPE PUBLISHABLE KEY>;

9. ปรับใช้โครงการของคุณโดยใช้ firebase deploy คำสั่งนี้:

   1. ส่งไฟล์ทั้งหมดในไดเร็กทอรี public ไปยังโฮสติ้งเพื่อให้เว็บไซต์ของคุณพร้อมใช้งาน
   2. ส่งโค้ดในไดเรกทอรี functions ไปยัง Cloud Functions for Firebase
   3. ตั้งค่ากฎความปลอดภัยบนฐานข้อมูล Cloud Firestore ของคุณตามที่กำหนดค่าใน firestore.rules กฎที่ให้มาอนุญาตให้ผู้ใช้อ่านและเขียนการชำระเงินและวิธีการชำระเงินของตนเองเท่านั้น

ทดสอบแอปตัวอย่าง

ไปที่ URL ของแอปการชำระเงินที่ your-firebase-project-id.web.app และตรวจสอบว่าฟีเจอร์ต่อไปนี้ใช้งานได้:

• คุณสามารถลงชื่อเข้าใช้ผ่าน Google หรืออีเมล
• คุณสามารถเพิ่ม การ์ดทดสอบ Stripe ใหม่และดูได้ในองค์ประกอบการเลือกการ์ด
• คุณสามารถเลือกหนึ่งในการ์ดของคุณและเรียกเก็บเงินได้
• คุณสามารถออกจากระบบได้

สำหรับการเปรียบเทียบ โปรดดูที่ cloud-functions-stripe-sample.web.app

เพื่อมอบประสบการณ์ที่คล่องตัวให้กับผู้ใช้ของคุณ คุณสามารถปรับแต่งลักษณะที่ปรากฏของหน้าการชำระเงินเพิ่มเติม หรือเสียบเข้ากับแอปที่มีอยู่ได้

ดูการชำระเงินที่ดำเนินการแล้ว

เมื่อคุณตั้งค่าและใช้งานหน้าการชำระเงินแล้ว คุณสามารถตรวจสอบคอนโซล Firebase และดูรายชื่อผู้ใช้รวมถึงวิธีการชำระเงินและการชำระเงินได้

1. ไปที่ คลาวด์ไฟร์สโตร์
2. ตรวจสอบรายชื่อผู้ใช้ของคุณ และหากพวกเขาเพิ่มบัตรเครดิตหรือทำธุรกรรมใดๆ ให้ตรวจสอบรายชื่อผู้ใช้แต่ละคน

ยอมรับการชำระเงินสด

เมื่อคุณพร้อมที่จะถ่ายทอดสด คุณจะต้องแลกเปลี่ยนคีย์ทดสอบกับคีย์สดของคุณ ดู เอกสาร Stripe เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับคีย์เหล่านี้

1. อัปเดตการกำหนดค่าความลับของ Stripe ของคุณ:

   firebase functions:config:set stripe.secret=<YOUR STRIPE LIVE SECRET KEY>

2. ตั้งค่า คีย์เผยแพร่สด ของคุณใน /public/javascript/app.js

3. ปรับใช้ทั้งฟังก์ชันคลาวด์และโฮสติ้งอีกครั้งเพื่อให้การเปลี่ยนแปลงมีผล: firebase deploy