ประมวลผลการชำระเงินด้วย 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 ของ Strip ในการกำหนดค่าสภาพแวดล้อม 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 หรืออีเมล
• คุณเพิ่มการ์ดทดสอบแถบใหม่และดูในองค์ประกอบการเลือกการ์ดได้
• คุณสามารถเลือกบัตรใดบัตรหนึ่งและเรียกเก็บเงินได้
• คุณสามารถออกจากระบบได้

สำหรับการเปรียบเทียบ โปรดดูที่ 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