בעזרת כמה תכונות שונות של Firebase ו-Stripe, אפשר לעבד תשלומים באפליקציית האינטרנט בלי ליצור תשתית שרת משלכם. במדריך הזה נסביר איך להתאים אישית ולפרוס גרסה משלכם של אפליקציית הדוגמה cloud-functions-stripe-sample.web.app בקוד פתוח.
לפני שמתחילים, צריך ליצור פרויקט במסוף Firebase ולהגדיר חשבון Stripe.
סקירה כללית על ההטמעה
- מגדירים חשבון Stripe.
- יוצרים פרויקט במסוף Firebase.
- משדרגים את הפרויקט לתוכנית התמחור Blaze בתשלום לפי שימוש.
- מגדירים את ה-CLI של Firebase כך שישתמש בפרויקט שלכם באמצעות
firebase use --add
. - מקבלים את קוד המקור של אפליקציית Firestripe לדוגמה. מגדירים אותה עם המידע המתאים לפרויקט ומתאימים אישית את הקוד כך שיתאים לאפליקציה.
- אחרי הפריסה של האפליקציה, תוכלו לחפש רשימה של משתמשים ועסקאות במסוף Firebase.
הגדרה ופריסה של האפליקציה לדוגמה
- מורידים את קוד המקור.
- מפעילים את הכניסה באמצעות חשבון Google והכניסה באמצעות אימייל בהגדרות של ספק האימות.
- מפעילים את Cloud Firestore.
- מתקינים את CLI של Firebase, אם עוד לא עשיתם זאת, ונכנסים באמצעות
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
אל Hosting כדי שהאתר יהיה זמין. - שליחת הקוד שבספרייה
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 רשימה של משתמשים, יחד עם אמצעי התשלום והתשלומים שלהם.
- עוברים אל Cloud Firestore.
- בודקים את רשימת המשתמשים, ואם הם הוסיפו כרטיסי אשראי או ביצעו עסקאות, בודקים את הרשימה שלהם בכל משתמש.
קבלת תשלומים בזמן אמת
כשהכול מוכן להפעלה, צריך להחליף את מפתחות הבדיקה במפתחות לשימוש פעיל. מידע נוסף על המפתחות האלה זמין במסמכי התיעוד של Stripe.
מעדכנים את ההגדרה הסודית של Stripe:
firebase functions:config:set stripe.secret=<YOUR STRIPE LIVE SECRET KEY>
מגדירים את המפתח שאפשר לפרסם בשידור חי ב-
/public/javascript/app.js
.כדי שהשינויים ייכנסו לתוקף, צריך לפרוס מחדש את Cloud Functions ואת Hosting:
firebase deploy
.