עיבוד תשלומים באמצעות Firebase
קל לארגן דפים בעזרת אוספים
אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.
בעזרת כמה תכונות שונות של 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.
אלא אם צוין אחרת, התוכן של דף זה הוא ברישיון Creative Commons Attribution 4.0 ודוגמאות הקוד הן ברישיון Apache 2.0. לפרטים, ניתן לעיין במדיניות האתר Google Developers. Java הוא סימן מסחרי רשום של חברת Oracle ו/או של השותפים העצמאיים שלה.
עדכון אחרון: 2025-07-25 (שעון UTC).
[null,null,["עדכון אחרון: 2025-07-25 (שעון UTC)."],[],[],null,["Using a few different Firebase features and Stripe, you can process payments in\nyour web app without building your own server infrastructure. This guide walks\nyou through customizing and deploying your own version of the open-source\n[cloud-functions-stripe-sample.web.app](//cloud-functions-stripe-sample.web.app/) example app.\n\nBefore you start, create a project in the\n[Firebase console](https://console.firebase.google.com) and set up a\n[Stripe](https://stripe.com/) account.\n| **Note:** Our partners at Stripe have introduced two new extensions, [Run Subscription Payments with Stripe](https://firebase.google.com/products/extensions/firestore-stripe-subscriptions) and [Send Invoices using Stripe](https://firebase.google.com/products/extensions/firestore-stripe-invoices), to make it possible to process payments with even less code!\n\nImplementation overview\n\n1. Set up a [Stripe](//stripe.com/) account.\n2. Create a project in the [Firebase console](//console.firebase.google.com).\n3. Upgrade your project to the [pay-as-you-go Blaze pricing plan](/pricing).\n4. Configure the Firebase CLI to use your project with `firebase use --add`.\n5. Get the [source code](//github.com/firebase/functions-samples/tree/main/Node-1st-gen/stripe) for the sample Firestripe app. Configure it with the right information for your project and customize the code to fit your app.\n6. Once you've deployed your app, look for a list of users and transactions in the Firebase console.\n\nSet up and deploy the sample app\n\n1. Get the [source code](//github.com/firebase/functions-samples/tree/main/Node-1st-gen/stripe).\n2. Enable Google \\& Email sign-in in your [authentication provider settings](//console.firebase.google.com/project/_/authentication/providers).\n3. Enable [Cloud Firestore](//console.firebase.google.com/project/_/firestore).\n4. Install the [Firebase CLI](//github.com/firebase/firebase-tools) if you haven't already, and log in with `firebase login`.\n5. Configure this sample to use your project with `firebase use --add`.\n6. Install dependencies locally by running `cd functions; npm install; cd -`\n7. Add your [Stripe API Secret Key](//dashboard.stripe.com/account/apikeys)\n to your Cloud Functions environment configuration:\n\n `firebase functions:config:set stripe.secret=\u003cYOUR STRIPE SECRET KEY\u003e`\n8. Set your [Stripe publishable key](//dashboard.stripe.com/account/apikeys)\n in [`/public/javascript/app.js`](//github.com/firebase/functions-samples/tree/main/Node-1st-gen/stripe/public/javascript/app.js#L16):\n\n `const STRIPE_PUBLISHABLE_KEY=\u003cYOUR STRIPE PUBLISHABLE KEY\u003e;`\n9. Deploy your project using `firebase deploy`. This command:\n\n 1. Sends all the files in the `public` directory to Hosting so that your website is available.\n 2. Sends the code in the `functions` directory to Cloud Functions for Firebase.\n 3. Sets security rules on your Cloud Firestore database as configured in `firestore.rules`. The provided rules only allow a user to read and write their own payments and payment methods.\n\nTest the sample app\n\nVisit your payments app's URL at\n`your-firebase-project-id.web.app` and verify that the following features work:\n\n- You can sign in via Google or Email.\n- You can add a new [Stripe test card](//stripe.com/docs/testing) and view it in the card select element.\n- You can select one of your cards and charge it.\n- You can sign out.\n\nFor comparison, see\n[cloud-functions-stripe-sample.web.app](//cloud-functions-stripe-sample.web.app/).\n\nTo provide a streamlined experience for your users, you can further customize\nyour payment page's appearance, or plug it into your existing app.\n\nView processed payments\n\nOnce you've set up and deployed your payments page, you can check the Firebase\nconsole and see a list of users along with their payment methods and payments.\n\n1. Go to [Cloud Firestore](https://console.firebase.google.com/project/_/firestore/data).\n2. Check for a list of your users and, if they added any credit cards or made any transactions, a list of those under each user.\n\nAccept live payments\n\nOnce you're ready to go live, you'll need to exchange your test keys for your\nlive keys. See the [Stripe docs](https://stripe.com/docs/keys) to learn more\nabout these keys.\n\n1. Update your Stripe secret config:\n\n `firebase functions:config:set stripe.secret=\u003cYOUR STRIPE LIVE SECRET KEY\u003e`\n2. Set your [live publishable key](//dashboard.stripe.com/account/apikeys) in\n [`/public/javascript/app.js`](//github.com/thorsten-stripe/functions-samples/blob/thorsten-stripe/update-stripe-template/stripe/public/javascript/app.js#L16).\n\n3. Redeploy both Cloud Functions and Hosting for the changes to take effect:\n `firebase deploy`."]]
