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

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

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

ภาพรวมการใช้งาน

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

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

ไปที่ URL ของแอป Payments ของคุณที่ your-firebase-project-id.web.app และตรวจสอบว่าคุณลักษณะต่อไปนี้ใช้งานได้:

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

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

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

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

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

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

รับชำระเงินสด

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

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

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

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

3. ปรับใช้ทั้ง Cloud Functions และ Hosting เพื่อให้การเปลี่ยนแปลงมีผล: firebase deploy