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

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

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

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

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