Proses pembayaran dengan Firebase

Dengan menggunakan beberapa fitur Firebase dan Stripe yang berbeda, Anda dapat memproses pembayaran di aplikasi web tanpa membangun infrastruktur server Anda sendiri. Panduan ini memandu Anda dalam menyesuaikan dan men-deploy aplikasi contoh cloud-functions-stripe-sample.web.app sumber terbuka versi Anda sendiri.

Sebelum memulai, buat proyek di Firebase console dan siapkan akun Stripe .

Ikhtisar implementasi

  1. Siapkan akun Stripe .
  2. Buat proyek di Firebase console .
  3. Aktifkan penagihan untuk proyek Anda dan konfigurasikan Firebase CLI untuk menggunakan proyek Anda dengan firebase use --add .
  4. Dapatkan kode sumber untuk contoh aplikasi Firestripe. Konfigurasikan dengan informasi yang tepat untuk proyek Anda dan sesuaikan kode agar sesuai dengan aplikasi Anda.
  5. Setelah Anda men-deploy aplikasi, cari daftar pengguna dan transaksi di Firebase console.

Siapkan dan terapkan aplikasi sampel

  1. Dapatkan kode sumbernya .
  2. Aktifkan masuk Google & Email di setelan penyedia autentikasi Anda .
  3. Aktifkan Cloud Firestore .
  4. Instal Firebase CLI jika Anda belum melakukannya, dan masuk dengan firebase login .
  5. Konfigurasikan contoh ini untuk menggunakan proyek Anda dengan firebase use --add .
  6. Instal dependensi secara lokal dengan menjalankan cd functions; npm install; cd -
  7. Tambahkan Kunci Rahasia Stripe API Anda ke konfigurasi lingkungan Cloud Functions Anda:

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

  8. Setel kunci Stripe Anda yang dapat diterbitkan di /public/javascript/app.js :

    const STRIPE_PUBLISHABLE_KEY=<YOUR STRIPE PUBLISHABLE KEY>;

  9. Terapkan proyek Anda menggunakan firebase deploy . Perintah ini:

    1. Mengirimkan semua file yang ada di direktori public ke Hosting agar website Anda tersedia.
    2. Mengirimkan kode di direktori functions ke Cloud Functions for Firebase.
    3. Menetapkan aturan keamanan pada database Cloud Firestore Anda seperti yang dikonfigurasi di firestore.rules . Aturan yang diberikan hanya mengizinkan pengguna untuk membaca dan menulis pembayaran dan metode pembayaran mereka sendiri.

Uji aplikasi sampel

Kunjungi URL aplikasi pembayaran Anda di your-firebase-project-id.web.app dan verifikasi bahwa fitur berikut berfungsi:

  • Anda dapat masuk melalui Google atau Email.
  • Anda dapat menambahkan kartu tes Stripe baru dan melihatnya di elemen pemilihan kartu.
  • Anda dapat memilih salah satu kartu Anda dan menagihnya.
  • Anda dapat keluar.

Sebagai perbandingan, lihat cloud-functions-stripe-sample.web.app .

Untuk memberikan pengalaman yang disederhanakan bagi pengguna, Anda dapat menyesuaikan lebih lanjut tampilan laman pembayaran, atau menyambungkannya ke aplikasi yang sudah ada.

Lihat pembayaran yang diproses

Setelah menyiapkan dan menerapkan halaman pembayaran, Anda dapat memeriksa Firebase console dan melihat daftar pengguna beserta metode pembayaran dan pembayaran mereka.

  1. Buka Cloud Firestore .
  2. Periksa daftar pengguna Anda dan, jika mereka menambahkan kartu kredit atau melakukan transaksi apa pun, daftar pengguna tersebut.

Terima pembayaran langsung

Setelah Anda siap untuk melakukan siaran langsung, Anda harus menukar kunci tes dengan kunci langsung Anda. Lihat dokumen Stripe untuk mempelajari lebih lanjut tentang kunci ini.

  1. Perbarui konfigurasi rahasia Stripe Anda:

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

  2. Tetapkan kunci Anda yang dapat dipublikasikan secara langsung di /public/javascript/app.js .

  3. Terapkan ulang Cloud Functions dan Hosting agar perubahan diterapkan: firebase deploy .