Buka konsol

Memproses Pembayaran dengan Firebase

Menggunakan beberapa fitur Firebase dan Stripe, Anda dapat memproses pembayaran di aplikasi web tanpa membuat infrastruktur server sendiri. Panduan ini akan memandu Anda dalam melakukan penyesuaian dan penerapan aplikasi sampel Firestripe open-source versi Anda sendiri.

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

Ringkasan implementasi

  1. Gunakan Firebase Hosting untuk menyiapkan dan menerapkan aplikasi Anda dengan fitur Firebase yang diperlukan untuk menjalankan aplikasi. Dengan Firebase CLI, Anda dapat menerapkan aplikasi shell dengan Cloud Functions dan Firebase Realtime Database yang diaktifkan langsung dari baris perintah.
  2. Dapatkan kode sumber untuk aplikasi Firestripe sampel. Konfigurasikan dengan informasi yang tepat untuk project Anda, dan sesuaikan kode agar sesuai dengan aplikasi Anda.
  3. Setelah menerapkan aplikasi, cari daftar pengguna dan transaksi di Firebase console.

Menyiapkan dan menerapkan aplikasi

Mulailah dengan aplikasi shell yang mencakup semua fitur Firebase yang Anda perlukan, yang terkait dengan project Firebase Anda. Lalu, terapkan aplikasi shell Anda dan uji apakah konfigurasinya sudah benar.

Yang harus dilakukan dari Firebase CLI

  1. Untuk menginstal Firebase CLI, ikuti langkah-langkah di bagian penyiapan Firebase CLI.
  2. Setelah menginstal Firebase CLI, buat aplikasi shell dengan menjalankan firebase init.
  3. Pilih Database, Functions, dan Hosting. Kemudian, pilih project Firebase Anda dari daftar project.

Uji implementasi

  1. Untuk menerapkan aplikasi shell, jalankan firebase deploy.
  2. Pastikan aplikasi tersebut berjalan.

Mendapatkan dan mengonfigurasi aplikasi sampel

Yang harus dilakukan dengan aplikasi sampel

  1. Dapatkan kode sumber untuk Firestripe.
  2. Instal library Node.js secara lokal dengan menjalankan npm install -g dari direktori functions.
  3. Setel kunci Firebase dan Stripe pada file public/index.html:

      firebase.initializeApp({
        apiKey: "your-web-api-key",
        authDomain: "your-firebase-project-id.firebaseapp.com",
        databaseURL: "https://your-firebase-project-id.firebaseio.com",
        storageBucket: "your-firebase-project-id.appspot.com",
        messagingSenderId: "your-cloud-messaging-sender-id"
      });
      Stripe.setPublishableKey('your-stripe-publishable-key');
    

Yang harus dilakukan dari Firebase CLI

  1. Untuk mengonfigurasi kunci server Stripe, jalankan perintah berikut dari direktori project Anda: firebase functions:config:set stripe.token="your-test-secret-key"
  2. Terapkan perubahan baru dengan menjalankan firebase deploy.

Uji implementasi

Buka URL aplikasi pembayaran Anda di your-firebase-project-id.firebaseapp.com dan pastikan fitur berikut berfungsi:

  • Nama pengguna Anda ditampilkan pada halaman.
  • Anda dapat memasukkan kartu kredit dan memilih Tambahkan.
  • Anda dapat membuat Tagihan baru.
  • Anda dapat logout.

Sebagai perbandingan, cobalah contoh Firestripe.

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 menerapkan halaman pembayaran, Anda dapat memeriksa Firebase console serta melihat daftar pengguna dan transaksi.

Yang harus dilakukan di Firebase console

  1. Buka Database.
  2. Periksa daftar pengguna Anda, dan jika mereka menambahkan kartu kredit atau melakukan transaksi, periksa juga daftar kartu kredit atau transaksi dari masing-masing pengguna.