เมื่อใช้ฟีเจอร์ Firebase และ Stripe ที่แตกต่างกันสองสามรายการ คุณสามารถประมวลผลการชำระเงินในเว็บแอปโดยไม่ต้องสร้างโครงสร้างพื้นฐานเซิร์ฟเวอร์ของคุณเอง คู่มือนี้จะแนะนำคุณเกี่ยวกับการปรับแต่งและปรับใช้แอปตัวอย่าง cloud-functions-stripe-sample.web.app เวอร์ชันของคุณเอง
ก่อนที่คุณจะเริ่ม ให้สร้างโปรเจ็กต์ใน คอนโซล Firebase และตั้งค่าบัญชี Stripe
ภาพรวมการใช้งาน
- ตั้งค่าบัญชี Stripe
- สร้างโปรเจ็กต์ใน คอนโซล Firebase
- เปิดใช้งานการเรียกเก็บเงินสำหรับโปรเจ็กต์ของคุณและกำหนดค่า Firebase CLI เพื่อใช้โปรเจ็กต์ของคุณโดย
firebase use --add
- รับ ซอร์สโค้ด สำหรับแอพตัวอย่าง Firestripe กำหนดค่าด้วยข้อมูลที่เหมาะสมสำหรับโครงการของคุณและปรับแต่งโค้ดให้เหมาะกับแอปของคุณ
- เมื่อคุณทำให้แอปใช้งานได้แล้ว ให้มองหารายชื่อผู้ใช้และธุรกรรมในคอนโซล Firebase
ตั้งค่าและปรับใช้แอพตัวอย่าง
- รับ ซอร์สโค้ด
- เปิดใช้งานการลงชื่อเข้าใช้ Google และอีเมลใน การตั้งค่าผู้ให้บริการการตรวจสอบสิทธิ์ ของคุณ
- เปิดใช้งาน Cloud Firestore
- ติดตั้ง Firebase CLI หากยังไม่ได้ติดตั้ง และเข้าสู่ระบบด้วย
firebase login
- กำหนดค่าตัวอย่างนี้เพื่อใช้โครงการของคุณกับ
firebase use --add
- ติดตั้งการพึ่งพาในเครื่องโดยใช้
cd functions; npm install; cd -
เพิ่ม รหัสลับ API ของ Stripe ไปยังการกำหนดค่าสภาพแวดล้อม Cloud Functions ของคุณ:
firebase functions:config:set stripe.secret=<YOUR STRIPE SECRET KEY>
ตั้งค่า คีย์ที่เผยแพร่ได้ของ Stripe ใน
/public/javascript/app.js
:const STRIPE_PUBLISHABLE_KEY=<YOUR STRIPE PUBLISHABLE KEY>;
ปรับใช้โปรเจ็กต์ของคุณโดยใช้
firebase deploy
คำสั่งนี้:- ส่งไฟล์ทั้งหมดในไดเร็กทอรี
public
ไปยัง Hosting เพื่อให้เว็บไซต์ของคุณพร้อมใช้งาน - ส่งโค้ดในไดเร็กทอรี
functions
ไปยัง Cloud Functions for Firebase - ตั้งค่ากฎความปลอดภัยบนฐานข้อมูล Cloud Firestore ตามที่กำหนดค่าไว้ใน
firestore.rules
กฎที่ให้มาอนุญาตให้ผู้ใช้อ่านและเขียนการชำระเงินและวิธีการชำระเงินของตนเองเท่านั้น
- ส่งไฟล์ทั้งหมดในไดเร็กทอรี
ทดสอบแอพตัวอย่าง
ไปที่ URL ของแอป Payments ของคุณที่ your-firebase-project-id.web.app
และตรวจสอบว่าคุณลักษณะต่อไปนี้ใช้งานได้:
- คุณสามารถลงชื่อเข้าใช้ผ่าน Google หรืออีเมล
- คุณสามารถเพิ่ม การ์ดทดสอบ Stripe ใหม่และดูในองค์ประกอบการเลือกการ์ด
- คุณสามารถเลือกหนึ่งในบัตรของคุณและเรียกเก็บเงิน
- คุณสามารถออกจากระบบ
สำหรับการเปรียบเทียบ โปรดดู ที่ cloud-functions-stripe-sample.web.app
เพื่อมอบประสบการณ์การใช้งานที่คล่องตัวสำหรับผู้ใช้ของคุณ คุณสามารถปรับแต่งรูปลักษณ์ของหน้าการชำระเงินของคุณเพิ่มเติม หรือเสียบเข้ากับแอปที่มีอยู่ของคุณ
ดูการชำระเงินที่ดำเนินการแล้ว
เมื่อคุณตั้งค่าและปรับใช้หน้าการชำระเงินแล้ว คุณสามารถตรวจสอบคอนโซล Firebase และดูรายชื่อผู้ใช้พร้อมกับวิธีการชำระเงินและการชำระเงินได้
- ไปที่ Cloud Firestore
- ตรวจสอบรายชื่อผู้ใช้ของคุณ และหากพวกเขาเพิ่มบัตรเครดิตหรือทำธุรกรรมใดๆ ให้ระบุรายชื่อของผู้ใช้แต่ละราย
รับชำระเงินสด
เมื่อคุณพร้อมที่จะถ่ายทอดสด คุณจะต้องแลกเปลี่ยนคีย์ทดสอบเป็นคีย์ที่ใช้งานจริง ดู เอกสาร Stripe เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับคีย์เหล่านี้
อัปเดตการกำหนดค่าลับ Stripe ของคุณ:
firebase functions:config:set stripe.secret=<YOUR STRIPE LIVE SECRET KEY>
ตั้งค่า คีย์เผยแพร่สด ของคุณใน
/public/javascript/app.js
ปรับใช้ทั้ง Cloud Functions และ Hosting เพื่อให้การเปลี่ยนแปลงมีผล:
firebase deploy