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

การใช้ฟีเจอร์ต่างๆ ของ Firebase และ Stripe จะช่วยให้คุณประมวลผลการชำระเงินในเว็บแอปได้โดยไม่ต้องสร้างโครงสร้างพื้นฐานของเซิร์ฟเวอร์ด้วยตนเอง คู่มือนี้จะแนะนำ วิธีปรับแต่งและติดตั้งใช้งานแอปตัวอย่าง 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