Firebase ile Ödemeleri İşleyin

Birkaç farklı Firebase özelliği ve Stripe kullanarak, kendi sunucu altyapınızı oluşturmadan web uygulamanızda ödemeleri işleyebilirsiniz. Bu kılavuz özelleştirme ve açık kaynak kendi sürümünü dağıtma konusunda size yol gösterecektir cloud-functions-stripe-sample.web.app örnek app.

Başlamadan önce bir proje oluşturmak Firebase konsolunda ve kurmak Çizgili hesabı.

Uygulamaya genel bakış

  1. Bir ayarlama Çizgili hesabı.
  2. Bir proje oluşturun Firebase konsoluna .
  3. Projeniz için fatura etkinleştirme ve projenizi kullanmaya Firebase CLI yapılandırmak firebase use --add .
  4. Get kaynak kodunu örnek Firestripe uygulaması için. Projeniz için doğru bilgilerle yapılandırın ve kodu uygulamanıza uyacak şekilde özelleştirin.
  5. Uygulamanızı dağıttıktan sonra, Firebase konsolunda kullanıcıların ve işlemlerin listesini arayın.

Örnek uygulamayı kurun ve dağıtın

  1. Get kaynak kodu .
  2. Google'ı etkinleştirme ve içinde oturum açma Email doğrulama sağlayıcı ayarları .
  3. Etkin Bulut FireStore .
  4. Yükleme Firebase CLI Henüz varsa ve ile oturum firebase login .
  5. Projenizi kullanmak için bu örnek yapılandırma firebase use --add .
  6. Çalıştırarak yerel olarak bağımlılıkları kurun cd functions; npm install; cd -
  7. Senin ekleyin Çizgili API Gizli Anahtarı Cloud Fonksiyonlar çevre yapılandırmaya:

    firebase functions:config:set stripe.secret=<YOUR STRIPE SECRET KEY>

  8. Senin Set Çizgili yayınlanabilir anahtarı içinde /public/javascript/app.js :

    const STRIPE_PUBLISHABLE_KEY=<YOUR STRIPE PUBLISHABLE KEY>;

  9. Kullanarak projeyi dağıtın firebase deploy . Bu komut:

    1. Tüm dosyaları gönderir public web sitenizin kullanılabilir böylece Barındırma dizinden.
    2. Kod gönderir functions Firebase için Bulut Fonksiyonlar için dizine.
    3. Yapılandırıldığı gibi Cloud Firestore veritabanı üzerinde güvenlik kurallarını belirler firestore.rules . Sağlanan kurallar, bir kullanıcının yalnızca kendi ödemelerini ve ödeme yöntemlerini okumasına ve yazmasına izin verir.

Örnek uygulamayı test edin

Adresinden ödemeler uygulamanızın URL'sini ziyaret your-firebase-project-id.web.app ve aşağıdaki çalışmaları yer alıyor doğrulayın:

  • Google veya E-posta yoluyla oturum açabilirsiniz.
  • Yeni ekleyebilir Çizgili testi kart ve kart seçme elemanı görünümünde.
  • Kartlarınızdan birini seçip şarj edebilirsiniz.
  • Çıkış yapabilirsiniz.

Karşılaştırma için, bkz cloud-functions-stripe-sample.web.app .

Kullanıcılarınız için akıcı bir deneyim sağlamak için ödeme sayfanızın görünümünü daha da özelleştirebilir veya mevcut uygulamanıza ekleyebilirsiniz.

İşlenen ödemeleri görüntüle

Ödeme sayfanızı oluşturup dağıttıktan sonra, Firebase konsolunu kontrol edebilir ve ödeme yöntemleri ve ödemeleriyle birlikte bir kullanıcı listesi görebilirsiniz.

  1. Git Bulut Firestore .
  2. Kullanıcılarınızın bir listesini ve herhangi bir kredi kartı ekledilerse veya herhangi bir işlem yaptılarsa, her kullanıcının altındakilerin bir listesini kontrol edin.

Canlı ödemeleri kabul et

Canlı yayına geçmeye hazır olduğunuzda, test anahtarlarınızı canlı anahtarlarınızla değiştirmeniz gerekir. Bkz Çizgili dokümanlar bu anahtarları hakkında daha fazla bilgi edinmek.

  1. Stripe gizli yapılandırmanızı güncelleyin:

    firebase functions:config:set stripe.secret=<YOUR STRIPE LIVE SECRET KEY>

  2. Senin Set canlı yayınlanabilir anahtarı içinde /public/javascript/app.js .

  3. Her iki Bulut İşlevleri konuşlanın ve değişiklikler için Hosting etkili olması: firebase deploy .