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