ประมวลผลการชำระเงินด้วย Firebase
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
การใช้ฟีเจอร์ Firebase และ Stripe 2-3 รายการจะช่วยให้คุณประมวลผลการชำระเงินในเว็บแอปได้โดยไม่ต้องสร้างโครงสร้างพื้นฐานเซิร์ฟเวอร์ของคุณเอง คำแนะนำนี้จะอธิบายวิธีปรับแต่งและทำให้แอปตัวอย่าง cloud-functions-stripe-sample.web.app แบบโอเพนซอร์สเวอร์ชันของคุณใช้งานได้
ก่อนเริ่มต้น ให้สร้างโปรเจ็กต์ในคอนโซล Firebase และตั้งค่าบัญชี Stripe
ภาพรวมการใช้งาน
- ตั้งค่าบัญชี Stripe
- สร้างโปรเจ็กต์ในคอนโซล Firebase
- อัปเกรดโปรเจ็กต์เป็นแพ็กเกจราคาแบบชําระเงินตามการใช้งานของ Blaze
- กำหนดค่า 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 ไปยัง 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
เนื้อหาของหน้าเว็บนี้ได้รับอนุญาตภายใต้ใบอนุญาตที่ต้องระบุที่มาของครีเอทีฟคอมมอนส์ 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`."]]
