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