Memproses Pembayaran dengan Firebase

Dengan menggunakan beberapa fitur Firebase dan Stripe, Anda dapat memproses pembayaran di aplikasi web tanpa membuat infrastruktur server sendiri. Panduan ini akan memandu Anda dalam menyesuaikan dan men-deploy versi aplikasi contoh cloud-functions-strip-sample.webb.app open source.

Sebelum memulai, buat project di Firebase console lalu siapkan akun Stripe.

Ringkasan implementasi

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

Menyiapkan dan men-deploy aplikasi contoh

  1. Dapatkan kode sumber.
  2. Aktifkan login dengan Google & Email di setelan penyedia autentikasi Anda.
  3. Aktifkan Cloud Firestore.
  4. Instal Firebase CLI jika Anda belum melakukannya, lalu login dengan firebase login.
  5. Konfigurasikan contoh ini untuk menggunakan project Anda dengan firebase use --add.
  6. Instal dependensi secara lokal dengan menjalankan cd functions; npm install; cd -

  7. Tambahkan Kunci Rahasia Stripe API ke konfigurasi lingkungan Cloud Functions:

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

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

    const STRIPE_PUBLISHABLE_KEY=<YOUR STRIPE PUBLISHABLE KEY>;

  9. Deploy project Anda menggunakan firebase deploy. Perintah ini:

    1. Mengirimkan semua file dalam direktori public ke Hosting sehingga situs Anda akan tersedia.
    2. Mengirimkan kode di direktori functions ke Cloud Functions for Firebase.
    3. Menetapkan aturan keamanan di database Cloud Firestore sebagaimana dikonfigurasikan di firestore.rules. Dengan aturan yang diberikan, pengguna hanya dapat membaca dan menulis metode pembayaran dan pembayarannya sendiri.

Menguji aplikasi contoh

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

  • Anda dapat login melalui Google atau Email.
  • Anda dapat menambahkan kartu pengujian Stripe baru dan melihatnya di elemen pilih kartu.
  • Anda dapat memilih salah satu kartu dan menagihnya.
  • Anda dapat logout.

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

Untuk memberikan pengalaman yang efisien bagi pengguna, Anda dapat menyesuaikan tampilan halaman pembayaran lebih lanjut, atau menghubungkannya ke aplikasi yang sudah ada.

Melihat pembayaran yang diproses

Setelah menyiapkan dan men-deploy halaman pembayaran, Anda dapat memeriksa Firebase console dan melihat daftar pengguna beserta metode pembayaran dan pembayarannya.

  1. Buka Cloud Firestore.
  2. Periksa daftar pengguna Anda, dan jika mereka menambahkan kartu kredit atau melakukan transaksi, periksa juga daftar kartu kredit atau transaksi dari setiap pengguna.

Menerima pembayaran live

Setelah siap untuk live, Anda harus menukar kunci pengujian dengan kunci live. Baca dokumen Stripe untuk mempelajari kunci ini lebih lanjut.

  1. Update konfigurasi rahasia Stripe Anda:

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

  2. Setel kunci live yang dapat dipublikasikan di /public/javascript/app.js.

  3. Deploy ulang Cloud Functions dan Hosting untuk menerapkan perubahan: firebase deploy.