コンソールへ移動

Firebase による支払い処理

Firebase の機能と Stripe を使用すると、独自のサーバー インフラストラクチャを構築することなく、ウェブアプリで支払いを処理できます。このガイドでは、オープンソースの Firestripe サンプルアプリをカスタマイズして、デプロイする方法について説明します。

最初に、Firebase コンソールでプロジェクトを作成し、Stripe アカウントを設定します。

実装の概要

  1. Firebase Hosting を使用して、アプリに必要な Firebase 機能を設定し、アプリをデプロイします。Firebase CLI を使用すると、コマンドラインから Cloud Functions と Firebase Realtime Database を直接有効にし、シェルアプリをデプロイできます。
  2. Firestripe サンプルアプリのソースコードを入手します。プロジェクトに適切な情報を設定し、アプリに合わせてコードをカスタマイズします。
  3. アプリをデプロイしたら、Firebase コンソールでユーザーとトランザクションのリストを探します。

アプリの設定とデプロイ

まず、必要なすべての Firebase 機能を含み、Firebase プロジェクトに関連付けられているシェルアプリを使用します。シェルアプリをデプロイし、正しく設定されているかどうかテストします。

Firebase CLI での処理

  1. Firebase CLI の設定にある手順に沿って、Firebase CLI をインストールします。
  2. Firebase CLI をインストールしたら、firebase init を実行してシェルアプリを作成します。
  3. DatabaseFunctionsHostingを選択します。その後、プロジェクト リストから Firebase プロジェクトを選択します。

動作のテスト

  1. firebase deploy を実行して、シェルアプリをデプロイします。
  2. アプリが動作していることを確認します。

サンプルアプリの入手と設定

サンプルアプリでの処理

  1. Firestripe のソースコードを入手します。
  2. functions ディレクトリから npm install -g を実行して、Node.js ライブラリをローカルにインストールします。
  3. public/index.html ファイルに Firebase と Stripe のキーを設定します。

      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');
    

Firebase CLI での処理

  1. プロジェクトのディレクトリからコマンド firebase functions:config:set stripe.token="your-test-secret-key" を実行し、Stripe サーバーキーを構成します。
  2. firebase deploy を実行して、新しい変更を push します。

動作のテスト

支払いアプリの URL(your-firebase-project-id.firebaseapp.com)にアクセスし、次のことを確認します。

  • ユーザー名がページに表示されている。
  • クレジット カード情報を入力して追加できる。
  • 新しいチャージを作成できる。
  • ログアウトできる。

比較のため、Firestripe のサンプルを試してみてください。

ユーザーに簡単なプロセスを提供するため、支払いページの外観をカスタマイズしたり、既存のアプリにプラグインとして追加したりできます。

処理された支払いの確認

支払いページを設定してデプロイしたら、Firebase コンソールでユーザーとトランザクションのリストを確認できます。

Firebase コンソールでの処理

  1. [Database] に移動します。
  2. ユーザーのリストを確認します。ユーザーがクレジット カード情報の追加やトランザクションを行った場合は、その内容を各ユーザーのリストで確認します。